（前端版）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(′action方法名′,值)commit：同步操作，写法：this.store.dispatch('action方法名',值) commit：同步操作，写法：this.store.dispatch(′action方法名′,值)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的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。

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

Android开源框架Afinal第一篇——揭开圣女的面纱
Android开源框架Afinal第一篇--揭开圣女的面纱分类: Android开源框架哪点事2013-09-02 14:25 260人阅读评论(0) 收藏举报 Afinal 这是Afinal在 ...
RuoYi(若依开源框架)-前后台分离版-后端流程简单分析
[项目结构] ├── common // 工具类 │ └── annotation // 自定义注解 │ └── config // 全局配置 │ └── constant // 通用常量 │ └── ...
Java 最著名的开源框架（第一部分）
Spring Framework [J2EE框架] *Spring 是一个解决了许多在J2EE开发中常见的强大框架. *Spring 提供了管理业务对象的一致方法并且鼓励了注入对接口编程而不是对类编程 ...
Maplab：一个用于视觉惯性建图和定位研究的开源框架
摘要鲁棒且精确的视觉惯性估计是当今机器人领域的重要挑战.能够用先验地图(prior map)进行定位(localize)并获得准确且无漂移的姿态估计,可以推动该系统的适应性.然而,目前大多数可用的解 ...
苹果推出开源医学研究框架ResearchKit
苹果推出用于医学和健康研究的开源框架ResearchKit,帮助医生和科学家更经常地从使用iPhone App的参与者那里收集到更准确的数据. \\ 医学研究人员需要大量的数据,但目前最大的挑战是招募 ...
自研开源框架 Midway Serverless ，让前端提效 50% 背后的故事
简介:去年开始,阿里前端及阿里的多个团队联合开始了一项"秘密"任务,使用 Serverless 这一新一代研发架构,希望能大量减少研发人员使用基础设施和运维的成本. 作者 | 陈仲 ...
恐龙快跑小程序对接流量主源码+前端 v5.0.4 全开源微擎框架
简介: 恐龙快跑小程序对接流量主源码+前端 v5.0.4 全开源优点: 首页流量主赚取收益用户冲分领奖品机制,冲到某个分数即可兑换相应奖品用户游戏死亡后需要充值金币或者转发给好友获取金币复活. 盈 ...
面试经常被问到这 4 大开源框架，必须得好好研究一下了！
对于开发来说,我们在工作中普遍都会用到各个开源框架,比如最基础的 Spring,使开发网络编程变得特别简单的 Netty 框架,还有成为目前微服务框架首选的 Spring Cloud 等.在多个框架之 ...
前端开发必要的9个开源框架
当人们想到Web开发时,通常会想到HTML或JavaScript,而常常忽略CSS,据Wikipedia称,CSS不仅是网页中最重要也是最容易被遗忘的部分之一,尽管它是万维网的三大基础技术之一. 今天 ...

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

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

登录调用

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

最新文章

热门文章