【项目】小帽学堂（十一①）
小帽学堂
十七、搭建项目前台环境
1. 服务端渲染技术NUXT
- 什么是服务端渲染
- 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。
- 服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
- 如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。
- 另外，使用服务器端渲染，我们可以获得更快的内容到达时间(time-to-content)，无需等待所有的 JavaScript 都完成下载并执行，产生更好的用户体验，对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。
- 什么是NUXT
- Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。
2. NUXT环境初始化
- 下载压缩包
- https://github.com/nuxt-community/starter-template/archive/master.zip
- 解压
- 将template中的内容复制到 vue-front
- 安装ESLint
- 将vue-admin项目下的.eslintrc.js配置文件复制到当前项目下
- 修改package.json
- name、description、author（必须修改这里，否则项目无法安装）
"name": "vue-front",
"version": "1.0.0",
"description": "小帽学堂前台网站",
"author": "Alex",
- 修改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' }
]
},
- 在命令提示终端中进入项目目录
- 安装依赖 npm install
- 测试运行 npm run dev
- NUXT目录结构
- 资源目录 assets
- 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
- 组件目录 components
- 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
- 布局目录 layouts
- 用于组织应用的布局组件。
- 页面目录 pages
- 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
- 插件目录 plugins
- 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
- nuxt.config.js 文件
- nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。
- 资源目录 assets
3. NUXT 框架介绍
4. 整合项目首页面
- 幻灯片插件
- 安装插件
- npm install [email protected]
- 配置插件
- 在 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节点下
module.exports = { // some nuxt config... plugins: [ { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false } ], css: [ 'swiper/dist/css/swiper.css' ] }
- 安装插件
5. 页面布局
- 复制静态资源
- 将静态原型中的css、img、js、photo目录拷贝至assets目录下
- 将favicon.ico复制到static目录下
- 定义布局
- 我们可以把页头和页尾提取出来，形成布局页
- 修改layouts目录下default.vue，从静态页面中复制首页，修改了原始文件中的资源路径为~/assets/，将主内容区域的内容替换成
- 内容如下：
<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> <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> 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.baidu.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：[email protected]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> - 定义首页面（不包含幻灯片）
- 修改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" >曼彻斯特大学计算机实验室的副主任，负责最早的真正的计算机---曼彻斯特一号的软件工作。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> - 幻灯片插件
<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>
export default {
data () {
return {
swiperOption: {
//配置分页
pagination: {
el: '.swiper-pagination'//分页的dom节点
},
//配置导航
navigation: {
nextEl: '.swiper-button-next',//下一页dom节点
prevEl: '.swiper-button-prev'//前一页dom节点
}
}
}
}
}
script>
6. 整合课程和名师页面
-
路由
-
固定路由
- 使用router-link构建路由，地址是/course
<router-link to="/course" tag="li" active-class="current"> <a>课程a> router-link>- 在page目录创建文件夹course ，在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">1i>/ <i class="c-666 f-fM">1i> 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">1a> <a href="#" title>2a> <a id="nextpage" href="#" title>>a> <a href="#" title>末a> <div class="clear">div> div> div> section> section> div> template> <script> export default {}; script>- 动态路由
- 创建方式
- 如果我们需要根据id查询一条记录，就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名
- 在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.00b> 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">150h6> aside> li> <li> <p> p> <aside> <span class="c-fff f-fM">课时数span> <br> <h6 class="c-fff f-fM mt10">20h6> aside> li> <li> <p> p> <aside> <span class="c-fff f-fM">浏览数span> <br> <h6 class="c-fff f-fM mt10">501h6> 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> -
-
讲师页面同理
// 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>
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">曼彻斯特大学计算机实验室的副主任，负责最早的真正的计算机---曼彻斯特一号的软件工作。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">
<a href="#" title="首页">首a>
<a href="#" title="前一页"><a>
<a href="#" title="第1页" class="current undisable">1a>
<a href="#" title="第2页">2a>
<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
<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>