P3. 创建个人中心页面

- 0 概述
- Tips
- 1 个人中心页面
- - 1.1 创建 Bot 表及 pojo, mapper
  - 1.2 实现 Bot 增删改查的 API
  - 1.3 实现个人中心页面前端

0 概述

主要介绍了一下添加一个表(类)，及其CRUD的前端和后端的实现方式，介绍的是通用的方法。

后端的CRUD很好写，在前几节P2. 配置MySQL和用户注册登录模块已经介绍过了，因此这边只是带过。

Tips

在数据库中用下划线定义字段 user_id，在 pojo 中用驼峰命名来定义属性 userId，在 queryWrapper 中还是用下划线的变量。
创建数据库表字段的时候一般除了 id 设置成主键非空自增唯一，其他的一般不会设置，比如 bot 的 title 字段，我们可以在 service 中判断使其非空，未来如果实现草稿功能，那么是允许为空的，因此别设置死这些属性。

1 个人中心页面

1.1 创建 Bot 表及 pojo, mapper

以下字段仅供参考，创建 table, pojo, mapper 的实现在P2. 配置MySQL和用户注册登录模块介绍过了。

@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", timezone = "Asia/Shanghai")
    private Date createtime;
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "Asia/Shanghai")
    private Date modifytime;
}

1.2 实现 Bot 增删改查的 API

同样的，根据P2. 配置MySQL和用户注册登录模块中介绍的，分别实现每个功能的 service, serviceImpl, controller 很容易写这几个功能，要注意以下几个细节:

创建 bot 要判断用户传入的参数是否合法；
删除 bot 要看用户是否有权限删除该 bot，且该 bot 是否存在；
更新 bot 首先判断参数是否合法，bot 是否存在，用户是否有权限修改 bot，再更新当前 bot 数据；
获取所有 bot 只需要根据当前登录用户的 user_id 进行查找即可；

1.3 实现个人中心页面前端

在这里插入图片描述

希望整一个上图所示的简单的样子，左边显示头像，右边显示具体的 Bot 信息，提供创建，修改，删除按钮。

整个前端页面分成以下几个步骤实现:

(1) 创建头像栏和右侧 bot 显示栏

首先创建 container 可以动态调整区域，row, col 是通过 grid 将整个 containier 分成 3 份和 9 份。

这里取出头像的方式是通过 :src="$store.state.user.photo"，: 表示后面是表达式，photo 从 state 中取出。

<template>
    <div class="container">
        <div class="row">

            <div class="col-3">
                <div class="card" style="margin-top: 20px;">
                    <div class="card-body">
                        <img :src="$store.state.user.photo" alt="" style ="width: 100%;">
                    </div>
                </div>
            </div>

            <div class="col-9">
                <div class="card" style = "margin-top: 20px;">

                    <div class="card-header">
                        <span style="font-size: 130%;">
                            My Bots
                        </span>

                        <button type="button" class="btn btn-primary float-end">
                            Create Bots
                        </button>
                    </div>

                    <div class = "card-body">
                    </div>

                </div>
            </div>

        </div>
    </div>
</template>

(2) 把该用户的所有 bots 通过 api 查询出来并保存

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

    refresh_bots();

    return {
        bots,
    }
}

(3) 把所有 bot 信息渲染出来

以表格形式显示每个 bot 信息，通过 v-for 和 :key 可以取出来每个 bot。

<div class = "card-body">
    <table class="table table-hover">
		<thead>
			<tr>
				<th>名称</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" style = "margin-right: 10px;">
                    	修改
                	</button>
                	<button type="button" class="btn btn-danger">删除</button>
                </td>
            </tr>
         </tbody>
	</table>
</div>

(4) 实现创建 bot 的模态框并且绑定对象

首先要实现一个模态框，供用户输入相关信息，打开模态框的 button 和模态框通过 id 进行绑定。

vue 中对象一般用 reactive，变量一般用 ref，在 <template> 中通过 v-model 绑定变量或对象的属性。

点击创建按钮，触发 add_bug 事件，用于调试模态框及其是否绑定到对象。

<template>
	<button type="button" class="btn btn-primary float-end" 
            data-bs-toggle="modal" data-bs-target="#add-bot-btn">
        Create Bot
    </button>

    <!-- Modal -->
    <div class="modal fade" id="add-bot-btn" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Create Bot</h5>
                    <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_message">{{ botadd.error_message }}</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>
</template>  

<script>
export default {
    setup() {
        const botadd = reactive({
            title:"",
            description:"",
            content: "",
            error_message: "",
        }); 
        
        const add_bot = () => {
            console.log(botadd);
        }
        
        return {
            botadd,
            add_bot，
        }
    }
}
</script>

<style scoped>
div.error_message {
    color: red;
}
</style>

(5) 将创建 bot 绑定到后端 api，也就是修改上面的 add_bot 函数

这里要注意几点，首先每次记得把上次的错误信息清空；其次在创建成功之后要把所有的信息清空，方便下次创建；在创建完成之后要记得把模态框关掉 Modal.getInstance(#add-bot-btn).hide，并且要重新加载所有的 bots: refresh_bots()。

Modal.getInstance(#btn_id) 通过 id 进行绑定。

另外，这里的 success 是指成功返回结果，而不是说成功创建，因此还要判断 error_message === "success"。

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

(6) 将删除功能绑定到后端 api

比较简单，不再赘述，删除成功后也要记得刷新 bot 列表。

删除需要传入参数 bot。

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

(7) 实现修改功能的模态框并绑定后端 api

模态框和创建的类似，直接搬过来就行，但有一点要注意，每个 bot 是不同的，因此对应的模态框也要对应起来，也就是不只有一个修改模态框，而是有多个修改模态框，根据 bot_id 来绑定 :id="'update-bot-modal-' + bot.id"。

<template>
<button type="button" class="btn btn-secondary" style = "margin-right: 10px;" 
        data-bs-toggle="modal" :data-bs-target="'#update-bot-modal-' + bot.id">修改</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">
                <h5 class="modal-title">Update Bot</h5>
                <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="update-bot-title" class="form-label">名称</label>
                    <input v-model = "bot.title" type="text" class="form-control" 
                           id="update-bot-title" placeholder="请输入bot名称">
                </div>

                <div class="mb-3">
                    <label for="update-bot-description" class="form-label">简介</label>
                    <textarea v-model = "bot.description" class="form-control" 
                              id="update-bot-description" rows="3" placeholder="请输入bot简介"></textarea>
                </div>

                <div class="mb-3">
                     <label for="update-bot-code" class="form-label">代码</label>
                     <textarea v-model = "bot.content" class="form-control" 
                               id="update-bot-code" rows="7" placeholder="请编写bot代码"></textarea>
                </div>
            </div>

            <div class="modal-footer">
                <div class="error_message">{{ update_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>
</template>

<script>
const update_bot = (bot) => {
	update_error_message.value = "";
    $.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_message === "success") {
                Modal.getInstance('#update-bot-modal-' + bot.id).hide();
                refresh_bots();
            } else {
                update_error_message.value = resp.error_message;
            }
        }
    })
}
</script>