（前端版）RuoYi(若依开源框架)研究第一天

前端版RouYi（开源框架）研究第一天

项目结构
├── build // 构建相关
├── bin // 执行脚本
├── public // 公共文件
│ ├── favicon.ico // favicon图标
│ └── index.html // html模板
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── layout // 布局
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── utils // 全局公用方法
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ ├── permission.js // 权限管理
│ └── settings.js // 系统配置
├── .editorconfig // 编码格式
├── .env.development // 开发环境配置
├── .env.production // 生产环境配置
├── .env.staging // 测试环境配置
├── .eslintignore // 忽略语法检查
├── .eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── babel.config.js // babel.config.js
├── package.json // package.json
└── vue.config.js // vue.config.js

登录调用

(1)login.vue->handleLogin()->validate提交表单，校验，调用store/user.js->Login({commit}),userInfo
(2)全局管控store/user.js->Login(),调用api/login.js->login(username, password, code, uuid)
(3)请求接口api/login.js->login(),请求前utils/request.js->service.interceptors.request.use()请求拦截器
（4）请求拦截器service.interceptors.request.use(),设置token,utils/auth.js
(5)请求接口api/login.js->login()发起请求
(6)响应拦截器验证响应信息没有问题后，就会通过路由修改路径到index.vue

登录调用代码详解
【1】login.vue ->handleLogin()->validate 提交表单,校验,调用store/user.js->Login()
【-----------------login.vue--------------------】


dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch{(}^{\prime }action方法{名}^{\prime },值)commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)
.then()方法：主要用于一个函数要用到另一个函数返回的值，
用户通过vue的router.push和router.replace来修改地址栏。同时监控地址栏。获取到对应组件，去配置信息里面寻找对应的页面显示

【2】全局管控store/user.js->Login()，调用api/login.js->login(username, password, code, uuid)
【-----------------store/user.js--------------------】

【3】请求接口api/login.js->login(),请求前utils/request.js->service.interceptors.request.use()请求拦截器
【-----------------api/login.js--------------------】

【4】请求拦截器service.interceptors.request.use()，设置token，utils/auth.js
【-----------------utils/request.js--------------------】

【5】【-----------------utils/auth.js--------------------】

【6】响应拦截器验证响应信息没有问题后，就会通过路由修改路径到index.vue
【-----------------router/index.js--------------------】

vue-router是基于路由和组件的路由用于设定访问路径，将路径和组件映射起来。在vue-router的单页面应用中, 页面的路径的改变就是组件的切换。

【-----------------相关技术--------------------】
【1】vue表单验证（form）validate
默认校验

默认消息

【2】vuex状态管理
一、状态管理（vuex）简介
vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。
二、状态管理核心
状态管理有5个核心，分别是state、getter、mutation、action以及module。分别简单的介绍一下它们：
开始使用vuex，新建一个 sotre文件夹，分开维护 actions mutations getters

1、state
state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态
2、getter
getter有点类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。
3、mutation
更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。
4、action
action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action，则需要执行store.dispatch

【3】Token
1、Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。
2、Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
3、使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。