📕开源风云系列

  • 🍊本系列将从开源名将若依出发，探究优质开源项目脚手架汲取编程之道。
  • 🍉从不分离版本开写到前后端分离版，再到微服务版本，乃至其中好玩的一系列增强Plus操作。
  • 🍈希望你具备如下技术栈：
    • 🍎Spring
    • 🍍SpringMVC
    • 🍐Mybatis/Mybatis-plus
    • 🍅Thymeleaf
    • 🥝SpringBoot
    • 🍓Shiro
    • 🍏SpringSecurity
    • 🍌SpringCloud
    • 🍒云服务器相关知识
  • 本篇是不分离版第二篇

在这里插入图片描述

后期会考虑将项目和安全方面的文章迁移至vuepress，找一个好看的主题，视觉效果++！

1、前端封装组件

  1. 表格树

在这里插入图片描述

  1. 表单和弹出层

在这里插入图片描述

1.1、表格

表格的封装都在：ry-ui.js里面，其中对于表格封装了很多属性，在官方的文档中也可以看到：

在这里插入图片描述

在这里插入图片描述

我们也可以在var options 中定义，包括是否显示隔行变色striped:true、数据为空显示的内容undefinedText:"没有内容啦" 等等，如下：

var options = {
    //表格的高度
    height: 300,
    // 默认为true显示导出文件按钮，设为false隐藏
    showExport: true,
    // 是否显示行间隔色,默认为false
    striped: true,
    // 排序列名称(排序都是默认启动的,只需要在属性中加sortable: true)
    sortName: ,
    // 排序方式 asc 或者 desc
    sortOrder: "asc",
    // 默认为true表格的底部工具栏会显示分页条，设为false不显示
    pagination: true,
    // 每页的记录行数
    pageSize: 20,
    // 可供选择的每页的行数
    pageList:[10, 25, 50],
    // 是否转义HTML字符串(假如传进去的数据是<script>alert(1)</script>,那么浏览器会直接弹出1,为了避免注入问题风险,所以这个属性可以打开)
    escape: true,
    // 默认为true显示搜索框功能，设为false隐藏    
    search: true,
    // 搜索框初始显示的内容，需要启用search设为true 
    searchText: "搜索",
    // 默认为false不启用点击选中行，设为true启用
    clickToSelect: true,
    // 默认为false前端翻页时不保留所选行，设为true启用    
    maintainSelected: true,
    // 默认为false不启用翻页记住前面的选择，设为true启用    
    rememberSelected: true,  
    // 默认为false禁用冻结列，设为true启用冻结列（左侧）
    fixedColumns: true,
    // 冻结列的个数，当fixedColumns设为true有效（左侧）
    fixedNumber: 1,
    // 冻结列的个数，当fixedColumns设为true有效（右侧）
    fixedRightNumber: 1,    
        
}

其中有几个属性需要列图说明一下：

  1. 显示表尾：showFooter: true

在这里插入图片描述

效果如下：

在这里插入图片描述

  1. 表格排序：sortOrder: "asc",排序方式 asc 或者 desc，同时需要在属性中添加sortable: true

在这里插入图片描述

在这里插入图片描述

  1. 冻结列：fixedColumns: true，当列数特别多的时候，可以固定左侧或者右侧的列不动

在这里插入图片描述

  1. 当请求数据时，可以通过修改queryParams向服务器发送参数
function queryParams(params) {
    // 获取到表格的默认参数
    var search = $.table.queryParams(params);
    // 传递自定义参数(指定查询 userName 为 测试1)
    search.userName = '测试1';
    return search;
}

在这里插入图片描述

效果如下：

在这里插入图片描述

  1. 单元格的最大范围，超出范围后浮动显示：

在这里插入图片描述

2、日志配置

一般历史遗留的项目基本上都是Log4j,LogBack 是Log4j的升级版！

  • SpringBoot默认采用 Logback 日志, Logback 默认将日志打印到控制台上。
  • SpringBoot项目中无需添加额外依赖,可以直接使用

2.1、Tomcat日志

修改application.yml中的server开发环境配置，可以配置 tomcat 的访问日志。

在这里插入图片描述

2.2、LogBack.xml

  • 系统INFO日志sys-info.log、错误Error日志sys-error.log、用户访问日志sys-user.log

在这里插入图片描述

在这里插入图片描述

为什么已经有了logback.xml 日志配置文件了，application.yml里面依然有关于日志的配置？

  • SpringBoot 是约定大于配置，所以 application.yml 里面的优先级大于 logback.xml
  • application.yml 日志级别更加细粒度，可以只对自己的包下设置成 debug 级别，spring 设置成 warn 级别
    • 有时候有大量的 spring debug 日志输出，很容易使自己的 debug 日志被淹没在茫茫人海中，但是如果将正常的日志输出（为了方便筛选，抓眼球）设置成 error 或 warn 的话，就又显得不是特别规范

在这里插入图片描述

3、代码生成

