Jeecg-学习第二弹

目前市面上有很多代码生成工具,简单的只把表映射成实体类,mybatis.xml等。比较舒服一点的就会帮你把简单的crud操作以及前端页面生成好。本文为大家带来的是jeecg的搭建,后期会逐步更新日常开发中如何使用。

第一弹的开发工具以及相关前后端代码会再第二弹结束贴链接,之前忘记了,希望大家理解


紧接第一弹内容继续学习。如果拉取jeecg最新代码进行配置表同步数据库的时候可能会因为环境版本问题出现

(javax.xml.bind.JAXBException Implementation of JAXB-API has not been found on module path or classpath)  或者 javax/xml/bind/JAXBException异常

那么大概率是因为你本地安装的jdk版本过低,需要在system主模块的pom.xml中引入以下依赖

<!-- https://mvnrepository.com/artifact/javax.xml.bind/jaxb-api -->
<dependency>
   <groupId>javax.xml.bind</groupId>
   <artifactId>jaxb-api</artifactId>
   <version>2.3.0-b170201.1204</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.activation/activation -->
<dependency>
   <groupId>javax.activation</groupId>
   <artifactId>activation</artifactId>
   <version>1.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.glassfish.jaxb/jaxb-runtime -->
<dependency>
   <groupId>org.glassfish.jaxb</groupId>
   <artifactId>jaxb-runtime</artifactId>
   <version>2.3.0-b170127.1453</version>
</dependency>

一、概述
    主要依赖Idea,Visual Studio Code,Redis,Mysql、Node.js等工具。后端使用lombok插件省去get、set等。页面使用vue、Ant Design&Vue等。

      jeecg代码仓库:  https://github.com/zhangdaiscott/jeecg-boot
      开发文档:      http://doc.jeecg.com
      在线演示 : http://boot.jeecg.com

二、日常开发配置
    2.1 在线开发
    启动前后端项目后,访问前端项目,登录后选择在线开发-online在线表单开发,进行在线表结构配置与生成。

33c0f133bc30b508bc5975a761f0c34d.png

    2.1.1 配置表结构
    选择页面新增按钮、输入你需要新建的表信息,设置字段是否必填以及长度,设置好
以后,进行下一步。

473a36613727ff072366afc094a9d524.png

    一般主要输入表名,表描述,表类型一般设置单表,主表的话生成代码的时候,表单页面会出错,所以一般选单表生成页面代码,主表生成业务代码。其他属性按需修改,如果没有修改需求就保持默认。

    2.1.2 配置列表页面
     点击页面属性,这里进行配置对应字段是否在列表、表单(增、改)页面进行展示,以
及查询对应类型,排序等,设置好了以后进行下一步。

3ed6250b963f7ce2edab4207b2fc28bb.png

     2.1.3 配置表单验证规则
    点击校验字段,这里配置表单(增、改)页面的验证规则,根据字段限制必填、以及根据字段类型设置校验规则,如果对应字段是字典项那么在字典table中填入字典值,如果是其他表的话,系统在字典table填入对应表名,在字典code中填入实际值字段,在字典text中填入展示值字段,设置好了以后进行下一步。

15b0d68512072595e62a29ebe8f8759f.png

    2.1.4 配置外键
    现在一般公司在写项目的时候都不会直接绑定外键关系进行约束,一般都使用字段进行软约束,所以在这里就不细讲了,如果需要配置那么 在对应字段后面的主表填入对应表以及字段即可。

ab36922e7f6eca2917ba01bcdea483e0.png

    2.1.5 索引
    一般常用的索引只有在数据量很大的表结构并且经常查询才使用,优化查询速度,或者就是使用唯一索引进行数据约束,防止因为并发问题导致重复的脏数据,这里要注意的就是,如果建立索引会导致新增、修改效率降低,提高查询速度,所以一定要按需求建立,设置好了以后进行下一步。

3cf369204b36e1fde17bdcfad9dd3f67.png

    2.1.6 配置查询页面
    查询配置主要是作用于列表页面,设置下启用,以及如果查询条件是字典项,对应字段是字典项那么在字典table中填入字典值,如果是其他表的话,系统在字典table填入对应表名,在字典code中填入实际值字段,在字典text中填入展示值字段,设置好了点击保存。

6019f40e727bb492d43b7a96da793034.png

    2.2 同步数据库生成表
    找到需要同步到数据库的表信息,操作中选择更多,然后点击同步数据库,等待提示,成功后就可以进行代码生成了。

29c413124b22415c46f9a3ac5d4c14d1.png

    2.3 生成代码
    找到需要生成代码的表信息,勾选对应列前面的复选框,选择代码生成,有时候可能因为网络延迟,所以显示同步状态为未同步,这时候可以刷新下数据,只有已同步的表信息才可以进行代码生成。如果刷新后点击生成代码还提示请同步表结构,有两种可能:一是你真的没同步;二是可能因为缓存,所以需要你取消选中,再选中下就可以了。
    代码生成页面只需要,选择生成代码的位置,以及填入代码对应的包名,点击生成代码。

0825918c8f44a4e7bac6765bf5f47569.png

     等待生成成功,如果你不想复制一遍代码,可以直接把代码生成的目录指定到你的项目上面,然后会直接生成到你项目中,一般都是单独生成一个地方,然后进行复制,这样比较麻烦。看大家自己选择。bf1bc31ef92fa756490bc15fc55ffa5d.png

      2.4 复制代码到项目中
       2.4.1 新建包

       首先在system模块下新建一个包,用来放置你新的业务代码,也可自己新建一个子模块然后配置依赖关系,通过common模块进行子模块直接相互依赖相互关联调用等。

