第三章前台开发 - 第三章（二）前端开发规范-旧版本 - 《分布式信贷管理系统产品开发培训-2022年第一期》

配置页面配置路径

菜单页面路径配置

根据父id查询所有子菜单配置，避免菜单id配置重复

http://localhost:8013/scms/R02/R0202 父路径R02 对应父id M02

SELECT * FROM TB_SYS_MENU t WHERE t.menu_pid = 'M02'

根据子菜单id的排序向后添加菜单配置注意必填字段

menu_id 不可重复 menu_name 菜单名称 menu_component（菜单路径，如果不是目录，必填）

menu_pid 父菜单id menu_sort 菜单排序 menu_path 链接地址（路由地址）

parent_menu_path 上级资源编号（上级路由地址）

左树右表配置

查询是否存在父目录id

select * from tb_pub_module_menus t where t.module_cd = 'clsBtree' --父目录id

如果有可以向该目录内添加左树右表菜单配置

select * from tb_pub_module_menus_info where module_cd = 'clsBtree'

查询到该菜单下的所有子菜单，按order_by字段排序添加菜单配置 menu_cd 菜单id menu_anme 菜单名 menu_url菜单路径 menu_pre_cd 菜单父目录id（tb_pub_module_menus表的module_cd）

缓存刷新

左树右表配置后不会立即生效需要刷新缓存

重启公共子系统刷新
登录信贷系统： ->系统管理/页面框架配/刷新缓存按钮

打开左树右表时默认会打开第一个页面作为主业务页面，如果有其他子页面需要用到主业务页面的参数，需要将参数放置在浏览器缓存内

//影像上传下载页面需要的主业务页面参数
sessionStorage.setItem('appId', checkBussinessKey('dbhAppId'))
sessionStorage.setItem('systemCode', 'aft')
sessionStorage.setItem('imageListNo', 'aft')

左树右表菜单显示规则

tb_pub_module_menus_info表检查类型有 A R M

类型A

checker字段#前面对应子系统calss #后面是对应的方法最终返回布尔值来决定是否显示页面

类型R

使用规则判断是否显示，checker字段为规则id

类型M

规则模块，包含多个规则id 判断是否显示页面

规则对应的子系统配置在scmspub用户的tb_wfm_product_mapping （业务流程产品流程模板配置表）tree_module_cd字段 @后为子系统名

页面组成

avue组件库文档地址：https://avuejs.com/

element-ui组件库文档地址：https://element.eleme.cn

avue-crud 列表组件

crud组件常用功能

搜索栏

根据配置自动生成查询表单，表单项由option对象column数组配置
列表展示

根据option配置column数组生成列表的列
分页组件

提供一套分页组件，提供分页查询相关方法，如修改每页显示数量、切换下一页上一页、跳转到指定页码。
对字段的增删改查

提供新增、删除、修改、查看方法入口

crud组件常用配置项

表单项配置

editBtn: false,//是否显示行修改按钮
delBtn: false,//是否显示行删除按钮
addBtn: false,//是否显示添加按钮

字段项配置（可配置字段是否参与搜索、添加、添加、规则校验、事件）

主要配置项作用

prop 提交表单时的字段名（搜索、添加、修改）表单
type 字段类型，常用的有text输入框，select下拉框，date日期选择框详情参考avue文档
hide 列是否在列表中显示
search 字段是否参与搜索
dicUrl 如果是字典下拉框配置字典的请求地址
props 自定义字典的名称、值对应的key值
rules 新增，修改时表单的校验规则详情参考avue-form校验文档
change 搜索栏里字段的事件
formslot 表单是否使用插槽自定义字段

    {
      label: '客户标识',
      prop: 'cusFlag',
      filterable: true,//是否可搜索
 type: 'select',//下拉框选项
      hide: true,//隐藏列
      search: false,//是否可搜索
      dicUrl: window.GLOBAL_OBJ.DIC_URL + 'CSM_CUS_FLAG',  //字典项路径
      props: { label: 'text', value: 'value' },//字典项名字的key值和value的key值
      rules: [{  //当新增或修改时 客户标识字段的校验规则，可以有多个
        required: true,
        message: '请选择客户标识',
        trigger: ['blur', 'change']
      }],
      change(val) {// 搜索项里的客户标识字段的选中事件
        // 01:法人 02:非法人
        if (val.value === '01') {
          that.tableOption.column[1].display = false
          that.tableOption.column[2].display = true
        } else if (val.value === '02') {
          that.tableOption.column[1].display = true
          that.tableOption.column[2].display = false
        }
      }
    },

avue-form组件

表单常用配置项

submitText 提交按钮文案
group 分组表单,放入正常的column配置就行
column 字段数组 group内字段与form表单字段配置方式一致
dicUrl 如果是字典下拉框配置字典的请求地址
props 自定义字典的名称、值对应的key值
rules 新增，修改时表单的校验规则详情参考avue-form校验文档

option:{
          column:[{
                label: '内容',
                prop: 'text',
          }],
          group:[
            {
              icon:'el-icon-info',
              label: '分组1',
              collapse:false,
              prop: 'group1',
              column: [{
                label: '内容1',
                prop: 'text1',
              }]
            }]
          }

