SpringBoot --- 创建个人中心页面

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