工程课 SpringBoot-5.1. 上课笔记    原题链接    简单

作者： 作者的头像   小红花 ,  2022-08-28 10:26:21 ,  所有人可见 ,  阅读 712

19


2

😊如果写的可以帮到你，可以点个赞吗，你的支持就是我写下去的动力。😊

本文阅读大概 20 分钟, 自己写加思考大概 2 ~ 3 小时。建议：代码可以手抄， 但不要复制。

1. 整体框架

5.1 创建个人中心页面-后端.png

2. 新建表 bot

在数据库中新建表 bot

表中包含的列：

  • id: int：非空、自动增加、唯一、主键

pojo 中定义主键的注解：@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")

创建新表.png

创建新表-成功.png

3.实现后端API

3.1 连接数据库和后端

  • 在 pojo 目录下新建新的文件 Bot.java，数据和数据库中的 bot 表一一对应。
package com.kob.backend.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;

@Data
@NoArgsConstructor
@AllArgsConstructor

public class Bot {
    @TableId(type = IdType.AUTO)
    private Integer id; //在pojo里最好用Integer，否则会报警告
    private Integer userId; //pojo里要用驼峰命名法和数据库的下划线对应
    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;
}
  • 在 Mapper 目录下新建 BotMapper.java 文件，映射 SQL 语句。
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> {
}

pojo-bot.png

botmapper.png

3.2 实现 增删改查 API

Ⅰ增加一个Bot

  • 在 com/kob/backend/service/user 新建一个新目录 bot 同时新建一个接口文件 AddService 
package com.kob.backend.service.user.bot;

import java.util.Map;

public interface AddService {
    Map<String, String> add(Map<String, String> data);
}

addservice.png

  • 在 com/kob/backend/service/impl/user 新建一个新目录 bot 同时新建一个实现类 AddServiceImpl 
package com.kob.backend.service.impl.user.bot;

import com.kob.backend.mapper.BotMapper;
import com.kob.backend.pojo.Bot;
import com.kob.backend.pojo.User;
import com.kob.backend.service.impl.utils.UserDetailsImpl;
import com.kob.backend.service.user.bot.AddService;
import lombok.Data;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.security.core.userdetails.UserCache;
import org.springframework.stereotype.Service;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

@Service
public class AddServiceImpl implements AddService {

    @Autowired
    private BotMapper botMapper;

    @Override
    public Map<String, String> add(Map<String, String> data) {
        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;
    }
}

addserviceimpl.png

  • 在 com/kob/backend/controller/user 新建一个新目录 bot 同时新建一个 Controller 类 AddController。 
package com.kob.backend.controller.user.bot;

import com.kob.backend.service.user.bot.AddService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@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);
    }
}

addcontroller.png

增加一个 bot 测试

  • 在前端 web 项目下 kob/web/src/views/user/bot 的文件 UserBotIndexView.vue 下编写测试。
<template>
    <ContentField>
        我的Bot
    </ContentField>
</template>

<script>
import ContentField from '../../../components/ContentField'
import $ from 'jquery'
import { useStore } from 'vuex';


export default {
    components: {
        ContentField
    },

    setup() {
        const store = useStore();

        // 在这里，设置的端口号为 8080，如果你已经修改了端口号，需要修改url。
        $.ajax({
            url: "http://127.0.0.1:8080/user/bot/add/",
            type: "post",
            data: {
                title: "Bot的标题",
                description : "Bot的描述",
                content: "Bot的代码",
            },
            headers: {
                Authorization: "Bearer " + store.state.user.token,
            },
            success(resp) {
                console.log(resp);
            },
            error(resp) {
                console.log(resp);
            }
        })
    }

}
</script>

<style scoped> 
</style>

效果如下：

addservice-success.png

Ⅱ 删除一个Bot

  • 在 com/kob/backend/service/user/bot 新建一个接口文件 RemoveService 
package com.kob.backend.service.user.bot;

import java.util.Map;

public interface RemoveService {
    Map<String, String> remove(Map<String, String> data);
}
  • 在 com/kob/backend/service/impl/user/bot 新建一个实现类 RemoveServiceImpl 
