Fork me on GitHub

玲珑金管家-交接文档

发表于 | 更新于: | 分类于
字数统计: 2,311 | 阅读时长 ≈ 9

项目构建

实现方式

通过vue-cli实现基本项目的搭建

自定义配置方面

打包命令区分环境

  1. package.json中设置打包命令
1
"uat": "node build/uat.js",

  1. 新建打包配置文件

  2. 在webpack.prod.conf配置不同的环境变量

  3. 在config里面新建相对应的环境变量

1
2
3
4
'use strict'
module.exports = {
  NODE_ENV: '"uat"'
}
  1. 在项目中使用process.env.NODE_ENV来获取不同的环境变量；

配置代理地址

  1. 在config/index.js里面配置

  2. 配置方式

1
2
3
4
5
6
7
8
9
10
11
proxyTable: {
    '/hyacp': {
        // '*': {
        target: 'https://yunyingtest.huanyueguoji.com',
        // target: 'http://192.168.1.168:8091/',
        changeOrigin: true,
        pathRewrite: {
            '^/hyacp': '/hyacp'
        }
    }
},

  1. 基本作用

    • 用于请求后台数据==》调用接口
    • 解决可能会存在的跨域问题；

vue相关配置

vue的use方法

1
Vue.use(iView)

基本原理就是通过模块化外放一个变量，内置有一个install方法，vue调用use方法的时候，可以理解为调用了install，并且将vue实例作为实参传递进去

1
2
3
4
5
export default {
    install: function(Vue) {

    }
}

axios的相关配置

  1. 通过axios的create方法统一配置axios的配置项
  2. 通过promise封装axios来区别后天返回的成功或失败(在状态值为200的成功)
  3. 在axios的请求钩子函数中统一处理请求数据

路由

此项目除了登录页，其他页面都是有相同的菜单栏，所以使用路由嵌套的方式
在app.vue中为1级路由；
在home.vue中为2级路由；

关于vuex

  1. 数据共享；

  2. 数据发生改变之后，凡是用到这个数据的地方都会发生改变；

  3. 在咱们项目中vuex的数据：menu的层级数据；

vuex使用步骤
  1. 声明实例化
1
2
3
4
5
6
7
8

Vue.use(Vuex);
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
})
  1. 在vue实例化的时候挂载到vue
1
2
3
4
5
6
7
const vm = new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

  1. 关于四个属性

    • status：存放变量（状态）
    • mutations：存储更改变量的方法
    • action：涉及到异步；

  2. 获取变量

1
2
3
4
5
6
7
8
9
10
11
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
  computed: mapState({
    power: state => state.power,
    shrinked: state => state.shrinked,
    tabData: state => state.tabData
  }),
  //通过this.power获取到相应变量

  computed: {
    ...mapState(['pSwiperModal', 'pSwiperPicList'])
  },
  1. 更改变量（状态）
    通过mapMutations等方法将函数挂载到method下面就可以了直接调用了
1
2
3
4
5
6
7
...mapMutations([
   'setPowerM',
   'pathPushM',
   'setTabList',
   'setTabChoosed',
   'setPermList'
 ]),

后台管理系统

home.vue

home文件主要有layout.vue组成，包括左侧菜单，右侧头部，右侧主要内容，这些主要有插槽来实现的

vue插槽

  1. 确定插槽位置
1
<slot name='logo'></slot>
  1. 设置插槽的主要内容
    template、组件、div都可以作为插槽，主要设置slot属性即可
    1
    2
    <e-menu slot='menu' :openNames='openNames'>
    </e-menu>

左侧菜单

  • 这个是有ivew的menu功能实现的

  • 最多实现三级菜单

  • 数据由后台接口或者menu.js的all属性（关闭权限之后）提供

数据渲染步骤

  • 在router/index.js中判断权限开关是否打开

  • 打开的情况下请求接口获取权限list数据，使用方法分出层级结构，将数据赋值给menu.js中的list属性

  • 在关闭的情况下，直接获取menu.js的all属性的值，赋值给menu.js的list属性

  • 在home.vue中获取menu.js的值并通过vuex保存；

  • 在menu.vue中获取vuex中的数据，渲染页面

需求

  1. 在右侧打开一系列菜单
  2. 保存菜单中的操作；

