Java项目 (SpringBoot+SpringCloud) 十次方:前端(五) 网站前台-活动与招聘

1 服务端渲染技术NUXT

一.什么是服务端渲染

1. 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。
2. 与传统 SPA（Single-Page Application - 单页应用程序）相比，服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

二.什么是NUXT

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

三.NUXT环境搭建

1. 我们从网站上下载模板的压缩包 starter-template-master.zip 解压，修改template目录目录的package.json中的名称
2. 在命令提示符下进入该目录下的template目录
3. 安装依赖
   
4. 修改package.json
   
5. 修改nuxt.config.js
   
6. 测试运行
   

四.NUXT目录结构

1. 资源目录 assets
   用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
2. 组件目录 components
   用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
3. 布局目录 layouts
   用于组织应用的布局组件。
4. 页面目录 pages
   用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
5. 插件目录 plugins
   用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
6. nuxt.config.js 文件
   nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

五.NUXT快速入门

1. 定义布局
   我们通常的网站头部和尾部都是相同的，我们可以把头部为尾部提取出来，形成布局页
   修改layouts目录下default.vue
   
   <nuxt/>为内容的区域
2. 页面路由
   在page目录创建文件夹
   
   recruit目录创建index.vue
   
   gathering目录创建index.vue
   
   NUXT的路由是根据目录自动生成的，无需手写。
   修改default.vue，header中添加导航链接
   
   点击导航链接，测试路由效果
3. 数据渲染
   1. 安装axios，用于异步获取数据
      
   2. 修改gathering目录的index.vue
      
      asyncData是用于异步加载数据的方法
4. 动态路由
   如果我们需要根据ID查询活动详情，就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名
   创建pages/gathering/item/_id.vue
   
   我们在地址栏输入 http://localhost:3000/gathering/item/1 即可看到运行结果
   在活动列表页点击链接进入详情页
   
   目前 nuxt‐link 的作用和 router‐link 一致 ，都是进行路由的跳转。