小帽学堂

十七、搭建项目前台环境

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 应用的个性化配置，以便覆盖默认配置。

3. NUXT 框架介绍


4. 整合项目首页面

  • 幻灯片插件

    • 安装插件

      • npm install vue-awesome-swiper@3.1.3
    • 配置插件
      • 在 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><!-- / 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.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：info@lemon.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>
  • 定义首页面（不包含幻灯片）
    • 修改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"><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">曼彻斯特大学计算机实验室的副主任，负责最早的真正的计算机---曼彻斯特一号的软件工作。</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">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="#">价格&nbsp;<span>↓</span></a></li></ol></section></div><div class="mt40"><!-- /无数据提示 开始--><section class="no-data-wrap"><em class="icon30 no-data-ico">&nbsp;</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"><imgsrc="~/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"><imgsrc="~/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"><ahref="/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"><imgsrc="~/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>&lt;</a><a href="#" title class="current undisable">1</a><a href="#" title>2</a><a id="nextpage" href="#" title>&gt;</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.00</b></section><section class="c-attr-mt c-attr-undis"><span class="c-fff fsize14">主讲： 唐嫣&nbsp;&nbsp;&nbsp;</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>&nbsp;</p><aside><span class="c-fff f-fM">购买数</span><br><h6 class="c-fff f-fM mt10">150</h6></aside></li><li><p>&nbsp;</p><aside><span class="c-fff f-fM">课时数</span><br><h6 class="c-fff f-fM mt10">20</h6></aside></li><li><p>&nbsp;</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&nbsp;Microsystem公司为了发展消费性电子产品而进行了一个名为Green的项目计划。该计划负责人是James&nbsp;Gosling。起初他以C++来写一种内嵌式软件，可以放在烤面包机或PAD等小型电子消费设备里，使得机器更聪明，具有人工智能。但他发现C++并不适合完成这类任务！因为C++常会有使系统失效的程序错误，尤其是内存管理，需要程序设计师记录并管理内存资源。这给设计师们造成极大的负担，并可能产生许多bugs。&nbsp;<br>为了解决所遇到的问题，Gosling决定要发展一种新的语言，来解决C++的潜在性危险问题，这个语言名叫Oak。Oak是一种可移植性语言，也就是一种平台独立语言，能够在各种芯片上运行。<br>1994年，Oak技术日趋成熟，这时网络正开始蓬勃发展。Oak研发小组发现Oak很适合作为一种网络程序语言。因此发展了一个能与Oak配合的浏览器--WebRunner，后更名为HotJava，它证明了Oak是一种能在网络上发展的程序语言。由于Oak商标已被注册，工程师们便想到以自己常享用的咖啡(Java)来重新命名，并于Sun&nbsp;World&nbsp;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">&nbsp;</em>第一节</a></li><li class="lh-menu-second ml30"><a href="#" title class="current-2"><em class="lh-menu-i-2 icon16 mr5">&nbsp;</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><!-- <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">&nbsp;</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"><spanclass="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="前一页">&lt;</a><a href="#" title="第1页" class="current undisable">1</a><a href="#" title="第2页">2</a><a href="#" title="后一页">&gt;</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">姚晨&nbsp;高级讲师</span></h3><section class="mt10"><span class="t-tag-bg">北京师范大学法学院副教授</span></section><section class="t-infor-txt"><pclass="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)">&nbsp;</a></section></header><!-- /无数据提示 开始--><section class="no-data-wrap"><em class="icon30 no-data-ico">&nbsp;</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>

