day11平台前端搭建与首页

SSRServerSideRender)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。服务器端渲染(SSR)SEO，由于搜索引擎爬虫抓取工具可以直loadingAjax获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果SEO对你的站点至关重另外，使用服务器端渲染，我们可以获得更快的内容到达时间(time-o-nt)，无需等待所有的JavSt都完成并执行，产生更好的用户体验，对于那些内容到达时间(tim-o-nt)与转化率直接相关的应用程序而言，服务器端渲染(SSR)至关重要。Nuxt.jsVue.js的轻量级应用框架,(SSR应用,也可官网2、NUXT2.1压缩

{{"name":"yygh-"version":"1.0.0","description尚医通","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:'尚医通… 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 用于组织未编译的静态资源如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内容区域公共底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">尚医通预 统一平台搜索框<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">用户协议</span><spanclass="v-linkclickable隐私协议 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医院<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

东城区</span><span西城区</span><span朝阳区</span><span丰台区</span><span</span><span海淀区</span><span</span><span房山区</span><span通州区</span><span顺义区</span><span昌平区</span><span大兴区</span><span怀柔区</span><span平谷区</span><span密云区</span><span延庆区</span></div><divclass="v-scroll-listhospital-<divclass="v-cardclickablelist-<divclass="hospital-list-itemhos-item"<div<divclass="hospital- <divclass="bottom-class="iconfont">class="iconfont"> 协和医院class="hospital-<divclass="v-cardclickablelist-item<divclass="hospital-list-itemhos-item"<div<divclass="hospital- <divclass="bottom-class="iconfont">class="iconfont"> 协和医院class="hospital-<divclass="v-cardclickablelist-<div<divclass="hospital-list-itemhos-item"<div<divclass="hospital- <divclass="bottom-class="iconfont">class="iconfont"> 协和医院class="hospital-<div<divclass="common-<divclass="header-<divclass="title常见科室<divclass="all-wrapper"><span>全部<spanclass="iconfonticon"><divclass="content-<spanclass="itemv-linkclickabledark">神经内科<spanclass="itemv-linkclickabledark">消化内科<spanclass="itemv-linkclickabledark">呼吸内科<spanclass="itemv-linkclickabledark">内科<spanclass="itemv-linkclickabledark">神经外科<spanclass="itemv-linkclickabledark">妇科<spanclass="itemv-linkclickabledark"产科<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">关于延长 国际医院 通知</span><divclass="notice-<div<spanclass="noticev-linkclickabledark"> 大学东方医院部分科室医生门诊医</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"> 总医院)呼吸内科门诊停诊公告</span><divclass="notice-<div<spanclass="noticev-linkclickabledark">首都医 院老年医学科门诊停诊公告</span><divclass="notice-<div<spanclass="noticev-linkclickabledark"> 友好医院中西医结合心内科门诊停诊公告</span> exportdefault}3api@Api(tags=@Api(tags="医院管理接口")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="根据医院名称获取医院列表") publicResult@ApiParam(name@ApiParam(name"hosname"value"医院名称"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医院<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">神经内科<spanclass="itemv-linkclickabledark">消化内科<spanclass="itemv-linkclickabledark">呼吸内科<spanclass="itemv-linkclickabledark">内科<spanclass="itemv-linkclickabledark">神经外科<spanclass="itemv-linkclickabledark">妇科<spanclass="itemv-linkclickabledark"产科<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">关于延长 国际医院 通知</span><divclass="notice-<div<spanclass="noticev-linkclickabledark"> 大学东方医院部分科室医生门诊医</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 总医院)呼吸内科门诊停诊公告<divclass="notice-<div<spanclass="noticev-linkclickabledark"首都医院老年医学科门诊停诊公告</span><divclass="notice-<div<spanclass="noticev-linkclickable心内科门诊停诊公告 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:'',//医院名称hostypeList:医院等级集合districtList:[],//地区集合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+'\''">医院详情</span><divclass="nav-<spanlinkclickabledark"onclick="'javascript:window.location=\'/hospital/notice/'+hospital.hoscode+'\''">预约须知</span><divclass="nav-itemclass="v-linkclickabledark">停诊信息<divclass="nav-itemclass="v-linkclickabledark">查询/取消左侧导航#end右侧内容#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- 规则<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">医院预约规则<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}}右侧内容#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+'\''">医院详情</span><divclass="nav-<spanlinkclickabledark"onclick="'javascript:window.location=\'/hosp/notice/'+hospital.hoscode+'\''">预约须知</span><divclass="nav-itemclass="v-linkclickabledark停诊信息<divclass="nav-itemclass="v-linkclickabledark查询/取消左侧导航#end右侧内容#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">医院介绍<divcontentmt40"><p>{{ro右侧内容#end<!--footer-- import'~/assets/css/hospital_ import'~/assets/css/hospital.css'imp