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

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" />