package com.kob.backend.service.impl.user.bot;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.kob.backend.mapper.BotMapper;
import com.kob.backend.pojo.Bot;
import com.kob.backend.pojo.User;
import com.kob.backend.service.impl.utils.UserDetailsImpl;
import com.kob.backend.service.user.bot.RemoveService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.Map;

@Service
public class RemoveServiceImpl implements RemoveService {

    @Autowired
    private BotMapper botMapper;

    @Override
    public Map<String, String> remove(Map<String, String> data) {
        UsernamePasswordAuthenticationToken authenticationToken = (UsernamePasswordAuthenticationToken) SecurityContextHolder.getContext().getAuthentication();
        UserDetailsImpl loginUser = (UserDetailsImpl) authenticationToken.getPrincipal();
        User user = new User();

        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;
        }

        if (!bot.getUserId().equals(user.getId())) {
            map.put("error_message", "没有权限删除该Bot");
            return map;
        }

        botMapper.deleteById(bot_id);

        map.put("error_message", "success");
        return map;
    }
}
  • 在 com/kob/backend/controller/user/bot 新建一个 Controller 类 RemoveController。 
package com.kob.backend.controller.user.bot;

import com.kob.backend.service.user.bot.RemoveService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@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);
    }
}

删除一个 Bot 测试

  • 在前端 web 项目下 kob/web/src/views/user/bot 的文件 UserBotIndexView.vue 下编写测试。
<template>
    <ContentField>
        我的Bot
    </ContentField>
</template>

<script>
import ContentField from '../../../components/ContentField'
import $ from 'jquery'
import { useStore } from 'vuex';


export default {
    components: {
        ContentField
    },

    setup() {
        const store = useStore();

        // 在这里，设置的端口号为 8080，如果你已经修改了端口号，需要修改url。
        $.ajax({
            url: "http://127.0.0.1:8080/user/bot/remove/",
            type: "POST",
            data: {
                bot_id: 3, //可以修改为自己的bot_id
            },
            headers: {
                Authorization: "Bearer " + store.state.user.token,
            },
            success(resp) {
                console.log(resp);
            },
            error(resp) {
                console.log(resp);
            }
        })
    }

}
</script>

<style scoped> 
</style>

效果如下：

remove-success.png

Ⅲ 修改一个 Bot

  • 在 com/kob/backend/service/user/bot 新建一个接口文件 UpdateService 
package com.kob.backend.service.user.bot;

import java.util.Map;

public interface UpdateService {
    Map<String, String> update(Map<String, String> data);
}
  • 在 com/kob/backend/service/impl/user/bot 新建一个实现类 UpdateServiceImpl 
package com.kob.backend.service.impl.user.bot;

import com.kob.backend.mapper.BotMapper;
import com.kob.backend.pojo.Bot;
import com.kob.backend.pojo.User;
import com.kob.backend.service.impl.utils.UserDetailsImpl;
import com.kob.backend.service.user.bot.UpdateService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.stereotype.Service;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

@Service
public class UpdateServiceImpl implements UpdateService {

    @Autowired
    private BotMapper botMapper;

    @Override
    public Map<String, String> update(Map<String, String> data) {
        UsernamePasswordAuthenticationToken authenticationToken = (UsernamePasswordAuthenticationToken) SecurityContextHolder.getContext().getAuthentication();
        UserDetailsImpl loginUser = (UserDetailsImpl) authenticationToken.getPrincipal();
        User user = loginUser.getUser();

        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");
        }

        Bot bot = botMapper.selectById(bot_id);

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

        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()
        );

        botMapper.updateById(new_bot);

        map.put("error_message", "success");

        return map;
    }
}
  • 在 com/kob/backend/controller/user/bot 新建一个 Controller 类 UpdateController。 
package com.kob.backend.controller.user.bot;

import com.kob.backend.service.user.bot.UpdateService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@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);
    }
}

修改一个 Bot 测试

  • 在前端 web 项目下 kob/web/src/views/user/bot 的文件 UserBotIndexView.vue 下编写测试。
<template>
    <ContentField>
        我的Bot
    </ContentField>
</template>

<script>
import ContentField from '../../../components/ContentField'
import $ from 'jquery'
import { useStore } from 'vuex';


