使用 SpringBoot + Redis + Vue3 + ArcoPro 开发管理系统

使用 SpringBoot + Redis + Vue3 + ArcoPro 开发管理系统

文章目录

使用 SpringBoot + Redis + Vue3 + ArcoPro 开发管理系统前言一、后端开发

1. 数据库创建2. 项目创建3. 增加依赖包与修改配置3. 使用插件快速创建 mapper、xml、service4. 创建 controller 二、前端开发

1.使用VSCode 打开修改参数配置等2. 用户管理CRUD添加

(1)、添加用户管理路由配置(2) 、添加用户管理国际化配置(3) 、添加用户管理页面内容

---

前言

本篇文章主要用于完全新手入门，实战操作使用 SpringBoot + Redis + Vue3 + ArcoPro 等开发一个简单管理系统的CRUD（增删改查）操作。并不做过多深入的讲解。

本文将分为两部分：后端开发、前端开发。

其中涉及到的环境安装需自行安装好 JDK1.8、MySQL5.7+、Redis 5.0、Node 14.18.1、IDEA、VSCode、Navicat premium 数据管理工具

如果已安装过，就无需在重复安装。切记Node版本最好一致，以免出现各种奇奇怪怪的问题

后面会继续写 搭配 ElasticSearch 、RabbitMQ 完成搜索推荐、位置距离推荐使用的，包含小程序、APP等 结合本套 教程以及完善如密码、安全、OSS存储 等功能案例

内容有不明之处或错误之处可指出，看到第一时间更正

适用于Windows 操作系统，这里以 Windows11 为例。其中不包含IDEA与VSCode两款工具的安装，请自行安装开发工具和环境
所需开发软件下载地址以及代码在本章末尾提供下载

最终效果图

一、后端开发 1. 数据库创建

这里创建一个名为 give 的数据库，在本地数据库上右键 新建数据库，按如图所示选择对应字符集与排序规则。

