Atopos's Blog

One step at a time!

0%

AcWing SpringBoot项目实战04

发表于 更新于 分类于 ，
本文字数： 26k 阅读时长 ≈ 24 分钟
根据AcWing平台上SpringBoot框架课的学习编写，本章主要是个人中心的前后端实现。

学习平台

AcWing SpringBoot框架课

创建数据库

在数据库中创建表bot

表中包含的列：

  • id：int，非空，自增，唯一，主键
  • 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")

实现pojo/Bot.java

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

/**
 * @author xzt
 * @version 1.0
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Bot {
    @TableId(type = IdType.AUTO)
    private Integer id;

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

实现后端API

创建Bot

前端的请求链接为/user/bot/add

实现步骤

  • 实现/mapper/botMapper/，
1
2
3
4
5
6
7
8
9
10
11
12
13
package com.kob.backend.mapper;

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

/**
 * @author xzt
 * @version 1.0
 */
@Mapper
public interface BotMapper extends BaseMapper<Bot> {
}
  • 实现service/user/bot/AddService
1
2
3
4
5
6
7
8
9
10
11
12
package com.kob.backend.service.user.bot;

import java.util.Map;

/**
 * @author xzt
 * @version 1.0
 */
public interface AddService {
    Map<String, String> add(Map<String, String> data);
}

  • 实现service/impl/user/bot/AddServiceImpl
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
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.stereotype.Service;

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

/**
 * @author xzt
 * @version 1.0
 */
@Service
public class AddServiceImpl implements AddService {

    @Autowired
    private BotMapper botMapper;

    @Override
    public Map<String, String> add(Map<String, String> data) {
        // 获取添加bot的用户信息
        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_msg", "标题不能为空");
            return map;
        }
        if(title.length() > 100) {
            map.put("error_msg", "标题长度不能大于100");
            return map;
        }
        if(description == null && description.length() == 0) {
            description = "这个用户很懒，什么也没留下";
        }
        if(description.length() > 300) {
            map.put("error_msg", "Bot描述的chang不能大于300");
            return map;
        }
        if(content == null || content.length() == 0) {
            map.put("error_msg", "Bot代码不能为空");
            return map;
        }
        if(content.length() > 10000) {
            map.put("error_msg", "Bot代码长度不能大于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_msg", "success");
        return map;
    }
}
  • 实现controller/user/bot/AddController
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
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.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

/**
 * @author xzt
 * @version 1.0
 */
@RestController
@RequestMapping("/user/bot")
public class AddController {

    @Autowired
    private AddService addService;

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

测试效果

使用PostMan进行测试

image-20230315194916621

数据库中添加的数据

image-20230315194943774

删除Bot

前端的请求链接为/user/bot/remove

实现步骤

  • 实现service/user/bot/RemoveService
1
2
3
4
5
6
7
8
9
10
11
package com.kob.backend.service.user.bot;

import java.util.Map;

/**
 * @author xzt
 * @version 1.0
 */
public interface RemoveService {
    Map<String, String> remove(Map<String, String> data);
}
  • 实现service/impl/user/bot/RemoveServiceImpl
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
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.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;

/**
 * @author xzt
 * @version 1.0
 */
@Service
public class RemoveServiceImpl implements RemoveService {

    @Autowired
    private BotMapper botMapper;

    /**
     * 删除bot
     * @param data
     * @return
     */
    @Override
    public Map<String, String> remove(Map<String, String> data) {
        UsernamePasswordAuthenticationToken authenticationToken =
                (UsernamePasswordAuthenticationToken) SecurityContextHolder.getContext().getAuthentication();
        UserDetailsImpl userDetails = (UserDetailsImpl) authenticationToken.getPrincipal();
        User user = userDetails.getUser();

        Map<String, String> map = new HashMap<>();

        Integer bot_id = Integer.parseInt(data.get("bot_id"));
        Bot bot = botMapper.selectById(bot_id);
        if(bot == null) {
            map.put("error_msg", "Bot不存在或已被删除");
            return map;
        }
        if(!bot.getUserId().equals(user.getId())){
            map.put("error_msg", "没有权限删除");
            return map;
        }
        botMapper.deleteById(bot_id);
        map.put("error_msg", "success");
        return map;
    }
}
  • 实现controller/user/bot/RemoveController
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
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.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

/**
 * @author xzt
 * @version 1.0
 */
@RestController
@RequestMapping("/user/bot")
public class RemoveController {
    @Autowired
    private RemoveService removeService;

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

测试效果

使用PostMan进行测试

image-20230315202520786

数据库中的数据也被删除了

image-20230315202540668

修改一个Bot

前端的请求链接为/user/bot/update

实现步骤