【项目】小帽学堂（十一①）相关推荐

  1. 【项目】小帽学堂（十）

    小帽学堂 29. 删除视频接口 // src\views\edu\course\chapter.vue // 点击x调用的方法// 点击确定调用的方法handleVodRemove() {// 调用接 ...

  2. 【项目】小帽学堂（三）

    小帽学堂 第六章 统一异常处理 创建统一异常处理器 在service-base中创建统一异常处理类GlobalExceptionHandler.java // com.alex.servicebase ...

  3. 【项目】小帽学堂（十三）

    小帽学堂 十九.微信扫描登录 1. OAuth2 介绍 1.1 OAuth2解决什么问题 1.1.1 OAuth2提出的背景 照片拥有者想要在云冲印服务上打印照片,云冲印服务需要访问云存储服务上的资源 ...

  4. 【项目】小帽学堂（十二）

    小帽学堂 十八.首页登录和注册 1. 登录业务介绍(单点登录) 单一服务器模式 早期单一服务器,用户认证. 缺点:单点性能压力,无法扩展 SSO(single sign on)模式(单点登录) 分布式 ...

  5. node.js+Vue计算机毕设项目春晓学堂管理系统（程序+LW+部署）

    该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流 项目运行 环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...

  6. 从程序员到项目经理（十一）：每个人都是管理者

    从程序员转为项目经理,这是一个巨大的跨越.一个新任的项目经理,对项目管理找不到感觉,一般也被认为是一件正常的事情.这是否意味着,一定要等到当上了项目经理才能学习项目管理吗?一定要做砸一个项目才能成长为 ...

  7. CRM项目记录（十一）

    目录: (1)交易功能实现 (2)交易添加功能  (3)交易添加功能 实现可能性配置 (4)交易添加功能 实现客户名称自动补全 (5)交易添加功能实现 (6)交易添加功能实现2  (7)交易明细 (1 ...

  8. 项目人力资源管理·十一

    第十三章 项目人力资源管理 关键词:项目人力资源管理,马斯洛需求模型,赫茨伯格双因素理论,领导与管理,项目团队建设和项目团队管理 1 项目人力资源管理概述 项目人力资源管理包括制定人力资源管理计划.项 ...

  9. 清北学堂十一培训酱油记

    [day0] 要坐大巴去北京--(没错是大巴!)然而说好的六点走,生生等到了七点--不过一路上还是很happy的!@某导游兔子 然而到华电之后,身子都散架了--这次的酒店在北农,感觉还可以,跟华电里面 ...

最新文章

  1. normest--2-范数的条件数估计
  2. 央视新闻联合百度智能云打造的首个“冬奥AI手语主播”来了
  3. flash调用js中的方法，让js传递变量给flash (兼容 IE FF) (转)
  4. Dojo API中文 Dojo内容模块概览，初学者
  5. Spring 最常用的 7 大类注解，女媛史上最强整理！
  6. P1081 开车旅行
  7. GetUserName()第二个参数中指明缓冲区长度
  8. C#窗体标准计算器（下） 初级新手请多担待。
  9. Flex 加载Base64编码的二进制字符串图片
  10. 数据统计分析常用指标
  11. 11.绘制统计图形——误差棒图
  12. through mysql.sock_MySQL server through socket '/tmp/mysql.sock' (2)
  13. OpenMP 快速入门
  14. 移动端苏宁首页制作和rem
  15. 浅析TVS管和ESD有什么区别？
  16. MTK Android8.1 UI之蓝牙和WiFi
  17. 【编译原理】活动记录
  18. python概率游戏_Python计算斗牛游戏的概率
  19. 10天拿下字节跳动offer! 阿里P8指路：9大面试误区+字节面经分享
  20. 科技改变命运，与科技对话探知未来

热门文章

  1. android 手机强制关机代码,安卓手机如何强制关机？安卓手机强制关机方法[多图]...
  2. HDMI_CS4344调试说明
  3. pymysql获取要查询的字段名（列名）
  4. 用C语言实现菱形图案
  5. 2018-NIPS-论文网址
  6. java必背综合知识点总结(基础篇)
  7. 公有ip地址和私有ip地址_如何查找您的私有和公共IP地址
  8. 计算机睡眠伤硬盘,放开那块硬盘！聊聊Win8伤盘那些事
  9. AI_综述----图像分割综述
  10. 鸿蒙支持lOS,读了鸿蒙 OS 的代码后，我发现优秀项目都有这个共性！