ruoyi-generator中的resources目录下的generator.yml，可以自己根据实际情况调整代码生成的默认配置。

在这里插入图片描述

3.0、新建菜单

3.0.1、一级菜单

在这里插入图片描述

  • 一级菜单直接就是新建目录
  • 二级菜单就是新建菜单

3.1、单表

根据官方文档，新建数据库单表结构：

drop table if exists sys_student;
create table sys_student (
  student_id           int(11)         auto_increment    comment '编号',
  student_name         varchar(30)     default ''        comment '学生名称',
  student_age          int(3)          default null      comment '年龄',
  student_hobby        varchar(30)     default ''        comment '爱好（0代码 1音乐 2电影）',
  student_sex          char(1)         default '0'       comment '性别（0男 1女 2未知）',
  student_status       char(1)         default '0'       comment '状态（0正常 1停用）',
  student_birthday     datetime                          comment '生日',
  primary key (student_id)
) engine=innodb auto_increment=1 comment = '学生信息表';

在这里插入图片描述

  1. 系统工具 -> 代码生成 -> 导入对应表

在这里插入图片描述

  1. 编辑

在这里插入图片描述

  • 这里勾选插入、编辑、列表、查询的意思如下：

    • 插入：点击新增按钮，在新增的窗口表单里面是否有这个字段的填写
    • 编辑：点击编辑按钮，在修改的窗口表单里面是否有这个字段的修改
    • 列表：在表格展示的时候，表格列是否展示这个字段
    • 查询：表格上方的搜索框是否显示这个字段的查询框

  • 查询方式：指的是 MyBatis 的 SQL 语句是模糊查询Like、= 、!= 等等

  • 必填：指的是窗口表单里面的这个字段是必填项

  • 显示类型：我们这个字段是普通文本框填写、下拉框填写等等

  • 字典类型🔥: 自己的数据库表字段的性别 student_sex 性别是用0、1存入的,展示在页面上是要和男、女对应的

在这里插入图片描述

字典这里配置了之后在页面中就可以拿到了，比如对于性别是下拉框，配置了字典的用户性别，下拉框里面就可以读取到男、女了。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4、定时任务

在实际项目开发中Web应用有一类不可缺少的，那就是定时任务。

  • 定时任务的场景可以说非常广泛，比如某些视频网站，购买会员后，每天会给会员送成长值，每月会给会员送一些电影券。
  • 比如在保证最终一致性的场景中，往往利用定时任务调度进行一些比对工作
  • 比如一些定时需要生成的报表、邮件
  • 比如一些需要定时清理数据的任务等

若依提供方便友好的web界面，实现动态管理任务，可以达到动态控制定时任务启动、暂停、重启、删除、添加、修改等操作，极大地方便了开发过程。

在这里插入图片描述

我们可以将一些需要定时执行的业务放在方法里面。

5、XSS脚本过滤

假如我们在网站中增加了一段 script 脚本,让其 alert(1),想想看会发生什么？会弹出弹框 1

在这里插入图片描述

  • 但是对于通知公告我们又需要它能转义HTML,所以可以在application.yml里面设置排除链接和匹配链接

在这里插入图片描述

6、参数设置

  • 可以自己改动的玩

在这里插入图片描述

7、字典管理

  • 假如我们对通知类型的字典数据进行更改

在这里插入图片描述

  • 新增字典标签:新闻

在这里插入图片描述

  • 这样我们在涉及到公告类型就会有新闻的选项了，从而达到不需要改动代码来新增字典类型

在这里插入图片描述

在这里插入图片描述

8、修改包名

  • 见图知意

在这里插入图片描述

  • 工具地址：https://gitee.com/lpf_project/common-tools

9、修改密码

官方文档给的方式是:new PasswordService(),文档应该是没更新,经过测试使用应该是new SysPasswordService():

System.out.println(new SysPasswordService().encryptPassword("superkuang","admin123","333333"));

将其更新至sts_user表中即可。

10、集成Docker

docker pull mysql:5.7

docker run --name kuangstudy_faster_mysql -d -v mysql_data:/var/lib/mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root --restart always mysql:5.7
  1. Navicat 新建链接,新建数据库
  2. 新建网络
docker network create KuangStudy_Faster

docker network connect KuangStudy_Faster kuangstudy_faster_mysql
  1. IDEA package 打包项目
  2. Linux新建/usr/kuangstudy_faster,DockerFile文件如下

教程：https://www.bilibili.com/video/BV1Bk4y1p7wy/?spm_id_from=333.337.search-card.all.click&vd_source=babf50e72d3d368d0c44319dbbe2fdd0

# 开源
Logo
欢迎使用若依开源

快速构建 Web 应用程序

更多推荐

cover

【若依管理系统】Windows服务器部署方式

avatar RuoYi 若依
cover

@学习若依

avatar RuoYi 若依
cover

ruoyi的spring cloud项目详解（五）

avatar RuoYi 若依