  • 实现service/user/bot/UpdateService
1
2
3
4
5
6
7
8
9
10
11
12
package com.kob.backend.service.user.bot;

import java.util.Map;

/**
 * @author xzt
 * @version 1.0
 */
public interface UpdateService {
    Map<String, String> update(Map<String, String> data);
}

  • 实现service/impl/user/bot/UpdateServiceImpl
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
95
96
package com.kob.backend.service.impl.user.bot;

import com.kob.backend.mapper.BotMapper;
import com.kob.backend.mapper.UserMapper;
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 javax.xml.crypto.Data;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * @author xzt
 * @version 1.0
 */
@Service
public class UpdateServiceImpl implements UpdateService {

    @Autowired
    private BotMapper botMapper;

    /**
     * 修改Bot信息
     * @param data
     * @return
     */
    @Override
    public Map<String, String> update(Map<String, String> data) {
        UsernamePasswordAuthenticationToken authenticationToken =
                (UsernamePasswordAuthenticationToken) SecurityContextHolder.getContext().getAuthentication();
        UserDetailsImpl userDetails = (UserDetailsImpl) authenticationToken.getPrincipal();
        User user = userDetails.getUser();

        Map<String, String> map = new HashMap<>();

        Integer bot_id = Integer.parseInt(data.get("bot_id"));
        String title = data.get("title");
        String description = data.get("description");
        String content = data.get("content");

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

        Bot bot = botMapper.selectById(bot_id);

        if(bot == null) {
            map.put("error_msg", "Bot不存在或已被删除");
            return map;
        }
        if(!bot.getUserId().equals(user.getId())) {
            map.put("error_msg", "没有权限修改");
            return map;
        }
        Bot newBot = new Bot(
                bot.getId(),
                user.getId(),
                title,
                description,
                content,
                bot.getRating(),
                bot.getCreateTime(),
                new Date()
        );
        botMapper.updateById(newBot);
        map.put("error_msg", "success");
        return map;
    }
}
  • 实现controller/user/bot/UpdateController
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
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.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

/**
 * @author xzt
 * @version 1.0
 */
@RestController
@RequestMapping("/user/bot")
public class UpdateController {
    @Autowired
    private UpdateService updateService;

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

测试效果

使用postMan进行测试

image-20230316152247252

修改前数据库信息

image-20230316152113890

修改后数据库信息

image-20230316152301371

查询Bot列表

前端的请求链接为/user/bot/getlist

实现步骤

  • 实现service/user/bot/GetListService
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.kob.backend.service.user.bot;

import com.kob.backend.pojo.Bot;

import java.util.List;
import java.util.Map;

/**
 * @author xzt
 * @version 1.0
 */
public interface GetListService {
    List<Bot> getList();
}

  • 实现service/impl/user/bot/GetListServiceImpl
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
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.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author xzt
 * @version 1.0
 */
@Service
public class GetListServiceImpl implements GetListService {

    @Autowired
    private BotMapper botMapper;

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

        List<Map<String, String>> lists = new ArrayList<>();

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

        return botMapper.selectList(queryWrapper);
    }
}
  • 实现controller/user/bot/GetListController
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
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.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
import java.util.Map;

/**
 * @author xzt
 * @version 1.0
 */
@RestController
@RequestMapping("/user/bot")
public class GetListController {
    @Autowired
    private GetListService getListService;

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

测试效果

使用postMan进行测试，输出了所有bot信息

image-20230316160412263

实现前端页面

页面布局

image-20230316161036080

我的Bot页面

实现步骤

  • 从bootstrap中导入页面布局。

  • 实现触发函数refresh_bots，当跳转到这个页面时调用这个函数。

    • 通过ajax实现后端bot信息的请求，返回至bots变量中

  • 想要把所有的bot信息显示到表格中，可以通过v-for="bot in bots"来获取bots中的每个bot信息。

    1
    2
    3
    4
    5
    6
    7
    8
    <tr v-for="bot in bots" :key="bot.id">
        <td>{{ bot.title }}</td>
        <td>{{ bot.createTime }}</td>
        <td>
            <button type="button" class="btn btn-secondary">修改</button>
            <button type="button" class="btn btn-danger"  @click="remove_bot(bot)">删除</button>
        </td>
    </tr>

函数实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    const refresh_bots = () => {
        $.ajax({
            url: "http://localhost:3000/user/bot/getlist/",
            type: "get",
            headers: {
                Authorization: "Bearer " + store.state.user.token,
            },
            success(resp) {
                console.log(resp);
                bots.value = resp;
            },
            error(resp) {
                console.log(resp);
            },
        });
    };
</script>

实现效果

image-20230317154019241

创建Bot按钮

实现步骤

