SpringBoot项目——创建个人中心页面

回顾：

SpringBoot项目——前端页面授权+注册页面实现+登录状态持久化


SpringBoot项目——jwt 登录验证与编写前后端分离API

SpringBoot项目——配置Mysql与session注册登录验证


SpringBoot项目——创建菜单与游戏页面


SpringBoot项目——配置git环境与项目创建

文章目录

1. 创建后端API（增删改查）

1.1 在数据库中创建表 bot

bot
表中包含的列：

id
: int：非空、自动增加、唯一、主键
- @TableId(type = IdType.AUTO)
  主键自增注解
user_id: int
：非空
- 注意：在
  pojo
  中需将下划线定义成驼峰命名
  userId
  。
- 在
  queryWrapper
  中的名称仍然为下划线命名
  user_id
  。
title: varchar(100)
description: varchar(300)
content：varchar(10000)
rating: int
：默认值为1500
createtime: datetime
- pojo中定义日期格式的注解：@JsonFormat(pattern = “yyyy-MM-dd HH:mm:ss”)
modifytime: datetime
- pojo中定义日期格式的注解：@JsonFormat(pattern = “yyyy-MM-dd HH:mm:ss”)

1.2 实现 pojo 层——bot

package com.kob.backend.pojo;

import ...

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Bot {
    @TableId(type = IdType.AUTO) // 注解ID递增
    private Integer id;
    // 数据库里用下划线，pojo中需要用驼峰命名
    private Integer userId;
    private String title;
    private String description;
    private String content;
    private Integer rating;
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date createtime;
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date modifytime;

}

1.3 实现 mapper 层——bot

package com.kob.backend.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.kob.backend.pojo.Bot;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface BotMapper extends BaseMapper<Bot> {
}

实现后端四个API

/user/bot/add/
：创建一个Bot
/user/bot/remove/
：删除一个Bot
/user/bot/update/
：修改一个Bot
/user/bot/getlist/
：查询Bot列表

1.4 实现 service 层

分别编写四个
API
的
service
接口：

在这里插入图片描述

分别实现四个
API
的
service
接口：

AddServiceImpl.class

package com.kob.backend.service.impl.user.bot;

import ...

@Service
public class AddServiceImpl implements AddService {

    // 加入数据库，对数据库操作
    @Autowired
    private BotMapper botMapper;

    @Override
    public Map<String, String> add(Map<String, String> data) {

        // 得到当前token里的user信息赋值给建立User类型的user
        UsernamePasswordAuthenticationToken authenticationToken =
                (UsernamePasswordAuthenticationToken) SecurityContextHolder.getContext().getAuthentication();
        UserDetailsImpl loginUser = (UserDetailsImpl) authenticationToken.getPrincipal();
        User user = loginUser.getUser();

        // 传参赋值
        String title = data.get("title");
        String description = data.get("description");
        String content = data.get("content");

        // 定义返回
        Map<String, String> map = new HashMap<>();
        // 判合法——标题
        if (title == null || title.length() ==0) {
            map.put("error_message", "标题不能为空");
            return map;
        }
        if (title.length() > 100) {
            map.put("error_message", "标题长度不能大于100");
            return map;
        }
        // 判合法——描述
        if (description == null || description.length() == 0){
            description = "这个用户很懒，什么也没留下...";
        }
        if (description.length() > 300) {
            map.put("error_message", "Bot 描述的长度不能大于300");
            return map;
        }
        // 判合法——内容
        if (content == null || content.length() ==0) {
            map.put("error_message", "代码内容不能为空");
            return map;
        }
        if (content.length() > 10000) {
            map.put("error_message", "代码长度不能大于10000");
            return map;
        }

        Date now = new Date(); // 当前时间
        Bot bot = new Bot(null, user.getId(), title, description, content, 1500, now, now);

        // 加入数据库
        botMapper.insert(bot);
        map.put("error_message", "success");

        return map;
    }
}

RemoveServiceImpl.class

package com.kob.backend.service.impl.user.bot;

import ...

