1、什么是服务端渲染

服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。

服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

另外，使用服务器端渲染，我们可以获得更快的内容到达时间(time-to-content)，无需等待所有的 JavaScript 都完成下载并执行，产生更好的用户体验，对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。

2、什么是NUXT

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

官网网站：

https://zh.nuxtjs.org/

3、搭建NUXT环境

1、解压NUXT框架压缩文件

2、该文件复制到工作区

3、打开VSCODE，终端打开，npm install

4、启动项目
npm run dev

5、访问

4、整合项目首页面

1、安装幻灯片插件

npm install vue-awesome-swiper

2、配置插件
在 plugins 文件夹下新建文件 nuxt-swiper-plugin.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'Vue.use(VueAwesomeSwiper)

在 nuxt.config.js 文件中配置插件
将 plugins 和 css节点 复制到 module.exports节点下

3、复制使用的静态资源
将静态原型中的css、img、js、photo目录拷贝至assets目录下
4、
layouts目录下default.vue修改为：

<template><div class="in-wrap"><!-- 公共头引入 --><header id="header"><section class="container"><h1 id="logo"><a href="#" title="谷粒学院"><img src="~/assets/img/logo.png" width="100%" alt="谷粒学院"></a></h1><div class="h-r-nsl"><ul class="nav"><router-link to="/" tag="li" active-class="current" exact><a>首页</a></router-link><router-link to="/course" tag="li" active-class="current"><a>课程</a></router-link><router-link to="/teacher" tag="li" active-class="current"><a>名师</a></router-link><router-link to="/article" tag="li" active-class="current"><a>文章</a></router-link><router-link to="/qa" tag="li" active-class="current"><a>问答</a></router-link></ul><!-- / nav --><ul class="h-r-login"><li id="no-login"><a href="/sing_in" title="登录"><em class="icon18 login-icon">&nbsp;</em><span class="vam ml5">登录</span></a>|<a href="/sign_up" title="注册"><span class="vam ml5">注册</span></a></li><li class="mr10 undis" id="is-login-one"><a href="#" title="消息" id="headerMsgCountId"><em class="icon18 news-icon">&nbsp;</em></a><q class="red-point" style="display: none">&nbsp;</q></li><li class="h-r-user undis" id="is-login-two"><a href="#" title><imgsrc="~/assets/img/avatar-boy.gif"width="30"height="30"class="vam picImg"alt><span class="vam disIb" id="userName"></span></a><a href="javascript:void(0)" title="退出" onclick="exit();" class="ml5">退出</a></li><!-- /未登录显示第1 li；登录后显示第2，3 li --></ul><aside class="h-r-search"><form action="#" method="post"><label class="h-r-s-box"><input type="text" placeholder="输入你想学的课程" name="queryCourse.courseName" value><button type="submit" class="s-btn"><em class="icon18">&nbsp;</em></button></label></form></aside></div><aside class="mw-nav-btn"><div class="mw-nav-icon"></div></aside><div class="clear"></div></section></header><!-- /公共头引入 --><nuxt/><!-- 公共底引入 --><footer id="footer"><section class="container"><div class><h4 class="hLh30"><span class="fsize18 f-fM c-999">友情链接</span></h4><ul class="of flink-list"><li><a href="http://www.atguigu.com/" title="尚硅谷" target="_blank">尚硅谷</a></li></ul><div class="clear"></div></div><div class="b-foot"><section class="fl col-7"><section class="mr20"><section class="b-f-link"><a href="#" title="关于我们" target="_blank">关于我们</a>|<a href="#" title="联系我们" target="_blank">联系我们</a>|<a href="#" title="帮助中心" target="_blank">帮助中心</a>|<a href="#" title="资源下载" target="_blank">资源下载</a>|<span>服务热线：010-56253825(北京) 0755-85293825(深圳)</span><span>Email：info@atguigu.com</span></section><section class="b-f-link mt10"><span>©2018课程版权均归谷粒学院所有 京ICP备17055252号</span></section></section></section><aside class="fl col-3 tac mt15"><section class="gf-tx"><span><img src="~/assets/img/wx-icon.png" alt></span></section><section class="gf-tx"><span><img src="~/assets/img/wb-icon.png" alt></span></section></aside><div class="clear"></div></div></section></footer><!-- /公共底引入 --></div>
</template>
<script>
import "~/assets/css/reset.css";
import "~/assets/css/theme.css";
import "~/assets/css/global.css";
import "~/assets/css/web.css";export default {};
</script>

