qq_45835078的博客

2021SC@SDUSC目录登录方法感悟接着分析登录源码，上篇文章分析到了loginApi方法 ，源码如下：async loginApi() { let obj = { loginName: this.loginForm.loginName, password: transPsw(this.loginForm.password), verifyCode: "" }; const { code, data

2021SC@SDUSC目录mounted密码填充监听路由对象登录验证码本次分析登录页面源码，页面位于src/views/login.vue，页面如下：mounted当我们进入此界面的时候，会触发vue周期函数中的mounted函数：mounted() { if (this.loginForm.loginName === "") { this.$refs.loginName.focus(); } else if (this.log..

2021SC@SDUSC本文分析“系统设置”中的“数据字典”页面，源码位于src/views/dict/index.vue，页面如下：总体源码如下：<template> <anji-crud ref="listPage" :option="crudOption"> <template v-slot:buttonLeftOnTable> <el-button type="primary" icon="el-icon-edit.

2021SC@SDUSC本次分析“系统设置”中的“文件管理”界面，如下：页面对应的源码在src/views/file-management/index.vue。大体源码如下：<template> <anji-crud ref="listPage" :option="crudOption"> <template v-slot:buttonLeftOnTable> <el-upload class="..

2021SC@SDUSC目录用户管理界面分配角色弹框卡槽源码用户管理界面本次分析下面界面：这个页面和“权限管理”页面所用的模板组件大部分是相同的，但是页面本身是不同的。分配角色弹框<template slot="rowButton" slot-scope="props"> <el-button type="text" @click="handleOpenDialogSetRoleForUser(pro..

2021SC@SDUSC目录router导航守卫afterEach 全局后置钩子在AJ-Report项目分析（7）中我们分析了登录相关的内容，其中分析了token的使用。本文将从token出发，分析每次请求，是如何通过token来验证是否需要登录的。我们本次分析的是src/permisson.js文件源码每次跳转页面的样式import NProgress from 'nprogress' import 'nprogress/nprogress.css' 这两行代码..

2021SC@SDUSC目录登录相关vuex store的使用token相关什么是token：登录时的request拦截器登录时的response拦截器本文分析一下与登录相关的js文件登录相关首先分析src/utils/request.js文件，源码如下：import axios from 'axios'import { Message, MessageBox } from 'element-ui'import store from '../store'i

2021SC@SDUSC本文不再分析页面，前文已经分析了一个页面，由于很多组件都是共享的，其他页面使用了相同的组件，可供分析的代码就少了很多。本文开始分析项目中的js文件，着重分析url的生成与发送。js文件在src/api下url生成axios请求首先看axios.js文件import axios from 'axios';import {Message, MessageBox} from 'element-ui';第一行代码引入了axios，使得我们可以在vu..

2021SC@SDUSC继续分析：在上篇文章AJ-Report项目分析（4）中，我们着重分析了此页面对应源码中的button源码，接下来我们分析button之后的column源码： // 表格列 columns: [ { label: "", field: "id", primaryKey: true, tableHide: true, .

2021SC@SDUSC目录button源码handleQueryForm（）源码handleQueryPageList（）源码我们继续分析如下页面。因为很多组件都是可以复用的，我们通过此页面中包含组件的分析，以后分析其他页面时就会轻松很多。我们在AJ-Report项目源码分析（3）中已经分析完了queryFormFieds 源码以及anji-tree组件的源码，我们本文分析之后的源码。button源码 buttons: { query.

2021SC@SDUSC目录查询表单条件queryFormFiedsanji-tree源码我们继续来分析下面页面：我们今天主要分析的是anji-tree的源码。查询表单条件queryFormFieds在src/views/accessAuthority/index.vue源码中可以看到 查询条件queryFormFieds 的代码，如下： { inputType: "anji-tree", ...

2021SC@SDUSC本次分析的是src/views/accessAuthority/index.vue的部分源码，这是权限管理模块页面的源码，页面如下：下面开始源码分析 <anji-crud ref="listPage" :option="crudOption"> <template v-slot:buttonLeftOnTable> </template> </anji-crud>这段代码是页面展示的关键，temp

2021SC@SDUSC项目分工前端模块如下图，我负责的是前端的用户权限模块和系统设置模块。启动项目环境：前端：node.js vue element-ui后端：maven，jdk1.8+，springboot源码地址：https://gitee.com/anji-plus/report后端：把report-core文件夹导入到idea中，修改eport-core --> src --> main --> resources --> boots..