jeecgboot 基础说明

参考地址1：主页面路径：public\index.html解释：配置登录页的title.和登录加载过程出现的文字2：前端页面整体布局路径：src\components\page\GlobalLayout.vue解释：页面的菜单，头部，底部的整体布局是这个页面三个位置是以组件的形式引入整体布局页面 SideMenu, GlobalHeader, GlobalFooter。3：页面嵌套形式都是一组

吾乃冠军

3106人浏览 · 2022-03-24 16:34:14

吾乃冠军 · 2022-03-24 16:34:14 发布

参考地址

1：主页面

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

2：前端页面整体布局

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

3：页面嵌套形式

都是一组件的形式，一层一层往外嵌套的。

4：路由配置页面路径

\src\config\router.config.js

5：菜单路由

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

6：组件目录

src\components
解释：项目引用的组件都在这个目录下

7：vuex 的使用方法

src\store
解释：这里是项目vuex书写的目录
src\store\modules
解释：将store分割成不同的模块
首先我们可以在\modules目录下创建一个模块，供我们存储数据，不和其他模块冲突。
其次把我们的模块引入src\store\index.js这个文件,比如我们创建一个phone模块
其次我们要书写自己的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 //记得导出

Mutations函数：唯一修改状态的事件回调函数，默认是同步的，如果要异步就使用Actions
Actions函数：包含异步操作、提交mutations改变状态，（因为在actions里面，不能直接更改state里面的状态值，所以必须先定义一个mutations，然后在actions里面commit这个mutations，从而来更改state的状态值）
个人理解解释下上面括号的意思，就是你要异步改变state里面定义的值，就必须先定义一个mutations函数，然后在定义一个actions函数，在actions函数里通过commit进行更改state定义的值。
有赋值就有取值：src\store\getters.js这个目录可以做取值的一些定义
thisDN: state => state.phone.thisDN，把这个变量暴露出来就可以取了
下面介绍怎么在页面异步存数据，在methods属性里面先引入

 methods:{
        ...mapActions([
            "ThisDn"
            ]
        ),
        }

使用的话this.ThisDn(thisDN)括号里面thisDN是你要传递的参数，赋值参数
在下面的话就是怎么取了this.$store.state.phone.thisDN这里多加了一层phone,因为我们是分模块写的
上面是正常情况在页面直接存，还有一种情况是我不想在.vue页面里面存数据，那你可以在js页面调用mapoActions

import { mapActions } from "vuex";
// <span class="token punctuation">..</span>.mapActions<span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"Logout"</span><span class="token punctuation">]</span><span class="token punctuation">)</span>,

const websockhandlingMessage = {

methods:<span class="token punctuation">{<!-- --></span>
    <span class="token punctuation">..</span>.mapActions<span class="token punctuation">(</span><span class="token punctuation">[</span>
        <span class="token string">"ThisDn"</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">)</span>,
    callback<span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    this.ThisDn<span class="token punctuation">(</span>参数<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

}
export { websockhandlingMessage} //最后别忘导出

监听vuex数据变化

 computed: {
      listData() {
        return this.$store.state.phone.monitoringSeatList;
      },
    },
    watch: {
  listData(val) {
      // console.log("监控到了"+JSON.stringify(val) )
      this.loadSeatData()
  }，

在这里插入图片描述

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

在你的成功方法下面直接调用就可以了，他会重新调用一下请求页面数据的接口

this.loadData()

9：生成32位uuid

产生一个32位的UUID

String id= UUIDGenerator.generate();

10：@TableField注解

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

11：vue-ls使用：本地存储长时间存储数据（补足vuex，页面刷新删除store数据）

\src\store\mutation-types.js(定义并导出)

export const CESHI_INFO = 'Login_CESHI'

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')

 
 
>

12：接口放开

\csp-boot-module-system\src\main\java\org\jeecg\config\ShiroConfig.java

filterChainDefinitionMap.put("/sys/randomImage/**", "anon"); //登录验证码接口排除

13：企业信息配置

\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
        }
      },

在这里插入图片描述

\src\components\page\GlobalFooter.vue(底部配置信息)

<div class="copyright">
      Copyright
      <a-icon type="copyright"/>
      <!-- 企业信息配置 -->
      <span> {
  
  {enterpriseInformation().mainCopyright}}</span>
    </div>

在这里插入图片描述

\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>

在这里插入图片描述

\src\components\tools\Logo.vue（主页面logo和描述）

 <router-link :to="{name:'dashboard'}">
  &lt;!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 --&gt;
  &lt;!-- &lt;img v-if="navTheme === 'dark'" src="~@/assets/logo-white.png" alt="logo"&gt; --&gt;
  &lt;img  :src="enterpriseInformation().mainLogo" alt="logo"&gt;
  &lt;!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 --&gt;
  &lt;h1 v-if="showTitle"&gt;{<!-- -->{ enterpriseInformation().mainDescription }}&lt;/h1&gt;
&lt;/router-link&gt;

在这里插入图片描述

\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图标

在这里插入图片描述

14：前端设置延时调用

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

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,
    },

17：字段验证

自己写一个js文件把需要的js写好
需要的页面按需引入

import {password} from "@api/validator"

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^