• 5.1 创建个人中心页面-后端部分


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

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


    1. 整体框架

    在这里插入图片描述


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


    在这里插入图片描述


    在这里插入图片描述


    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;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 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> {
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    在这里插入图片描述


    在这里插入图片描述


    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 add(Map data);
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在这里插入图片描述


    • 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;
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75

    在这里插入图片描述


    • com/kob/backend/controller/user 新建一个新目录 bot 同时新建一个 ControllerAddController
    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);
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    在这里插入图片描述


    增加一个 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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    效果如下:


    在这里插入图片描述


    Ⅱ 删除一个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);
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 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;
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • com/kob/backend/controller/user/bot 新建一个 ControllerRemoveController
    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);
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    删除一个 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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    效果如下:


    在这里插入图片描述


    Ⅲ 修改一个 Bot
    • com/kob/backend/service/user/bot 新建一个接口文件 UpdateService
    package com.kob.backend.service.user.bot;
    
    import java.util.Map;
    
    public interface UpdateService {
        Map update(Map data);
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 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;
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • com/kob/backend/controller/user/bot 新建一个 ControllerUpdateController
    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);
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    修改一个 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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    效果如下:


    在这里插入图片描述


    在这里插入图片描述


    Ⅳ 查询 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();
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 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);
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • com/kob/backend/controller/user/bot 新建一个 ControllerGetListController
    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();
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    查询 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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    效果如下:


    在这里插入图片描述


    4. 代码地址

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

  • 相关阅读:
    方法研究在长安福特总装系统改进中的应用
    深圳市工业和信息化局5G产业发展扶持计划操作规程
    【2205.05740v2】Surface Representation for Point Clouds
    旅游APP外包开发注意事项
    Go语学习笔记 - 调用ffmpeg-api实现音频重采样
    【计算机毕业设计】23.网上商城购物系统+vue
    nginx 中location和proxy_pass后面跟“/”组合后产生访问情况
    php实战案例记录(12)parse_url函数的用法
    编程语言理解2-java编译器,python解释器,java,python,c 运行原理
    【21天python打卡】第17天 python经典案例(3)
  • 原文地址:https://blog.csdn.net/qq_41046821/article/details/126566904