当前位置: 首页 > 工具软件 > RuoYi > 使用案例 >

RuoYi(若依开源框架)-前后端分离版-前端流程简单分析

商经业
2023-12-01

RuoYi(若依开源框架)-前后端分离版-前端流程简单分析

项目结构

├── 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--------------------】

loginForm: {
        username: "admin",
        password: "admin123",
        rememberMe: false,
        code: "",  
        uuid: ""
      },
 this.$store.dispatch("Login", this.loginForm).then(
                () => {
                        this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
                }
        ).catch(
                () => {
                 this.loading = false;
            if (this.captchaOnOff) {
              this.getCode();
            }
          }
          );
dispatch:含有异步操作,例如向后台提交数据,写法: 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--------------------】

Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      const password = userInfo.password
      const code = userInfo.code
      const uuid = userInfo.uuid
      return new Promise((resolve, reject) => {
        
        login(username, password, code, uuid).then(res => {
          setToken(res.token)
          commit('SET_TOKEN', res.token)
          resolve()
          
        }).catch(error => {
          reject(error)
        })
      })
    },

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

【-----------------api/login.js--------------------】

// 登录方法
export function login(username, password, code, uuid) {
  const data = {
    username,
    password,
    code,
    uuid
  }
  return request({
    url: '/login',
    method: 'post',
    data: data
  })
}

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

【-----------------utils/request.js--------------------】

service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
  if (config.method === 'get' && config.params) {
    let url = config.url + '?';
    for (const propName of Object.keys(config.params)) {
      const value = config.params[propName];
      var part = encodeURIComponent(propName) + "=";
      if (value !== null && typeof(value) !== "undefined") {
        if (typeof value === 'object') {
          for (const key of Object.keys(value)) {
            let params = propName + '[' + key + ']';
            var subPart = encodeURIComponent(params) + "=";
            url += subPart + encodeURIComponent(value[key]) + "&";
          }
        } else {
          url += part + encodeURIComponent(value) + "&";
        }
      }
    }
    url = url.slice(0, -1);
    config.params = {};
    config.url = url;
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

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

import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
export function getToken() {
  return Cookies.get(TokenKey)
}
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}
export function removeToken() {
  return Cookies.remove(TokenKey)
}

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

【-----------------router/index.js--------------------】

{
    path: '',
    component: Layout,
    redirect: 'index',
    children: [
      {
        path: 'index',
        component: (resolve) => require(['@/views/index'], resolve),
        name: '首页',
        meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
      }
    ]
  }

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

【-----------------相关技术--------------------】

【1】vue表单验证(form)validate

   默认校验
    (1)、required:true               必输字段
    (2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
    (3)、email:true                  必须输入正确格式的电子邮件
    (4)、url:true                    必须输入正确格式的网址
    (5)、date:true                   必须输入正确格式的日期,日期校验ie6出错,慎用
    (6)、dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
    (7)、number:true                 必须输入合法的数字(负数,小数)
    (8)、digits:true                 必须输入整数
    (9)、creditcard:true             必须输入合法的信用卡号
    (10)、equalTo:"#password"        输入值必须和#password相同
    (11)、accept:                    输入拥有合法后缀名的字符串(上传文件的后缀)
    (12)、maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
    (13)、minlength:10               输入长度最小是10的字符串(汉字算一个字符)
    (14)、rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
    (15)、range:[5,10]               输入值必须介于 5 和 10 之间
    (16)、max:5                      输入值不能大于5
    (17)、min:10                     输入值不能小于10
 默认消息
    messages: {
            required: "This field is required.",
            remote: "Please fix this field.",
            email: "Please enter a valid email address.",
            url: "Please enter a valid URL.",
            date: "Please enter a valid date.",
            dateISO: "Please enter a valid date (ISO).",
            dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
            number: "Please enter a valid number.",
            numberDE: "Bitte geben Sie eine Nummer ein.",
            digits: "Please enter only digits",
            creditcard: "Please enter a valid credit card number.",
            equalTo: "Please enter the same value again.",
            accept: "Please enter a value with a valid extension.",
            maxlength: $.validator.format("Please enter no more than {0} characters."),
            minlength: $.validator.format("Please enter at least {0} characters."),
            rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
            range: $.validator.format("Please enter a value between {0} and {1}."),
            max: $.validator.format("Please enter a value less than or equal to {0}."),
            min: $.validator.format("Please enter a value greater than or equal to {0}.")
    },

【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的目的是为了减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。
 类似资料: