谷粒学院
服务端渲染技术NUXT
一、服务端渲染技术NUXT
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/
二、NUXT环境初始化
1、下载压缩包
https://github.com/nuxt-community/starter-template/archive/master.zip
2、解压
将template中的内容复制到 guli，命名为：guli-front
3、安装ESLint
将guli-admin项目下的.eslintrc.js配置文件复制到当前项目下
4、修改package.json
name、description、author（必须修改这里，否则项目无法安装）
"name": "guli",
"version": "1.0.0",
"description": "谷粒学院前台网站",
"author": "Helen <[email protected]>",
5、修改nuxt.config.js
修改title: ‘{ { name }}’、content: ‘{ {escape description }}’
这里的设置最后会显示在页面标题栏和meta数据中
head: {
title: '谷粒学院 - Java视频|HTML5视频|前端视频|Python视频|大数据视频-自学拿1万+月薪的IT在线视频课程，谷粉力挺，老学员为你推荐',
meta: [
{
charset: 'utf-8' },
{
name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'keywords', name: 'keywords', content: '谷粒学院,IT在线视频教程,Java视频,HTML5视频,前端视频,Python视频,大数据视频' },
{
hid: 'description', name: 'description', content: '谷粒学院是国内领先的IT在线视频学习平台、职业教育平台。截止目前,谷粒学院线上、线下学习人次数以万计！会同上百个知名开发团队联合制定的Java、HTML5前端、大数据、Python等视频课程，被广大学习者及IT工程师誉为：业界最适合自学、代码量最大、案例最多、实战性最强、技术最前沿的IT系列视频课程！' }
],
link: [
{
rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
6、在命令提示终端中进入项目目录
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9AypdUbu-1614845964215)(../../../../../AppData/Roaming/Typora/typora-user-images/image-20210303220221198.png)]](https://img-blog.csdnimg.cn/20210304162051206.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg0NDY5,size_16,color_FFFFFF,t_70)
7、安装依赖
npm install
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0KsAplya-1614845964217)(../../../../../AppData/Roaming/Typora/typora-user-images/image-20210303222353816.png)]](https://img-blog.csdnimg.cn/20210304162055824.png)
8、测试运行
npm run dev
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qg5MkOSu-1614845964221)(../../../../../AppData/Roaming/Typora/typora-user-images/image-20210303224301559.png)]](https://img-blog.csdnimg.cn/20210304162100742.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg0NDY5,size_16,color_FFFFFF,t_70)
阿昌遇到的问题：
报错：Cannot find module '@babel/preset-env/lib/utils'
解决方法如下：
npm uninstall @babel/preset-env
npm install @babel/[email protected]
9、NUXT目录结构
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qg11NWpS-1614845964224)(../../../../../AppData/Roaming/Typora/typora-user-images/image-20210303225938326.png)]](https://img-blog.csdnimg.cn/20210304162108585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg0NDY5,size_16,color_FFFFFF,t_70)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sfuxy0wy-1614845964225)(../../../../../AppData/Roaming/Typora/typora-user-images/image-20210303225954953.png)]](https://img-blog.csdnimg.cn/20210304162115780.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg0NDY5,size_16,color_FFFFFF,t_70)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SLsGR1Ao-1614845964227)(../../../../../AppData/Roaming/Typora/typora-user-images/image-20210303230422863.png)]](https://img-blog.csdnimg.cn/20210304162120433.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg0NDY5,size_16,color_FFFFFF,t_70)
整合项目主页面
一、幻灯片插件
1、安装插件
npm install vue-awesome-swiper
npm install swiper
2、配置幻灯片插件
在 plugins 文件夹下新建文件 nuxt-swiper-plugin.js ，内容是
import Vue from 'vue'
import VueAwesomeSwiper from '../node_modules/vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)
在 nuxt.config.js 文件中配置插件
将 plugins 和 css 节点 复制到 module.exports 节点下
module.exports = {
// some nuxt config...
plugins: [
{
src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }
],
css: [
'swiper/dist/css/swiper.css'
]
}
二、页面布局
1、复制静态资源
将静态原型中的css、img、js、photo目录拷贝至assets目录下
将favicon.ico复制到static目录下
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hdn6ewJY-1614845964229)(../../../../../AppData/Roaming/Typora/typora-user-images/image-20210304112354080.png)]](https://img-blog.csdnimg.cn/20210304162138339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg0NDY5,size_16,color_FFFFFF,t_70)
2、定义布局
我们可以把页头和页尾提取出来，形成布局页
修改layouts目录下default.vue，从静态页面中复制首页，修改了原始文件中的资源路径为~/assets/，将
主内容区域的内容替换成< nuxt />
内容如下：
<template>
<div>
<!-- 页头部分 -->
<!-- 内容的区域 -->
<nuxt/>
<!-- 页尾部分 -->
</div>
</template>
完整的内容如下：
<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"> </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"> </em>
</a>
<q class="red-point" style="display: none"> </q>
</li>
<li class="h-r-user undis" id="is-login-two">
<a href="#" title>
<img
src="~/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"> </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>服务热线：18757750375(温州) 17376597290(杭州)</span>
<span>Email：[email protected]</span>
</section>
<section class="b-f-link mt10">
<span>©2021阿昌之谷粒学院</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>
3、定义首页面
（ 不包含幻灯片 ）
修改pages/index.vue：
修改了原始文件中的资源路径为~/assets/
内容如下：
<template>
<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">
<img
src="~/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">
<img
src="~/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">
<img
src="~/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">
<img
src="~/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">
<img
src="~/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">
<a
href="#"
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">
<img
src="~/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">
<img
src="~/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">
<img
src="~/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">
<p class="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">
<p class="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">
<p class="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">
<p class="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 {
};
</script>
4、幻灯片插件
<!-- 幻灯片 开始 -->
<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/153525d0ef15459596.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>
<!-- 幻灯片 结束 -->
- script
<script>
export default {
data() {
return {
swiperOption: {
//配置分页
pagination: {
el: ".swiper-pagination", //分页的dom节点
},
//配置导航
navigation: {
nextEl: ".swiper-button-next", //下一页dom节点
prevEl: ".swiper-button-prev", //前一页dom节点
},
},
};
},
};
</script>
- 效果
三、路由
1、固定路由
（1）使用router-link构建路由，地址是 /course
默认会去/page下找course文件夹下的index.vue文件夹显示
<router-link to="/course" tag="li" active-class="current">
<a>课程</a>
</router-link>
2）在page目录创建文件夹course ，在course目录创建index.vue
<template>
<div>
课程列表
</div>
</template>
点击导航，测试路由
2、动态路由
（1）创建方式
如果我们需要根据id查询一条记录，就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名
在pages下的course目录下创建_id.vue
<template>
<div>
讲师详情
</div>
</template>
三、封装axios
我们可以参考guli-admin将axios操作封装起来
下载axios ，使用命令
npm install axios
创建utils文件夹，utils下创建request.js
import axios from 'axios'
// 创建axios实例
const service = axios.create({
baseURL: 'http://localhost:9001', // api的base_url
timeout: 20000 // 请求超时时间
})
export default service
名师页面静态效果整合
一、列表页面
创建 pages/teacher/index.vue
<template>
<div id="aCoursesList" class="bg-fa of">
<!-- 讲师列表 开始 -->
<section class="container">
<header class="comm-title all-teacher-title">
<h2 class="fl tac">
<span class="c-333">全部讲师</span>
</h2>
<section class="c-tab-title">
<a id="subjectAll" title="全部" href="#">全部</a>
<!-- <c:forEach var="subject" items="${subjectList }">
<a id="${subject.subjectId}"
title="${subject.subjectName }" href="javascript:void(0)"
οnclick="submitForm(${subject.subjectId})">${subject.subjectName }</a>
</c:forEach>-->
</section>
</header>
<section class="c-sort-box unBr">
<div>
<!-- /无数据提示 开始-->
<section class="no-data-wrap">
<em class="icon30 no-data-ico"> </em>
<span class="c-666 fsize14 ml10 vam"
>没有相关数据，小编正在努力整理 中...</span
>
</section>
<!-- /无数据提示 结束-->
<article class="i-teacher-list">
<ul class="of">
<li>
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a href="/teacher/1" title="姚晨" target="_blank">
<img src="~/assets/photo/teacher/1442297885942.jpg" alt />
</a>
</div>
<div class="mt10 hLh30 txtOf tac">
<a
href="/teacher/1"
title="姚晨"
target="_blank"
class="fsize18 c-666"
>姚晨</a
>
</div>
<div class="hLh30 txtOf tac">
<span class="fsize14 c-999"
>北京师范大学法学院副教授、清华大
学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导，深知命题规
律，了解解题技巧。内容把握准确，授课重点明确，层次分明，调理清晰，将法条法理与案例有机
融合，强调综合，深入浅出。</span
>
</div>
<div class="mt15 i-q-txt">
<p class="c-999 f-fA">北京师范大学法学院副教授</p>
</div>
</section>
</li>
<li>
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a href="/teacher/1" title="谢娜" target="_blank">
<img src="~/assets/photo/teacher/1442297919077.jpg" alt />
</a>
</div>
<div class="mt10 hLh30 txtOf tac">
<a
href="/teacher/1"
title="谢娜"
target="_blank"
class="fsize18 c-666"
>谢娜</a
>
</div>
<div class="hLh30 txtOf tac">
<span class="fsize14 c-999"
>十年课程研发和培训咨询经验，曾任
国企人力资源经理、大型外企培训经理，负责企业大学和培训体系搭建；曾任专业培训机构高级顾
问、研发部总监，为包括广东移动、东莞移动、深圳移动、南方电网、工商银行、农业银行、民生
银行、邮储银行、TCL集团、清华大学继续教育学院、中天路桥、广西扬翔股份等超过200家企业
提供过培训与咨询服务，并担任近50个大型项目的总负责人。</span
>
</div>
<div class="mt15 i-q-txt">
<p class="c-999 f-fA">
资深课程设计专家，专注10年AACTP美国培训 协会认证导师
</p>
</div>
</section>
</li>
<li>
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a href="/teacher/1" title="刘德华" target="_blank">
<img src="~/assets/photo/teacher/1442297927029.jpg" alt />
</a>
</div>
<div class="mt10 hLh30 txtOf tac">
<a
href="/teacher/1"
title="刘德华"
target="_blank"
class="fsize18 c-666"
>刘德华</a
>
</div>
<div class="hLh30 txtOf tac">
<span class="fsize14 c-999"
>上海师范大学法学院副教授、清华大
学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导，深知命题规
律，了解解题技巧。内容把握准确，授课重点明确，层次分明，调理清晰，将法条法理与案例有机
融合，强调综合，深入浅出。</span
>
</div>
<div class="mt15 i-q-txt">
<p class="c-999 f-fA">上海师范大学法学院副教授</p>
</div>
</section>
</li>
<li>
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a href="/teacher/1" title="周润发" target="_blank">
<img src="~/assets/photo/teacher/1442297935589.jpg" alt />
</a>
</div>
<div class="mt10 hLh30 txtOf tac">
<a
href="/teacher/1"
title="周润发"
target="_blank"
class="fsize18 c-666"
>周润发</a
>
</div>
<div class="hLh30 txtOf tac">
<span class="fsize14 c-999"
>法学博士，北京师范大学马克思主义
学院副教授，专攻毛泽东思想概论、邓小平理论，长期从事考研辅导。出版著作两部，发表学术论
文30余篇，主持国家社会科学基金项目和教育部重大课题子课题各一项，参与中央实施马克思主
义理论研究和建设工程项目。</span
>
</div>
<div class="mt15 i-q-txt">
<p class="c-999 f-fA">
考研政治辅导实战派专家，全国考研政治命 题研究组核心成员。
</p>
</div>
</section>
</li>
<li>
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a href="/teacher/1" title="钟汉良" target="_blank">
<img src="~/assets/photo/teacher/1442298121626.jpg" alt />
</a>
</div>
<div class="mt10 hLh30 txtOf tac">
<a
href="/teacher/1"
title="钟汉良"
target="_blank"
class="fsize18 c-666"
>钟汉良</a
>
</div>
<div class="hLh30 txtOf tac">
<span class="fsize14 c-999"
>具备深厚的数学思维功底、丰富的小
学教育经验，授课风格生动活泼，擅长用形象生动的比喻帮助理解、简单易懂的语言讲解难题，深
受学生喜欢</span
>
</div>
<div class="mt15 i-q-txt">
<p class="c-999 f-fA">
毕业于师范大学数学系，热爱教育事业，执 教数学思维6年有余
</p>
</div>
</section>
</li>
<li>
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a href="/teacher/1" title="唐嫣" target="_blank">
<img src="~/assets/photo/teacher/1442297957332.jpg" alt />
</a>
</div>
<div class="mt10 hLh30 txtOf tac">
<a
href="/teacher/1"
title="唐嫣"
target="_blank"
class="fsize18 c-666"
>唐嫣</a
>
</div>
<div class="hLh30 txtOf tac">
<span class="fsize14 c-999"
>中国科学院数学与系统科学研究院应
用数学专业博士，研究方向为数字图像处理，中国工业与应用数学学会会员。参与全国教育科
学“十五”规划重点课题“信息化进程中的教育技术发展研究”的子课题“基与课程改革的资源开发与
应用”，以及全国“十五”科研规划全国重点项目“掌上型信息技术产品在教学中的运用和开发研
究”的子课题“用技术学数学”。</span
>
</div>
<div class="mt15 i-q-txt">
<p class="c-999 f-fA">中国人民大学附属中学数学一级教师</p>
</div>
</section>
</li>
<li>
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a href="/teacher/1" title="周杰伦" target="_blank">
<img src="~/assets/photo/teacher/1442297969808.jpg" alt />
</a>
</div>
<div class="mt10 hLh30 txtOf tac">
<a
href="/teacher/1"
title="周杰伦"
target="_blank"
class="fsize18 c-666"
>周杰伦</a
>
</div>
<div class="hLh30 txtOf tac">
<span class="fsize14 c-999"
>中教一级职称。讲课极具亲和 力。</span
>
</div>
<div class="mt15 i-q-txt">
<p class="c-999 f-fA">毕业于北京大学数学系</p>
</div>
</section>
</li>
<li>
<section class="i-teach-wrap">
<div class="i-teach-pic">
<a href="/teacher/1" title="陈伟霆" target="_blank">
<img src="~/assets/photo/teacher/1442297977255.jpg" alt />
</a>
</div>
<div class="mt10 hLh30 txtOf tac">
<a
href="/teacher/1"
title="陈伟霆"
target="_blank"
class="fsize18 c-666"
>陈伟霆</a
>
</div>
<div class="hLh30 txtOf tac">
<span class="fsize14 c-999"
>政治学博士、管理学博士后，北京师范大学马克思主义学院副教授。多
年来总结出了一套行之有效的应试技巧与答题方法，针对性和实用性极强，能帮助考生在轻松中应
考，在激励的竞争中取得高分，脱颖而出。</span
>
</div>
<div class="mt15 i-q-txt">
<p class="c-999 f-fA">
长期从事考研政治课讲授和考研命题趋势与
应试对策研究。考研辅导新锐派的代表。
</p>
</div>
</section>
</li>
</ul>
<div class="clear"></div>
</article>
</div>
<!-- 公共分页 开始 -->
<div>
<div class="paging">
<!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
<a href="#" title="首页">首</a>
<a href="#" title="前一页"><</a>
<a href="#" title="第1页" class="current undisable">1</a>
<a href="#" title="第2页">2</a>
<a href="#" title="后一页">></a>
<a href="#" title="末页">末</a>
<div class="clear"></div>
</div>
</div>
<!-- 公共分页 结束 -->
</section>
</section>
<!-- /讲师列表 结束 -->
</div>
</template>
<script>
export default {
};
</script>
- 效果
二、详情页面
创建 pages/teacher/_id.vue
修改资源路径为~/assets/
<template>
<div id="aCoursesList" class="bg-fa of">
<!-- 讲师介绍 开始 -->
<section class="container">
<header class="comm-title">
<h2 class="fl tac">
<span class="c-333">讲师介绍</span>
</h2>
</header>
<div class="t-infor-wrap">
<!-- 讲师基本信息 -->
<section class="fl t-infor-box c-desc-content">
<div class="mt20 ml20">
<section class="t-infor-pic">
<img src="~/assets/photo/teacher/1442297885942.jpg" />
</section>
<h3 class="hLh30">
<span class="fsize24 c-333">姚晨 高级讲师</span>
</h3>
<section class="mt10">
<span class="t-tag-bg">北京师范大学法学院副教授</span>
</section>
<section class="t-infor-txt">
<p class="mt20">
北京师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法
考试培训经验。长期从事司法考试辅导，深知命题规律，了解解题技巧。内容把握准确，授课重点
明确，层次分明，调理清晰，将法条法理与案例有机融合，强调综合，深入浅出。
</p>
</section>
<div class="clear"></div>
</div>
</section>
<div class="clear"></div>
</div>
<section class="mt30">
<div>
<header class="comm-title all-teacher-title c-course-content">
<h2 class="fl tac">
<span class="c-333">主讲课程</span>
</h2>
<section class="c-tab-title">
<a href="javascript: void(0)"> </a>
</section>
</header>
<!-- /无数据提示 开始-->
<section class="no-data-wrap">
<em class="icon30 no-data-ico"> </em>
<span class="c-666 fsize14 ml10 vam"
>没有相关数据，小编正在努力整理 中...</span
>
</section>
<!-- /无数据提示 结束-->
<article class="comm-course-list">
<ul class="of">
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442295455437.jpg"
class="img-responsive"
/>
<div class="cc-mask">
<a
href="#"
title="开始学习"
target="_blank"
class="comm- btn c-btn-1"
>开始学习</a
>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a
href="#"
title="零基础入门学习Python课程学习"
target="_blank"
class="course-title fsize18 c-333"
>零基础入门学习Python课程学 习</a
>
</h3>
</div>
</li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442295472860.jpg"
class="img-responsive"
/>
<div class="cc-mask">
<a
href="#"
title="开始学习"
target="_blank"
class="comm- btn c-btn-1"
>开始学习</a
>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a
href="#"
title="影想力摄影小课堂"
target="_blank"
class="course-title fsize18 c-333"
>影想力摄影小课堂</a
>
</h3>
</div>
</li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442302831779.jpg"
class="img-responsive"
/>
<div class="cc-mask">
<a
href="#"
title="开始学习"
target="_blank"
class="comm- btn c-btn-1"
>开始学习</a
>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a
href="#"
title="数学给宝宝带来的兴趣"
target="_blank"
class="course-title fsize18 c-333"
>数学给宝宝带来的兴趣</a
>
</h3>
</div>
</li>
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442295506745.jpg"
class="img-responsive"
/>
<div class="cc-mask">
<a
href="#"
title="开始学习"
target="_blank"
class="comm- btn c-btn-1"
>开始学习</a
>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a
href="#"
title="国家教师资格考试专用"
target="_blank"
class="course-title fsize18 c-333"
>国家教师资格考试专用</a
>
</h3>
</div>
</li>
</ul>
<div class="clear"></div>
</article>
</div>
</section>
</section>
<!-- /讲师介绍 结束 -->
</div>
</template>
<script>
export default {
};
</script>
- 效果
课程页面静态效果整合
一、列表页面
创建 pages/course/index.vue
<template>
<div id="aCoursesList" class="bg-fa of">
<!-- /课程列表 开始 -->
<section class="container">
<header class="comm-title">
<h2 class="fl tac">
<span class="c-333">全部课程</span>
</h2>
</header>
<section class="c-sort-box">
<section class="c-s-dl">
<dl>
<dt>
<span class="c-999 fsize14">课程类别</span>
</dt>
<dd class="c-s-dl-li">
<ul class="clearfix">
<li>
<a title="全部" href="#">全部</a>
</li>
<li>
<a title="数据库" href="#">数据库</a>
</li>
<li class="current">
<a title="外语考试" href="#">外语考试</a>
</li>
<li>
<a title="教师资格证" href="#">教师资格证</a>
</li>
<li>
<a title="公务员" href="#">公务员</a>
</li>
<li>
<a title="移动开发" href="#">移动开发</a>
</li>
<li>
<a title="操作系统" href="#">操作系统</a>
</li>
</ul>
</dd>
</dl>
<dl>
<dt>
<span class="c-999 fsize14"></span>
</dt>
<dd class="c-s-dl-li">
<ul class="clearfix">
<li>
<a title="职称英语" href="#">职称英语</a>
</li>
<li>
<a title="英语四级" href="#">英语四级</a>
</li>
<li>
<a title="英语六级" href="#">英语六级</a>
</li>
</ul>
</dd>
</dl>
<div class="clear"></div>
</section>
<div class="js-wrap">
<section class="fr">
<span class="c-ccc">
<i class="c-master f-fM">1</i>/
<i class="c-666 f-fM">1</i>
</span>
</section>
<section class="fl">
<ol class="js-tap clearfix">
<li>
<a title="关注度" href="#">关注度</a>
</li>
<li>
<a title="最新" href="#">最新</a>
</li>
<li class="current bg-orange">
<a title="价格" href="#"
>价格
<span>↓</span>
</a>
</li>
</ol>
</section>
</div>
<div class="mt40">
<!-- /无数据提示 开始-->
<section class="no-data-wrap">
<em class="icon30 no-data-ico"> </em>
<span class="c-666 fsize14 ml10 vam"
>没有相关数据，小编正在努力整理 中...</span
>
</section>
<!-- /无数据提示 结束-->
<article class="comm-course-list">
<ul class="of" id="bna">
<li>
<div class="cc-l-wrap">
<section class="course-img">
<img
src="~/assets/photo/course/1442295592705.jpg"
class="img-responsive"
alt="听力口语"
/>
<div class="cc-mask">
<a
href="/course/1"
title="开始学习"
class="comm-btn c- btn-1"
>开始学习</a
>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a
href="/course/1"
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">
<img
src="~/assets/photo/course/1442295581911.jpg"
class="img-responsive"
alt="Java精品课程"
/>
<div class="cc-mask">
<a
href="/course/1"
title="开始学习"
class="comm-btn c- btn-1"
>开始学习</a
>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a
href="/course/1"
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">
<img
src="~/assets/photo/course/1442295604295.jpg"
class="img-responsive"
alt="C4D零基础"
/>
<div class="cc-mask">
<a
href="/course/1"
title="开始学习"
class="comm-btn c- btn-1"
>开始学习</a
>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a
href="/course/1"
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">
<img
src="~/assets/photo/course/1442302831779.jpg"
class="img-responsive"
alt="数学给宝宝带来的兴趣"
/>
<div class="cc-mask">
<a
href="/course/1"
title="开始学习"
class="comm-btn c- btn-1"
>开始学习</a
>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a
href="/course/1"
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">
<img
src="~/assets/photo/course/1442295455437.jpg"
class="img-responsive"
alt="零基础入门学习Python课程学习"
/>
<div class="cc-mask">
<a
href="/course/1"
title="开始学习"
class="comm-btn c- btn-1"
>开始学习</a
>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a
href="/course/1"
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">
<img
src="~/assets/photo/course/1442295570359.jpg"
class="img-responsive"
alt="MySql从入门到精通"
/>
<div class="cc-mask">
<a
href="/course/1"
title="开始学习"
class="comm-btn c- btn-1"
>开始学习</a
>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a
href="/course/1"
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">
<img
src="~/assets/photo/course/1442302852837.jpg"
class="img-responsive"
alt="搜索引擎优化技术"
/>
<div class="cc-mask">
<a
href="/course/1"
title="开始学习"
class="comm-btn c- btn-1"
>开始学习</a
>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a
href="/course/1"
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">
<img
src="~/assets/photo/course/1442295379715.jpg"
class="img-responsive"
alt="20世纪西方音乐"
/>
<div class="cc-mask">
<a
href="/course/1"
title="开始学习"
class="comm-btn c- btn-1"
>开始学习</a
>
</div>
</section>
<h3 class="hLh30 txtOf mt10">
<a
href="/course/1"
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>
</div>
<!-- 公共分页 开始 -->
<div>
<div class="paging">
<a class="undisable" title>首</a>
<a id="backpage" class="undisable" href="#" title><</a>
<a href="#" title class="current undisable">1</a>
<a href="#" title>2</a>
<a id="nextpage" href="#" title>></a>
<a href="#" title>末</a>
<div class="clear"></div>
</div>
</div>
<!-- 公共分页 结束 -->
</section>
</section>
<!-- /课程列表 结束 -->
</div>
</template>
<script>
export default {
};
</script>
- 效果
二、详情页面
创建 pages/course/_id.vue
<template>
<div id="aCoursesList" class="bg-fa of">
<!-- /课程详情 开始 -->
<section class="container">
<section class="path-wrap txtOf hLh30">
<a href="#" title class="c-999 fsize14">首页</a>
\
<a href="#" title class="c-999 fsize14">课程列表</a>
\
<span class="c-333 fsize14">Java精品课程</span>
</section>
<div>
<article class="c-v-pic-wrap" style="height: 357px">
<section class="p-h-video-box" id="videoPlay">
<img
src="~/assets/photo/course/1442295581911.jpg"
alt="Java精品课
程"
class="dis c-v-pic"
/>
</section>
</article>
<aside class="c-attr-wrap">
<section class="ml20 mr15">
<h2 class="hLh30 txtOf mt15">
<span class="c-fff fsize24">Java精品课程</span>
</h2>
<section class="c-attr-jg">
<span class="c-fff">价格：</span>
<b class="c-yellow" style="font-size: 24px">￥0.00</b>
</section>
<section class="c-attr-mt c-attr-undis">
<span class="c-fff fsize14">主讲： 唐嫣 </span>
</section>
<section class="c-attr-mt of">
<span class="ml10 vam">
<em class="icon18 scIcon"></em>
<a class="c-fff vam" title="收藏" href="#">收藏</a>
</span>
</section>
<section class="c-attr-mt">
<a href="#" title="立即观看" class="comm-btn c-btn-3"
>立即观 看</a
>
</section>
</section>
</aside>
<aside class="thr-attr-box">
<ol class="thr-attr-ol clearfix">
<li>
<p> </p>
<aside>
<span class="c-fff f-fM">购买数</span>
<br />
<h6 class="c-fff f-fM mt10">150</h6>
</aside>
</li>
<li>
<p> </p>
<aside>
<span class="c-fff f-fM">课时数</span>
<br />
<h6 class="c-fff f-fM mt10">20</h6>
</aside>
</li>
<li>
<p> </p>
<aside>
<span class="c-fff f-fM">浏览数</span>
<br />
<h6 class="c-fff f-fM mt10">501</h6>
</aside>
</li>
</ol>
</aside>
<div class="clear"></div>
</div>
<!-- /课程封面介绍 -->
<div class="mt20 c-infor-box">
<article class="fl col-7">
<section class="mr30">
<div class="i-box">
<div>
<section
id="c-i-tabTitle"
class="c-infor-tabTitle c-tab- title"
>
<a name="c-i" class="current" title="课程详情">课程详情</a>
</section>
</div>
<article class="ml10 mr10 pt20">
<div>
<h6 class="c-i-content c-infor-title">
<span>课程介绍</span>
</h6>
<div class="course-txt-body-wrap">
<section class="course-txt-body">
<p>
Java的发展历史，可追溯到1990年。当
时Sun Microsystem公司为了发展消费性电子产品而进行了一个名为Green的项目计划。该
计划
负责人是James Gosling。起初他以C++来写一种内嵌式软
件，可以放在烤面包机或PAD等小型电子消费设备里，使得机器更聪明，具有人工智
能。但他发现C++并不适合完成这类任务！因为C++常会有使系统失
效的程序错误，尤其是内存管理，需要程序设计师记录并管理内存资源。这给设计师们造成
极大的负担，并可能产生许多bugs。
<br />为了解决所遇到的问题，Gosling决定要发展一种新的语言，
来解决C++的潜在性危险问题，这个语言名叫Oak。Oak是一种可移植性语言，也就是一种平台独立
语言，能够在各种芯片上运行。
<br />1994年，Oak技术日趋成熟，这时网络正开始蓬勃发展。Oak研
发小组发现Oak很适合作为一种网络程序语言。因此发展了一个能与Oak配合的浏
览器--WebRunner，后更名为HotJava，它证明了Oak是一种能在网
络上发展的程序语言。由于Oak商标已被注册，工程师们便想到以自己常
享用的咖啡(Java)来重新命名，并于Sun World 95中
被发表出来。
</p>
</section>
</div>
</div>
<!-- /课程介绍 -->
<div class="mt50">
<h6 class="c-g-content c-infor-title">
<span>课程大纲</span>
</h6>
<section class="mt20">
<div class="lh-menu-wrap">
<menu id="lh-menu" class="lh-menu mt10 mr10">
<ul>
<!-- 文件目录 -->
<li class="lh-menu-stair">
<a
href="javascript: void(0)"
title="第一章"
class="current-1"
>
<em class="lh-menu-i-1 icon18 mr10"></em>第一章
</a>
<ol class="lh-menu-ol" style="display: block">
<li class="lh-menu-second ml30">
<a href="#" title>
<span class="fr">
<i class="free-icon vam mr10">免费试听</i>
</span>
<em class="lh-menu-i-2 icon16 mr5"> </em
>第一节
</a>
</li>
<li class="lh-menu-second ml30">
<a href="#" title class="current-2">
<em class="lh-menu-i-2 icon16 mr5"> </em
>第二节
</a>
</li>
</ol>
</li>
</ul>
</menu>
</div>
</section>
</div>
<!-- /课程大纲 -->
</article>
</div>
</section>
</article>
<aside class="fl col-3">
<div class="i-box">
<div>
<section class="c-infor-tabTitle c-tab-title">
<a title href="javascript:void(0)">主讲讲师</a>
</section>
<section class="stud-act-list">
<ul style="height: auto">
<li>
<div class="u-face">
<a href="#">
<img
src="~/assets/photo/teacher/1442297969808.jpg"
width="50"
height="50"
alt
/>
</a>
</div>
<section class="hLh30 txtOf">
<a class="c-333 fsize16 fl" href="#">周杰伦</a>
</section>
<section class="hLh20 txtOf">
<span class="c-999">毕业于北京大学数学系</span>
</section>
</li>
</ul>
</section>
</div>
</div>
</aside>
<div class="clear"></div>
</div>
</section>
<!-- /课程详情 结束 -->
</div>
</template>
<script>
export default {
};
</script>
- 效果
首页显示banner数据【后端】
一、新建banner微服务
1、在service模块下创建子模块service-cms
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vNSvEMNe-1614845964233)(../../../../../AppData/Roaming/Typora/typora-user-images/image-20210304125201277.png)]](https://img-blog.csdnimg.cn/20210304162339544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg0NDY5,size_16,color_FFFFFF,t_70)
2、使用代码生成器生成banner代码
（1）创建crm_banner表
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ySLxiw9i-1614845964234)(../../../../../AppData/Roaming/Typora/typora-user-images/image-20210304132504375.png)]](https://img-blog.csdnimg.cn/2021030416234555.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg0NDY5,size_16,color_FFFFFF,t_70)
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');
（2）生成代码
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FlxCg6eL-1614845964236)(../../../../../AppData/Roaming/Typora/typora-user-images/image-20210304132927690.png)]](https://img-blog.csdnimg.cn/20210304162352979.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg0NDY5,size_16,color_FFFFFF,t_70)
@Test
public void run() {
// 1、创建代码生成器
AutoGenerator mpg = new AutoGenerator();
// 2、全局配置
GlobalConfig gc = new GlobalConfig();
String projectPath = System.getProperty("user.dir");
gc.setOutputDir("D:\\JavaStudy\\gulixueyuan\\guli_parent\\service\\service_cms" + "/src/main/java"); //输出目录
gc.setAuthor("achang"); //作者名
gc.setOpen(false); //生成后是否打开资源管理器
gc.setFileOverride(false); //重新生成时文件是否覆盖
gc.setServiceName("%sService"); //去掉Service接口的首字母I
gc.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/guli?serverTimezone=GMT%2B8");
dsc.setDriverName("com.mysql.cj.jdbc.Driver");
dsc.setUsername("root");
dsc.setPassword("00000");
dsc.setDbType(DbType.MYSQL);
mpg.setDataSource(dsc);
// 4、包配置
PackageConfig pc = new PackageConfig();
//生成包：com.achang.eduservice
pc.setModuleName("cmsservice"); //模块名
pc.setParent("com.achang");
//生成包：com.achang.oss.controller
pc.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();
}
3、配置application.properties
# 服务端口
server.port=8004
# 服务名
spring.application.name=service-cms
# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/guli?serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=00000
#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
#配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:com/achang/cmsservice/mapper/xml/*.xml
#mybatis日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
4、创建启动类
@SpringBootApplication
@ComponentScan("com.achang")
@MapperScan("com.achang.cmsservice.mapper")
public class Service_cms_Main9004 {
public static void main(String[] args) {
SpringApplication.run(Service_cms_Main9004.class,args);
}
}
二、创建banner服务接口
1、创建banner后台管理接口
banner后台分页查询、添加、修改、删除接口
//后台banner管理接口
@RestController
@RequestMapping("/cmsservice/bannerAdmin")
@CrossOrigin //解决跨域问题
public class BannerAdminController {
@Autowired
private CrmBannerService crmBannerService;
//条件分页查询banner
@PostMapping("/pageBanner/{page}/{limit}")
public R pageBanner(@PathVariable Long page, @PathVariable Long limit, @RequestBody(required = false) BannerQuery bannerQuery){
Page<CrmBanner> bannerPage = new Page<>(page,limit);
crmBannerService.pageQuery(bannerPage,bannerQuery);
//获取数据
List<CrmBanner> list = bannerPage.getRecords();
//获取总记录数
long total = bannerPage.getTotal();
return R.ok().data("rows",list).data("total",total);
}
//添加banner
@PostMapping("/addBanner")
public R addBanner(@RequestBody CrmBanner crmBanner){
boolean flag = crmBannerService.save(crmBanner);
if (flag){
return R.ok();
}else {
return R.error();
}
}
//修改banner
@PostMapping("/updateBanner")
public R updateBanner(@RequestBody CrmBanner crmBanner){
boolean flag = crmBannerService.updateById(crmBanner);
if (flag){
return R.ok();
}else {
return R.error();
}
}
//根据id删除banner
@DeleteMapping("/deleteBannerById/{id}")
public R deleteBannerById(@PathVariable String id){
boolean flag = crmBannerService.removeById(id);
if (flag){
return R.ok();
}else {
return R.error();
}
}
//根据id查询banner
@GetMapping("/getBannerById/{id}")
public R getBannerById(@PathVariable String id){
CrmBanner crmBanner = crmBannerService.getById(id);
return R.ok().data("item",crmBanner);
}
}
2、创建banner前台查询接口
首页获取banner数据接口
- BannerFrontController
@CrossOrigin //解决跨域问题
@RestController
@RequestMapping("/cmsservice/bannerFront")
public class BannerFrontController {
@Autowired
private CrmBannerService crmBannerService;
//查询所有幻灯片
@GetMapping("getAll")
public R getAll(){
List<CrmBanner> list = crmBannerService.getAllBanner();
return R.ok().data("list",list);
}
}
- service
接口
public interface CrmBannerService extends IService<CrmBanner> {
List<CrmBanner> getAllBanner();
}
impl
@Service
public class CrmBannerServiceImpl extends ServiceImpl<CrmBannerMapper, CrmBanner> implements CrmBannerService {
//查询所有banner
@Override
public List<CrmBanner> getAllBanner() {
List<CrmBanner> list = baseMapper.selectList(null);
return list;
}
}
三、实现banner后台管理前端
实现banner后台的添加修改删除和分页查询操作，和其他后台管理模块类似
老师是没有做的，阿昌自己实现了参考之前做的讲师后台管理快速实现，代码如下：
1、后端部分
- vo【BannerQuery】
@Data
public class BannerQuery implements Serializable {
private static final long serialVersionUID = 1L;
//幻灯片名字
private String name;
private String begin;//注意，这里使用的是String类型，前端传过来的数据无需进行类型转换
private String end;
}
- CrmBanner
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@ApiModel(value="CrmBanner对象", description="首页banner表")
public class CrmBanner implements Serializable {
private static final long serialVersionUID = 1L;
@ApiModelProperty(value = "ID")
@TableId(value = "id", type = IdType.ID_WORKER_STR)
private String id;
@ApiModelProperty(value = "标题")
private String title;
@ApiModelProperty(value = "图片地址")
private String imageUrl;
@ApiModelProperty(value = "链接地址")
private String linkUrl;
@ApiModelProperty(value = "排序")
private Integer sort;
@ApiModelProperty(value = "逻辑删除 1（true）已删除， 0（false）未删除")
private Boolean isDeleted;
@ApiModelProperty(value = "创建时间")
@TableField(fill = FieldFill.INSERT)
private Date gmtCreate;
@ApiModelProperty(value = "更新时间")
@TableField(fill = FieldFill.INSERT_UPDATE)
private Date gmtModified;
}
- service
service
public interface CrmBannerService extends IService<CrmBanner> {
List<CrmBanner> getAllBanner();
void pageQuery(Page<CrmBanner> bannerPage, BannerQuery bannerQuery);
}
impl
@Service
public class CrmBannerServiceImpl extends ServiceImpl<CrmBannerMapper, CrmBanner> implements CrmBannerService {
//查询所有banner
@Override
public List<CrmBanner> getAllBanner() {
List<CrmBanner> list = baseMapper.selectList(null);
return list;
}
//多条件带分页查询
@Override
public void pageQuery(Page<CrmBanner> bannerPage, BannerQuery bannerQuery) {
QueryWrapper<CrmBanner> wrapper = new QueryWrapper<>();
if (bannerQuery!=null){
String name = bannerQuery.getName();
String begin = bannerQuery.getBegin();
String end = bannerQuery.getEnd();
if (!StringUtils.isEmpty(name)){
wrapper.like("title",name);
}
if (!StringUtils.isEmpty(begin)){
wrapper.ge("gmt_create",begin);
}
if (!StringUtils.isEmpty(end)){
wrapper.le("gmt_modified",end);
}
}
//排序
wrapper.orderByDesc("gmt_create");
//带上门判断后的条件进行分页查询
baseMapper.selectPage(bannerPage, wrapper);
}
}
2、前端部分
- api
guli-admin\src\api\teacher\banner.js
import request from '@/utils/request' //引入已经封装好的axios 和 拦截器
export default{
//1、幻灯片列表（多条件分页查询）
//page：当前页，limit：每页记录数，teacherQuery：条件对象
getBannerListPage(page,limit,bannerQuery){
return request({
url: `/cmsservice/bannerAdmin/pageBanner/${
page}/${
limit}`,
method: 'post',
//teacherQuery条件对象，如果后端使用RequestBody获取数据
//data表示把对象转换成json对象进行传递到接口里
data: bannerQuery
})
},
//根据id删除幻灯片
removeById(id){
return request({
url: `/cmsservice/bannerAdmin/deleteBannerById/${
id}`,
method: 'delete',
})
},
//新增幻灯片
saveBanner(banner){
return request({
url: `/cmsservice/bannerAdmin/addBanner`,
method: `post`,
data: banner
})
},
//根据id查询幻灯片
updateById(id){
return request({
url: `/cmsservice/bannerAdmin/getBannerById/${
id}`,
method: `get`,
})
},
//修改幻灯片信息
updateBannerInfo(crmBanner){
return request({
url: `/cmsservice/bannerAdmin/updateBanner`,
method: `post`,
data: crmBanner
})
},
}
- router路由
guli-admin\src\router\index.js
{
//幻灯片管理
path: '/banner',
component: Layout,
//redirect：重定向地址
redirect: '/banner/list',
name: '幻灯片列表',
//title:显示标签 ， icon：显示图标
meta: {
title: '幻灯片管理', icon: 'example' },
children: [
{
path: 'list',
name: '幻灯片列表',
component: () => import('@/views/edu/banner/list.vue'),
meta: {
title: '幻灯片列表', icon: 'table' }
},
{
path: 'save',
name: '添加跑马灯',
component: () => import('@/views/edu/banner/save.vue'),
meta: {
title: '添加幻灯片', icon: 'tree' }
},
{
path: 'edit/:id',
name: '幻灯片编辑',
component: () => import('@/views/edu/banner/save.vue'),
meta: {
title: '幻灯片编辑', noCache: true },
hidden: true
}
]
},
- banner页面
guli-admin\src\views\edu\banner\list.vue
.<template>
<div>
<!--多条件查询表单-->
<el-form
:inline="true"
class="demo-form-inline"
style="margin-left: 20px; margin-top: 12px"
>
<el-form-item label="名称">
<el-input
v-model="bannerQuery.name"
placeholder="请输入名称"
></el-input>
</el-form-item>
<el-form-item label="添加时间">
<el-time-picker
placeholder="选择开始时间"
v-model="bannerQuery.begin"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
type="datetime"
></el-time-picker>
</el-form-item>
<el-form-item>
<el-time-picker
placeholder="选择截止时间"
v-model="bannerQuery.end"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
type="datetime"
></el-time-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getList()"
>查询</el-button
>
<el-button type="default" @click="resetData()">清空</el-button>
</el-form-item>
</el-form>
<!--数据显示的表格-->
<el-table
:data="list"
style="width: 100%"
border
fit
highlight-current-row
element-loading-text="数据加载中"
>
<el-table-column prop="date" label="序号" width="70" align="center">
<template slot-scope="scope">
{
{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="title" label="名称" width="80"> </el-table-column>
<el-table-column prop="imageUrl" label="图片url" />
<el-table-column prop="linkUrl" label="链接地址" />
<el-table-column prop="gmtCreate" label="添加时间" width="160" />
<el-table-column prop="sort" label="排序" width="60" />
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<router-link :to="'/banner/edit/' + scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit"
>修改</el-button
>
</router-link>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="removeById(scope.row.id)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination
background
layout="prev, pager, next,total,jumper"
:total="total"
:page-size="limit"
style="padding: 30px 0; text-align: center"
:current-page="page"
@current-change="getList"
>
</el-pagination>
</div>
</template>
<script>
//引入要调用的方法，teacher.js文件
import banner from "@/api/teacher/banner.js";
export default {
//写核心代码位置
data() {
//1、定义变量和初始值
return {
list: null, //查询之后给接口返回的数据装的集合
page: 1, //当前页
limit: 10, //每页显示记录数
bannerQuery: {
}, //条件封装对象
total: 0, //总记录数
};
},
created() {
//页面渲染之前执行，调用method定义的方法
//调用
this.getList();
},
methods: {
//调用具体的方法，调用teacher.js定义的方法
//讲师列表的方法
getList(page = 1) {
this.page = page;
banner
.getBannerListPage(this.page, this.limit, this.bannerQuery)
.then((resp) => {
//resp接口返回的数据
// console.log(resp);
this.list = resp.data.rows;
console.log(this.list);
this.total = resp.data.total;
console.log(this.total);
}) //请求成功
.catch((err) => {
console.log(err);
}); //请求失败
},
//清空方法
resetData() {
//表单输入项数据清空
this.bannerQuery = {
};
//查询所有讲师数据
this.getList();
},
removeById(id) {
this.$confirm("此操作将永久删除该讲师记录, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
//点击确定，执行then方法
banner.removeById(id).then(resp => {
//删除成功
//提示信息
this.$message({
type: "success",
message: "删除成功!",
});
//刷新页面
this.getList();
});
});
},
},
};
</script>
<style></style>
- banner页面
guli-admin\src\views\edu\banner\save.vue
.<template>
<div class="app-container">
<el-form label-width="120px">
<el-form-item label="幻灯片名称">
<el-input v-model="banner.title" />
</el-form-item>
<el-form-item label="幻灯片排序">
<el-input-number
v-model="banner.sort"
controls-position="right"
:min="0"
/>
</el-form-item>
<el-form-item label="幻灯片url">
<el-input v-model="banner.imageUrl" />
</el-form-item>
<el-form-item label="link_url">
<el-input v-model="banner.linkUrl" :rows="10" type="textarea" />
</el-form-item>
<el-form-item>
<el-button
:disabled="saveBtnDisabled"
type="primary"
@click="saveOrUpdate"
>保存</el-button
>
</el-form-item>
</el-form>
</div>
</template>
<script>
//引入对应的新增api方法
import banner from "@/api/teacher/banner.js";
export default {
data() {
return {
banner: {
title: "",
sort: 0,
imageUrl: "",
linkUrl: "",
},
//上传弹框组件是否显示
imagecropperShow: false,
//上传组件key值
imagecropperKey: 0,
//获取dev.env.js里面的ip:端口号地址
BASE_API: process.env.BASE_API,
saveBtnDisabled: false, // 保存按钮是否禁用,
};
},
methods: {
saveOrUpdate() {
//判断修改还是新增操作
//根据teacher对象是否有id值来判断
if (!this.banner.id) {
//没有id值，做【新增操作】
this.saveBtnDisabled = true;
this.saveData();
} else {
//有id值，做【修改操作】
this.updateBanner();
}
},
//修改幻灯片的方法
updateBanner() {
banner.updateBannerInfo(this.banner).then((resp) => {
//提示信息
this.$message({
message: "修改幻灯片记录成功",
type: "success",
});
//回到幻灯片列表 路由跳转
this.$router.push({
path: "/banner/list" });
});
},
// 保存
saveData() {
banner.saveBanner(this.banner).then((resp) => {
//添加成功
//提示信息
this.$message({
message: "添加幻灯片记录成功",
type: "success",
});
//回到幻灯片列表 路由跳转
this.$router.push({
path: "/banner/list" });
});
},
//根据id查询，数据回显
getInfoById(id) {
banner.updateById(id).then((resp) => {
this.banner = resp.data.item;
});
},
init() {
//判断路径中是否有id值
if (this.$route.params && this.$route.params.id) {
//从路径中获取id值
const id = this.$route.params.id;
//调用根据id查询的方法
this.getInfoById(id);
} else {
this.banner = {
};
}
},
},
created() {
//在页面渲染之前
this.init();
},
watch: {
$route(to, from) {
//路由变化方式，当路由发送变化，方法就执行
console.log("watch $route");
this.init();
},
},
};
</script>
<style></style>
- 页面效果
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UtoI9K3q-1614845964240)(../../../../../AppData/Roaming/Typora/typora-user-images/image-20210304160702378.png)]](https://img-blog.csdnimg.cn/20210304162555417.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg0NDY5,size_16,color_FFFFFF,t_70)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9sNUGgf9-1614845964242)(../../../../../AppData/Roaming/Typora/typora-user-images/image-20210304160712291.png)]](https://img-blog.csdnimg.cn/2021030416254427.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjg0NDY5,size_16,color_FFFFFF,t_70)
- 测试