智能BI项目-初始化(二)

往期开发(已经完成)

后端初始化

1.后端框架的搭建
- 拉取自己提前写好的 springboot 基础整合，项目文件结构如下:
- 使用 Mybatis-X 生成基础代码，移动 entity，service，mapper 等文件到指定目录

2.设计数据库以及表

执行如下 sql 进行库和表的创建:

-- 创建库
create database if not exists bi;

-- 切换库
use bi;

-- 用户表
create table if not exists user
(
    id           bigint auto_increment comment 'id' primary key,
    userAccount  varchar(256)                           not null comment '账号',
    userPassword varchar(512)                           not null comment '密码',
    userName     varchar(256)                           null comment '用户昵称',
    userAvatar   varchar(1024)                          null comment '用户头像',
    userRole     varchar(256) default 'user'            not null comment '用户角色：user/admin',
    createTime   datetime     default CURRENT_TIMESTAMP not null comment '创建时间',
    updateTime   datetime     default CURRENT_TIMESTAMP not null on update CURRENT_TIMESTAMP comment '更新时间',
    isDelete     tinyint      default 0                 not null comment '是否删除',
    index idx_userAccount (userAccount)
    ) comment '用户' collate = utf8mb4_unicode_ci;

-- 图表表
create table if not exists chart
(
    id           bigint auto_increment comment 'id' primary key,
    goal				 text  null comment '分析目标',
    `name`               varchar(128) null comment '图表名称',
    chartData    text  null comment '图表数据',
    chartType	   varchar(128) null comment '图表类型',
    genChart		 text	 null comment '生成的图表数据',
    genResult		 text	 null comment '生成的分析结论',
    status       varchar(128) not null default 'wait' comment 'wait,running,succeed,failed',
    execMessage  text   null comment '执行信息',
    userId       bigint null comment '创建用户 id',
    createTime   datetime     default CURRENT_TIMESTAMP not null comment '创建时间',
    updateTime   datetime     default CURRENT_TIMESTAMP not null on update CURRENT_TIMESTAMP comment '更新时间',
    isDelete     tinyint      default 0                 not null comment '是否删除'
) comment '图表信息表' collate = utf8mb4_unicode_ci;

使用 idea 中的 database 连接 mysql 数据源查看执行 sql 后生成的表格如下：

封装通用类以及异常
- 封装统一的返回结果包装类
- 封装全局异常类
- 配置类
- manager 通用 service

定义 controller 继承基础整合中的正删改查

ChartController 的基础接口代码

/**
 * 创建
*
* @param chartAddRequest
* @param request
* @return
*/
@PostMapping("/add")
public BaseResponse<Long> addChart(@RequestBody ChartAddRequest chartAddRequest, HttpServletRequest request) {
    if (chartAddRequest == null) {
        throw new BusinessException(ErrorCode.PARAMS_ERROR);
    }
    Chart chart = new Chart();
    BeanUtils.copyProperties(chartAddRequest, chart);
    User loginUser = userService.getLoginUser(request);
    chart.setUserId(loginUser.getId());
    boolean result = chartService.save(chart);
    ThrowUtils.throwIf(!result, ErrorCode.OPERATION_ERROR);
    long newChartId = chart.getId();
    return ResultUtils.success(newChartId);
}

/**
 * 删除
*
* @param deleteRequest
* @param request
* @return
*/
@PostMapping("/delete")
public BaseResponse<Boolean> deleteChart(@RequestBody DeleteRequest deleteRequest, HttpServletRequest request) {
    if (deleteRequest == null || deleteRequest.getId() <= 0) {
        throw new BusinessException(ErrorCode.PARAMS_ERROR);
    }
    User user = userService.getLoginUser(request);
    long id = deleteRequest.getId();
    // 判断是否存在
    Chart oldChart = chartService.getById(id);
    ThrowUtils.throwIf(oldChart == null, ErrorCode.NOT_FOUND_ERROR);
    // 仅本人或管理员可删除
    if (!oldChart.getUserId().equals(user.getId()) && !userService.isAdmin(request)) {
        throw new BusinessException(ErrorCode.NO_AUTH_ERROR);
    }
    boolean b = chartService.removeById(id);
    return ResultUtils.success(b);
}

