1.创建数据库和pojo类
主键自增和日期类型的书写、数据库当中的下划线对应到pojo中是驼峰命名法。
@TableId(type = IdType.AUTO)
private Integer id;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date createTime;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date modifyTime;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "Asia/Shanghai")
注意:此时前端获取到的时间会和数据库中的时间相差八个小时。要对注解进行修改,加上时区属性timeZone
2.mapper、service、controller
3.前端界面
采用bootstrap的栅格系统进行划分,一共十二份,这里是39分。
<div class="container">
<div class="row">
<div class="col-3">
</div>
<div class="col-9">
</div>
</div>
</div>
在里面放卡片写内容
<div class="card">
<div class="card-header">
</div>
<div class="card-body">
</div>
</div>
模态框怎么写?直接bootstrap搜索modal
<button type="button" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#add-bot-btn">
创建Bot
</button>
<!-- Modal -->
<div class="modal fade" id="add-bot-btn" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">创建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">Bot标题</label>
<input v-model="newbot.title" type="email" class="form-control" id="add-bot-title" placeholder="请输入bot标题">
</div>
<div class="mb-3">
<label for="add-bot-description" class="form-label">Bot简介</label>
<input v-model="newbot.description" type="email" class="form-control" id="add-bot-description" placeholder="请输入bot简介">
</div>
<div class="mb-3">
<label for="add-bot-content" class="form-label">Bot内容</label>
<VAceEditor
v-model:value="newbot.content"
@init="editorInit"
lang="c_cpp"
theme="textmate"
style="height: 300px"
/>
</div>
</div>
<div class="modal-footer">
<div class="error_message"> {{ newbot.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>
button上要加上 data-bs-toggle="modal" data-bs-target="#add-bot-btn"两个属性,data-bs-target要绑定模态框的id,要加上#。
添加只需要一个模态框,而修改需要多个模态框,这里就要在模态框的id属性上加上 bot的id用来做标识了 如 :id="'update-bot-btn' + bot.id" :是v-bind的缩写,用来绑定值。
添加或者修改成功后需要关闭模态框,这里要用modal提供的api。
import { Modal } from 'bootstrap/dist/js/bootstrap';
if(resp.error_message === 'success') {
newbot.title = "";
newbot.description = "";
newbot.content = "";
//关闭模态框 使用的是一个API
Modal.getInstance("#add-bot-btn").hide();
getlist();
}