  • 用bootstrap实现一个弹出窗口，窗口中添加需要的输入框。
  • 实现添加bot的函数add_bot，当点击创建按钮时调用这个函数。
    • 通过ajax实现后端请求，当添加成功后，先清空所有输入框的内容，在关闭弹出框。
    • 调用refresh_bots函数重新获取所有的Bot。

函数实现

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
<script>
    const add_bot = () => {
        botadd.error_msg = "";
        $.ajax({
            url: "http://127.0.0.1:3000/user/bot/add/",
            type: "post",
            data: {
                title: botadd.title,
                description: botadd.description,
                content: botadd.content,
            },
            headers: {
                Authorization: "Bearer " + store.state.user.token,
            },
            success(resp) {
                if(resp.error_msg === "success") {
                    botadd.title = "",
                        botadd.description = "",
                        botadd.content = "",
                        Modal.getInstance("#add-bot-button").hide();
                    refresh_bots();
                } else {
                    botadd.error_msg = resp.error_msg;
                }
            },
        });
    }
</script>

实现效果

image-20230317154420586

删除Bot按钮

实现步骤

  • 实现删除bot函数remove_bot(bot)，当点击删除按钮时调用该函数并传入该行的bot信息。
  • 在函数里通过ajax来对后端发起请求，当删除成功后，调用refresf_bot重新获取所有的bot。

函数实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
    const remove_bot = (bot) => {
        $.ajax({
            url: "http://127.0.0.1:3000/user/bot/remove/",
            type: "post",
            data: {
                bot_id: bot.id,
            },
            headers: {
                Authorization: "Bearer " + store.state.user.token,
            },
            success(resp) {
                if(resp.error_msg === "success") {
                    refresh_bots();
                }
            },
        });
    }
</script>

修改Bot按钮

实现步骤

  • 点击修改Bot按钮后，跳出弹出框，然后填入修改后的信息
  • 实现修改函数update_bot，当点击修改后。
    • 通过ajax实现后端请求，当修改成功后，关闭弹出框。
    • 调用refresh_bot重新获取所有的Bot

函数实现

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
<script>
    const update_bot = (bot) => {
        botadd.error_msg = "";
        $.ajax({
            url: "http://127.0.0.1:3000/user/bot/update/",
            type: "post",
            data: {
                bot_id: bot.id,
                title: bot.title,
                description: bot.description,
                content: bot.content,
            },
            headers: {
                Authorization: "Bearer " + store.state.user.token,
            },
            success(resp) {
                if(resp.error_msg === "success") {
                    Modal.getInstance("#update-bot-modal-" + bot.id).hide();
                    refresh_bots();
                } else {
                    botadd.error_msg = resp.error_msg;
                }
            },
        });
    }
</script>

实现效果

image-20230317161332042

完整代码

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<template>
    <div class="container">
        <div class="row">
            <div class="col-3">
                <div class="card">
                    <div class="card-body">
                        <img :src="$store.state.user.photo" alt="">
                    </div>
                </div>
            </div>
            <div class="col-9">
                <div class="card">
                    <div class="card-header">
                        <span class="title">我的Bot</span>
                        <button type="button" class="btn btn-primary float-end"  data-bs-toggle="modal" data-bs-target="#add-bot-button">创建Bot</button>

                        <!-- Modal -->
                        <div class="modal fade" id="add-bot-button" tabindex="-1">
                            <div class="modal-dialog modal-xl">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5">创建Bot</h1>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="mb-3">
                                            <label for="add-bot-title" class="form-label">名称</label>
                                            <input v-model="botadd.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
                                        </div>
                                        <div class="mb-3">
                                            <label for="add-bot-description" class="form-label">简介</label>
                                            <textarea v-model="botadd.description" class="form-control" id="add-bot-description" rows="3" placeholder="请输入Bot简介"></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label for="add-bot-code" class="form-label">代码</label>
                                            <textarea v-model="botadd.content" class="form-control" id="add-bot-code" rows="7" placeholder="请编写Bot代码"></textarea>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <div class="error-msg">{{ botadd.error_msg }}</div>
                                        <button type="button" class="btn btn-primary" @click="add_bot">创建</button>
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Bot名称</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="bot in bots" :key="bot.id">
                                    <td>{{ bot.title }}</td>
                                    <td>{{ bot.createTime }}</td>
                                    <td>
                                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" :data-bs-target="'#update-bot-modal-' + bot.id">修改</button>
                                        <button type="button" class="btn btn-danger"  @click="remove_bot(bot)">删除</button>
                                        
