欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情

 更新時間:2022年04月25日 17:29:43   作者:Hudie.  
這篇文章主要為大家介紹了VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

首頁初步效果

(1)定義布局

將準(zhǔn)備好的靜態(tài)資源下面的css、images文件夾添加到assets目錄:

添加靜態(tài)資源

1.修改默認(rèn)布局

參考靜態(tài)資源文件首頁,我們可以把頁頭和頁尾提取出來,形成布局頁。在layouts目錄下修改默認(rèn)布局文件default.vue,將主內(nèi)容區(qū)域的內(nèi)容替換成<nuxt />。

并且在默認(rèn)布局中引入下面的頭、尾文件:

<template>
  <div class="app-container">
    <div id="main">
      <!-- 公共頭 -->
      <myheader />
      <div class="main-container">
        <el-scrollbar class="page-component__scroll">
          <!-- 內(nèi)容區(qū)域 -->
          <nuxt />
        </el-scrollbar>
      </div>
      <!-- 公共底 -->
      <myfooter />
    </div>
  </div>
</template>
<script>
import "~/assets/css/app.css";
import "~/assets/css/chunk.css";
import "~/assets/css/iconfont.css";
import "~/assets/css/main.css";
import myheader from "./myheader";
import myfooter from "./myfooter";
export default {
  components: {
    myheader,
    myfooter,
  },
};
</script>

2.提取頭文件

創(chuàng)建layouts/myheader.vue文件:

<template>
  <div class="header-container">
    <div class="wrapper">
      <!-- logo -->
      <div class="left-wrapper v-link selected">
        <img
          style="width: 50px"
          width="50"
          height="50"
          src="~assets/images/logo.png"
        />
        <span class="text">牧醫(yī)通 預(yù)約掛號統(tǒng)一平臺</span>
      </div>
      <!-- 搜索框 -->
      <div class="search-wrapper">
        <div class="hospital-search animation-show">
          <el-autocomplete
            class="search-input small"
            prefix-icon="el-icon-search"
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="點擊輸入醫(yī)院名稱"
            @select="handleSelect"
          >
            <span
              slot="suffix"
              class="search-btn v-link highlight clickable selected"
              >搜索
            </span>
          </el-autocomplete>
        </div>
      </div>
      <!-- 右側(cè) -->
      <div class="right-wrapper">
        <span class="v-link clickable">幫助中心</span>
        <!--        <el-dropdown >-->
        <!--              <span class="el-dropdown-link">-->
        <!--                晴天<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
        <!--              </span>-->
        <!--            <el-dropdown-menu class="user-name-wrapper" slot="dropdown">-->
        <!--                <el-dropdown-item>掛號訂單</el-dropdown-item>-->
        <!--                <el-dropdown-item>就診人管理</el-dropdown-item>-->
        <!--                <el-dropdown-item divided>退出登錄</el-dropdown-item>-->
        <!--            </el-dropdown-menu>-->
        <!--        </el-dropdown>-->
        <span class="v-link clickable" @click="dialogUserFormVisible = true"
          >登錄/注冊</span
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      state: "",
    };
  },
  created() {
  },
  methods: {
    //在輸入框輸入值,彈出下拉框,顯示相關(guān)內(nèi)容
    querySearchAsync(queryString, cb) {
      this.searchObj = [];
      if (queryString == "") return;
      hospApi.getByHosName(queryString).then((response) => {
        for (let i = 0, len = response.data.length; i < len; i++) {
          response.data[i].value = response.data[i].hosname;
        }
        cb(response.data);
      });
    },
    //在下拉框選擇某一個內(nèi)容,執(zhí)行下面方法,跳轉(zhuǎn)到詳情頁面中
    handleSelect(item) {
      window.location.href = "/hospital/" + item.hoscode;
    },
    //點擊某個醫(yī)院名稱,跳轉(zhuǎn)到詳情頁面中  
    show(hoscode) {
      window.location.href = "/hospital/" + hoscode;
    },
  },
};
</script>

3.提取尾文件

創(chuàng)建layouts/myfooter.vue文件:

<template>
    <div class="footer-container">
        <div class="wrapper">
            <div><span class="record">京ICP備13018369號</span><span
            class="phone">電話掛號010-56253825</span></div>
            <div class="right"><span
            class="v-link clickable"> 聯(lián)系我們 </span><span
            class="v-link clickable"> 合作伙伴 </span><span
            class="v-link clickable"> 用戶協(xié)議 </span><span
            class="v-link clickable"> 隱私協(xié)議 </span></div>
        </div>
    </div>
</template>
<script>
export default {
}
</script>

(2)首頁引入

修改pages/inde.vue文件,引入寫好的前端頁面,內(nèi)容過多,這里不再給出具體代碼。使用npm run dev啟動項目,通過http://localhost:3000訪問,得到如下靜態(tài)頁面:

當(dāng)前效果

(3)首頁數(shù)據(jù)API接口

在首頁主要完成下面幾個功能:

  • 獲取醫(yī)院等級(根據(jù)數(shù)據(jù)字典編碼獲?。?/li>
  • 獲取地區(qū)(根據(jù)數(shù)據(jù)字典編碼獲?。?/li>
  • 醫(yī)院分頁列表。
  • 根據(jù)醫(yī)院名稱關(guān)鍵字搜索醫(yī)院列表。

下面展示的是靜態(tài)頁面,接下來根據(jù)這些功能,完成首頁數(shù)據(jù)的API接口。

需要完成的接口

需要完成的接口

1.獲取醫(yī)院等級/地區(qū)接口

由于查詢醫(yī)院等級、地區(qū)兩個功能可以只提供同一個接口,所以將兩個功能都合并在findByDictCode方法中:

Controller:

    @ApiOperation(value = "根據(jù)dictCode獲取下級節(jié)點")
    @GetMapping("findByDictCode/{dictCode}")
    public Result findByDictCode(@PathVariable String dictCode) {
        List<Dict> list = dictService.findByDictCode(dictCode);
        return Result.ok(list);
    }

Service接口:

// 根據(jù)dictCode獲取下級結(jié)點
List<Dict> findByDictCode(String dictCode);
// 根據(jù)id查詢子數(shù)據(jù)列表
List<Dict> findChildData(Long id);

Service實現(xiàn)類:

	// 根據(jù)dictCode獲取下級結(jié)點
    @Override
    public List<Dict> findByDictCode(String dictCode) {
        //根據(jù)dictCode獲取對應(yīng)id
        Long id = this.getDictByDictCode(dictCode).getId();
        // 根據(jù)id獲取子結(jié)點
        List<Dict> childData = this.findChildData(id);
        return childData;
    }
    // 根據(jù)dict_code查詢數(shù)據(jù)字典
    private Dict getDictByDictCode(String dictCode) {
        QueryWrapper<Dict> wrapper = new QueryWrapper<>();
        wrapper.eq("dict_code", dictCode);
        Dict codeDict = baseMapper.selectOne(wrapper);
        return codeDict;
    }
    // 根據(jù)id查詢子數(shù)據(jù)列表
	@Override
    @Cacheable(value = "dict", keyGenerator = "keyGenerator")
    public List<Dict> findChildData(Long id) {
        QueryWrapper<Dict> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("parent_id", id);
        List<Dict> dictList = baseMapper.selectList(queryWrapper);
        for (Dict dict : dictList) {
            // 得到每一條記錄的id值
            Long dictId = dict.getId();
            // 調(diào)用hasChildren方法判斷是否包含子節(jié)點
            boolean flag = this.hasChildren(dictId);
            // 為每條記錄設(shè)置hasChildren屬性
            dict.setHasChildren(flag);
        }
        return dictList;
    }

2.醫(yī)院列表接口

Controller:

    @ApiOperation(value = "查詢醫(yī)院列表")
    @GetMapping("findHospList/{page}/{limit}")
    public Result findHospList(@PathVariable Integer page,
                               @PathVariable Integer limit,
                               HospitalQueryVo HospitalQueryVo) {
        Page<Hospital> hospitals = hospitalService.selectHospPage(page, limit, HospitalQueryVo);
        List<Hospital> content = hospitals.getContent();
        int totalPages = hospitals.getTotalPages();
        return Result.ok(hospitals);
    }

Service接口:

	// 醫(yī)院列表(條件查詢帶分頁)
    Page<Hospital> selectHospPage(Integer page, Integer limit, HospitalQueryVo hospitalQueryVo);

Service:

// 醫(yī)院列表(條件查詢帶分頁)
    @Override
    public Page<Hospital> selectHospPage(Integer page, Integer limit, HospitalQueryVo hospitalQueryVo) {
        // 1.創(chuàng)建pageable對象
        Pageable pageable = PageRequest.of(page - 1, limit);
        // 2.創(chuàng)建條件匹配器
        ExampleMatcher matcher = ExampleMatcher.matching()
                .withStringMatcher(ExampleMatcher.StringMatcher.CONTAINING)
                .withIgnoreCase(true);
        // 3.hospitalQueryVo轉(zhuǎn)換為Hospital對象
        Hospital hospital = new Hospital();
        BeanUtils.copyProperties(hospitalQueryVo, hospital);
        // 4.創(chuàng)建對象
        Example<Hospital> example = Example.of(hospital, matcher);
        // 5.調(diào)用方法實現(xiàn)查詢
        Page<Hospital> pages = hospitalRepository.findAll(example, pageable);
        // 6.得到所有醫(yī)院信息的集合
        pages.getContent().stream().forEach(item -> {
            this.setHospitalHosType(item);
        });
        return pages;
    }
    // 獲取查詢list集合,遍歷進(jìn)行醫(yī)院等級封裝
    private Hospital setHospitalHosType(Hospital hospital) {
        // 封裝醫(yī)院等級
        String hostypeString = dictFeignClient.getName("Hostype", hospital.getHostype());
        hospital.getParam().put("hostypeString", hostypeString);
        // 封裝醫(yī)院省市區(qū)
        String provinceString = dictFeignClient.getName(hospital.getProvinceCode());
        String cityString = dictFeignClient.getName(hospital.getCityCode());
        String districtString = dictFeignClient.getName(hospital.getDistrictCode());
        hospital.getParam().put("fullAddress", provinceString + cityString + districtString);
        return hospital;
    }

3.模糊查詢醫(yī)院列表

Controller:

    @ApiOperation(value = "根據(jù)醫(yī)院名稱查詢")
    @GetMapping("findByHosName/{hosname}")
    public Result findByHosName(@PathVariable String hosname) {
        List<Hospital> list = hospitalService.findByHosname(hosname);
        return Result.ok(list);
    }

Service接口:

    // 根據(jù)醫(yī)院名稱查詢
    List<Hospital> findByHosname(String hosname);

Service實現(xiàn)類:

// 根據(jù)醫(yī)院名稱做模糊查詢 @Override public List<Hospital> findByHosname(String hosname) {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> return hospitalRepository.findHospitalByHosnameLike(hosname); }    // 根據(jù)醫(yī)院名稱做模糊查詢
    @Override
    public List<Hospital> findByHosname(String hosname) {
        return hospitalRepository.findHospitalByHosnameLike(hosname);
    }

Repository:

    /**
     * 根據(jù)醫(yī)院名稱做模糊查詢
     * @param hosname
     * @return
     */
    List<Hospital> findHospitalByHosnameLike(String hosname);

(4)首頁前端實現(xiàn)

1.封裝Api請求

/api/hosp.js:

import request from '@/utils/request'
const api_name = `/api/hosp/hospital`
export default {
    // 查詢醫(yī)院列表
    getPageList(page, limit, searchObj) {
        return request({
            url: `${api_name}/findHospList/${page}/${limit}`,
            method: 'get'
        })
    },
    // 根據(jù)醫(yī)院名稱模糊查詢
    getByHosName(hosname) {
        return request({
            url: `${api_name}/findByHosName/${hosname}`,
            method: 'get'
        })
    },
    // 根據(jù)醫(yī)院編號查詢醫(yī)院詳情
    show(hoscode) {
        return request({
            url: `${api_name}/findHospDetail/${hoscode}`,
            method: 'get'
        })
    },
    // 根據(jù)醫(yī)院編號查詢科室信息
    findDepartment(hoscode) {
        return request({
            url: `${api_name}/department/${hoscode}`,
            method: 'get'
        })
    }
}

/api/dict.js:

import request from '@/utils/request'
const api_name = '/admin/cmn/dict'
export default {
    // 根據(jù)dictCode獲取下級結(jié)點
    findByDictCode(dictCode) {
        return request({
            url: `${api_name}/findByDictCode/${dictCode}`,
            method: 'get'
        })
    },
    // 根據(jù)id獲取下級結(jié)點
    findByParentId(parentId) {
        return request({
            url: `${api_name}/findChildData/${parentId}`,
            method: 'get'
        })
    }
}

2.預(yù)約掛號前端頁面

使用nuxt進(jìn)行動態(tài)路由,依次創(chuàng)建下面三個vue文件,分別導(dǎo)入下面的文件:

使用nuxt進(jìn)行動態(tài)路由

預(yù)約掛號前端頁面:github預(yù)約掛號前端vue頁面

預(yù)約掛號前端頁面

醫(yī)院詳情頁面:github醫(yī)院詳情前端vue頁面

醫(yī)院詳情前端頁面

預(yù)約須知頁面:github預(yù)約須知前端vue頁面

預(yù)約須知前端頁面

以上就是VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情的詳細(xì)內(nèi)容,更多關(guān)于VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue.js層疊輪播效果的實例代碼

    vue.js層疊輪播效果的實例代碼

    這篇文章主要介紹了vue.js層疊輪播效果,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2018-11-11
  • Jenkins?Sidebar?Link插件實現(xiàn)添加側(cè)邊欄功能詳解

    Jenkins?Sidebar?Link插件實現(xiàn)添加側(cè)邊欄功能詳解

    這篇文章主要介紹了vue框架實現(xiàn)添加側(cè)邊欄,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • rollup3.x+vue2打包組件的實現(xiàn)

    rollup3.x+vue2打包組件的實現(xiàn)

    本文主要介紹了rollup3.x+vue2打包組件的實現(xiàn),詳細(xì)的介紹了打包會存在的問題,包版本的問題,babel 轉(zhuǎn)換jsx等問題,具有一定的參考價值,感興趣的可以了解一下
    2023-03-03
  • vue3.0實現(xiàn)點擊切換驗證碼(組件)及校驗

    vue3.0實現(xiàn)點擊切換驗證碼(組件)及校驗

    這篇文章主要為大家詳細(xì)介紹了vue3.0實現(xiàn)點擊切換驗證碼(組件)及校驗,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • 微信jssdk邏輯在vue中的運用詳解

    微信jssdk邏輯在vue中的運用詳解

    這篇文章主要介紹了微信jssdk邏輯在vue中的運用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • Vue?Router解決多路由復(fù)用同一組件頁面不刷新問題(場景分析)

    Vue?Router解決多路由復(fù)用同一組件頁面不刷新問題(場景分析)

    這篇文章主要介紹了Vue?Router解決多路由復(fù)用同一組件頁面不刷新問題,多路由復(fù)用同一組件的場景分析,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • 函數(shù)式組件劫持替代json封裝element表格

    函數(shù)式組件劫持替代json封裝element表格

    這篇文章主要介紹了為大家函數(shù)式組件劫持替代json封裝element表格的過程思路及示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • vue日歷/日程提醒/html5本地緩存功能

    vue日歷/日程提醒/html5本地緩存功能

    這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-09-09
  • vue實現(xiàn)樓層跳轉(zhuǎn)效果

    vue實現(xiàn)樓層跳轉(zhuǎn)效果

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)樓層跳轉(zhuǎn)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue組件中prop屬性使用說明實例代碼詳解

    Vue組件中prop屬性使用說明實例代碼詳解

    這篇文章主要介紹了Vue組件中prop屬性使用說明,非常不錯具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-05-05

最新評論