day11平臺前端搭建與首頁

SSRServerSideRender)是在服務端完成頁面的內(nèi)容，而不是在客戶端通過AJAX獲取數(shù)據(jù)。服務器端渲染(SSR)SEO，由于搜索引擎爬蟲抓取工具可以直loadingAjax獲取內(nèi)容，抓取工具并不會等待異步完成后再進行頁面內(nèi)容的抓取。也就是說，如果SEO對你的站點至關重另外，使用服務器端渲染，我們可以獲得更快的內(nèi)容到達時間(time-o-nt)，無需等待所有的JavSt都完成并執(zhí)行，產(chǎn)生更好的用戶體驗，對于那些內(nèi)容到達時間(tim-o-nt)與轉(zhuǎn)化率直接相關的應用程序而言，服務器端渲染(SSR)至關重要。Nuxt.jsVue.js的輕量級應用框架,(SSR應用,也可官網(wǎng)2、NUXT2.1壓縮

{{"name":"yygh-"version":"1.0.0","description尚醫(yī)通","author":"atguigu","private":true,"scripts":{"dev":"nuxt","build":"nuxtbuild","start":"nuxt"generate":"nuxt"lint":"eslint--ext.js,.vue--ignore-path.gitignore"mit":"npmrun}title:namecontent:'{{escapedescriptionmodule.exportsmodule.exports=**Headersofthehead:{title:'yygh-site',meta:[{charset:'utf-8'{name:'viewport',content:'width=device-width,initial-scale=1'},hid:'description',name:'description',content:'尚醫(yī)通… npm1、element-npmnpminstallelement-importimportVuefromimportElementUIfrom'element-ui//element-uiimport'element-ui/lib/theme-chalk/index.css'//element-uicssVue.use(ElementUI)//elementUIplugins:plugins:{src:'~/plugins/myPlugin.js',ssr:false]npmrun 用于組織未編譯的靜態(tài)資源如LESS、SASS或JavaScript。 用于組織應用的Vue.js組件。Nuxt.js不會擴展增強該 下Vue.js組件，即這些組件不會像頁面組件那樣有asyncData方法的特性。 用于組織應用的路由及視圖。Nuxt.js框架該 下所有的.vue文件并自動生成 vue.jsJavascriptnpminstallimportimportaxiosfromimport{MessageBox,Message}from'element-axiosconstservice=axios.create({baseURL:'',timeout:15000http config=>{//tokenreturnreturnerr=>returnhttp response=>{if(response.data.code!==200){message:response.data.message,type:'error',duration:5*return}elsereturn}error=>returnexportdefault 1.2.1在 <divclass="app-<div公共頭<divclass="main-<el-scrollbar ponent內(nèi)容區(qū)域公共底import'~/assets/css/app.css'import'~/assets/css/chunk.css'import'~/assets/css/iconfont.css'import'~/assets/css/main.css'exportdefault{}1.2.2 <divclass="header-<div<!--logo--<divclass="left-wrapperv-link<imgstyle="width:50px"width="50"height="50"src="~a<spanclass="text">尚醫(yī)通預 統(tǒng)一平臺搜索框<divclass="search-<divclass="hospital-searchanimation- class="search-inputsmall"><spanslot="suffix"class="search-btnv-linkhighlightclickableselected">搜索</span> 右側<divclass="right-<spanclass="v-linkclickable">幫助中心 <el-dropdown>-- <spanclass="el-dropdown-link">-- <iclass="el-icon-arrow-downel- wrapper"slot="dropdown">--> <el-dropdown-item</el- <el-dropdown-itemdivided>退出登錄<spanlinkclickable"@click="dialogUserFormVisible=true">登錄 exportdefault}1.2.3<tem<tem<divclass="footer-<div<div><spanclass="record">京ICP備號</span><span <divclass="v-linkclickable">們</span><spanclass="v-linkclickable">合作伙伴</span><spanclass="v-linkclickable">用戶協(xié)議</span><spanclass="v-linkclickable隱私協(xié)議 exportdefault}1.2.4import'~/assets/css/app.css'import'~/assets/css/chunk.css'import'~/assets/css/iconfont.css'import'~/assets/css/main.css'importmyheaderfrom'./myheader'importmyfooterfrom'./myfooter'exportdefault{components:}}啟動項目：npmrun <div<el-carouselindicator-<el-carousel-itemv-for="itemin2"<imgsrc="~assets/images/web-banner1.png"搜索<divclass="search-<divclass="search-<divclass="hospital- ><spanslot="suffixclass="search-btnv-linkhighlightclickableselected">搜索</span> <!--bottom--<div<div<divclass="home-filter-<divclass="title醫(yī)院<divclass="filter-<divclass="condition-class="itemv-linkhighlightclickable全部class="itemv-link院class="itemv-link院class="itemv-link院<divclass="filter-