7b5b9482d0fc49299f4c07417f97598c.png

       2.4.2 复制对应包以及相关java类
       打开刚生成代码的目录,复制java相关包与文件到system项目新建的包中,记得修改对应的类路径,修改完以后,重启后端项目,后端代码就算建完了。

94edaa235198cef786a7b9119a8ef491.png

      打开前端项目,打开view文件夹。

416afa9c2ae724d806ade35391ef0044.png

      然后新建一个对应的文件夹,把刚生成好的**List.vue放进去。
        

76580ebd21877b0d046e6c02c16e2ab9.png

      然后新建一个文件夹modules,把刚生成的**Modal.vue与**From.vue放进去。

0216ac168eb46a04e8816ebb8f004472.png

        放进去以后,鼠标放到终端里面,然后ctrl+c,输入y,终止操作。

b18aa73697804001c48e66e43a0f4c07.png

        输入npm run serve 启动项目,项目启动以后访问地址。进行下一步菜单配置。

1dca1b06dc8cdc77b57beefbf4218990.png

       2.5 配置菜单
       选择系统管理-菜单管理,然后新建一级菜单,如果一级菜单有多个二级菜单,那么一级菜单组件需要设置为layouts/RouteView,一级菜单建完以后,在更多中添加下级子菜单,二级菜单的菜单路径就是你刚才放置list页面的文件夹名称与list页面名称,(没有list页面的后缀),文件夹与页面通过/分开。

       菜单路径前面切记有个/,组件路径与菜单路径保持一致 但是没有那个/

29d48ad7498d25f447e450cac3050260.png

0d9729b31cd592c63ea901ce70313f6a.png

      选择对应的一级菜单,点击更多,添加下级(添加二级菜单)

7ffc1fc8ce242ef2d4953a68bf8ac2cb.png
      输入二级菜单的名称、跳转路径、前端组件保存

f6096bf91261c808cf0fb6dead04a1c5.png

f37a2faedc6603f6045f50d4c29ff572.png

        三级菜单(/权限)为按钮权限,比如添加、删除、修改、导出、详情等操作根据角色权限不同,需要不同的角色才可以进行操作。那么配置对应三级权限,我一般习惯三级权限配给二级菜单。
          三级权限只需要输入权限名称、授权标识(一般由两个单词或者多个单词组成,单词直接英文:隔开)。

066790eaaea344618e5f38232cf129d2.png

        权限配置好以后,在页面对应按钮处添加代码 v-has="'shop:add'",这里需要注意的是,双引号与单引号必须的,不能删除,单引号里面的就是你在上面配置的权限。
         如果在按钮上配置了三级权限,那么如果没有权限,对应按钮就会被隐藏起来。

f0fa71c2788187b38e8860cabbbd6604.png

         2.6 角色授权
         选择系统管理-角色管理,如果没有对应角色可以进行新增角色,如果已有对应角色,找到需要操作的角色,点击更多、点击授权,在弹出的权限页面进行对应的授权操作。授权以后重新登录,或者刷新菜单就可以看到刚才添加的权限了。

a9905319277fa7ebebc24414d7fb60de.png

1c217988f790ae2c1c45c56d2c561299.png

          三、业务处理
           3.1 列表展示字典项值
          先看后台实体类中对应字段配置是否正确,如果存在字典值的话,那么对应字段的配置应该如下配置,大家根据实际业务进行配置对应字段即可。

b7eade45bb35dfe62e19d6cee5fdc731.png

          字典值配置好以后,去前端**List页面看下对应的参数取值是否正确

69adca88e3e0c976e3e96755d3eb7d20.png

           3.1 查询下拉框配置
           
下拉框主要使用到了JDictSelectTag组件,这个组件需要在页面引入对应的组件。

c1b85124f60aa85dc36c320bfbc2438f.png

             然后在页面上按如下调用

d52cb80c8ddf201e958393148814e3e1.png

             3.2 新增字典项
             选择系统管理-数据字典,点击添加,新增一个字典项

be805236dee06d9b8610349b6f06e042.png

8dcfb629e50e5e2ca49c8b7cfee28c51.png

               选择刚新增的字典项,点击字典项配置,进行新增字典值。

f2edef93716f941e8926ef2e93cca0c3.png

                新增几个字典值

cff72e479448c359a2f783c1bcc2f77c.png

                然后到商店列表就可以看到对应的字典项了

f0638a68dbbd125448d5d60d404a61ae.png

               点击添加新增一条数据,保存以后就可以在列表上看到对应的数据了

ebbf00d3efb80a0e4d6e6f99f18a9606.png


后端接口服务代码:
https://gitee.com/DaiDaiDeXiaoMaNong/jeecg-boot.git

管理端代码:
https://gitee.com/DaiDaiDeXiaoMaNong/jeecg-web.git

相关开发工具可关注公众号回复 java开发工具


本次的学习到这里就结束了,后面会持续更新使用jeecg进行企业级实际业务开发,会根据实际使用情况更新文章,所以不会讲解的很详细,对于一些软件的安装希望大家可以自行百度,如果有问题可以加图图微信。大家一起来解决。

如果对您有帮助 请点个关注,万分感谢
          

                                (QQ招聘群  710566091
                                 微信招聘群 请加图图微信)

84855757aaf817376c7915b4ed3d10e6.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值