笔记内容转载自 AcWing 的 SpringBoot 框架课讲义，课程链接：AcWing SpringBoot 框架课。
本节实现个人中心的前端页面，用户能够查看自己的 Bot 信息，并能创建、修改或删除 Bot，此外还集成了 Vue Ace Editor 代码编辑器，方便用户输入 Bot 的代码。
我们要实现用户的个人中心页面，能够展示用户的头像以及自己所有 Bot 的信息，例如 Bot 名字、创建时间等，还需要具有创建/修改/删除 Bot 等功能，在很早之前创建的 MyBotsIndexView 组件中实现：
<template>
<div class="container">
<div class="card text-bg-secondary" style="margin-top: 20px;">
<div class="card-header">
<h3>My Botsh3>
div>
<div class="card-body" style="background-color: rgba(255, 255, 255, 0.5);">
<div class="row">
<div class="col-md-3">
<div class="card">
<div class="card-body text-center">
<img class="img-fluid" :src="$store.state.user.photo" style="width:50%; border-radius: 50%;">
<div style="font-size: 20px; margin-top: 10px; font-weight: bold;">
{{ $store.state.user.username }}
div>
div>
div>
div>
<div class="col-md-9">
<div class="card">
<div class="card-header">
<span style="font-size: 25px;">Bot 管理span>
<button class="btn btn-outline-success float-end" type="button" data-bs-toggle="modal" data-bs-target="#add_bot_modal">
创建 Bot
button>
<div class="modal fade" id="add_bot_modal" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header" style="background-color: #198754;">
<h1 class="modal-title fs-5" style="color: white;">创建 Both1>
<button type="button" class="btn-close" data-bs-dismiss="modal">button>
div>
<div class="modal-body">
<div class="mb-3">
<label for="title" class="form-label">名称label>
<input v-model="new_bot.title" type="email" class="form-control" id="title" placeholder="请输入 Bot 名称">
div>
<div class="mb-3">
<label for="description" class="form-label">简介label>
<textarea v-model="new_bot.description" class="form-control" id="description" rows="3" placeholder="介绍一下你的 Bot 吧~（可以暂时不填）">textarea>
div>
<div class="mb-3">
<label for="content" class="form-label">代码label>
<textarea v-model="new_bot.content" class="form-control" id="content" rows="14" placeholder="在这里编写你的 Bot 代码~">textarea>
div>
div>
<div class="modal-footer">
<div class="error_message" style="color: red;">{{ new_bot.error_message }}div>
<button type="button" class="btn btn-success" @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-striped table-hover">
<thead>
<tr>
<th>名称th>
<th>创建时间th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="bot in bots" :key="bot.id">
<td style="line-height: 32px;">{{ bot.title }}td>
<td style="line-height: 32px;">{{ bot.createtime }}td>
<td>
<button class="btn btn-outline-primary" type="button" data-bs-toggle="modal" :data-bs-target="'#update_bot_modal_' + bot.id" style="margin-right: 10px; padding: 3px 10px;">
修改
button>
<button class="btn btn-outline-danger" type="button" data-bs-toggle="modal" :data-bs-target="'#remove_bot_modal_' + bot.id" style="padding: 3px 10px;">
删除
button>
<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" style="background-color: #0D6EFD;">
<h1 class="modal-title fs-5" style="color: white;">修改 Both1>
<button type="button" class="btn-close" data-bs-dismiss="modal">button>
div>
<div class="modal-body">
<div class="mb-3">
<label for="title" class="form-label">名称label>
<input v-model="bot.title" type="email" class="form-control" id="title" placeholder="请输入 Bot 名称">
div>
<div class="mb-3">
<label for="description" class="form-label">简介label>
<textarea v-model="bot.description" class="form-control" id="description" rows="3" placeholder="介绍一下你的 Bot 吧~（可以暂时不填）">textarea>
div>
<div class="mb-3">
<label for="content" class="form-label">代码label>
<textarea v-model="bot.content" class="form-control" id="content" rows="14" placeholder="在这里编写你的 Bot 代码~">textarea>
div>
div>
<div class="modal-footer">
<div class="error_message" style="color: red;">{{ new_bot.error_message }}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>
<div class="modal fade" :id="'remove_bot_modal_' + bot.id" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header" style="background-color: #DC3545;">
<h1 class="modal-title fs-5" style="color: white;">警告h1>
<button type="button" class="btn-close" data-bs-dismiss="modal">button>
div>
<div class="modal-body" style="font-size: 20px;">
确认删除？该操作无法撤销哦~
div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" @click="remove_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>
div>
div>
template>
<script>
import { ref, reactive } from "vue"; // reactive用来让组件绑定对象
import { useStore } from "vuex";
import { Modal } from "bootstrap/dist/js/bootstrap";
import $ from "jquery";
export default {
setup() {
const store = useStore();
let bots = ref([]); // bot列表
const new_bot = reactive({ // 要新创建的bot对象
title: "",
description: "",
content: "",
error_message: "",
});
const get_bots = () => {
$.ajax({
url: "http://localhost:3000/user/bot/getlist/",
type: "GET",
headers: {
Authorization: "Bearer " + store.state.user.jwt_token,
},
success(resp) {
bots.value = resp; // 后端返回的就是一个列表
},
});
};
get_bots(); // 定义完后直接执行一遍
const add_bot = () => {
new_bot.error_message = "";
$.ajax({
url: "http://localhost:3000/user/bot/add/",
type: "POST",
data: {
title: new_bot.title,
description: new_bot.description,
content: new_bot.content,
},
headers: {
Authorization: "Bearer " + store.state.user.jwt_token,
},
success(resp) {
if (resp.result === "success") {
// 需要清空信息防止下次打开创建模态框时还留有上次的信息
new_bot.title = "";
new_bot.description = "";
new_bot.content = "";
Modal.getInstance("#add_bot_modal").hide(); // 关闭模态框
get_bots(); // 刷新一下Bot列表
} else {
new_bot.error_message = resp.result;
}
},
});
};
const remove_bot = (bot) => {
$.ajax({
url: "http://localhost:3000/user/bot/remove/",
type: "POST",
data: {
bot_id: bot.id,
},
headers: {
Authorization: "Bearer " + store.state.user.jwt_token,
},
success(resp) {
if (resp.result === "success") {
Modal.getInstance("#remove_bot_modal_" + bot.id).hide();
get_bots();
}
},
});
};
const update_bot = (bot) => {
new_bot.error_message = "";
$.ajax({
url: "http://localhost: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.jwt_token,
},
success(resp) {
if (resp.result === "success") {
Modal.getInstance("#update_bot_modal_" + bot.id).hide();
get_bots();
} else {
new_bot.error_message = resp.result;
}
},
});
};
return {
bots,
new_bot,
add_bot,
remove_bot,
update_bot,
};
},
};
script>
<style scoped>style>
注意，我们实现了当点击创建 Bot 按钮时弹出一个模态框（Bootstrap 中的 Modal）的效果，然后用户可以在里面编辑 Bot 的信息。但对于每个 Bot 的修改和删除应该都会分别对应一个模态框，而不像创建那样只有一个模态框，因此每个模态框还需要加一个 ID 来对应。
现在我们会发现前端页面中显示的 Bot 创建时间和后端数据库中的不一致，需要在 pojo 中的 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(value = "id", type = IdType.AUTO) // 声明id为自增类型
private Integer id;
private Integer userId; // 注意驼峰命名，userId之后会被解析为user_id，别写成userID，因为这样会解析成user_i_d
private String title;
private String description;
private String content;
private Integer rating;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "Asia/Shanghai") // 注意日期格式和时区的设置
private Date createtime;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "Asia/Shanghai")
private Date modifytime;
}
由于 Bot 的内容有代码部分，之前我们用的是