5、修改pages/index.vue：

<template><div><!-- 幻灯片 开始 --><div v-swiper:mySwiper="swiperOption"><div class="swiper-wrapper"><div class="swiper-slide" style="background: #040B1B;"><a target="_blank" href="/"><img src="~/assets/photo/banner/1525939573202.jpg" alt="首页banner" /></a></div><div class="swiper-slide" style="background: #040B1B;"><a target="_blank" href="/"><img src="~/assets/photo/banner/1525939573202.jpg" alt="首页banner" /></a></div></div><div class="swiper-pagination swiper-pagination-white"></div><div class="swiper-button-prev swiper-button-white" slot="button-prev"></div><div class="swiper-button-next swiper-button-white" slot="button-next"></div></div><!-- 幻灯片 结束 --><div id="aCoursesList"><!-- 网校课程 开始 --><div><section class="container"><header class="comm-title"><h2 class="tac"><span class="c-333">热门课程</span></h2></header><div><article class="comm-course-list"><ul class="of" id="bna"><li><div class="cc-l-wrap"><section class="course-img"><imgsrc="~/assets/photo/course/1442295592705.jpg"class="img-responsive"alt="听力口语"/><div class="cc-mask"><a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a></div></section><h3 class="hLh30 txtOf mt10"><a href="#" title="听力口语" class="course-title fsize18 c-333">听力口语</a></h3><section class="mt10 hLh20 of"><span class="fr jgTag bg-green"><i class="c-fff fsize12 f-fA">免费</i></span><span class="fl jgAttr c-ccc f-fA"><i class="c-999 f-fA">9634人学习</i>|<i class="c-999 f-fA">9634评论</i></span></section></div></li><li><div class="cc-l-wrap"><section class="course-img"><imgsrc="~/assets/photo/course/1442295581911.jpg"class="img-responsive"alt="Java精品课程"/><div class="cc-mask"><a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a></div></section><h3 class="hLh30 txtOf mt10"><a href="#" title="Java精品课程" class="course-title fsize18 c-333">Java精品课程</a></h3><section class="mt10 hLh20 of"><span class="fr jgTag bg-green"><i class="c-fff fsize12 f-fA">免费</i></span><span class="fl jgAttr c-ccc f-fA"><i class="c-999 f-fA">501人学习</i>|<i class="c-999 f-fA">501评论</i></span></section></div></li><li><div class="cc-l-wrap"><section class="course-img"><imgsrc="~/assets/photo/course/1442295604295.jpg"class="img-responsive"alt="C4D零基础"/><div class="cc-mask"><a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a></div></section><h3 class="hLh30 txtOf mt10"><a href="#" title="C4D零基础" class="course-title fsize18 c-333">C4D零基础</a></h3><section class="mt10 hLh20 of"><span class="fr jgTag bg-green"><i class="c-fff fsize12 f-fA">免费</i></span><span class="fl jgAttr c-ccc f-fA"><i class="c-999 f-fA">300人学习</i>|<i class="c-999 f-fA">300评论</i></span></section></div></li><li><div class="cc-l-wrap"><section class="course-img"><imgsrc="~/assets/photo/course/1442302831779.jpg"class="img-responsive"alt="数学给宝宝带来的兴趣"/><div class="cc-mask"><a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a></div></section><h3 class="hLh30 txtOf mt10"><a href="#" title="数学给宝宝带来的兴趣" class="course-title fsize18 c-333">数学给宝宝带来的兴趣</a></h3><section class="mt10 hLh20 of"><span class="fr jgTag bg-green"><i class="c-fff fsize12 f-fA">免费</i></span><span class="fl jgAttr c-ccc f-fA"><i class="c-999 f-fA">256人学习</i>|<i class="c-999 f-fA">256评论</i></span></section></div></li><li><div class="cc-l-wrap"><section class="course-img"><imgsrc="~/assets/photo/course/1442295455437.jpg"class="img-responsive"alt="零基础入门学习Python课程学习"/><div class="cc-mask"><a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a></div></section><h3 class="hLh30 txtOf mt10"><ahref="#"title="零基础入门学习Python课程学习"class="course-title fsize18 c-333">零基础入门学习Python课程学习</a></h3><section class="mt10 hLh20 of"><span class="fr jgTag bg-green"><i class="c-fff fsize12 f-fA">免费</i></span><span class="fl jgAttr c-ccc f-fA"><i class="c-999 f-fA">137人学习</i>|<i class="c-999 f-fA">137评论</i></span></section></div></li><li><div class="cc-l-wrap"><section class="course-img"><imgsrc="~/assets/photo/course/1442295570359.jpg"class="img-responsive"alt="MySql从入门到精通"/><div class="cc-mask"><a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a></div></section><h3 class="hLh30 txtOf mt10"><a href="#" title="MySql从入门到精通" class="course-title fsize18 c-333">MySql从入门到精通</a></h3><section class="mt10 hLh20 of"><span class="fr jgTag bg-green"><i class="c-fff fsize12 f-fA">免费</i></span><span class="fl jgAttr c-ccc f-fA"><i class="c-999 f-fA">125人学习</i>|<i class="c-999 f-fA">125评论</i></span></section></div></li><li><div class="cc-l-wrap"><section class="course-img"><imgsrc="~/assets/photo/course/1442302852837.jpg"class="img-responsive"alt="搜索引擎优化技术"/><div class="cc-mask"><a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a></div></section><h3 class="hLh30 txtOf mt10"><a href="#" title="搜索引擎优化技术" class="course-title fsize18 c-333">搜索引擎优化技术</a></h3><section class="mt10 hLh20 of"><span class="fr jgTag bg-green"><i class="c-fff fsize12 f-fA">免费</i></span><span class="fl jgAttr c-ccc f-fA"><i class="c-999 f-fA">123人学习</i>|<i class="c-999 f-fA">123评论</i></span></section></div></li><li><div class="cc-l-wrap"><section class="course-img"><imgsrc="~/assets/photo/course/1442295379715.jpg"class="img-responsive"alt="20世纪西方音乐"/><div class="cc-mask"><a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a></div></section><h3 class="hLh30 txtOf mt10"><a href="#" title="20世纪西方音乐" class="course-title fsize18 c-333">20世纪西方音乐</a></h3><section class="mt10 hLh20 of"><span class="fr jgTag bg-green"><i class="c-fff fsize12 f-fA">免费</i></span><span class="fl jgAttr c-ccc f-fA"><i class="c-999 f-fA">34人学习</i>|<i class="c-999 f-fA">34评论</i></span></section></div></li></ul><div class="clear"></div></article><section class="tac pt20"><a href="#" title="全部课程" class="comm-btn c-btn-2">全部课程</a></section></div></section></div><!-- /网校课程 结束 --><!-- 网校名师 开始 --><div><section class="container"><header class="comm-title"><h2 class="tac"><span class="c-333">名师大咖</span></h2></header><div><article class="i-teacher-list"><ul class="of"><li><section class="i-teach-wrap"><div class="i-teach-pic"><a href="/teacher/1" title="姚晨"><img alt="姚晨" src="~/assets/photo/teacher/1442297885942.jpg" /></a></div><div class="mt10 hLh30 txtOf tac"><a href="/teacher/1" title="姚晨" class="fsize18 c-666">姚晨</a></div><div class="hLh30 txtOf tac"><span class="fsize14 c-999">北京师范大学法学院副教授</span></div><div class="mt15 i-q-txt"><pclass="c-999 f-fA">北京师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导，深知命题规律，了解解题技巧。内容把握准确，授课重点明确，层次分明，调理清晰，将法条法理与案例有机融合，强调综合，深入浅出。</p></div></section></li><li><section class="i-teach-wrap"><div class="i-teach-pic"><a href="/teacher/1" title="谢娜"><img alt="谢娜" src="~/assets/photo/teacher/1442297919077.jpg" /></a></div><div class="mt10 hLh30 txtOf tac"><a href="/teacher/1" title="谢娜" class="fsize18 c-666">谢娜</a></div><div class="hLh30 txtOf tac"><span class="fsize14 c-999">资深课程设计专家，专注10年AACTP美国培训协会认证导师</span></div><div class="mt15 i-q-txt"><pclass="c-999 f-fA">十年课程研发和培训咨询经验，曾任国企人力资源经理、大型外企培训经理，负责企业大学和培训体系搭建；曾任专业培训机构高级顾问、研发部总监，为包括广东移动、东莞移动、深圳移动、南方电网、工商银行、农业银行、民生银行、邮储银行、TCL集团、清华大学继续教育学院、中天路桥、广西扬翔股份等超过200家企业提供过培训与咨询服务，并担任近50个大型项目的总负责人。</p></div></section></li><li><section class="i-teach-wrap"><div class="i-teach-pic"><a href="/teacher/1" title="刘德华"><img alt="刘德华" src="~/assets/photo/teacher/1442297927029.jpg" /></a></div><div class="mt10 hLh30 txtOf tac"><a href="/teacher/1" title="刘德华" class="fsize18 c-666">刘德华</a></div><div class="hLh30 txtOf tac"><span class="fsize14 c-999">上海师范大学法学院副教授</span></div><div class="mt15 i-q-txt"><pclass="c-999 f-fA">上海师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导，深知命题规律，了解解题技巧。内容把握准确，授课重点明确，层次分明，调理清晰，将法条法理与案例有机融合，强调综合，深入浅出。</p></div></section></li><li><section class="i-teach-wrap"><div class="i-teach-pic"><a href="/teacher/1" title="周润发"><img alt="周润发" src="~/assets/photo/teacher/1442297935589.jpg" /></a></div><div class="mt10 hLh30 txtOf tac"><a href="/teacher/1" title="周润发" class="fsize18 c-666">周润发</a></div><div class="hLh30 txtOf tac"><span class="fsize14 c-999">考研政治辅导实战派专家，全国考研政治命题研究组核心成员。</span></div><div class="mt15 i-q-txt"><pclass="c-999 f-fA">法学博士，北京师范大学马克思主义学院副教授，专攻毛泽东思想概论、邓小平理论，长期从事考研辅导。出版著作两部，发表学术论文30余篇，主持国家社会科学基金项目和教育部重大课题子课题各一项，参与中央实施马克思主义理论研究和建设工程项目。</p></div></section></li></ul><div class="clear"></div></article><section class="tac pt20"><a href="#" title="全部讲师" class="comm-btn c-btn-2">全部讲师</a></section></div></section></div><!-- /网校名师 结束 --></div></div>
</template><script>
export default {data () {return {swiperOption: {//配置分页pagination: {el: '.swiper-pagination'//分页的dom节点},//配置导航navigation: {nextEl: '.swiper-button-next',//下一页dom节点prevEl: '.swiper-button-prev'//前一页dom节点}}}}
}
</script>

5、路由

1、固定路由
（1）使用router-link构建路由，地址是/course

（2）在page目录创建文件夹course ，在course目录创建index.vue

测试

2、动态路由
1）创建方式
如果我们需要根据id查询一条记录，就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名

在pages下的course目录下创建_id.vue

测试

6、功能部分开发

1、新建模块service_cms

1、配置文件

# 服务端口
server:port: 8004
# 服务名
spring:application:name: service-cms#数据库datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/education?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8username: rootpassword: root#返回json的全局时间格式jackson.date-format: yyyy-MM-dd HH:mm:ssjackson.time-zone: GMT+8
mybatis-plus:mapper-locations: classpath:com/scbg/edu/mapper/xml/*.xml
#mybatis-plus:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

2、启动类

package com.scbg.cms;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.ComponentScan;/*** @program: education* @description:* @author: WL* @create: 2020-07-01 21:43**/
@SpringBootApplication
@ComponentScan({"com.scbg"})
public class CmsApplication {public static void main(String[] args) {SpringApplication.run(CmsApplication.class,args);}
}

2、创建表

# Host: localhost  (Version 5.7.19)
# Date: 2019-11-18 15:49:41
# Generator: MySQL-Front 6.1  (Build 1.26)#
# Structure for table "crm_banner"
#CREATE TABLE `crm_banner` (`id` char(19) NOT NULL DEFAULT '' COMMENT 'ID',`title` varchar(20) DEFAULT '' COMMENT '标题',`image_url` varchar(500) NOT NULL DEFAULT '' COMMENT '图片地址',`link_url` varchar(500) DEFAULT '' COMMENT '链接地址',`sort` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '排序',`is_deleted` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '逻辑删除 1（true）已删除， 0（false）未删除',`gmt_create` datetime NOT NULL COMMENT '创建时间',`gmt_modified` datetime NOT NULL COMMENT '更新时间',PRIMARY KEY (`id`),UNIQUE KEY `uk_name` (`title`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='首页banner表';#
# Data for table "crm_banner"
#INSERT INTO `crm_banner` VALUES ('1194556896025845762','test1','https://online-teach-file.oss-cn-beijing.aliyuncs.com/cms/2019/11/14/297acd3b-b592-4cfb-a446-a28310369675.jpg','/course',1,0,'2019-11-13 18:05:32','2019-11-18 10:28:22'),('1194607458461216769','test2','https://online-teach-file.oss-cn-beijing.aliyuncs.com/cms/2019/11/13/8f80790d-d736-4842-a6a4-4dcb0d684d4e.jpg','/teacher',2,0,'2019-11-13 21:26:27','2019-11-14 09:12:15');

3、代码生成器生成

package com.scbg.CodeGenerator;import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.config.DataSourceConfig;
import com.baomidou.mybatisplus.generator.config.GlobalConfig;
import com.baomidou.mybatisplus.generator.config.PackageConfig;
import com.baomidou.mybatisplus.generator.config.StrategyConfig;
import com.baomidou.mybatisplus.generator.config.rules.DateType;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import org.junit.Test;/*** @author* @since 2018/12/13*/
public class CodeGenerator {@Testpublic void run() {// 1、创建代码生成器AutoGenerator mpg = new AutoGenerator();// 2、全局配置GlobalConfig gc = new GlobalConfig();String projectPath = System.getProperty("user.dir");gc.setOutputDir("D:\\idea_workspace\\education\\services\\service_cms" + "/src/main/java");gc.setAuthor("epo");gc.setOpen(false); //生成后是否打开资源管理器gc.setFileOverride(false); //重新生成时文件是否覆盖//UserServiegc.setServiceName("%sService");	//去掉Service接口的首字母Igc.setIdType(IdType.ID_WORKER_STR); //主键策略gc.setDateType(DateType.ONLY_DATE);//定义生成的实体类中日期类型gc.setSwagger2(true);//开启Swagger2模式mpg.setGlobalConfig(gc);// 3、数据源配置DataSourceConfig dsc = new DataSourceConfig();dsc.setUrl("jdbc:mysql://localhost:3306/education?serverTimezone=GMT%2B8");dsc.setDriverName("com.mysql.cj.jdbc.Driver");dsc.setUsername("root");dsc.setPassword("root");dsc.setDbType(DbType.MYSQL);mpg.setDataSource(dsc);// 4、包配置PackageConfig pc = new PackageConfig();pc.setModuleName("cms"); //模块名//包  com.atguigu.eduservicepc.setParent("com.scbg");//包  com.atguigu.eduservice.controllerpc.setController("controller");pc.setEntity("entity");pc.setService("service");pc.setMapper("mapper");mpg.setPackageInfo(pc);// 5、策略配置StrategyConfig strategy = new StrategyConfig();strategy.setInclude("crm_banner");strategy.setNaming(NamingStrategy.underline_to_camel);//数据库表映射到实体的命名策略strategy.setTablePrefix(pc.getModuleName() + "_"); //生成实体时去掉表前缀strategy.setColumnNaming(NamingStrategy.underline_to_camel);//数据库表字段映射到实体的命名策略strategy.setEntityLombokModel(true); // lombok 模型 @Accessors(chain = true) setter链式操作strategy.setRestControllerStyle(true); //restful api风格控制器strategy.setControllerMappingHyphenStyle(true); //url中驼峰转连字符mpg.setStrategy(strategy);// 6、执行mpg.execute();}
}

4、调整部分

1）跨域
2）mapper扫描

@MapperScan("com.scbg.cms.mapper")

3）

5、banner的前台、后台后端接口（后台部分的前端页面待补，前台的前端页面马上补充）

6、查询名师和精品课程后端接口