当前位置:   article > 正文

jeecg-boot 2.2 前端基础布局说明_jeecg布局风格

jeecg布局风格

1:主页面

  1. 路径:public\index.html
  2. 解释:配置登录页的title.和登录加载过程出现的文字

2:前端页面整体布局

  1. 路径 :src\components\page\GlobalLayout.vue
  2. 解释 :页面的菜单,头部,底部的整体布局是这个页面
  3. 三个位置是以组件的形式引入整体布局页面 SideMenu, GlobalHeader, GlobalFooter。

3:页面嵌套形式

  1. 都是一组件的形式,一层一层往外嵌套的。

4:路由配置页面路径

  1. \src\config\router.config.js

5:菜单路由

  1. src\permission.js
  2. 解释:主界面路由会根据roles权限生成可访问的路由表
  3. src\components\page\GlobalLayout.vue
  4. 这里会加载 主路由和后台菜单
  5. src\store\modules\permission.js
  6. 解释:动态添加主界面路由,需要缓存

6:组件目录

  1. src\components
  2. 解释:项目引用的组件都在这个目录下

7:vuex 的使用方法

  1. src\store
  2. 解释:这里是项目vuex书写的目录
  3. src\store\modules
  4. 解释:将store分割成不同的模块
  5. 首先我们可以在\modules目录下创建一个模块,供我们存储数据,不和其他模块冲突。
  6. 其次把我们的模块引入src\store\index.js这个文件,比如我们创建一个phone模块
    在这里插入图片描述
  7. 其次我们要书写自己的state,mutations,actions等
const phone = {
    state: {
        thisDN: '',//定义一个存储数据的变量赋初值
    },
    mutations:{
        SET_THISDN:(state,thisDN) =>{
            state.thisDN = thisDN
        }
    },
    actions:{
        ThisDn({ commit },thisDN){
            commit('SET_THISDN',thisDN)
        },
    }
}
export default phone //记得导出
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  1. Mutations函数:唯一修改状态的事件回调函数,默认是同步的,如果要异步就使用Actions
  2. Actions函数:包含异步操作、提交mutations改变状态,(因为在actions里面,不能直接更改state里面的状态值,所以必须先定义一个mutations,然后在actions里面commit这个mutations,从而来更改state的状态值)
  3. 个人理解解释下上面括号的意思,就是你要异步改变state里面定义的值,就必须先定义一个mutations函数,然后在定义一个actions函数,在actions函数里通过commit进行更改state定义的值。
  4. 有赋值就有取值:src\store\getters.js这个目录可以做取值的一些定义
    在这里插入图片描述
  5. thisDN: state => state.phone.thisDN,把这个变量暴露出来就可以取了
  6. 下面介绍怎么在页面异步存数据,在methods属性里面先引入
 methods:{
        ...mapActions([
            "ThisDn"
            ]
        ),
        }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. 使用的话this.ThisDn(thisDN)括号里面thisDN是你要传递的参数,赋值参数
  2. 在下面的话就是怎么取了this.$store.state.phone.thisDN这里多加了一层phone,因为我们是分模块写的
  3. 上面是正常情况在页面直接存,还有一种情况是我不想在.vue页面里面存数据,那你可以在js页面调用mapoActions
import { mapActions } from "vuex";

    // ...mapActions(["Logout"]),