/**
 * 更新（仅管理员）
*
* @param chartUpdateRequest
* @return
*/
@PostMapping("/update")
@AuthCheck(mustRole = UserConstant.ADMIN_ROLE)
public BaseResponse<Boolean> updateChart(@RequestBody ChartUpdateRequest chartUpdateRequest) {
    if (chartUpdateRequest == null || chartUpdateRequest.getId() <= 0) {
        throw new BusinessException(ErrorCode.PARAMS_ERROR);
    }
    Chart chart = new Chart();
    BeanUtils.copyProperties(chartUpdateRequest, chart);
    long id = chartUpdateRequest.getId();
    // 判断是否存在
    Chart oldChart = chartService.getById(id);
    ThrowUtils.throwIf(oldChart == null, ErrorCode.NOT_FOUND_ERROR);
    boolean result = chartService.updateById(chart);
    return ResultUtils.success(result);
}

/**
 * 根据 id 获取
*
* @param id
* @return
*/
@GetMapping("/get")
public BaseResponse<Chart> getChartById(long id, HttpServletRequest request) {
    if (id <= 0) {
        throw new BusinessException(ErrorCode.PARAMS_ERROR);
    }
    Chart chart = chartService.getById(id);
    if (chart == null) {
        throw new BusinessException(ErrorCode.NOT_FOUND_ERROR);
    }
    return ResultUtils.success(chart);
}

/**
 * 分页获取列表（封装类）
*
* @param chartQueryRequest
* @param request
* @return
*/
@PostMapping("/list/page")
public BaseResponse<Page<Chart>> listChartByPage(@RequestBody ChartQueryRequest chartQueryRequest,
                                                HttpServletRequest request) {
    long current = chartQueryRequest.getCurrent();
    long size = chartQueryRequest.getPageSize();
    // 限制爬虫
    ThrowUtils.throwIf(size > 20, ErrorCode.PARAMS_ERROR);
    Page<Chart> chartPage = chartService.page(new Page<>(current, size),
            getQueryWrapper(chartQueryRequest));
    return ResultUtils.success(chartPage);
}

/**
 * 分页获取当前用户创建的资源列表
*
* @param chartQueryRequest
* @param request
* @return
*/
@PostMapping("/my/list/page")
public BaseResponse<Page<Chart>> listMyChartByPage(@RequestBody ChartQueryRequest chartQueryRequest,
                                                HttpServletRequest request) {
    if (chartQueryRequest == null) {
        throw new BusinessException(ErrorCode.PARAMS_ERROR);
    }
    User loginUser = userService.getLoginUser(request);
    chartQueryRequest.setUserId(loginUser.getId());
    long current = chartQueryRequest.getCurrent();
    long size = chartQueryRequest.getPageSize();
    // 限制爬虫
    ThrowUtils.throwIf(size > 20, ErrorCode.PARAMS_ERROR);
    Page<Chart> chartPage = chartService.page(new Page<>(current, size),
            getQueryWrapper(chartQueryRequest));
    return ResultUtils.success(chartPage);
}

// endregion

/**
 * 编辑（用户）
*
* @param chartEditRequest
* @param request
* @return
*/
@PostMapping("/edit")
public BaseResponse<Boolean> editChart(@RequestBody ChartEditRequest chartEditRequest, HttpServletRequest request) {
    if (chartEditRequest == null || chartEditRequest.getId() <= 0) {
        throw new BusinessException(ErrorCode.PARAMS_ERROR);
    }
    Chart chart = new Chart();
    BeanUtils.copyProperties(chartEditRequest, chart);
    User loginUser = userService.getLoginUser(request);
    long id = chartEditRequest.getId();
    // 判断是否存在
    Chart oldChart = chartService.getById(id);
    ThrowUtils.throwIf(oldChart == null, ErrorCode.NOT_FOUND_ERROR);
    // 仅本人或管理员可编辑
    if (!oldChart.getUserId().equals(loginUser.getId()) && !userService.isAdmin(loginUser)) {
        throw new BusinessException(ErrorCode.NO_AUTH_ERROR);
    }
    boolean result = chartService.updateById(chart);
    return ResultUtils.success(result);
}

该代码中将每个请求体进行了单独的封装，以便为了前端能够更好地进行参数的传递。到此后端的基础初始化已经结束。

前端初始化

安装 ant desgin pro 脚手架
创建一个文件夹，打开 cmd 执行命令 pro create bi-frontend 创建项目
创建完成之后，执行 package.json 中的相关删除指令(遇到 bug 到 github 上 issue 中查找)，删除用不到的功能，减少项目的负重。
找到 config 文件夹中的 config.ts 修改以下代码:

生成后端文档接口的信息，自动生成 service 接口信息。
修改 app.tsx 中信息，添加 baseURL 改为自己的后端接口地址。至此前端的初始化完成。

往期开发(已经完成)

后端初始化

1.后端框架的搭建

2.设计数据库以及表

封装通用类以及异常

定义 controller 继承基础整合中的正删改查

前端初始化