export default {
    components: {
        ContentField
    },

    setup() {
        const store = useStore();

        // 在这里，设置的端口号为 8080，如果你已经修改了端口号，需要修改url。
        $.ajax({
            url: "http://127.0.0.1:8080/user/bot/update/",
            type: "POST",
            data: {
                bot_id: 1,
                title: "我是Bot_1的标题",
                description : "我是Bot_1的描述",
                content: "我是Bot_1的代码",
            },
            headers: {
                Authorization: "Bearer " + store.state.user.token,
            },
            success(resp) {
                console.log(resp);
            },
            error(resp) {
                console.log(resp);
            }
        })
    }

}
</script>

<style scoped> 
</style>

效果如下：

update-success-1.png

update-success-2.png

Ⅳ 查询 Bot 列表

  • 在 com/kob/backend/service/user/bot 新建一个接口文件 GetListService 
package com.kob.backend.service.user.bot;

import com.kob.backend.pojo.Bot;

import java.util.List;

public interface GetListService {
    List<Bot> getList();
}
  • 在 com/kob/backend/service/impl/user/bot 新建一个实现类 GetListServiceImpl 
package com.kob.backend.service.impl.user.bot;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.kob.backend.mapper.BotMapper;
import com.kob.backend.pojo.Bot;
import com.kob.backend.pojo.User;
import com.kob.backend.service.impl.utils.UserDetailsImpl;
import com.kob.backend.service.user.bot.GetListService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class GetListServiceImpl implements GetListService {

    @Autowired
    private BotMapper botMapper;

    @Override
    public List<Bot> getList() {
        UsernamePasswordAuthenticationToken authenticationToken = (UsernamePasswordAuthenticationToken) SecurityContextHolder.getContext().getAuthentication();
        UserDetailsImpl loginUser = (UserDetailsImpl) authenticationToken.getPrincipal();
        User user = loginUser.getUser();

        QueryWrapper<Bot> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("user_id", user.getId());


        return botMapper.selectList(queryWrapper);
    }
}
  • 在 com/kob/backend/controller/user/bot 新建一个 Controller 类 GetListController。 
package com.kob.backend.controller.user.bot;

import com.kob.backend.pojo.Bot;
import com.kob.backend.service.user.bot.GetListService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

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

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

查询 Bot 列表测试

  • 在前端 web 项目下 kob/web/src/views/user/bot 的文件 UserBotIndexView.vue 下编写测试。
<template>
    <ContentField>
        我的Bot
    </ContentField>
</template>

<script>
import ContentField from '../../../components/ContentField'
import $ from 'jquery'
import { useStore } from 'vuex';


export default {
    components: {
        ContentField
    },

    setup() {
        const store = useStore();

        // 在这里，设置的端口号为 8080，如果你已经修改了端口号，需要修改url。
        $.ajax({
            url: "http://127.0.0.1:8080/user/bot/getlist/",
            type: "get",
            headers: {
                Authorization: "Bearer " + store.state.user.token,
            },
            success(resp) {
                console.log(resp);
            },
            error(resp) {
                console.log(resp);
            }
        })
    }

}
</script>

<style scoped> 
</style>

效果如下：

getlist-success.png

4. 代码地址

King of Bots - 5.1 创建个人中心页面-后端部分

8 评论

用户头像
灰原乐   8天前         踩      回复

先赞后看

用户头像
oldmomsimith   9个月前         踩      回复

大佬不知道你还能不能看到，但是我真的太感谢你了。你关于pojo层命名需要驼峰命名法对应那里真的帮了我一大忙，我就是命名不对应，导致我的bot对象在访问user_id时一直返回null，我debug了好久，要不是看了你说的我可能要一直错下去。

用户头像
matrix_52   2022-10-04 11:11         踩      回复

写得太好了，看着很舒服

用户头像
logn   2022-09-22 11:09         踩      回复

无敌

用户头像
陌上花开Charlie   2022-08-28 10:38         踩      回复

%%%

用户头像
小红花   2022-08-28 11:23         踩      回复

%%%

用户头像
tyk   2022-08-28 10:27         踩      回复

棒！！！

用户头像
小红花   2022-08-28 11:23         踩      回复

感谢