Java项目 (SpringBoot+SpringCloud) 十次方:前端(四) 路由与状态管理

1 路由vue-router

一.什么是vue-router

1. vue-router就是vue官方提供的一个路由框架。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

二.快速入门

1. 初始化工程
   
2. 路由定义
   src/App.vue是我们的主界面，其中的 标签用于显示各组件视图内容
   src/router/index.js是定义路由的脚本 path是路径， name是名称 ，component是跳转的组件 。
   1. 我们现在定义两个页面组件，存放在src/components下
      list.vue
      
      about.vue
      
   2. 定义路由
      修改src/router/index.js
      
      1. 放置跳转链接
         修改src/app.vue ,添加链接
         
         通过router-link标签实现路由的跳转

2 招聘管理

一.  准备工作

1. 代码生成
   连接数据库tensquare_recruit
   将api 与vue页面拷贝到当前工程
2. 路由设置
   
3. easyMock接口导入
   将swaggerAPI文档导入到easyMock中。

二.企业管理

1. 企业简介（文本域）
   修改src/views/table/enterprise.vue
   
2. 是否热门（开关）
   修改src/views/table/enterprise.vue编辑窗口中是否热门部分
   
3. 网址输入（复合型输入框）
   
4. 上传Logo
   参见elementUI官方文档 http://element-cn.eleme.io/#/zh-CN/component/upload（用户头像上传）实现Logo上传
   1. 页面添加上传组件
      
      action用于定义提交的服务器地址
      show-file-list 是否显示已上传文件列表
      before-upload 在上传之前被调用，用于判断图片类型和大小
      on-success 在上传成功之后被调用，用于获取服务器上的文件名
   2.  添加样式：
      
   3. 代码：
      data添加属性
      
      methods增加方法
      

三.招聘管理

1. 任职方式(单选按钮)
   修改src/views/table/recruit.vue
   
2. 选择企业(可搜索下拉选择框)
   1. 修改src/views/table/recruit.vue 增加变量--企业列表
      
   2. 修改created()
      
   3. 修改弹出窗口部分，将文本框替换为下拉框
      
3. 删除创建日期
   创建日期是在后端自动生成的，所以要在弹出窗口中删除控件
4. 状态（开关）
   修改src/views/table/recruit.vue
   

3 文章管理

一.准备工作

1. 代码生成
   连接数据库tensquare_article
   将api 与vue页面拷贝到当前工程
2. 路由设置
   
3. easyMock接口导入
   将swaggerAPI文档导入到easyMock中。

二.专栏审核

1. 修改easyMock数据
   URL: article/column/search/{page}/{size}
   
2. 待审核专栏列表
   修改src/table/column.vue ,修改data变量的值
   
3. 专栏审核
   1. 修改src/api/column.js ,新增专栏审核方法
      
   2. 增加方法定义
      
   3. 审核按钮
      

三.文章审核

1. 修改easyMock接口
   URL: /article/article/search/{page}/{size}
   
2. 待审核文章列表
   修改src/table/article.vue ,修改data变量的值
   
3. 文章详情窗口
   点击“详情”按钮打开窗口，显示标题和正文 v-html用于显示富文本内容。
   
4. 文章审核与删除
   1. 修改src/api/article.js，增加文章审核的方法
      
   2. 修改src/views/table/article.vue，增加方法
      
   3. 新增审核和删除按钮
      
   4. 删除方法添加代码
      

4 状态管理Vuex

我们经过测试会发现，用户登陆后可以访问其它页面的资源。未登录或退出登录后，再次访问资源会跳回到登陆页，这是如何实现的呢？长话短说，这是通过一种叫Vuex的技术来实现的。

一.Vuex简介

1. 官方的解释： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2. 快速理解：每个组件都有它自己数据属性，封装在data()中，每个组件之间data是完全隔离的，是私有的。如果我们需要各个组件都能访问到数据数据，或是需要各个组件之间能互相交换数据，这就需要一个单独存储的区域存放公共属性。这就是状态管理所要解决的问题。

二.快速入门

1. 工程搭建
   
2. 读取状态值
   每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
   1. 在src下创建store，store下创建index.js
      
   2. 修改main.js，引入和装载store
      
   3. 修改components\HelloWorld.vue
      
3. 改变状态值
   你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
   1. 修改store/index.js ,增加mutation定义
      
   2. 修改components\HelloWorld.vue ，调用mutation
      
      测试： 运行工程，点击测试按钮，我们会看到控制台和页面输出递增的数字
4. 状态值共享测试
   如果是另外一个页面，能否读取到刚才我在HelloWorld中操作的状态值呢？我们接下来就做一个测试
   1. 在components下创建show.vue
      
   2. 修改路由设置 router/index.js
      
      测试： 在HelloWorld页面点击按钮使状态值增长，然后再进入show页面查看状态值
5. 提交载荷
   所谓载荷（payload）就是 向 store.commit 传入额外的参数。
   1. 修改store下的index.js
      
   2. 修改HelloWorld.vue
      
6. Action
   Action 类似于 mutation，不同在于：
   Action 提交的是 mutation，而不是直接变更状态。
   Action 可以包含任意异步操作。
   我们现在使用 Action 来封装increment
   1. 修改store/index.js
      
   2. 修改show.vue
      
      我们使用dispatch来调用action , Action也同样支持载荷
7. 派生属性Getter
   1. 修改store/index.js ,增加getters定义
      
      Getter 接受 state 作为其第一个参数，也可以接受其他 getter 作为第二个参数
   2. 修改HelloWorld.vue 显示派生属性的值
      

三.模块化

1. 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
   为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割 .参见以下代码模型
   
   我们现在就对工程按模块化进行改造
   1. 修改store/index.js
      
   2. 修改HelloWorld.vue和show.vue
      
2. 标准工程结构
   如果所有的状态都写在一个js中，这个js必定会很臃肿，所以Vuex建议你按以下代码结构来构建工程
   
   我们现在就按照上面的结构，重新整理以下我们的代码：
   1. store下创建modules文件夹，文件夹下创建a.js
      
   2. store下创建getters.js
      
   3. 修改store/index.js
      
   4. 修改HelloWorld.vue