本节的内容是在前端编写
1.获取头像
- BootStrap 中搜索 girds
- BootStrap 中搜索 card
<div class="container text-center">
<div class="row">
<div class="col-3">
<div class="card" style="margin-top: 20px;">//style="margin-top: 20px;"上边距
<div class="card-body">
<img :src="$store.state.user.photo" alt="" style="width: 100%;">//调用数据库中储存的图像
</div>
</div>
</div>
...
</div>
</div>
2.获取另一面并添加创建按钮
- BootStrap 中搜索 card
- BootStrap 中搜索 buttons
<div class="col-9">
<div class="card" style="margin-top: 20px">
<div class="card-header">
<span style="font-size: 130%;">
我的Bot
</span>
<button type="button" class="btnbtn-primaryfloat-end" data-bs-toggle="modal" data-bs-target="#add-bot-btn>
//float-end将按钮调制最右端
//#add-bot-btn是一个id
//data-bs-toggle="modal" data-bs-target="#add-bot-btn是模态框的触发器
创建Bot
</button>
...
3.对接获取Bot信息+渲染到前端
- BootStrap 中搜索 tables
<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">//将每一个bot绑定到每一行
<td>{{ bot.title }}</td>
<td>{{ bot.createtime }}</td>
<td>
<button type="button" class="btn btn-secondary" style="margin-right: 10px" 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>
...
4.实现创建一个Bot
<div class="modal fade" id="add-bot-btn" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">创建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名称">
// v-model=""与后端对接绑定对象
</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>
//继承一个编辑器来写代码
<VAceEditor
v-model:value="botadd.content"
@init="editorInit"
lang="c_cpp"
theme="textmate"
style="height: 300px" />
</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>
...
----------
const add_bot=()=>{
botadd.error_message="",
$.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_message==="success"){
botadd.title="",
botadd.content="",
botadd.description="",
Modal.getInstance("#add-bot-btn").hide();
refresh_bots();
}else{
botadd.error_message=resp.error_message;
}
}
})
}
5.实现删除一个Bot
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_message==="success"){
refresh_bots();
}
}
})
}
6.实现修改一个Bot
const update_bot=(bot)=>{
botadd.error_message="",
$.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{
bot.error_message=resp.error_message;
}
}
})
}
7.表的刷新(也就是表的获取)(每一次操作完都要刷新)
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) {//成功的话显示Bot
bots.value=resp;
}
})
}
refresh_bots();
<div class="modal fade" :id="'update-bot-modal-'+bot.id" tabindex="-1">
id="'update-bot-modal-'+bot.id" 为了保证每一个模态框的id都不一样