使用具名插槽向表单插入自定义组件

slot 子组件插槽名称
slot-scope 作用域插槽（使用作用域插槽可获取子组件内属性）

<template slot-scope="scope" slot="orgIddcForm">
          <tree-select :span="5" :code="code" :model-data.sync="scope.row.orgId"             :placeholder="placeholder" @handleNodeClick="rootGetNode"/>
</template>

avue表格组件和表单组件使用查找带回组件

机构选择组件 tree-select

<template slot="orgId">
          <tree-select :span="24" :code="code" :model-data="rootNodeData.text" :tree-vlue.sync="formObj.orgId" :placeholder="'请选择机构'" style="margin-top:1px" @handleNodeClick="rootGetNode"/>
</template>

:span相对于父元素所占用的栅格宽度可选值1-24
:code 查找此机构下的子机构
:model-data 选中机构后输入框显示的内容
:tree-value.sync 选中机构后的机构id
@handleNodeClick 选择事件

查找客户经理

<template slot="zbCustMgrName">
          <user-dialog :user-code.sync="formObj.zbCustMgrCode" style="padding-                top: 7px;" placeholder="主办客户经理"/>
</template>

user-code.sync 双向绑定的客户经理编号

路由跳转

单页面项目在使用router组件跳转是页面不刷新，仅修改router-view的内容

router.push方法跳转页面：

this.$router.push({ name: 'Syserror', params: { sys: 'xp' }})
this.$router.push({ path: '/R01/R0104' })
this.$router.push({ path: `/myJob?jump=${wrok}` })

//不带参跳转
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
//2. query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
//3. params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留

query 和 params 的区别

query跳转会在地址栏url上面拼接参数类似于get请求
params 参数跳转不拼接sql 类似post请求（推荐）
页面请求后台api
api使用和存放位置
接口js文件统一存方在src/api/子系统名/业务表/index.js 通常会生成一个业务js文件，存放业务页面调用后台api接口的方法，使用时在页面script标签内引入即可:
```
import { queryList, addObj, putObj, delObj, syncCusInfo } from '@/api/customer/corpor/tbCsmCorporation_form'
```
接口调用

调用接口时注意get方式使用params存放请求参数
post方法使用data存放请求参数
获取单条数据一般将uuid拼接在请求地址里发送get请求

getList(){
queryList(Object.assign({
          pageNum: page.currentPage,
          size: page.pageSize,
          handleUser: this.userCode // this.userCode
        }, params)).then(response => {
          this.tableData = response.list
          this.page.total = response.page.totalResult
          this.tableLoading = false
      })
}

api接口js文件结构

引入request请求工具类
网关子系统路径

要导出的api接口方法

import request from '@/utils/request'  //请求工具js
const prefix = '/api/v1/customer'        //网关和子系统路径
export function addObj(obj) {        //新增方法
return request({
  url: prefix + '/tbCsmCorporation',
  method: 'post',
  data: obj                    //参数 注意参数名为data表示要将请求参数放入请求体
})
}
export function queryList(obj) {
console.log(JSON.stringify(obj))
return request({
  url: prefix + '/tbCsmCorporation',
  method: 'get',
params: obj    //注意参数名为params表示要将请求参数链接到url上（&name=张三&...）
})
}
export function getObj(id) {
  return request({
    url: prefix + '/tbFleRecordTransApply/' + id,
    method: 'get'
  })
}

跨域问题

本地启动前台工程访问本地后台接口时会出现跨域请求问题! 图片1.png

什么是跨域

出于浏览器的同源策略限制.同源策略是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常的功能可能会受到影响,跨域收是Web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现,同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互,所谓同源(即指同一个域)就是两个页面具备同样的协议(protocol),主机(host)和端口号(port)

当一个请求url的协议,域名,端口三者之间任意一个与当前的url不同都即为跨域

当前页面url 被请求页面url 是否跨域原因 http://www.test.com/ http://www.test.com/index.html 否同源（协议、域名、端口号相同） http://www.test.com/ https://www.test.com/index.html 跨域协议不同（http/https） http://www.test.com/ http://www.baidu.com/ 跨域主域名不同（test/baidu） http://www.test.com/ http://blog.test.com/ 跨域子域名不同（www/blog）

解决本地调用跨域问题

后台子系统需要添加跨域配置，添加在项目springboot模块的启动类文件夹内,重启项目。

图片2.png

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CustomCORSConfiguration {
    private CorsConfiguration buildConfig(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOrigin("*");
        return corsConfiguration;
    }
    @Bean
    public CorsFilter corsFilter(){
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",buildConfig());
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

网关地址（后台环境）切换

图片3.png

本地测试时修改dev.env.js 文件里 BASE_API对象的值，该值是各个环境的网关地址：

如专项测试：’”http://10.6.11.118:8888“‘

主环境测试：’”http://10.6.11.90:8888“‘

如果重启项目后地址未改变，需要删除vue编译缓存,删除后需要重启项目

位置：node-modules/.cache

第三章（二）前端开发规范-旧版本