网站域名列表,长沙工作室网站建设,北京时事新闻,闵行做网站笔记内容转载自 AcWing 的 SpringBoot 框架课讲义#xff0c;课程链接#xff1a;AcWing SpringBoot 框架课。 CONTENTS 1. 实现个人中心页面2. POJO时区修改3. 集成代码编辑器 本节实现个人中心的前端页面#xff0c;用户能够查看自己的 Bot 信息#xff0c;并能创建、修改…笔记内容转载自 AcWing 的 SpringBoot 框架课讲义课程链接AcWing SpringBoot 框架课。 CONTENTS 1. 实现个人中心页面2. POJO时区修改3. 集成代码编辑器 本节实现个人中心的前端页面用户能够查看自己的 Bot 信息并能创建、修改或删除 Bot此外还集成了 Vue Ace Editor 代码编辑器方便用户输入 Bot 的代码。
1. 实现个人中心页面
我们要实现用户的个人中心页面能够展示用户的头像以及自己所有 Bot 的信息例如 Bot 名字、创建时间等还需要具有创建/修改/删除 Bot 等功能在很早之前创建的 MyBotsIndexView 组件中实现
templatediv classcontainerdiv classcard text-bg-secondary stylemargin-top: 20px;div classcard-headerh3My Bots/h3/divdiv classcard-body stylebackground-color: rgba(255, 255, 255, 0.5);div classrowdiv classcol-md-3div classcard!-- 用户头像与用户名 --div classcard-body text-centerimg classimg-fluid :src$store.state.user.photo stylewidth:50%; border-radius: 50%;div stylefont-size: 20px; margin-top: 10px; font-weight: bold;{{ $store.state.user.username }}/div/div/div/divdiv classcol-md-9div classcarddiv classcard-headerspan stylefont-size: 25px;Bot 管理/span!-- 点击创建按钮能够打开模态框 --button classbtn btn-outline-success float-end typebutton data-bs-togglemodal data-bs-target#add_bot_modal创建 Bot/button!-- 创建 Bot 的模态框 --div classmodal fade idadd_bot_modal tabindex-1div classmodal-dialog modal-xldiv classmodal-contentdiv classmodal-header stylebackground-color: #198754;h1 classmodal-title fs-5 stylecolor: white;创建 Bot/h1button typebutton classbtn-close data-bs-dismissmodal/button/divdiv classmodal-bodydiv classmb-3label fortitle classform-label名称/labelinput v-modelnew_bot.title typeemail classform-control idtitle placeholder请输入 Bot 名称/divdiv classmb-3label fordescription classform-label简介/labeltextarea v-modelnew_bot.description classform-control iddescription rows3 placeholder介绍一下你的 Bot 吧~可以暂时不填/textarea/divdiv classmb-3label forcontent classform-label代码/labeltextarea v-modelnew_bot.content classform-control idcontent rows14 placeholder在这里编写你的 Bot 代码~/textarea/div/divdiv classmodal-footerdiv classerror_message stylecolor: red;{{ new_bot.error_message }}/divbutton typebutton classbtn btn-success clickadd_bot创建/buttonbutton typebutton classbtn btn-secondary data-bs-dismissmodal取消/button/div/div/div/div/div!-- 用户的 Bot 列表 --div classcard-bodytable classtable table-striped table-hovertheadtrth名称/thth创建时间/thth操作/th/tr/theadtbodytr v-forbot in bots :keybot.idtd styleline-height: 32px;{{ bot.title }}/tdtd styleline-height: 32px;{{ bot.createtime }}/tdtdbutton classbtn btn-outline-primary typebutton data-bs-togglemodal :data-bs-target#update_bot_modal_ bot.id stylemargin-right: 10px; padding: 3px 10px;修改/buttonbutton classbtn btn-outline-danger typebutton data-bs-togglemodal :data-bs-target#remove_bot_modal_ bot.id stylepadding: 3px 10px;删除/button!-- 修改 Bot 的模态框 --div classmodal fade :idupdate_bot_modal_ bot.id tabindex-1div classmodal-dialog modal-xldiv classmodal-contentdiv classmodal-header stylebackground-color: #0D6EFD;h1 classmodal-title fs-5 stylecolor: white;修改 Bot/h1button typebutton classbtn-close data-bs-dismissmodal/button/divdiv classmodal-bodydiv classmb-3label fortitle classform-label名称/labelinput v-modelbot.title typeemail classform-control idtitle placeholder请输入 Bot 名称/divdiv classmb-3label fordescription classform-label简介/labeltextarea v-modelbot.description classform-control iddescription rows3 placeholder介绍一下你的 Bot 吧~可以暂时不填/textarea/divdiv classmb-3label forcontent classform-label代码/labeltextarea v-modelbot.content classform-control idcontent rows14 placeholder在这里编写你的 Bot 代码~/textarea/div/divdiv classmodal-footerdiv classerror_message stylecolor: red;{{ new_bot.error_message }}/divbutton typebutton classbtn btn-primary clickupdate_bot(bot)保存修改/buttonbutton typebutton classbtn btn-secondary data-bs-dismissmodal取消/button/div/div/div/div!-- 删除 Bot 的确认模态框 --div classmodal fade :idremove_bot_modal_ bot.id tabindex-1div classmodal-dialog modal-dialog-centereddiv classmodal-contentdiv classmodal-header stylebackground-color: #DC3545;h1 classmodal-title fs-5 stylecolor: white;警告/h1button typebutton classbtn-close data-bs-dismissmodal/button/divdiv classmodal-body stylefont-size: 20px;确认删除该操作无法撤销哦~/divdiv classmodal-footerbutton typebutton classbtn btn-danger clickremove_bot(bot)删除/buttonbutton typebutton classbtn btn-secondary data-bs-dismissmodal取消/button/div/div/div/div/td/tr/tbody/table/div/div/div/div/div/div/div
/templatescript
import { ref, reactive } from vue; // reactive用来让组件绑定对象
import { useStore } from vuex;
import { Modal } from bootstrap/dist/js/bootstrap;
import $ from jquery;export default {setup() {const store useStore();let bots ref([]); // bot列表const new_bot reactive({ // 要新创建的bot对象title: ,description: ,content: ,error_message: ,});const get_bots () {$.ajax({url: http://localhost:3000/user/bot/getlist/,type: GET,headers: {Authorization: Bearer store.state.user.jwt_token,},success(resp) {bots.value resp; // 后端返回的就是一个列表},});};get_bots(); // 定义完后直接执行一遍const add_bot () {new_bot.error_message ;$.ajax({url: http://localhost:3000/user/bot/add/,type: POST,data: {title: new_bot.title,description: new_bot.description,content: new_bot.content,},headers: {Authorization: Bearer store.state.user.jwt_token,},success(resp) {if (resp.result success) {// 需要清空信息防止下次打开创建模态框时还留有上次的信息new_bot.title ;new_bot.description ;new_bot.content ;Modal.getInstance(#add_bot_modal).hide(); // 关闭模态框get_bots(); // 刷新一下Bot列表} else {new_bot.error_message resp.result;}},});};const remove_bot (bot) {$.ajax({url: http://localhost:3000/user/bot/remove/,type: POST,data: {bot_id: bot.id,},headers: {Authorization: Bearer store.state.user.jwt_token,},success(resp) {if (resp.result success) {Modal.getInstance(#remove_bot_modal_ bot.id).hide();get_bots();}},});};const update_bot (bot) {new_bot.error_message ;$.ajax({url: http://localhost: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.jwt_token,},success(resp) {if (resp.result success) {Modal.getInstance(#update_bot_modal_ bot.id).hide();get_bots();} else {new_bot.error_message resp.result;}},});};return {bots,new_bot,add_bot,remove_bot,update_bot,};},
};
/scriptstyle scoped/style注意我们实现了当点击创建 Bot 按钮时弹出一个模态框Bootstrap 中的 Modal的效果然后用户可以在里面编辑 Bot 的信息。但对于每个 Bot 的修改和删除应该都会分别对应一个模态框而不像创建那样只有一个模态框因此每个模态框还需要加一个 ID 来对应。
2. POJO时区修改
现在我们会发现前端页面中显示的 Bot 创建时间和后端数据库中的不一致需要在 pojo 中的 Bot 类中修改
package com.kob.backend.pojo;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import java.util.Date;Data
NoArgsConstructor
AllArgsConstructor
public class Bot {TableId(value id, type IdType.AUTO) // 声明id为自增类型private Integer id;private Integer userId; // 注意驼峰命名userId之后会被解析为user_id别写成userID因为这样会解析成user_i_dprivate 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;
}3. 集成代码编辑器
由于 Bot 的内容有代码部分之前我们用的是 textarea 让用户编写代码这样编写体验不好因此我们需要集成一个代码编辑器我们使用的是 Vue Ace EditorAce GitHub 官网Ace (Ajax.org Cloud9 Editor)Vue 3 版 Ace GitHub 官网vue3-ace-editor。
先在 Vue 的控制台中安装以下依赖
vue3-ace-editorace-builds
然后就可以用 VAceEditor 替代之前的 textarea
templatediv classcontainerdiv classcard text-bg-secondary stylemargin-top: 20px;...div classcard-body stylebackground-color: rgba(255, 255, 255, 0.5);div classrow...div classcol-md-9div classcarddiv classcard-header...!-- 创建 Bot 的模态框 --div classmodal fade idadd_bot_modal tabindex-1div classmodal-dialog modal-xldiv classmodal-content...div classmodal-body...div classmb-3label forcontent classform-label代码/labelVAceEditorv-model:valuenew_bot.contentiniteditorInitlangc_cppthemetextmatestyleheight: 400px:options{enableBasicAutocompletion: true, //启用基本自动完成enableSnippets: true, // 启用代码段enableLiveAutocompletion: true, // 启用实时自动完成fontSize: 16, //设置字号tabSize: 4, // 标签大小showPrintMargin: false, //去除编辑器里的竖线highlightActiveLine: true, // 选中行高亮显示}//div/div.../div/div/div/div!-- 用户的 Bot 列表 --div classcard-bodytable classtable table-striped table-hover...tbodytr v-forbot in bots :keybot.idtd styleline-height: 32px;{{ bot.title }}/tdtd styleline-height: 32px;{{ bot.createtime }}/tdtd...!-- 修改 Bot 的模态框 --div classmodal fade :idupdate_bot_modal_ bot.id tabindex-1div classmodal-dialog modal-xldiv classmodal-content...div classmodal-body...div classmb-3label forcontent classform-label代码/labelVAceEditorv-model:valuebot.contentiniteditorInitlangc_cppthemetextmatestyleheight: 400px:options{enableBasicAutocompletion: true,enableSnippets: true,enableLiveAutocompletion: true,fontSize: 16,tabSize: 4,showPrintMargin: false,highlightActiveLine: true,}//div/div.../div/div/div!-- 删除 Bot 的确认模态框 --.../td/tr/tbody/table/div/div/div/div/div/div/div
/templatescript
...
import { VAceEditor } from vue3-ace-editor;
import ace from ace-builds;
import ace-builds/src-noconflict/mode-json;
import ace-builds/src-noconflict/theme-chrome;
import ace-builds/src-noconflict/ext-language_tools;
import ace-builds/src-noconflict/mode-c_cpp;export default {components: {VAceEditor,},setup() {ace.config.set(basePath,https://cdn.jsdelivr.net/npm/ace-builds require(ace-builds).version /src-noconflict/);...},
};
/scriptstyle scoped/style
