devbox
天景科技苑
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：天景科技苑 | 2024-07-10 05:13:01

赞

踩

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
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号