实现

  1. 新建一个vue文件(menu.vue)用来展示选项卡；
  2. 新建一个list数据(vuex)用来存放选项卡数据；
  3. 新建一个标志位用来判断当前那个选项卡展示(vuex:choosed)；
  4. 点击菜单需要为list增加数据并且改变标志位的值；
    • 获取点击菜单的key判断在一开打的选项卡中有无该key值
    • 有，直接将choosed的值改为该key值；
    • 没有，将list中push该菜单，并且改变choosed的值；
    • 不管又或者没有，都需要获取该菜单的fakId来记录哪一个菜单被打开(openNames)；
  5. 点击关闭选项卡功能的时候，为list删除数据并且改变标志位的值；
    • 获取点击的选项卡的index值；
    • 通过方法从list数据中删除该选项卡；
    • 判断如果删的此index还在选中此index值
    • 如果index值不在，选中index-1的值；
  6. 需要在本地以及vuex中缓存数据；
    • 删除也好或者增加也好都是通过调用vuex的方法来实现的
    • 并且更改vuex数据的同时更改session中的数据；
    • 在session中存数据的目的是页面刷新之后能够记录打开的选项卡
    • 在home.vue中会先去session中获取数据然后存储到vuex中
  7. 在展示当前选中组件的时候，需要找一个文件注册所有的组件:config/components.js
  8. 在展示选项卡标题部分需要对于超出页面宽度的滑动处理；
  9. 点击选项卡改变显示
    • 点击选项卡获取此key值fakid
    • 然后改变choosed的值和fakId来记录哪一个菜单被打开

阻止架构

  • 权限管理
    • 负责的是所有的菜单，按钮，接口的访问权限
  • 角色管理
    • 权限匹配到每个角色身上
  • 员工管理
    • 匹配相应的角色和部门
  • 部门管理
    • 有一个城市的属性
    • 作用是为每一个员工增加一个城市的属性

风控管理

整个权限控制

  1. 菜单是由后台接口返回的权限list数据+breadcrumbs.js的本地配置来实现的
    • 首先从后台获取数据之后做层级处理
    • 渲染左侧菜单
    • 打开以及关闭选项卡的时候，是获取到点击的目录key值，循环breadcrumbs.js数据，找到相同key值push到tabData.list中
    • breadcrumb数据中有一个action用来区分相同组件不同菜单的；
  2. 打开风控详情部分
    • 这个不同于菜单，这个页面是不存在与权限树中的
    • 当打开多个详情页面时，使用由一些id组成的对象转化的字符串来作为选中的key值；
  3. 列表的按钮以及详情中的tab权限控制
    • 在menu.js中为风控页面配置相应的key值
    • 循环遍历后台返回的权限树，新建一个由所有权限key组成的list；
    • 当我们判断该按钮或者tab菜单是否展示的时候，首先找到这个菜单或者tab相对应的key，然后去list去找，有，展示，没有则不展示
  4. 详情-审核决策页面
    • 除了上述说的由后台返回的list还有在不同情况下展示按钮的控制
    • 主要是由detailStatus来控制的

实地和背调操作

  1. 先用接口获取checkbox列表渲染弹窗
  2. checkbox里面有一个其它选项，选择之后可以自定义添加类型
  3. 类型有文件和图片两种可选（发起补件的情况下只有图片类型）

考察结果

  1. 先用接口获取需要提交的文件列表并且区分image和input类型
  2. 通过循环处理resultGetData来储存提交好的图片和文字
  3. 上传图片进行压缩处理小于1M
  4. 上传成功之后将图片以及文字信息处理成list并转化成字符串以imgdata传给后台

玲珑金管家

webpack配置问题

此项目是vue-cli脚手架的基础上，更改的多页面应用，如果在pages下增加了新的页面，项目需要重启，在执行npm run dev命令

vue配置

如果需要为所有页面设置公用的过滤器、组件等，可以再src/public.js中进行配置；

页面组成

所有页面公用组件基本都在src/components文件目录下，基本内容包括，头部，底部，公用弹窗，分页组件

项目关于权限拦截部分

此项目的拦截系统都是有config/beforeEnter.js中外放的两个方法来决定的，其中go方法为页面跳转时候去调用，hashIntercept为路由拦截的时候调用；

原理:

  • 首先判断路由的跳转方式
  • 判断该路由下是需要校验权限history.js中为路由配置
  • 根据权限判断是为满足那种权限，在做相对应的操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
 * 跳转拦截触发函数
 */
hashInterFun = {
    isrealname: function() {
        this.$bus.$emit('isRealName', true)
    },
    issurvey: function() {
        this.$bus.$emit('isSurvey', true)
    },
    isbank: function() {
        location.href = '/myAccount.html#/SecuritySetting/BandcardInfo';
    },
    isLend: function() {
        this.$MyMessage.info('当前账户为借款人，不能进行出借操作！')
    },
    isBorrow: function() {
        this.$MyMessage.info('当前账户为出借人，不能进行借款操作！')
    },
    normal: function(self, params) {
        const direction = this.dealPath(this.params);
        if (this.jumpage) {
            location.href = this.params;
        } else {
            self.$router.push(params)
        }
        lib.goScrollTop(0);
    },
}