jeecgboot 基础说明

20 篇文章 1 订阅
17 篇文章 1 订阅

参考地址

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. 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. 使用的话this.ThisDn(thisDN)括号里面thisDN是你要传递的参数,赋值参数
  2. 在下面的话就是怎么取了this.$store.state.phone.thisDN这里多加了一层phone,因为我们是分模块写的
  3. 上面是正常情况在页面直接存,还有一种情况是我不想在.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} //最后别忘导出

  1. 监听vuex数据变化
 computed: {
      listData() {
        return this.$store.state.phone.monitoringSeatList;
      },
    },
    watch: {
  listData(val) {
      // console.log("监控到了"+JSON.stringify(val) )
      this.loadSeatData()
  },

},

在这里插入图片描述

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

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

 
 

9:生成32位uuid

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

 
 

    10:@TableField注解

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

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

    1. \src\store\mutation-types.js(定义并导出)
    export const CESHI_INFO = 'Login_CESHI'
    
     
     
    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')
    
     
     
    >

    12:接口放开

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

    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. \src\components\page\GlobalFooter.vue(底部配置信息)
    <div class="copyright">
          Copyright
          <a-icon type="copyright"/>
          <!-- 企业信息配置 -->
          <span> {
      
      {enterpriseInformation().mainCopyright}}</span>
        </div>
    
     
     

    在这里插入图片描述

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

    在这里插入图片描述

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

    在这里插入图片描述

    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:字段验证

    1. 自己写一个js文件把需要的js写好
    2. 需要的页面按需引入
    import {password} from "@api/validator"
    
     
     
    • 0
      点赞
    • 5
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值