                                        <!-- Modal -->
                                        <div class="modal fade" :id="'update-bot-modal-' + bot.id" tabindex="-1">
                                            <div class="modal-dialog modal-xl">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5">创建Bot</h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="mb-3">
                                                            <label for="add-bot-title" class="form-label">名称</label>
                                                            <input v-model="bot.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="add-bot-description" class="form-label">简介</label>
                                                            <textarea v-model="bot.description" class="form-control" id="add-bot-description" rows="3" placeholder="请输入Bot简介"></textarea>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="add-bot-code" class="form-label">代码</label>
                                                            <textarea v-model="bot.content" class="form-control" id="add-bot-code" rows="7" placeholder="请编写Bot代码"></textarea>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <div class="error-msg">{{ bot.error_msg }}</div>
                                                        <button type="button" class="btn btn-primary" @click="update_bot(bot)">保存修改</button>
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import $ from 'jquery'
import { useStore } from 'vuex';
import { ref, reactive } from 'vue';
import { Modal } from 'bootstrap/dist/js/bootstrap';

export default {
    setup() {
        const store = useStore();
        let bots = ref([]);

        const botadd = reactive({
            title: "",
            description: "",
            content: "",
            error_msg: "",
        });

        const refresh_bots = () => {
            $.ajax({
                url: "http://localhost:3000/user/bot/getlist/",
                type: "get",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    console.log(resp);
                    bots.value = resp;
                },
                error(resp) {
                    console.log(resp);
                },
            });
        };

        refresh_bots();

        const add_bot = () => {
            botadd.error_msg = "";
            $.ajax({
                url: "http://127.0.0.1:3000/user/bot/add/",
                type: "post",
                data: {
                    title: botadd.title,
                    description: botadd.description,
                    content: botadd.content,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    if(resp.error_msg === "success") {
                        botadd.title = "",
                        botadd.description = "",
                        botadd.content = "",
                        Modal.getInstance("#add-bot-button").hide();
                        refresh_bots();
                    } else {
                        botadd.error_msg = resp.error_msg;
                    }
                },
            });
        }

        const update_bot = (bot) => {
            botadd.error_msg = "";
            $.ajax({
                url: "http://127.0.0.1:3000/user/bot/update/",
                type: "post",
                data: {
                    bot_id: bot.id,
                    title: bot.title,
                    description: bot.description,
                    content: bot.content,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    if(resp.error_msg === "success") {
                        Modal.getInstance("#update-bot-modal-" + bot.id).hide();
                        refresh_bots();
                    } else {
                        botadd.error_msg = resp.error_msg;
                    }
                },
            });
        }

        const remove_bot = (bot) => {
            $.ajax({
                url: "http://127.0.0.1:3000/user/bot/remove/",
                type: "post",
                data: {
                    bot_id: bot.id,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    if(resp.error_msg === "success") {
                        refresh_bots();
                    }
                },
            });
        }

        return {
            bots,
            botadd,
            add_bot,
            update_bot,
            remove_bot,
        }
    }
}

</script>

<style scoped>
div.card{
    margin-top: 20px;
}
img{
    width: 100%;
}
span.title{
    font-size: 130%;
}
button.btn-secondary{
    margin-right: 10px;
}
div.error-msg{
    color: red;
}
</style>

页面优化

优化目标：将代码框从文本输入框改为代码编辑器。

安装配置依赖

在vue中安装vue3-ace-editor依赖

  • 在对应的位置替换VAceEditor标签
  • 在script中导入VAceEditor和ace，并且配置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<div>
    <VAceEditor v-model:value="botadd.content" @init="editorInit" lang="c_cpp" theme="textmate" style="height: 300px" />
    </div>
</template>
<script>
    import { VAceEditor } from 'vue3-ace-editor';
    import ace from 'ace-builds';
    export default{
    	components: {
            VAceEditor,
        },
        setup() {
            ace.config.set(
                "basePath", 
                "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")
        },
    }
</script>

实现效果

image-20230317162624849

正在加载今日诗词....