@Service
public class RemoveServiceImpl implements RemoveService {
    // 加入数据库，对数据库操作
    @Autowired
    private BotMapper botMapper;

    @Override
    public Map<String, String> remove(Map<String, String> data) {
        // 得到当前token里的user信息赋值给建立User类型的user
        // 判断当前用户是否跟要删除的Bot里的作者user_id一致，一致才能有删除权限
        UsernamePasswordAuthenticationToken authenticationToken =
                (UsernamePasswordAuthenticationToken) SecurityContextHolder.getContext().getAuthentication();
        UserDetailsImpl loginUser = (UserDetailsImpl) authenticationToken.getPrincipal();
        User user = loginUser.getUser();

        // String user_id = user.getId();
        // 传参要删除的bot_id(自己定义),并找出这个bot_id对应id的bot
        int bot_id = Integer.parseInt(data.get("bot_id"));
        Bot bot = botMapper.selectById(bot_id);

        // 定义返回
        Map<String, String> map = new HashMap<>();

        if (bot == null) {
            map.put("error_message", "Bot 不存在或已被删除");
            return map;
        }

        // getUserId(找到要删除bot的对应的作者user_id)
        // 判断要删除的判Bot里的作者user_id是否是当前作者，即是否有权限删除
        if (!bot.getUserId().equals(user.getId())) {
            map.put("error_message", "没有权限删除该Bot");
            return map;
        }

        botMapper.deleteById(bot_id);
        map.put("error_message", "success");
        return map;
    }
}

UpdateServiceImpl.class

package com.kob.backend.service.impl.user.bot;

import ...

@Service
public class UpdateServiceImpl implements UpdateService {

    @Autowired
    private BotMapper botMapper;

    @Override
    public Map<String, String> update(Map<String, String> data) {
        // 获取当前的token所存当前user信息
        UsernamePasswordAuthenticationToken authenticationToken =
                (UsernamePasswordAuthenticationToken) SecurityContextHolder.getContext().getAuthentication();
        UserDetailsImpl loginUser = (UserDetailsImpl) authenticationToken.getPrincipal();
        User user = loginUser.getUser();

        // 传入要修改的bot_id以及更新的信息
        int bot_id = Integer.parseInt(data.get("bot_id"));
        String title = data.get("title");
        String description = data.get("description");
        String content = data.get("content");

        // 定义返回
        Map<String, String> map = new HashMap<>();

        // 判合法——标题
        if (title == null || title.length() ==0) {
            map.put("error_message", "标题不能为空");
            return map;
        }
        if (title.length() > 100) {
            map.put("error_message", "标题长度不能大于100");
            return map;
        }
        // 判合法——描述
        if (description == null || description.length() == 0){
            description = "这个用户很懒，什么也没留下...";
        }
        if (description.length() > 300) {
            map.put("error_message", "Bot 描述的长度不能大于300");
            return map;
        }
        // 判合法——内容
        if (content == null || content.length() ==0) {
            map.put("error_message", "代码内容不能为空");
            return map;
        }
        if (content.length() > 10000) {
            map.put("error_message", "代码长度不能大于10000");
            return map;
        }

        // 查询是否是作者
        Bot bot = botMapper.selectById(bot_id);
        if (bot == null) {
            map.put("error_message", "Bot不存在或已被删除。");
            return map;
        }

        // 所要删除的bot的作者user_id 是否是当前user
        if(!bot.getUserId().equals(user.getId())) {
            map.put("error_message", "没有权限修改该Bot。");
            return map;
        }

        Bot new_bot = new Bot(
                bot.getId(),
                user.getId(),
                title,
                description,
                content,
                bot.getRating(),
                bot.getCreatetime(),
                new Date()
        );

        // Bot里创建新bot
        botMapper.updateById(new_bot);
        map.put("error_message", "success");
        return map;
    }
}

GetListServiceImpl.class

package com.kob.backend.service.impl.user.bot;

import ...

// 查询当前用户下的所有Bot
@Service
public class GetListServiceImpl implements GetListService {
    @Autowired
    private BotMapper botMapper;