const websockhandlingMessage = {
   
    methods:{
        ...mapActions([
            "ThisDn"
            ]
        ),
        callback(data) {
        this.ThisDn(参数)
        }
}
export { websockhandlingMessage} //最后别忘导出
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  1. 监听vuex数据变化
 computed: {
      listData() {
        return this.$store.state.phone.monitoringSeatList;
      },
    },
    watch: {
    
      listData(val) {
          // console.log("监控到了"+JSON.stringify(val) )
          this.loadSeatData()
      },
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

7:消息提示

  1. 成功&失败
this.$message.success(res.message);
that.$message.warning(res.message);
  • 1
  • 2

在这里插入图片描述

8:页面改变数据之后怎么刷新本页面

  1. 在你的成功方法下面直接调用就可以了,他会重新调用一下请求页面数据的接口
this.loadData()
  • 1

9:生成32位uuid

  1. 产生一个32位的UUID
String id= UUIDGenerator.generate();
  • 1

10:@TableField注解

@TableField(exist = false) 注解加载bean属性上,表示当前属性不是数据库的字段,但在项目中必须使用,这样在新增等使用bean的时候,mybatis-plus就会忽略这个,不会报错
  • 1

11:vue-ls使用:本地存储长时间存储数据(补足vuex,页面刷新删除store数据)

  1. \src\store\mutation-types.js(定义并导出)
export const CESHI_INFO = 'Login_CESHI'
  • 1
  1. D:\chituproject\csp-boot\csp_web\src\main.js(先导入并监听)
import {
  CESHI_INFO 
} from "@/store/mutation-types"
new Vue({
  router,
  store,
  mounted () {
    store.commit('SET_CCSEATINFO', Vue.ls.get(CESHI_INFO))
  },
  render: h => h(App)
}).$mount('#app')
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  1. \src\store\modules\user.js(先导入赋值)
import Vue from 'vue'
import {
  CESHI_INFO 
} from "@/store/mutation-types"
 Vue.ls.set(CESHI_INFO , result.ccSeatInfo, 7 * 24 * 60 * 60 * 1000);
  • 1
  • 2
  • 3
  • 4
  • 5
  1. \src\store\getters.js(先导入 赋值)
import { CESHI_INFO } from "@/store/mutation-types"
const getters = {
  ccSeatInfo: state => {state.user.ccSeatInfo = Vue.ls.get(CESHI_INFO ); return state.user.ccSeatInfo},
}
  • 1
  • 2
  • 3
  • 4
  1. \src\components\page\GlobalHeader.vue(使用)
 computed: {
      ...mapState({
        ccSeatInfo: state => {state.user.ccSeatInfo = Vue.ls.get(CESHI_INFO ); return state.user.ccSeatInfo},
      })
    },
  • 1
  • 2
  • 3
  • 4
  • 5

12:接口放开

  1. \csp-boot-module-system\src\main\java\org\jeecg\config\ShiroConfig.java
filterChainDefinitionMap.put("/sys/randomImage/**", "anon"); //登录验证码接口排除
  • 1

13:企业信息配置

  1. \src\components\layouts\TabLayout.vue(动态更改页面标题)
 changeTitle(title) {
        // 企业信息配置
        let projectTitle = this.enterpriseInformation().mainTitle;
        // 首页特殊处理
        if (this.$route.path === indexKey) {
          document.title = projectTitle
        } else {
          document.title = title + ' · ' + projectTitle
        }
      },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述

  1. \src\components\page\GlobalFooter.vue(底部配置信息)
<div class="copyright">
      Copyright
      <a-icon type="copyright"/>
      <!-- 企业信息配置 -->
      <span> {{enterpriseInformation().mainCopyright}}</span>
    </div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在这里插入图片描述

  1. \src\components\layouts\UserLayout.vue(登录页名称和描述)
<div class="top">
        <div class="header">
          <a href="/">
            <!-- <img src="~@/assets/logo.svg" class="logo" alt="logo"> -->
            <span class="title">{{loginName}}</span>
          </a>
        </div>
        <div class="desc">
          <!-- 企业信息配置 -->
          {{loginDescription}}
        </div>
      </div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在这里插入图片描述

  1. \src\components\tools\Logo.vue(主页面logo和描述)
 <router-link :to="{name:'dashboard'}">

      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
      <!-- <img v-if="navTheme === 'dark'" src="~@/assets/logo-white.png" alt="logo"> -->
      <img  :src="enterpriseInformation().mainLogo" alt="logo">
      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
      <h1 v-if="showTitle">{{ enterpriseInformation().mainDescription }}</h1>
    </router-link>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

在这里插入图片描述

  1. \src\views\user\Login.vue(获取企业配置信息)(设置主页面ico和标题)
			 document.title = companyInfo.loginTitle;//设置主页面title
              var head = document.getElementsByTagName('head')[0];
              var link = document.createElement("link");
              link.href = companyInfo.faviconIco;
              link.rel  ="icon";
              head.appendChild(link);//增加主页面ico图标
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在这里插入图片描述

14:前端设置延时调用

 setTimeout(() => {
        this.initWebSocket();
        }, 1000)//延时1秒调用
  • 1
  • 2
  • 3

15:搜索字段自动增加模糊查询条件

<a-col :xl="6" :lg="7" :md="8" :sm="24">
    <a-form-item label="关键字">
        <j-input placeholder="输入关键字模糊查询" v-model="queryParam.keyWord"></j-input>
    </a-form-item>
 </a-col>
import JInput from '@/components/jeecg/JInput'
 components: {
      JInput,
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

16:字段不返回配置方式(这样密码字段返回的时候会自动去除)

 /**
     * 密码
     */
    @JsonProperty(access = JsonProperty.Access.WRITE_ONLY)
    private String password;
  • 1
  • 2
  • 3
  • 4
  • 5

17:LL 通过部门/公司id,获取公司id

(org.jeecg.modules.system.controller.SysDepartController)

 //通过父级id获取根部门id
String companyId = sysDepartService.getCompanyId(sysDepart.getParentId());
  • 1
  • 2

18:对象转换赋值

//1:单个对象赋值(方式一)
BeanUtils.copyProperties(源对象,目标对象);
copyProperties(Object source, Object target)
//单个对象赋值(方式二:底层用的还是方式一)
ObjectUtils.copyObject(dto,ProductMsg.class);
copyProperties(Object source, Object target)
//2:多个对象
ObjectUtils.copyList(源对象,目标对象实体类);
List<SystemParamsDTO> list1= ObjectUtils.copyList(list,SystemParamsDTO.class);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

19:字典翻译

表名---需要的数据----两个表对用的字段
@Dict(dictTable = "sys_user", dicText = "realname", dicCode = "id")
    private java.lang.String userIds;
   字典翻译字段 例如 sex
    @Dict(dicCode = "flight_status")
    private java.lang.Integer flightStatus;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
导出:
此处dictTable为数据库表名,dicCode为关联字段名,dicText为excel中显示的内容对应的字段
	@Excel(name="部门",dictTable="t_s_depart",dicCode="id",dicText="departname")
    private java.lang.String depart;
  • 1
  • 2
  • 3
  • 4

20:字段验证

  1. 自己写一个js文件把需要的js写好
  2. 需要的页面按需引入
import {password} from "@api/validator"
  • 1
  1. 使用方法
    在这里插入图片描述

  2. 我写的正则验证文件 validator.js

/*是否合法IP地址*/
export function validateIP(rule, value,callback) {
    if(value==''||value==undefined||value==null){
      callback();
    }else {
      const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
      if ((!reg.test(value)) && value != '') {
        callback(new Error('请输入正确的IP地址'));
      } else {
        callback();
      }
    }
  }
  
  /* 是否手机号码或者固话*/
  export function validatePhoneTwo(rule, value, callback) {
    const reg = /^((0\d{2,3}\d{7,8})|(1[34578]\d{9}))$/;
    if (value == '' || value == undefined || value == null) {
      callback();
    } else {
      if ((!reg.test(value)) && value != '') {
        callback(new Error('请输入正确的电话号码或者固话号码'));
      } else {
        callback();
      }
    }
  }
  /* 是否固话*/
  export function validateTelphone(rule, value,callback) {
    const reg =/0\d{2}-\d{7,8}/;
    if(value==''||value==undefined||value==null){
      callback();
    }else {
      if ((!reg.test(value)) && value != '') {
        callback(new Error('请输入正确的固话(格式:区号+号码,如010-1234567)'));
      } else {
        callback();
      }
    }
  }
  /* 是否手机号码*/
  export function validatePhone(rule, value,callback) {
    const reg =/^[1][3,4,5,7,8][0-9]{9}$/;
    if(value==''||value==undefined||value==null){
      callback();
    }else {
      if ((!reg.test(value)) && value != '') {
        callback(new Error('请输入正确的电话号码'));
      } else {
        callback();
      }
    }
  }
  /* 是否身份证号码*/
  export function validateIdNo(rule, value,callback) {
    const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if(value==''||value==undefined||value==null){
      callback();
    }else {
      if ((!reg.test(value)) && value != '') {
        callback(new Error('请输入正确的身份证号码'));
      } else {
        callback();
      }
    }
  }
  /* 是否邮箱*/
  export function validateEMail(rule, value,callback) {
    const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
    if(value==''||value==undefined||value==null){
      callback();
    }else{
      if (!reg.test(value)){
        callback(new Error('请输入正确的邮箱地址'));
      } else {
        callback();
      }
    }
  }
  /* 合法uri*/
  export function validateURL(textval) {
    const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
    return urlregex.test(textval);
  }
  
  /*验证内容是否英文数字以及下划线*/
  export function isPassword(rule, value, callback) {
    const reg =/^[_a-zA-Z0-9]+$/;
    if(value==''||value==undefined||value==null){
      callback();
    } else {
      if (!reg.test(value)){
        callback(new Error('密码仅由英文字母,数字以及下划线组成'));
      } else {
        callback();
      }
    }
  }
  export function password(rule, value, callback) {
    const reg =/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])(.{8,16})$/;
    if(value==''||value==undefined||value==null){
      callback();
    } else {
      if (!reg.test(value)){
        callback(new Error('密码中必须包含字母、数字、特称字符,至少8个字符,最多16个字符'));
      } else {
        callback();
      }
    }
  }
  
  /*自动检验数值的范围*/
  export function checkMax20000(rule, value, callback) {
    if (value == '' || value == undefined || value == null) {
      callback();
    } else if (!Number(value)) {
      callback(new Error('请输入[1,20000]之间的数字'));
    } else if (value < 1 || value > 20000) {
      callback(new Error('请输入[1,20000]之间的数字'));
    } else {
      callback();
    }
  }
  
  //验证数字输入框最大数值,32767
  export function checkMaxVal(rule, value,callback) {
    if (value < 0 || value > 32767) {
      callback(new Error('请输入[0,32767]之间的数字'));
    } else {
      callback();
    }
  }
  //验证是否1-99之间
  export function isOneToNinetyNine(rule, value, callback) {
    if (!value) {
      return callback(new Error('输入不可以为空'));
    }
    setTimeout(() => {
      if (!Number(value)) {
        callback(new Error('请输入正整数'));
      } else {
        const re = /^[1-9][0-9]{0,1}$/;
        const rsCheck = re.test(value);
        if (!rsCheck) {
          callback(new Error('请输入正整数,值为【1,99】'));
        } else {
          callback();
        }
      }
    }, 0);
  }
  
  // 验证是否整数
  export function isInteger(rule, value, callback) {
    if (!value) {
      return callback(new Error('输入不可以为空'));
    }
    setTimeout(() => {
      if (!Number(value)) {
        callback(new Error('请输入正整数'));
      } else {
        const re = /^[0-9]*[1-9][0-9]*$/;
        const rsCheck = re.test(value);
        if (!rsCheck) {
          callback(new Error('请输入正整数'));
        } else {
          callback();
        }
      }
    }, 0);
  }
  // 验证是否整数,非必填
  export function isIntegerNotMust(rule, value, callback) {
    if (!value) {
      callback();
    }
    setTimeout(() => {
      if (!Number(value)) {
        callback(new Error('请输入正整数'));
      } else {
        const re = /^[0-9]*[1-9][0-9]*$/;
        const rsCheck = re.test(value);
        if (!rsCheck) {
          callback(new Error('请输入正整数'));
        } else {
          callback();
        }
      }
    }, 1000);
  }
  
  // 验证是否是[0-1]的小数
  export function isDecimal(rule, value, callback) {
    if (!value) {
      return callback(new Error('输入不可以为空'));
    }
    setTimeout(() => {
      if (!Number(value)) {
        callback(new Error('请输入[0,1]之间的数字'));
      } else {
        if (value < 0 || value > 1) {
          callback(new Error('请输入[0,1]之间的数字'));
        } else {
          callback();
        }
      }
    }, 100);
  }
  
  // 验证是否是[1-10]的小数,即不可以等于0
  export function isBtnOneToTen(rule, value, callback) {
    if (typeof value == 'undefined') {
      return callback(new Error('输入不可以为空'));
    }
    setTimeout(() => {
      if (!Number(value)) {
        callback(new Error('请输入正整数,值为[1,10]'));
      } else {
        if (!(value == '1' || value == '2' || value == '3' || value == '4' || value == '5' || value == '6' || value == '7' || value == '8' || value == '9' || value == '10')) {
          callback(new Error('请输入正整数,值为[1,10]'));
        } else {
          callback();
        }
      }
    }, 100);
  }
  // 验证是否是[1-100]的小数,即不可以等于0
  export function isBtnOneToHundred(rule, value, callback) {
    if (!value) {
      return callback(new Error('输入不可以为空'));
    }
    setTimeout(() => {
      if (!Number(value)) {
        callback(new Error('请输入整数,值为[1,100]'));
      } else {
        if (value < 1 || value > 100) {
          callback(new Error('请输入整数,值为[1,100]'));
        } else {
          callback();
        }
      }
    }, 100);
  }
  // 验证是否是[0-100]的小数
  export function isBtnZeroToHundred(rule, value, callback) {
    if (!value) {
      return callback(new Error('输入不可以为空'));
    }
    setTimeout(() => {
      if (!Number(value)) {
        callback(new Error('请输入[1,100]之间的数字'));
      } else {
        if (value < 0 || value > 100) {
          callback(new Error('请输入[1,100]之间的数字'));
        } else {
          callback();
        }
      }
    }, 100);
  }
  
  // 验证端口是否在[0,65535]之间
  export function isPort(rule, value, callback) {
    if (!value) {
      return callback(new Error('输入不可以为空'));
    }
    setTimeout(() => {
      if (value == '' || typeof(value) == undefined) {
        callback(new Error('请输入端口值'));
      } else {
        const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
        const rsCheck = re.test(value);
        if (!rsCheck) {
          callback(new Error('请输入在[0-65535]之间的端口值'));
        } else {
          callback();
        }
      }
    }, 100);
  }
  // 验证端口是否在[0,65535]之间,非必填,isMust表示是否必填
  export function isCheckPort(rule, value, callback) {
    if (!value) {
      callback();
    }
    setTimeout(() => {
      if (value == '' || typeof(value) == undefined) {
        //callback(new Error('请输入端口值'));
      } else {
        const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
        const rsCheck = re.test(value);
        if (!rsCheck) {
          callback(new Error('请输入在[0-65535]之间的端口值'));
        } else {
          callback();
        }
      }
    }, 100);
  }
  
  /* 小写字母*/
  export function validateLowerCase(str) {
    const reg = /^[a-z]+$/;
    return reg.test(str);
  }
  /*保留2为小数*/
  export function validatetoFixedNew(str) {
    return str ;
  }
  /* 验证key*/
  // export function validateKey(str) {
  //     var reg = /^[a-z_\-:]+$/;
  //     return reg.test(str);
  // }
  
  /* 大写字母*/
  export function validateUpperCase(str) {
    const reg = /^[A-Z]+$/;
    return reg.test(str);
  }
  
  /* 大小写字母*/
  export function validatAlphabets(str) {
    const reg = /^[A-Za-z]+$/;
    return reg.test(str);
  }
  • 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
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326

21:后台从request中取参数·

//createTime_begin:这个是你传后台的时候的参数名字
String createTime_begin = req.getParameter("createTime_begin");
  • 1
  • 2

在这里插入图片描述

22:部门相关重要方法

  1. 根据部门code,查询当前部门和下级部门的 用户信息
@Autowired
private ISysUserDepartService sysUserDepartService;
List<SysUser> userList = sysUserDepartService.queryUserByDepCode(String depCode, String realname)
/**
* 根据部门code,查询当前部门和下级部门的用户信息 LL改造 只根据部门code查询,去除用户名字模糊查询
*/
List<SysUser> userList = sysUserDepartService.queryUserInfoByDepCode(String depCode, String realname)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  1. 获取我的部门下级所有部门IDS:如果传多个部门id,这里会有去重的操作,只会返回当前和以下部门的ids
@Autowired
private ISysDepartService sysDepartService;
//根据部门id获取所负责部门
List<String> departIds = sysDepartService.getMySubDepIdsByDepId(string);
  • 1
  • 2
  • 3
  • 4
  1. 通过ids批量查询部门信息
@Autowired
private ISysDepartService sysDepartService;
List<SysDepart> sysDepart = sysDepartService.getBatchDepart(list);
  • 1
  • 2
  • 3

23 get请求验证对象属性是否有null

如果属性有null 则不允许通过

if(new CheckObjectIsNullUtils().objCheckIsNull(callStatisticsVO)){
			return Result.error("请填写查询条件!");
		}
  • 1
  • 2
  • 3
package com.csp.common.util;
import java.lang.reflect.Field;
import java.lang.reflect.Type;
/**
 * @Author: LL
 * @Description: 判断对象是否为空,进一步判断对象中的属性是否都为空
 * @Date: Create in 17:03 2020/8/19
 */
public class CheckObjectIsNullUtils {
    /**
     * 判断对象是否为空,且对象的所有属性都为空
     * ps: boolean类型会有默认值false 判断结果不会为null 会影响判断结果
     *     序列化的默认值也会影响判断结果
     * @param object
     * @return
     */
    public  boolean objectCheckIsNull(Object object){
        Class clazz = (Class)object.getClass(); // 得到类对象
        Field fields[] = clazz.getDeclaredFields(); // 得到所有属性
        boolean flag = true; //定义返回结果,默认为true
        for(Field field : fields){
            field.setAccessible(true);
            Object fieldValue = null;
            try {
                fieldValue = field.get(object); //得到属性值
                Type fieldType =field.getGenericType();//得到属性类型
                String fieldName = field.getName(); // 得到属性名
//                System.out.println("属性类型:"+fieldType+",属性名:"+fieldName+",属性值:"+fieldValue);
            } catch (IllegalArgumentException e) {
                e.printStackTrace();
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            }
            if(fieldValue != null){  //只要有一个属性值不为null 就返回false 表示对象不为null
                flag = false;
                break;
            }
        }
        return flag;
    }

    /**
     * 排除 序列化和boolean类型的属性
     * @return: flag
     */
    public boolean objCheckIsNull(Object object){
        // 得到类对象
        Class clazz = (Class)object.getClass();
        // 得到所有属性
        Field fields[] = clazz.getDeclaredFields();
        //定义返回结果,默认为true
        boolean flag = true;
        for(Field field : fields){
            field.setAccessible(true);
            Object fieldValue = null;
            try {
                //得到属性值
                fieldValue = field.get(object);
                //得到属性类型
                Type fieldType =field.getGenericType();
                //得到属性名
                String fieldName = field.getName();
//                System.out.println("属性类型:"+fieldType+",属性名:"+fieldName+",属性值:"+fieldValue);
                //去除 boolean 和 long 类型的判断
                if(!(fieldType.toString().equals("boolean"))  && !(fieldType.toString().equals("long")) ){
                    //只要有一个属性值不为null 就返回false 表示对象不为null
                    if(fieldValue != null){
                        flag = false;
                        break;
                    }
                }
            } catch (IllegalArgumentException e) {
                e.printStackTrace();
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            }

        }
        return flag;
    }
}

  • 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
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82

24 mybatis-plus 三种组合查询书写方式

  1. QueryWrapper
	//方式一
	QueryWrapper<SysUser> queryWrapper = QueryGenerator.initQueryWrapper(user, req.getParameterMap());
	queryWrapper.ne("username", "_reserve_user_external");
	//方式二
	QueryWrapper<CspDoc> queryWrapper = new QueryWrapper<>();
	queryWrapper.eq("company_id",sysUser.getCompanyId());
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  1. LambdaQueryWrapper
	LambdaQueryWrapper<SysUser> queryUser = new LambdaQueryWrapper<SysUser>();
	queryUser.in(SysUser::getId, userIdList);
  • 1
  • 2

25 时间字段范围规范

例如创建时间:createTime
创建时间的开始时间: createTime_begin: 2021-01-11
创建时间的结束时间: createTime_end: 2021-03-03

26 使用mapGetters

...mapGetters(["nickname", "avatar","userInfo"]),
this.userInfo().username
  • 1
  • 2

27 查询条件使用翻译字段

 <a-col :xl="6" :lg="7" :md="8" :sm="24">
    <a-form-item label="性别">
        <j-dict-select-tag v-model="queryParam.sex" placeholder="请选择性别" dictCode="sex"/>
    </a-form-item>
</a-col>
  • 1
  • 2
  • 3
  • 4
  • 5

28 获取一天的开始和结束时间

let daySart=new Date(new Date(new Date().toLocaleDateString()).getTime())
let dayEnd=new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
console.log(daySart);
console.log(dayEnd);


  import moment from 'moment'
   startTime:moment(new Date(new Date(new Date().toLocaleDateString()).getTime())).format("YYYY-MM-DD HH:mm:ss"),
   endTime:moment(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)).format("YYYY-MM-DD HH:mm:ss"),
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在这里插入图片描述

29:对…mapActions和…mapGetters的理解

  1. …mapActions中书写的都是actions:{}里面的方法,相当于把actions中的方法直接引入进来
//在vue页面methods: {}方法中引入,
 ...mapActions(["AgentCustomData" ]),
 //赋值this.AgentCustomData(需要赋值的参数写这里)
  • 1
  • 2
  • 3
  1. …mapGetters中书写的是getters.js中定义好的数据
//在vue页面methods: {}方法中引入,
 ...mapActions(["AgentCustomData" ]),
 //取值this.AgentCustomData()
  • 1
  • 2
  • 3
  1. 如果不使用2中的方式,则取值方式为
this.$store.state.phone.agentCustomData
  • 1
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/天景科技苑/article/detail/804932
推荐阅读
相关标签
  

闽ICP备14008679号