<divclass="condition-class="itemv-linkhighlightclickable全部class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-linkclickable">class="itemv-link

東城區(qū)</span><span西城區(qū)</span><span朝陽區(qū)</span><span豐臺區(qū)</span><span</span><span海淀區(qū)</span><span</span><span房山區(qū)</span><span通州區(qū)</span><span順義區(qū)</span><span昌平區(qū)</span><span大興區(qū)</span><span懷柔區(qū)</span><span平谷區(qū)</span><span密云區(qū)</span><span延慶區(qū)</span></div><divclass="v-scroll-listhospital-<divclass="v-cardclickablelist-<divclass="hospital-list-itemhos-item"<div<divclass="hospital- <divclass="bottom-class="iconfont">class="iconfont"> 協(xié)和醫(yī)院class="hospital-<divclass="v-cardclickablelist-item<divclass="hospital-list-itemhos-item"<div<divclass="hospital- <divclass="bottom-class="iconfont">class="iconfont"> 協(xié)和醫(yī)院class="hospital-<divclass="v-cardclickablelist-<div<divclass="hospital-list-itemhos-item"<div<divclass="hospital- <divclass="bottom-class="iconfont">class="iconfont"> 協(xié)和醫(yī)院class="hospital-<div<divclass="common-<divclass="header-<divclass="title常見科室<divclass="all-wrapper"><span>全部<spanclass="iconfonticon"><divclass="content-<spanclass="itemv-linkclickabledark">神經(jīng)內(nèi)科<spanclass="itemv-linkclickabledark">消化內(nèi)科<spanclass="itemv-linkclickabledark">呼吸內(nèi)科<spanclass="itemv-linkclickabledark">內(nèi)科<spanclass="itemv-linkclickabledark">神經(jīng)外科<spanclass="itemv-linkclickabledark">婦科<spanclass="itemv-linkclickabledark"產(chǎn)科<spanclass="itemv-linkclickabledark">兒科<div<divclass="header-<divclass="title-<divclass="icon-wrapper"><spanclass="iconfonttitle-icon"></span><spanclass="title">平臺公告<divclass="all-<span>全部<spanclass="iconfonticon"><divclass="content-<divclass="notice-<div<spanclass="noticev-linkclickabledark">關于延長 國際醫(yī)院 通知</span><divclass="notice-<div<spanclass="noticev-linkclickabledark"> 大學東方醫(yī)院部分科室醫(yī)生門診醫(yī)</span><divclass="notice-<div<spanclass="noticev-linkclickabledark"> 知</span><divclass="suspend-notice-list<divclass="header-<divclass="title-<divclass="icon-<spanclass="iconfonttitle-icon"><spanclass="title">停診公告<divclass="all-<span>全部<spanclass="iconfonticon"><divclass="content-<divclass="notice-<div<spanclass="noticev-linkclickabledark"> 總醫(yī)院)呼吸內(nèi)科門診停診公告</span><divclass="notice-<div<spanclass="noticev-linkclickabledark">首都醫(yī) 院老年醫(yī)學科門診停診公告</span><divclass="notice-<div<spanclass="noticev-linkclickabledark"> 友好醫(yī)院中西醫(yī)結合心內(nèi)科門診停診公告</span> exportdefault}3api@Api(tags=@Api(tags="醫(yī)院管理接口")publicclassHospitalApiController{privateHospitalService@ApiOperation(value="獲取分頁列表") publicResult@PathVariableIntegerpage,@PathVariableIntegerlimit,HospitalQueryVo@PathVariableIntegerpage,@PathVariableIntegerlimit,HospitalQueryVohospitalQueryVo){Page<Hospital>pageModel=hospitalService.selectHospPage(page,limit,return}}List<Hospital>findByHosname(StringpublicList<Hospital>findByHosname(Stringhosname)return}List<Hospital>List<Hospital>findHospitalByHosnameLike(String@ApiOperation(value@ApiOperation(value="根據(jù)醫(yī)院名稱獲取醫(yī)院列表") publicResult@ApiParam(name@ApiParam(name"hosname"value"醫(yī)院名稱"requiredtrue)@PathVariableStringhosname){return}apiimportimportrequestfromconstapi_name=`/api/hosp/hospital`exportdefault{getPageList(page,limit,searchObj){returnrequest({url:`${api_name}/${page}/${limit}`,method:'get',params:getByHosname(hosname){returnrequest({url:`${api_name}/findByHosname/${hosname}`,method:'get'}}importimportrequestfrom'@/utils/request'constapi_name='/admin/cmn/dict'exportdefaultfindByDictCode(dictCode)findByDictCode(dictCode){returnrequest({url:`${api_name}/findByDictCode/${dictCode}`,method:'get'findByParentId(parentId){returnrequest({url:`${api_name}/findChildData/${parentId}`,method:'get'}} <div<el-carouselindicator-<el-carousel-itemv-for="itemin2"<imgsrc="~assets/images/web-banner1.png"搜索<divclass="search-<divclass="search-<divclass="hospital- ><spanslot="suffixclass="search-btnv-linkhighlightclickableselected">搜索</span> <!--bottom--<div<div<divclass="home-filter-<divclass="title醫(yī)院<divclass="filter-<divclass="condition-<spanclass="itemv-link:class="hostypeActiveIndex==index?'selected':''"v-for="(item,index)inhostypeList":key="item.id"@click="hostypeSelect(item.value,index)">{{<divclass="filter-<divclass="condition-<spanclass="itemv-link:class="provinceActiveIndex==index?'selected':''"v-for="(item,index)indistrictList":key="item.id"@click="districtSelect(item.value,index)">{{

<divclass="v-scroll-listhospital-<divclass="v-cardclickablelist-item"v-for="iteminlist":key="item.id"><div<divclass="hospital-list-itemhos-item"index="0"@click="show(item.hoscode)"><div<divclass="hospital-title">{{item.hosname<divclass="bottom-<divclass="icon-<span</span>{{item.param.hostypeString<divclass="icon-<span item.bookingRule.releaseTime<img<div<divclass="common-<divclass="header-<divclass="title常見科室<divclass="all-wrapper"><span>全部<spanclass="iconfonticon"><divclass="content-<spanclass="itemv-linkclickabledark">神經(jīng)內(nèi)科<spanclass="itemv-linkclickabledark">消化內(nèi)科<spanclass="itemv-linkclickabledark">呼吸內(nèi)科<spanclass="itemv-linkclickabledark">內(nèi)科<spanclass="itemv-linkclickabledark">神經(jīng)外科<spanclass="itemv-linkclickabledark">婦科<spanclass="itemv-linkclickabledark"產(chǎn)科<spanclass="itemv-linkclickabledark">兒科<div<divclass="header-<divclass="title-<divclass="icon-wrapper"><spanclass="iconfonttitle-icon"></span><spanclass="title">平臺公告<divclass="all-<span>全部<spanclass="iconfonticon"><divclass="content-<divclass="notice-<div<spanclass="noticev-linkclickabledark">關于延長 國際醫(yī)院 通知</span><divclass="notice-<div<spanclass="noticev-linkclickabledark"> 大學東方醫(yī)院部分科室醫(yī)生門診醫(yī)</span><divclass="notice-<div<spanclass="noticev-linkclickabledark"> 知</span><divclass="suspend-notice-list<divclass="header-<divclass="title-<divclass="icon-<spanclass="iconfonttitle-icon"><spanclass="title">停診公告<divclass="all-<span>全部<spanclass="iconfonticon"><divclass="content-<divclass="notice-<div<spanclass="noticev-linkclickable 總醫(yī)院)呼吸內(nèi)科門診停診公告<divclass="notice-<div<spanclass="noticev-linkclickabledark"首都醫(yī)院老年醫(yī)學科門診停診公告</span><divclass="notice-<div<spanclass="noticev-linkclickable心內(nèi)科門診停診公告 importhospApifrom'@/api/hosp'importdictApifromexportdefaultasyncData({params,error})return.then(response=>{return{list:response.data.content,pages:response.data.totalPages}data(){return{searchObj:{},page:1,limit:hosname:'',//醫(yī)院名稱hostypeList:醫(yī)院等級集合districtList:[],//地區(qū)集合hostypeActiveIndex:provinceActiveIndex:}created(){//init().then(response=>this.hostypeList=//hostypeListfor(vari=0;i<response.data.length;i}.then(response=>{this.districtList=[]for(letiinresponse.data){}getList(){.then(response=>for(letiinresponse.data.content){}this.page=hostypeSelect(hostype,index)//this.list=[]this.page=1this.hostypeActiveIndex=indexthis.searchObj.hostype=hostype//districtSelect(districtCode,indexthis.list=[]this.page=1vinceActiveIndex=indexthis.searchObj.districtCvinceActiveIndex=indexthis.searchObj.districtCode=districtCodequerySearchAsync(queryString,cb){this.searchObj=[]if(queryString=='')returnhospApi.getByHosname(queryString).then(response=>for(leti=0,len=response.data.length;i<len;i++){response.data[i].value=response.data[i].hosname}handleSelect(item){window.location.href='/hospital/'+show(hoscode){window.location.href='/hospital/'+}}}apiMap<String,Object>item(StringpublicMap<String,Object>item(Stringhoscode){Map<String,Object>result=newHospitalhospital=this.setHospitalHosType(this.getByHoscode(hoscode));result.put("hospital",hospital);result.put("bookingRule",privateDepartmentServicereturnresult;}@ApiOperation(value@ApiOperation(value publicResultindex(@ApiParam(name"hoscode"valuecode"requiredtrue)@PathVariableStringhoscode){return}@ApiOperation(value publicResult@ApiParam(name"hoscode"valuecode"requiredtrue)@PathVariableStringhoscode){return}show(hoscode){returnshow(hoscode){returnrequest({url:`${api_name}/${hoscode}`,method:'get'findDepartment(hoscode){returnrequest({url:`${api_name}/department/${hoscode}`,method:'get'} <!--header--<divclass="nav- <!--左側導航#start<divclass="navleft-<divclass="nav-item<spanclass="v-linkselected<divclass="nav-item<spanlinkclickabledark"onclick="'javascript:window.location=\'/hospital/detail/'+hospital.hoscode+'\''">醫(yī)院詳情</span><divclass="nav-<spanlinkclickabledark"onclick="'javascript:window.location=\'/hospital/notice/'+hospital.hoscode+'\''">預約須知</span><divclass="nav-itemclass="v-linkclickabledark">停診信息<divclass="nav-itemclass="v-linkclickabledark">查詢/取消左側導航#end右側內(nèi)容#start<divclass="<divclass="hospital-<divclass="common-<divclass="title-class="hospital-title">{{hospital.hosname<divclass="icon-<spanclass="iconfont"></span>{{hospital.param.hostypeString<divclass="info-<imgimg":src="'data:image/jpeg;base64,'+hospital.logoData":alt="hospital.<divclass="content- 規(guī)則<div<div><spanclass="label">預約周期：</span><span>bookingRule.cycle<divclass="space"><span </span><span>{{bookingRule.releaseTime<divclass="space"><span </span><span>{{bookingRule.stopTime<divclass="line"><spanclass="label"><spanv-if="bookingRule.quitDay==- bookingRule.quitTime前取消<spanv-if="bookingRule.quitDay== bookingRule.quitTime前取消<divstyle="margin-top:20px">醫(yī)院預約規(guī)則<divclass="rule-<liv-for="iteminbookingRule.rule":key="item">{{item<divclass="titleselect-title">選擇科室<divclass="select-dept-<divclass="department-<divclass="hospital-<divclass="dept-list-wrapperel-scrollbar"style="height:<divclass="dept-listel-scrollbarwrap"style="margin-bottom:-17px;margin-right:-17px;"><divclass="el-scrollbar<divclass="sub-item"for="(item,index)indepartmentVoList":key="item.id":class="index==activeIndex?'selected':''"@click="move(index,item.depcode)">{{item.depname}}</div><divclass="el-scrollbarbaris-<divscrollbarthumb"style="transform:<divclass="el-scrollbarbaris-<divscrollbarthumb"style="transform:translateY(0%);height:<divclass="sub-dept-<divfor="(item,index)indepartmentVoList":key="item.id":class="index0?'selected':''"class="sub-dept-wrapper"<divclass="sub-<divclass="blockselected"></div>{{item.depname<divclass="sub-item-<divv-for="itinitem.children":key="it.id"class="sub-item"@click="schedule(it.depcode)"><spanclass="v-linkclickable">{{it.depname}}右側內(nèi)容#end<!--footer-- import'~/assets/css/hospital_ import'~/assets/css/hospital.css'importhospitalApifromexportdefault{data(){return{hoscode:null,activeIndex:hospital:{param:bookingRule:{},departmentVoList:[]}created()this.hoscode=this.$route.params.hoscodemethods:{init()hospitalApi.show(this.hoscode).then(response=>{this.hospital=response.data.hospitalthis.bookingRule=response.data.bookingRulehospitalApi.findDepartment(this.hoscode).then(response=>{this.departmentVoList=response.datamove(index,depcode){this.activeIndex=index schedule(depcode)schedule(depcode)window.location.href='/hospital/schedule?hoscode='+this.hoscode+"&depcode="+depcode}}}2.1 <!--header--<divclass="nav-<!--左側導航#start<divclass="navleft-<divclass="nav-item<spanlinkclickabledark"<divclass="nav-item<spanlinkselecteddark"onclick="'javascript:window.location=\'/hosp/detail/'+hospital.hoscode+'\''">醫(yī)院詳情</span><divclass="nav-<spanlinkclickabledark"onclick="'javascript:window.location=\'/hosp/notice/'+hospital.hoscode+'\''">預約須知</span><divclass="nav-itemclass="v-linkclickabledark停診信息<divclass="nav-itemclass="v-linkclickabledark查詢/取消左側導航#end右側內(nèi)容#start<divclass="<divclass="hospital-<divclass="common-<divclass="title-wrapper"><spanclass="hospital-title">{{hospital.hosname}}</span><divclass="icon-wrapper"><span</span>{{hospital.param.hostypeString<divwrapper"><img:src="'data:image/jpeg;base64,'+hospital.logoData":alt="hospital.hosname"style="width:80px;height:80px;"><divclass="content-<divclass="icon-wrapper"><spanclass="iconfontprefix-icon"><spanclass="text"><p>{{hospital.route</span><spanclass="iconfontright-<divclass="titlemt40">醫(yī)院介紹<divcontentmt40"><p>{{ro右側內(nèi)容#end<!--footer-- import'~/assets/css/hospital_ import'~/assets/css/hospital.css'imp