• 创建个人中心页面(下）

    目录

    布局规划前端页面

    获取头像+获取Bot列表

    对接获取Bot信息+渲染到前端

    实现创建一个Bot

    前端进行对接插入Bot

    实现创建成功关闭和清空

    修改时间

    实现删除按钮

    安装依赖：vue3-ace-editor

    布局规划前端页面

    使用 bootstrap 的 grids system 进行布局

    在 bootstrap 的网址搜索 grids system。

    一行分为12份，左边3份，为头像；右边9份，白色区域 cards，加上按钮创建 bot，获取 Bot 列表

    在 views.user.bot.UserBotIndexView.vue 下修改，实现基本的个人 bot 信息展示

    获取头像+获取Bot列表

    对接获取Bot信息+渲染到前端

     

    1. <template>
    2.     <div class="container">
    3.         <div class="row">
    4.             <div class="col-3">
    5.                 <div class="card" style="margin-top:20px;">
    6.                     <div class="card-body" >
    7.                         <img :src="$store.state.user.photo" alt="" style="width:100%;">
    8.                     </div>
    9.                 </div>
    10.             </div>
    11.             <div class="col-9">
    12.                 <div class="card" style="margin-top:20px;">
    13.                     <div class="card-header">
    14.                         <span style="font-size:130%">我的Robot</span>
    15.                     
    16.                         <button type="button" class="btn btn-warning float-end" style="color:white;" data-bs-toggle="modal" data-bs-target="#add-bot-btn">
    17.                             创建Robot
    18.                         </button>
    19.                         <!--    创建robot 模态框 -->
    20.                     
    21.  
    22.                         
    23.                     </div>
    24.                     <div class="card-body">
    25.                         <table class="table table-striped table-hover">
    26.                             <thead>
    27.                                 <tr>
    28.                                     <th>Robot名称</th>
    29.                                     <th>创建时间</th>
    30.                                     <th>操作</th>
    31.                                 </tr>
    32.                             </thead>
    33.                             <tbody>
    34.                                 <tr v-for="bot in bots" :key="bot.id">
    35.                                     <td>{{bot.title}}</td>
    36.                                     <td>{{bot.createTime}}</td>
    37.                                     <td>
    38.                                         <button type="button" class="btn btn-primary" style="color:white; margin-right: 10px;" data-bs-toggle="modal" :data-bs-target="'#update-bot-modal-'+bot.id">
    39.                                             修改
    40.                                         </button>
    41.                                         <button type="button" @click="remove_bot(bot)" class="btn btn-danger" style="color:white;">
    42.                                             删除
    43.                                         </button>
    44.  
    45.                                     <!-- 修改bot模态框 -->
    46.                                     </td>
    47.                                 </tr>
    48.                             </tbody>
    49.                         </table>
    50.                     </div>
    51.                 </div>
    52.             </div>
    53.         </div>
    54.     </div>
    55. </template>
    56.  
    57. <script>
    58.  
    59.  
    60. import $ from 'jquery'
    61. import { ref } from 'vue'
    62. import { useStore } from 'vuex';
    63.  
    64. export default{
    65.     components:{
    66.  
    67.     },
    68.     setup(){
    69.         const store = useStore();
    70.         let bots = ref([]);
    71.         const refresh_bots = () => {
    72.                 $.ajax({
    73.                 url: "http://127.0.0.1:3000/user/bot/getlist/",
    74.                 type: "get",
    75.                 headers: {
    76.                     Authorization: "Bearer " + store.state.user.token,
    77.                 },
    78.                 success(resp) {
    79.                     bots.value = resp;
    80.                 }
    81.                 });
    82.         }
    83.         refresh_bots();
    84.         return{
    85.             bots,
    86.         }
    87.  
    88.     }
    89. }
    90. </script>
    91. <style scoped>
    92. </style>

    前端页面创建、修改、删除 Bot

    实现创建一个Bot

    在点击 创建Bot 按钮的时候需要一个弹窗。在 bootstrap 中寻找一个 modals ：

    在 views.user.bot.UserBotIndexView.vue 下修改，增加一个模态框，然后丰富模态框的内容。

    1. <template>
    2.     <div class="container">
    3.         <div class="row">
    4.             <div class="col-3">
    5.                 <div class="card" style="margin-top:20px;">
    6.                     <div class="card-body" >
    7.                         <img :src="$store.state.user.photo" alt="" style="width:100%;">
    8.                     </div>
    9.                 </div>
    10.             </div>
    11.             <div class="col-9">
    12.                 <div class="card" style="margin-top:20px;">
    13.                     <div class="card-header">
    14.                         <span style="font-size:130%">我的Robot</span>
    15.                     
    16.                         <button type="button" class="btn btn-warning float-end" style="color:white;" data-bs-toggle="modal" data-bs-target="#add-bot-btn">
    17.                             创建Robot
    18.                         </button>
    19.                         <!--    创建robot 模态框 -->
    20.                     
    21.  
    22.                         <div class="modal fade" id="add-bot-btn" tabindex="-1">
    23.                             <div class="modal-dialog  modal-xl">
    24.                                 <div class="modal-content">
    25.                                 <div class="modal-header">
    26.                                     <h5 class="modal-title" id="exampleModalLabel">创建Robot</h5>
    27.                                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    28.                                 </div>
    29.                                 <div class="modal-body">
    30.                                         <div class="mb-3">
    31.                                             <label for="add-bot-title" class="form-label">名称</label>
    32.                                             <input v-model="botadd.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Robot名称">
    33.                                         </div>
    34.                                         <div class="mb-3">
    35.                                             <label for="add-bot-description" class="form-label">Robot简介</label>
    36.                                             <textarea v-model="botadd.description" class="form-control" id="add-bot-description" rows="3" placeholder="请输入Robot描述"></textarea>
    37.                                         </div>
    38.                                         <div class="mb-3">
    39.                                             <label for="add-bot-code" class="form-label">Robot代码</label>
    40.                                             <textarea v-model="botadd.content" class="form-control" id="add-bot-content" rows="3" placeholder="请输入Bot代码"></textarea>
    41.                                         </div>
    42.                                     </div>
    43.                                 </div>
    44.                             </div>
    45.                         </div>
    46.  
    47.  
    48.                         <div class="modal-footer">
    49.                                     <!-- //增加报错信息 -->
    50.                                     <div class="error-message">{{ botadd.error_message }}</div>
    51.                                     <button type="button" class="btn btn-primary" @click="add_bot">创建</button>
    52.                                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
    53.                         </div>
    54.                         
    55.  
    56.  
    57.                         
    58.                     </div>
    59.                     <div class="card-body">
    60.                         <table class="table table-striped table-hover ">
    61.                             <thead>
    62.                                 <tr>
    63.                                     <th>Robot名称</th>
    64.                                     <th>创建时间</th>
    65.                                     <th>操作</th>
    66.                                 </tr>
    67.                             </thead>
    68.                             <tbody>
    69.                                 <tr v-for="bot in bots" :key="bot.id">
    70.                                     <td>{{bot.title}}</td>
    71.                                     <td>{{bot.createTime}}</td>
    72.                                     <td>
    73.                                         <button type="button" class="btn btn-primary" style="color:white; margin-right: 10px;" data-bs-toggle="modal" :data-bs-target="'#update-bot-modal-'+bot.id">
    74.                                             修改
    75.                                         </button>
    76.                                         <button type="button" @click="remove_bot(bot)" class="btn btn-danger" style="color:white;">
    77.                                             删除
    78.                                         </button>
    79.  
    80.                                     <!-- 修改bot模态框 -->
    81.                                     </td>
    82.                                 </tr>
    83.                             </tbody>
    84.                         </table>
    85.                     </div>
    86.                 </div>
    87.             </div>
    88.         </div>
    89.     </div>
    90. </template>
    91.  
    92. <script>
    93.  
    94.  
    95. import $ from 'jquery'
    96. import { ref } from 'vue'
    97. import { useStore } from 'vuex';
    98.  
    99. export default{
    100.     components:{
    101.  
    102.     },
    103.     setup(){
    104.         const store = useStore();
    105.         let bots = ref([]);
    106.         const refresh_bots = () => {
    107.                 $.ajax({
    108.                 url: "http://127.0.0.1:3000/user/bot/getlist/",
    109.                 type: "get",
    110.                 headers: {
    111.                     Authorization: "Bearer " + store.state.user.token,
    112.                 },
    113.                 success(resp) {
    114.                     bots.value = resp;
    115.                 }
    116.                 });
    117.         }
    118.         refresh_bots();
    119.         return{
    120.             bots,
    121.         }
    122.  
    123.     }
    124. }
    125. </script>
    126. <style scoped>
    127. </style>

    前端进行对接插入Bot

    增加一个 add_bot 函数：

    1. <template>
    2.     <div class="container">
    3.         <div class="row">
    4.             <div class="col-3">
    5.                 <div class="card" style="margin-top:20px;">
    6.                     <div class="card-body" >
    7.                         <img :src="$store.state.user.photo" alt="" style="width:100%;">
    8.                     </div>
    9.                 </div>
    10.             </div>
    11.             <div class="col-9">
    12.                 <div class="card" style="margin-top:20px;">
    13.                     <div class="card-header">
    14.                         <span style="font-size:130%">我的Robot</span>
    15.                     
    16.                         <button type="button" class="btn btn-warning float-end" style="color:white;" data-bs-toggle="modal" data-bs-target="#add-bot-btn">
    17.                             创建Robot
    18.                         </button>
    19.                         <!--    创建robot 模态框 -->
    20.                     
    21.  
    22.                         <div class="modal fade" id="add-bot-btn" tabindex="-1">
    23.                             <div class="modal-dialog  modal-xl">
    24.                                 <div class="modal-content">
    25.                                 <div class="modal-header">
    26.                                     <h5 class="modal-title" id="exampleModalLabel">创建Robot</h5>
    27.                                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    28.                                 </div>
    29.                                 <div class="modal-body">
    30.                                         <div class="mb-3">
    31.                                             <label for="add-bot-title" class="form-label">名称</label>
    32.                                             <input v-model="botadd.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Robot名称">
    33.                                         </div>
    34.                                         <div class="mb-3">
    35.                                             <label for="add-bot-description" class="form-label">Robot简介</label>
    36.                                             <textarea v-model="botadd.description" class="form-control" id="add-bot-description" rows="3" placeholder="请输入Robot描述"></textarea>
    37.                                         </div>
    38.                                         <div class="mb-3">
    39.                                             <label for="add-bot-code" class="form-label">Robot代码</label>
    40.                                             <textarea v-model="botadd.content" class="form-control" id="add-bot-content" rows="3" placeholder="请输入Bot代码"></textarea>
    41.                                         </div>
    42.                                     </div>
    43.                                 </div>
    44.                             </div>
    45.                         </div>
    46.  
    47.  
    48.                         <div class="modal-footer">
    49.                                     <!-- //增加报错信息 -->
    50.                                     <div class="error-message">{{ botadd.error_message }}</div>
    51.                                     <button type="button" class="btn btn-primary" @click="add_bot">创建</button>
    52.                                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
    53.                         </div>
    54.                         
    55.  
    56.  
    57.                         
    58.                     </div>
    59.                     <div class="card-body">
    60.                         <table class="table table-striped table-hover ">
    61.                             <thead>
    62.                                 <tr>
    63.                                     <th>Robot名称</th>
    64.                                     <th>创建时间</th>
    65.                                     <th>操作</th>
    66.                                 </tr>
    67.                             </thead>
    68.                             <tbody>
    69.                                 <tr v-for="bot in bots" :key="bot.id">
    70.                                     <td>{{bot.title}}</td>
    71.                                     <td>{{bot.createTime}}</td>
    72.                                     <td>
    73.                                         <button type="button" class="btn btn-primary" style="color:white; margin-right: 10px;" data-bs-toggle="modal" :data-bs-target="'#update-bot-modal-'+bot.id">
    74.                                             修改
    75.                                         </button>
    76.                                         <button type="button" @click="remove_bot(bot)" class="btn btn-danger" style="color:white;">
    77.                                             删除
    78.                                         </button>
    79.  
    80.                                     <!-- 修改bot模态框 -->
    81.                                     </td>
    82.                                 </tr>
    83.                             </tbody>
    84.                         </table>
    85.                     </div>
    86.                 </div>
    87.             </div>
    88.         </div>
    89.     </div>
    90. </template>
    91.  
    92. <script>
    93.  
    94.  
    95. import $ from 'jquery'
    96. import { ref } from 'vue'
    97. import { useStore } from 'vuex';
    98.  
    99. export default{
    100.     components:{
    101.  
    102.     },
    103.     setup(){
    104.         const store = useStore();
    105.         let bots = ref([]);
    106.         const refresh_bots = () => {
    107.                 $.ajax({
    108.                 url: "http://127.0.0.1:3000/user/bot/getlist/",
    109.                 type: "get",
    110.                 headers: {
    111.                     Authorization: "Bearer " + store.state.user.token,
    112.                 },
    113.                 success(resp) {
    114.                     bots.value = resp;
    115.                 }
    116.                 });
    117.         }
    118.         const botadd = reactive({
    119.             title: "",
    120.             description: "",
    121.             content: "",
    122.             error_message: "",
    123.         });
    124.  
    125.         //创建一个 bot
    126.         const add_bot = () => {
    127.                     botadd.error_message = "";
    128.                     $.ajax({
    129.                         url: "http://127.0.0.1:3000/user/bot/add/",
    130.                         type: "post",
    131.                         data: {
    132.                             title: botadd.title,
    133.                             description: botadd.description,
    134.                             content: botadd.content,
    135.                         },
    136.                         headers: {
    137.                             Authorization: "Bearer " + store.state.user.token,
    138.                         },
    139.                         success(resp) {
    140.                             if (resp.error_message === "success") {
    141.                                 botadd.title = "";
    142.                                 botadd.description = "";
    143.                                 botadd.content = "";
    144.                                 Modal.getInstance("#add-bot-btn").hide();
    145.                                 refresh_bots();
    146.                             } else {
    147.                                 botadd.error_message = resp.error_message;
    148.                             }
    149.                         }
    150.                     })
    151.                 }
    152.         refresh_bots();
    153.         return{
    154.             bots,
    155.             botadd,
    156.             add_bot,
    157.         }
    158.  
    159.     }
    160. }
    161. </script>
    162. <style scoped>
    163. </style>

     创建完成后需要绑定前端的信息。在前面的地方加上 v-model，同时增加一个 触发事件。

     

     修改时间

    如果创建 Bot 的时候时间出现问题：在后端的 pojo 里修改，加上时区：

    1. package com.kill9.backend.pojo;
    2.  
    3. import com.baomidou.mybatisplus.annotation.IdType;
    4. import com.baomidou.mybatisplus.annotation.TableId;
    5. import com.fasterxml.jackson.annotation.JsonFormat;
    6. import lombok.AllArgsConstructor;
    7. import lombok.Data;
    8. import lombok.NoArgsConstructor;
    9.  
    10. import java.util.Date;
    11.  
    12. @Data
    13. @NoArgsConstructor
    14. @AllArgsConstructor
    15. public class Bot {
    16.     @TableId(type = IdType.AUTO)
    17.     private Integer id;//在pojo里最好用Integer，否则会报警告
    18.     private Integer userId;//pojo里要用驼峰命名法和数据库的下划线对应
    19.     private String title;
    20.     private String description;
    21.     private String content;
    22.     private Integer rating;
    23.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss" ,timezone = "Asia/Shanghai")
    24.     private Date createtime;
    25.     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "Asia/Shanghai")
    26.     private Date modifytime;
    27. }

    实现创建成功关闭和清空

    1. success(resp) {
    2.                             if (resp.error_message === "success") {
    3.                                 botadd.title = "";
    4.                                 botadd.description = "";
    5.                                 botadd.content = "";
    6.                                 Modal.getInstance("#add-bot-btn").hide();
    7.                                 refresh_bots();
    8.                             } else {
    9.                                 botadd.error_message = resp.error_message;
    10.                             }
    11.                         }

    实现删除按钮

     删除一个 Bot

    增加一个 删除 bot 的函数：

    1. //删除一个 bot
    2.         const remove_bot = (bot) => {
    3.             $.ajax({
    4.                 url: "http://127.0.0.1:3000/user/bot/remove/",
    5.                 type: "post",
    6.                 data: {
    7.                     bot_id: bot.id,
    8.                 },
    9.                 headers: {
    10.                     Authorization: "Bearer " + store.state.user.token,
    11.                 },
    12.                 success(resp) {
    13.                     console.log(resp);
    14.                     if (resp.error_message === "success") {
    15.                         refresh_bots();
    16.                     }
    17.                 }
    18.             })
    19.         }

    同时需要在上文绑定 删除 按钮。

    <button type="button" class="btn btn-danger" @click="remove_bot(bot)">删除</button>

     如果删除的时候提示没有权限，可能是因为后端的 RemoveServiceImpl.java 文件出错，在里面修改即可。

    修改一个 Bot

    在 views.user.bot.UserBotIndexView.vue 下修改。

    1. const update_bot = (bot) => {
    2.             botadd.error_message = "";
    3.             $.ajax({
    4.                 url: "http://127.0.0.1:8080/user/bot/update/",
    5.                 type: "post",
    6.                 data: {
    7.                     bot_id: bot.id,
    8.                     title: bot.title,
    9.                     description: bot.description,
    10.                     content: bot.content,
    11.                 },
    12.                 headers: {
    13.                     Authorization: "Bearer " + store.state.user.token,
    14.                 },
    15.                 success(resp) {
    16.                     if (resp.error_message === "success") {
    17.                         Modal.getInstance('#update-bot-modal-' + bot.id).hide();
    18.                         refresh_bots();
    19.                     } else {
    20.                         botadd.error_message = resp.error_message;
    21.                     }
    22.                 }
    23.             })
    24.         }
    25.

    修改每一个 bot 的时候需要有对应单独的一个模态框。

     

    1. <!-- 修改bot模态框 -->
    2.                                     <div class="modal fade" :id="'update-bot-modal-'+bot.id" tabindex="-1">
    3.                                             <div class="modal-dialog  modal-xl">
    4.                                                 <div class="modal-content">
    5.                                                 <div class="modal-header">
    6.                                                     <h5 class="modal-title">Modify Robot</h5>
    7.                                                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    8.                                                 </div>
    9.                                                 <div class="modal-body">
    10.                                                         <div class="mb-3">
    11.                                                             <label for="add-bot-title" class="form-label">Title</label>
    12.                                                             <input v-model="bot.title" type="text" class="form-control" id="add-bot-title" placeholder="Input Robot Title">
    13.                                                         </div>
    14.                                                         <div class="mb-3">
    15.                                                             <label for="add-bot-description" class="form-label">Robot Description</label>
    16.                                                             <textarea v-model="bot.description" class="form-control" id="add-bot-description" rows="3" placeholder="Input Robot Description"></textarea>
    17.                                                         </div>
    18.                                                         <div class="mb-3">
    19.                                                             <label for="add-bot-code" class="form-label">Robot Code</label>
    20.                                                             <textarea v-model="bot.content" class="form-control" id="add-bot-content" rows="3" placeholder="Input Bot Code"></textarea>
    21.                                                         </div>
    22.                                                 </div>
    23.                                                 <div class="modal-footer">
    24.                                                     <div class="error-message">
    25.                                                         {{botadd.error_message}}
    26.                                                     </div>
    27.                                                     <button type="button" class="btn btn-primary" @click="update_bot(bot)">Save Changes</button>
    28.                                                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    29.  
    30.                                                 </div>
    31.                                             </div>
    32.                                             </div>
    33.                                         </div>

     

     

     

    安装依赖：vue3-ace-editor

    在 vue 界面添加依赖 vue3-ace-editor
    添加组件

    1. import { VAceEditor } from 'vue3-ace-editor';
    2. import ace from 'ace-builds';
    3. ace.config.set(
    4.     "basePath", 
    5.     "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")
    6. <VAceEditor
    7.     v-model:value="botadd.content"
    8.     @init="editorInit"
    9.     lang="c_cpp"
    10.     theme="textmate"
    11.     style="height: 300px" />
    12.

     

     

    完成～～ 

  • 相关阅读:
    【C++】STL 标准模板库 ② ( STL 标准模板库组成 | STL 十三个头文件 | STL 六大组件 | STL 容器存放基础数据类型 | STL 容器存放类对象 | 容器存放对象指针 )
    优化用户体验：直播带货系统源码的界面设计与互动功能
    1111111111
    【JavaSe笔记】接口的定义，特性，实现，继承
    【EI会议征稿】2024年智慧城市与信息系统国际学术会议 (ICSCIS 2024)
    PyRosetta 安装方法之Conda安装
    c语言练习84：动态内存管理
    网站分析软件Umami
    UEFI-PciHostBridge
    【注释和反射】类加载的过程
  • 原文地址：https://blog.csdn.net/weixin_49884716/article/details/127855489