为方便大家节省时间一个个字段创建，这里提供一个简单的用户表示例，可以用于直接创建，在give上右键新建查询，将SQL语句粘贴进去点击运行即可。或在提供的资料代码中找到 give.sql 在give上右键导入运行SQL文件，导入前请先确保数据库创建好。

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for cls_user
-- ----------------------------
DROp TABLE IF EXISTS `cls_user`;
CREATE TABLE `cls_user`  (
  `id` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT 'ID',
  `username` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '账号',
  `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '密码',
  `nickname` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '昵称',
  `avatar` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '头像',
  `age` int(3) NULL DEFAULT NULL COMMENT '年龄',
  `sex` varchar(1) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT '0' COMMENT '性别',
  `email` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '邮箱',
  `phone` varchar(11) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '手机号码',
  `role` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '角色',
  `create_time` datetime NULL DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime NULL DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = DYNAMIC;

-- ----------------------------
-- Records of cls_user
-- ----------------------------
INSERT INTO `cls_user` VALUES ('1498674755007102976', 'admin', 'admin', '小可', 'https://www.proyy.com/api/pictures/random/index.php?type=tx', 18, '1', 'admin@clstech.cn', '19911110000', 'admin', '2022-03-14 21:56:21', '2022-03-14 21:56:25');

SET FOREIGN_KEY_CHECKS = 1;

2. 项目创建

可能由于网络原因、此步骤部分学友可能无法操作，可以使用文章末尾提供的网盘中 give-init.zip 压缩包，将其解压后，点击Open选项打开即可。

如图所示，打开IDEA后，点击 New Project 在弹出框中选择 Spring Initializr 之后点击Next下一步操作。填写项目信息，这里仅供参考。


根据如图所示选择Lombok、Spring Web、 MySQL Driver 后点击Next 之后 Finish 即可创建SpringBoot项目的基本模板。

3. 增加依赖包与修改配置

在 pom.xml 的 dependencies 中 增加如下依赖

    cn.dev33
    sa-token-spring-boot-starter
    1.29.0



    com.baomidou
    mybatis-plus-boot-starter
    3.5.1



    cn.hutool
    hutool-all
    5.7.21




    com.baomidou
    dynamic-datasource-spring-boot-starter
    3.5.1




    com.alibaba
    fastjson
    1.2.78




    cn.dev33
    sa-token-dao-redis
    1.29.0




    org.apache.commons
    commons-pool2

由于个人习惯yaml风格、所以这里 application.properties 修改为 application.yaml ，并删除static、templates两个文件夹

在 application.yaml 中加入如下配置参数

server:
  # 端口
  port: 9001

# Sa-Token配置
sa-token:
  # token名称 (同时也是cookie名称)
  token-name: token
  # token有效期，单位s 默认30天, -1代表永不过期
  timeout: -1
  # token临时有效期 (指定时间内无操作就视为token过期) 单位: 秒
  activity-timeout: -1
  # 是否允许同一账号并发登录 (为true时允许一起登录, 为false时新登录挤掉旧登录)
  is-concurrent: true
  # 在多人登录同一账号时，是否共用一个token (为true时所有登录共用一个token, 为false时每次登录新建一个token)
  is-share: false
  # token风格
  token-style: uuid
  # 是否输出操作日志
  is-log: false


spring:
  # redis配置
  redis:
    # Redis数据库索引（默认为0）
    database: 2
    # Redis服务器地址
    host: 127.0.0.1
    # Redis服务器连接端口
    port: 6379
    # Redis服务器连接密码（默认为空）
    password:
    # 连接超时时间
    timeout: 10s
    lettuce:
      pool:
        # 连接池最大连接数
        max-active: 200
        # 连接池最大阻塞等待时间（使用负值表示没有限制）
        max-wait: -1ms
        # 连接池中的最大空闲连接
        max-idle: 10
        # 连接池中的最小空闲连接
        min-idle: 0
  datasource:
    dynamic:
      primary: master #设置默认的数据源或者数据源组,默认值即为master
      strict: false #严格匹配数据源,默认false. true未匹配到指定数据源时抛异常,false使用默认数据源
      datasource:
        master:
          url: jdbc:mysql://${MYSQL_HOST:127.0.0.1}:${MYSQL_PORT:3306}/${MYSQL_DB:give}?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&nullCatalogMeansCurrent=true
          username: ${MYSQL_USER:root}
          password: ${MYSQL_PWD:123456}
  servlet:
    multipart:
      # 配置上传文件大小限制
      max-file-size: 10MB
      max-request-size: 100MB

3. 使用插件快速创建 mapper、xml、service

插件名称 mybatisCodeHelperPro 可在 IDEA 插件中心下载安装。

配置IDEA中数据库连接，如图所示，选择连接数据源 MySQL

填写我们的 数据库地址、账号和密码以及数据库名称give即可

在 schemas 下 选中 cls_user 右键选择 MyBatis generator

按照如下填写与选择 其中 com.example.give 为项目包名



确认无误后，点击OK得到如下 文件

4. 创建 controller

在 com.example.give 下创建 controller 、 utils两个目录，包含 UserController 与 R 两个 Java 类文件

在 utils 下 修改 R 统一返回结果类

@Data
@AllArgsConstructor
public class R {

    // 返回状态码
    private int code;

    // 返回消息
    private String msg;

    // 状态
    private String status;

    // 返回数据
    private Object data;

    // 成功（无数据）
    public static R success(String message) {
        return new R(20000, message, "ok", null);
    }

    // 成功
    public static R success(String message, Object data) {
        return new R(20000, message,"ok",  data);
    }

    // 失败（无数据）
    public static R fail(int code, String message) {
        return new R(code, message, "fail", null);
    }

}

在 新建的 UserController 中加入如下代码，实际业务中 主要密码加密解密判断等操作，这里就不做密码判断校验

@RestController
@RequestMapping(value = "/api/user")
public class UserController {


    @Autowired
    private ClsUserService clsUserService;


    
    @PostMapping(value = "/login")
    public R login(@RequestBody Map accouut) {
        String username = String.valueOf(accouut.get("username"));
        String password = String.valueOf(accouut.get("password"));

        final ClsUser clsUser = clsUserService.getOne(new QueryWrapper().eq("username", username));

        // 登录
        // 实际业务中 主要密码加密解密判断等操作
        StpUtil.login(clsUser.getUsername());
        return R.success("登录成功", StpUtil.getTokenInfo());

    }


    
    @PostMapping(value = "/logout")
    public R login() {
        StpUtil.logout();
        return R.success("注销成功");
    }

    
    @GetMapping(value = "/list")
    public R list(ClsUser clsUser, @RequestParam(value = "current") int current, @RequestParam(value = "pageSize") int pageSize) {
        IPage page = clsUserService.page(new Page<>(current, pageSize), Wrappers.query(clsUser));
        return R.success("获取用户列表", page);
    }


    
    @GetMapping(value = "/info")
    @SaCheckLogin
    public R info() {
        final ClsUser clsUser = clsUserService.getOne(new QueryWrapper().eq("username", StpUtil.getLoginIdAsString()));
        return R.success("获取用户信息成功", clsUser);
    }



    @PostMapping(value ="/save")
    public R save(@RequestBody ClsUser clsUser) {
        boolean save = false;

        // 实际业务中 主要密码加密解密判断等操作

        if(ObjectUtil.isNotNull(clsUser.getPassword()) && ObjectUtil.isNotEmpty(clsUser.getPassword()) && ObjectUtil.isNotEmpty(clsUser.getUsername())) {
            clsUser.setId(IdUtil.getSnowflakeNextIdStr());
            clsUser.setCreateTime(DateUtil.date());
            save = clsUserService.save(clsUser);
        }
        if (save) {
            return R.success("新增用户成功", clsUser);
        } else {
            return R.fail(20001, "新增用户失败");
        }
    }

    @PutMapping(value = "/update")
    public R update(@RequestBody ClsUser clsUser) {
        clsUser.setUpdateTime(DateUtil.date());
        boolean b = clsUserService.updateById(clsUser);
        if (b) {
            return R.success("更新成功");
        }else {
            return R.fail(20001, "更新失败");
        }
    }

    @DeleteMapping(value = "/delete")
    public R delUser(@RequestParam(value = "id") String id) {
        final boolean res = clsUserService.removeById(id);
        if (res) {
            return R.success("删除用户成功", 20000);
        } else {
            return R.fail(20001, "删除用户失败");
        }
    }


}

二、前端开发

安装项目模版的工具，在命令行中 执行 如下命令

npm i -g arco-cli

在任意盘符下，创建一个文件夹， 这里是在D盘VueProjects文件夹下执行如下命令新建项目

arco init arco-give

按照提示选择如下选项

1.使用VSCode 打开修改参数配置等

修改 .env.development 文件中 VITE_API_base_URL 后端接口请求地址，端口在 后端 application.yaml 配置文件配置为 9001

修改 srcstoremodulesuser 目录下 index.ts 与 types.ts

export type RoleType = '' | '*' | 'admin' | 'user';
export interface UserState {
  id?: string;
  username?: string;
  password?: string;
  nickname?: string;
  avatar?: string;
  age?: number;
  sex?: string;
  idcard?: string;
  name?: string;
  email?: string;
  phone?: string;
  tel?: string;
  enable?: string;
  createTime?: string;
  updateTime?: string;
  roleId?: string;
  role: RoleType;
}

修改红框部分

state: (): UserState => ({
    id: undefined,
    username: undefined,
    password: undefined,
    nickname: undefined,
    avatar: undefined,
    age: undefined,
    sex: undefined,
    idcard: undefined,
    name: undefined,
    email: undefined,
    phone: undefined,
    tel: undefined,
    enable: undefined,
    createTime: undefined,
    updateTime: undefined,
    roleId: undefined,
    role: '',
  }),

在 srcmock 目录下 修改 user.ts 增加 mock: false

修改 srcapi 下 user.ts 的 getUserInfo方法请求方式POST 修改为 Get

修改 srcapi 下的 interceptor.ts 在请求时附带 Token

axios.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // let each request carry token
    // this example using the JWT token
    // Authorization is a custom headers key
    // please modify it according to the actual situation
    const token = getToken();
    if (token) {
      config.headers = {
        token,
      };
      // if (!config.headers) {
      //   config.headers = {
      //     token,
      //   };
      // }
      // config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // do something
    return Promise.reject(error);
  }
);

修改ArcoPro在登录时候，获取token值进行保存相关配置
1、 修改 srcapiuser.ts 文件中 LoginRes 接口中 token 更改为 tokenValue

2、修改 srcstoremodulesuserindex.ts 中的setToken(res.data.token); 修改为 setToken(res.data.tokenValue);

后端使用IDEA启动方式很简单，点击绿色播放小按钮即可启动，祝你一路不爆红。
前端启动 在终端中输入 yarn dev 即可启动成功。
到此为止你就可以尝试 访问 http://localhost:3000进行登录了，账号密码 就 创建数据库时候插入的 一条数据 都是 admin

如果没有安装yarn 在终端命令行中输入 如下 进行安装即可

npm install -g yarn --registry=https://registry.npm.taobao.org

2. 用户管理CRUD添加 (1)、添加用户管理路由配置

在 srcrouterroutesmodulesdashboard.ts 文件中 增加如下路由配置

{
   path: 'users',
   name: 'users',
   component: () => import('@/views/dashboard/users/index.vue'),
   meta: {
     locale: 'menu.dashboard.users', // 二级菜单名（语言包键名）
     requiresAuth: true, // 是否需要鉴权
     roles: ['admin'], // 权限角色
   },
 },

(2) 、添加用户管理国际化配置

为 srcviewsdashboardworkplacelocale 目录下的 en-US.ts 和 zh-CN.ts 分别增加国际化配置

'menu.dashboard.users': 'User Manage',

'menu.dashboard.users': '用户管理',

此时后台中就出现 用户管理

(3) 、添加用户管理页面内容

在 srcapi 增加 base.ts 文件用于统一请求后返回结果

export interface ResponseResult {
  code: number;
  status: string;
  msg: string;
  data: T;
}

在 srcapiuser.ts 文件中 添加如下 接口请求封装

在文件开始部分加入引用

import qs from 'query-string';
import { UserState } from '@/store/modules/user/types';
import { ResponseResult } from './base';

在末尾处增加如下内容

export interface UserParams extends Partial {
  current: number;
  pageSize: number;
}

export interface UserListRes {
  records: UserState[];
  total: number;
}

export function queryUserList(params: UserParams) {
  return axios.get('/api/user/list', {
    params,
    paramsSerializer: (obj) => {
      return qs.stringify(obj, {
        // 如果为Null或undefined、不参与拼接
        skipNull: true,
        // 如果为空字符串、不参与拼接
        skipEmptyString: true,
      });
    },
  });
}

/// 更新操作
export function addUser(params: {
  id: string;
  username: string;
  password: string;
  nickname?: string;
  avatar?: string;
  age?: number;
  sex: string;
  email?: string;
  phone?: string;
  role?: string;
  createTime?: string;
  updateTime?: string;
}) {
  return axios.post('/api/user/save', params);
}

/// 删除账号
export function delUser(params: { id: string }) {
  return axios.delete('/api/user/delete', {
    params,
    paramsSerializer: (obj) => {
      return qs.stringify(obj);
    },
  });
}

/// 更新操作
export function updateUser(params: {
  id: string;
  username: string;
  nickname?: string;
  avatar?: string;
  age?: number;
  sex: string;
  email?: string;
  phone?: string;
  role?: string;
  updateTime?: string;
}) {
  return axios.put('/api/user/update', params);
}

在 srcviewsdashboard 目录下新建 users 目录 并且在 该目录下新建 index.vue 文件

加入如下代码即可、关于什么意思，那就只能麻烦大家去多多学习了，本文只描述搭建开发过程

到此你的页面应该是这样的，可以看出各个字段地方国际化没有显示出来，别急，我们来添加关于用户的国际化配置文件

在 srcviewsdashboardusers 目录下 新建一个 locale 目录，创建两个文件 en-US.ts 和 zh-CN.ts 并在各个文件中加入国际化配置参数

en-US.ts 部分

export default {
  'menu.system.user': 'User Manage',
  'searchTable.form.number': 'User Number',
  'searchTable.form.number.placeholder': 'Please enter Set User Number',
  'searchTable.form.username': 'Username',
  'searchTable.form.username.placeholder': 'Please enter Set Username',
  'searchTable.form.nickname': 'Nickname',
  'searchTable.form.nickname.placeholder': 'Please enter Set Nickname',
  'searchTable.form.status': 'Status',
  'searchTable.form.status.placeholder': 'Please enter Set Status',
  'searchTable.form.selectDefault': 'All',

  'searchTable.form.search': 'Search',
  'searchTable.form.reset': 'Reset',
  'searchTable.form.sex.0': 'Female',
  'searchTable.form.sex.1': 'Male',
  'searchTable.form.status.0': 'Enable',
  'searchTable.form.status.1': 'Disable',
  'searchTable.operation.create': 'Create',
  'searchTable.operation.import': 'import',
  'searchTable.operation.download': 'Download',
  'searchTable.operation.success': 'Success',
  'searchTable.operation.fail': 'Fail',
  // columns
  'searchTable.columns.number': 'User Number',
  'searchTable.columns.username': 'Username',
  'searchTable.columns.password': 'Password',
  'searchTable.columns.nickname': 'Nickname',
  'searchTable.columns.avatar': 'Avatar',
  'searchTable.columns.age': 'Age',
  'searchTable.columns.sex': 'Sex',
  'searchTable.columns.email': 'E-Mail',
  'searchTable.columns.phone': 'Phone',
  'searchTable.columns.role': 'Role',
  'searchTable.columns.createTime': 'Create Time',
  'searchTable.columns.updateTime': 'Update Time',

  'searchTable.columns.operations': 'Operations',
  'searchTable.columns.operations.view': 'View',
  'searchTable.columns.operations.update': 'Edit',
  'searchTable.columns.operations.delete': 'Delete',
  'searchTable.columns.operations./confirm/i.delete': 'Confirm deletion',
  'searchTable.columns.operations./confirm/i.cancel': 'Cancel deletion',

  'searchTable.columns.modal.add.title': 'Add User',
  'searchTable.columns.modal.add./confirm/i.determine': 'Confirm add',
  'searchTable.columns.modal.add./confirm/i.cancel': 'Cancel adding',
  'searchTable.columns.modal.update.title': 'Update information',
  'searchTable.columns.modal.update./confirm/i.determine': 'Confirm update',
  'searchTable.columns.modal.update./confirm/i.cancel': 'Cancel update',
};

zh-CN.ts 部分

export default {
  'menu.system.user': '用户管理',
  'searchTable.form.number': '用户编号',
  'searchTable.form.number.placeholder': '请输入用户编号',
  'searchTable.form.username': '账号',
  'searchTable.form.username.placeholder': '请输入账号',
  'searchTable.form.nickname': '昵称',
  'searchTable.form.nickname.placeholder': '请输入昵称',
  'searchTable.form.status': '状态',
  'searchTable.form.status.placeholder': '请选择状态',
  'searchTable.form.selectDefault': '全部',

  'searchTable.form.search': '查询',
  'searchTable.form.reset': '重置',
  'searchTable.form.sex.0': '女',
  'searchTable.form.sex.1': '男',
  'searchTable.form.status.0': '启用',
  'searchTable.form.status.1': '禁用',
  'searchTable.operation.create': '新建',
  'searchTable.operation.import': '批量导入',
  'searchTable.operation.download': '下载',
  'searchTable.operation.success': '成功',
  'searchTable.operation.fail': '失败',
  // columns
  'searchTable.columns.number': '编号',
  'searchTable.columns.username': '名称',
  'searchTable.columns.password': '密码',
  'searchTable.columns.nickname': '昵称',
  'searchTable.columns.avatar': '头像',
  'searchTable.columns.age': '年龄',
  'searchTable.columns.sex': '性别',
  'searchTable.columns.email': '邮箱',
  'searchTable.columns.phone': '手机号',
  'searchTable.columns.role': '角色',
  'searchTable.columns.enable': '状态',
  'searchTable.columns.createTime': '创建时间',
  'searchTable.columns.updateTime': '更新时间',

  'searchTable.columns.operations': '操作',
  'searchTable.columns.operations.view': '查看',
  'searchTable.columns.operations.update': '修改',
  'searchTable.columns.operations.delete': '删除',
  'searchTable.columns.operations./confirm/i.delete': '确认删除',
  'searchTable.columns.operations./confirm/i.cancel': '取消删除',

  'searchTable.columns.modal.add.title': '添加用户',
  'searchTable.columns.modal.add./confirm/i.determine': '确定添加',
  'searchTable.columns.modal.add./confirm/i.cancel': '取消添加',
  'searchTable.columns.modal.update.title': '更新信息',
  'searchTable.columns.modal.update./confirm/i.determine': '确定更新',
  'searchTable.columns.modal.update./confirm/i.cancel': '取消更新',
};

添加完成后，在加入这两个文件的引用
在 srclocale 目录下中 有两个 en-US.ts 和 zh-CN.ts 分别在其中增加 引用

zh-CN.ts 部分

en-US.ts 部分

到此就结束了，你得页面应该如下、并筛选查询、修改、删除、新增都可以正常使用

以上内容，仅仅是实现过程，更多的描述时间原因不做说明，可看注释或查阅资料

关于头像上传，可先自行实现逻辑，也可以先咨询我

以下是关于全部 代码 + 数据库文件 + 安装软件 的下载地址

下载地址：点我下载使用 SpringBoot + Redis …Pro 开发管理系统
提取码：获取提取码可以发私信获取 实在不好意思，哈哈哈。麻烦各位了

以下是更改记录
本文 发布于 2022年3月28日