    @Override
    public List<Bot> getList() {
        // 得到当前token里的user信息
        UsernamePasswordAuthenticationToken authenticationToken =
                (UsernamePasswordAuthenticationToken) SecurityContextHolder.getContext().getAuthentication();
        UserDetailsImpl loginUser = (UserDetailsImpl) authenticationToken.getPrincipal();
        User user = loginUser.getUser();

        // 数据库中查询用到queryWrapper
        QueryWrapper<Bot> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("user_id", user.getId());

        return botMapper.selectList(queryWrapper);
    }
}

1.5 实现 controller 层

AddController.class

package com.kob.backend.controller.user.bot;

import ...

@RestController
public class AddController {
    @Autowired
    private AddService addService;

    @PostMapping("/user/bot/add/")
    public Map<String, String> add(@RequestParam Map<String, String> data) {
        return addService.add(data);
    }
}

RemoveController.class

package com.kob.backend.controller.user.bot;

import ...

@RestController
public class RemoveController {
    @Autowired
    private RemoveService removeService;

    @PostMapping("/user/bot/remove/")
    public Map<String, String> remove(@RequestParam Map<String, String> data) {
        return removeService.remove(data);
    }
}

UpdateController.class

package com.kob.backend.controller.user.bot;

import ...

@RestController
public class UpdateController {
    @Autowired
    private UpdateService  updateService;

    @PostMapping("/user/bot/update/")
    public Map<String, String> update(@RequestParam Map<String, String> data) {
        return updateService.update(data);
    }
}

GetListController.class

package com.kob.backend.controller.user.bot;

import ...

@RestController
public class GetListController {
    @Autowired
    private GetListService getListService;

    @GetMapping("/user/bot/getlist/")
    public List<Bot> getlist(){
        return getListService.getList();
    }
}

2. 前端测试后端API

2.1 测试 /user/bot/add/

在这里插入图片描述

结果

2.2 测试 /user/bot/remove/

在这里插入图片描述

删除后的结果

2.3 测试 /user/bot/update/

在这里插入图片描述

修改后的结果

在这里插入图片描述

2.4 测试 /user/bot/getlist/

在这里插入图片描述

3. 实现前端（调用后端API实现相应功能）

3.1 写前端页面展示Bot列表（API：/user/bot/getlist/）

在这里插入图片描述

3.2 点击创建Bot弹框添加Bot（API：/user/bot/add/）

在这里插入图片描述

按钮弹框：

单击事件方法写ajax调用API

3.3 点击删除Bot（API：/user/bot/remove/）

在这里插入图片描述

3.4 点击修改Bot（API：/user/bot/update/）

在这里插入图片描述

4. 将代码区域写为编辑器

vue 安装依赖：
vue3-ace-editor

代码如下：

在这里插入图片描述

import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';

ace.config.set(
    "basePath", 
    "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")

<VAceEditor
    v-model:value="botadd.content"
    @init="editorInit"
    lang="c_cpp"
    theme="textmate"
    style="height: 300px" />

在这里插入图片描述

原文链接：https://blog.csdn.net/qq_46201146/article/details/126247967

SpringBoot项目——创建个人中心页面

文章目录

1. 创建后端API（增删改查）

1.1 在数据库中创建表 bot

1.2 实现 pojo 层——bot

1.3 实现 mapper 层——bot

1.4 实现 service 层

1.5 实现 controller 层

2. 前端测试后端API

2.1 测试 /user/bot/add/

2.2 测试 /user/bot/remove/

2.3 测试 /user/bot/update/

2.4 测试 /user/bot/getlist/

3. 实现前端（调用后端API实现相应功能）

3.1 写前端页面展示Bot列表（API：/user/bot/getlist/）

3.2 点击创建Bot弹框添加Bot（API：/user/bot/add/）

3.3 点击删除Bot（API：/user/bot/remove/）

3.4 点击修改Bot（API：/user/bot/update/）

4. 将代码区域写为编辑器

你可能也喜欢