P3. 创建个人中心页面

P3. 创建个人中心页面

    • 0 概述
    • Tips
    • 1 个人中心页面
      • 1.1 创建 Bot 表及 pojo, mapper
      • 1.2 实现 Bot 增删改查的 API
      • 1.3 实现个人中心页面前端

0 概述

  • 主要介绍了一下添加一个表(类),及其CRUD的前端和后端的实现方式,介绍的是通用的方法。

    后端的CRUD很好写,在前几节P2. 配置MySQL和用户注册登录模块已经介绍过了,因此这边只是带过。


Tips

  • 在数据库中用下划线定义字段 user_id,在 pojo 中用驼峰命名来定义属性 userId,在 queryWrapper 中还是用下划线的变量。
  • 创建数据库表字段的时候一般除了 id 设置成主键非空自增唯一,其他的一般不会设置,比如 bottitle 字段,我们可以在 service 中判断使其非空,未来如果实现草稿功能,那么是允许为空的,因此别设置死这些属性。

1 个人中心页面

1.1 创建 Bot 表及 pojo, mapper

以下字段仅供参考,创建 table, pojo, mapper 的实现在P2. 配置MySQL和用户注册登录模块介绍过了。

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Bot {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private Integer userId;
    private 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;
}

1.2 实现 Bot 增删改查的 API

同样的,根据P2. 配置MySQL和用户注册登录模块中介绍的,分别实现每个功能的 service, serviceImpl, controller 很容易写这几个功能,要注意以下几个细节:

  • 创建 bot 要判断用户传入的参数是否合法;
  • 删除 bot 要看用户是否有权限删除该 bot,且该 bot 是否存在;
  • 更新 bot 首先判断参数是否合法,bot 是否存在,用户是否有权限修改 bot,再更新当前 bot 数据;
  • 获取所有 bot 只需要根据当前登录用户的 user_id 进行查找即可;

1.3 实现个人中心页面前端

在这里插入图片描述

希望整一个上图所示的简单的样子,左边显示头像,右边显示具体的 Bot 信息,提供创建,修改,删除按钮。

整个前端页面分成以下几个步骤实现:

(1) 创建头像栏和右侧 bot 显示栏

首先创建 container 可以动态调整区域,row, col 是通过 grid 将整个 containier 分成 3 份和 9 份。

这里取出头像的方式是通过 :src="$store.state.user.photo": 表示后面是表达式,photostate 中取出。

<template>
    <div class="container">
        <div class="row">

            <div class="col-3">
                <div class="card" style="margin-top: 20px;">
                    <div class="card-body">
                        <img :src="$store.state.user.photo" alt="" style ="width: 100%;">
                    </div>
                </div>
            </div>

            <div class="col-9">
                <div class="card" style = "margin-top: 20px;">

                    <div class="card-header">
                        <span style="font-size: 130%;">
                            My Bots
                        </span>

                        <button type="button" class="btn btn-primary float-end">
                            Create Bots
                        </button>
                    </div>

                    <div class = "card-body">
                    </div>

                </div>
            </div>

        </div>
    </div>
</template>

(2) 把该用户的所有 bots 通过 api 查询出来并保存

setup() {
    const store = useStore();
    let bots = ref([]);
        
    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) {
                bots.value = resp;
                console.log(resp);
            }
        })
    } 

    refresh_bots();

    return {
        bots,
    }
}

(3) 把所有 bot 信息渲染出来

以表格形式显示每个 bot 信息,通过 v-for:key 可以取出来每个 bot

<div class = "card-body">
    <table class="table table-hover">
		<thead>
			<tr>
				<th>名称</th>
				<th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
			<tr v-for="bot in bots" :key = "bot.id">
				<td>{{ bot.title }}</td>
				<td>{{ bot.createtime }}</td>
				<td>
					<button type="button" class="btn btn-secondary" style = "margin-right: 10px;">
                    	修改
                	</button>
                	<button type="button" class="btn btn-danger">删除</button>
                </td>
            </tr>
         </tbody>
	</table>
</div>

(4) 实现创建 bot 的模态框并且绑定对象

首先要实现一个模态框,供用户输入相关信息,打开模态框的 button 和模态框通过 id 进行绑定。

vue 中对象一般用 reactive,变量一般用 ref,在 <template> 中通过 v-model 绑定变量或对象的属性。

点击创建按钮,触发 add_bug 事件,用于调试模态框及其是否绑定到对象。

<template>
	<button type="button" class="btn btn-primary float-end" 
            data-bs-toggle="modal" data-bs-target="#add-bot-btn">
        Create Bot
    </button>

    <!-- Modal -->
    <div class="modal fade" id="add-bot-btn" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Create Bot</h5>
                    <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名称">
                    </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>
                          <textarea v-model = "botadd.content" class="form-control" 
                                    id="add-bot-code" rows="7" placeholder="请编写BOT代码"></textarea>
                    </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>

            </div>
        </div>
    </div>
</template>  

<script>
export default {
    setup() {
        const botadd = reactive({
            title:"",
            description:"",
            content: "",
            error_message: "",
        }); 
        
        const add_bot = () => {
            console.log(botadd);
        }
        
        return {
            botadd,
            add_bot,
        }
    }
}
</script>

<style scoped>
div.error_message {
    color: red;
}
</style>

(5) 将创建 bot 绑定到后端 api,也就是修改上面的 add_bot 函数

这里要注意几点,首先每次记得把上次的错误信息清空;其次在创建成功之后要把所有的信息清空,方便下次创建;在创建完成之后要记得把模态框关掉 Modal.getInstance(#add-bot-btn).hide,并且要重新加载所有的 bots: refresh_bots()

Modal.getInstance(#btn_id) 通过 id 进行绑定。

另外,这里的 success 是指成功返回结果,而不是说成功创建,因此还要判断 error_message === "success"

const add_bot = () => {
	botadd.error_message = "";
	$.ajax({
		url: "http://127.0.0.1:3000/user/bot/add/",
		type: "post",
		data: {
			title: botadd.title,
			content: botadd.content,
            description: botadd.description,
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message === "success") {
            	botadd.title = "";
                botadd.description = "";
                botadd.content = "";
                
                Modal.getInstance("#add-bot-btn").hide();
                
                refresh_bots();
          	} else {
                 botadd.error_message = resp.error_message;
          	}
    	},
	})
}

(6) 将删除功能绑定到后端 api

比较简单,不再赘述,删除成功后也要记得刷新 bot 列表。

删除需要传入参数 bot

const remove_bot = (bot) => {
	$.ajax({
		url: "http://127.0.0.1:3000/user/bot/delete/",
        type: "post",
        data: {
        	bot_id: bot.id,
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message === "success") {
            	refresh_bots();
			}
		}
	})
}

(7) 实现修改功能的模态框并绑定后端 api

模态框和创建的类似,直接搬过来就行,但有一点要注意,每个 bot 是不同的,因此对应的模态框也要对应起来,也就是不只有一个修改模态框,而是有多个修改模态框,根据 bot_id 来绑定 :id="'update-bot-modal-' + bot.id"

<template>
<button type="button" class="btn btn-secondary" style = "margin-right: 10px;" 
        data-bs-toggle="modal" :data-bs-target="'#update-bot-modal-' + bot.id">修改</button>
                                                                        
<div class="modal fade" :id="'update-bot-modal-' + bot.id" tabindex="-1">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Update Bot</h5>
                <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="update-bot-title" class="form-label">名称</label>
                    <input v-model = "bot.title" type="text" class="form-control" 
                           id="update-bot-title" placeholder="请输入bot名称">
                </div>

                <div class="mb-3">
                    <label for="update-bot-description" class="form-label">简介</label>
                    <textarea v-model = "bot.description" class="form-control" 
                              id="update-bot-description" rows="3" placeholder="请输入bot简介"></textarea>
                </div>

                <div class="mb-3">
                     <label for="update-bot-code" class="form-label">代码</label>
                     <textarea v-model = "bot.content" class="form-control" 
                               id="update-bot-code" rows="7" placeholder="请编写bot代码"></textarea>
                </div>
            </div>

            <div class="modal-footer">
                <div class="error_message">{{ update_error_message }}</div>
                <button type="button" class="btn btn-primary" @click = "update_bot(bot)">保存</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            </div>

		</div>
	</div>
</div>
</template>

<script>
const update_bot = (bot) => {
	update_error_message.value = "";
    $.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 {
                update_error_message.value = resp.error_message;
            }
        }
    })
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/683371.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

TCP/IP协议介绍——三次握手四次挥手

TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff0c;传输控制协议/网际协议&#xff09;是指能够在多个不同网络间实现信息传输的协议簇。TCP/IP协议不仅仅指的是TCP 和IP两个协议&#xff0c;而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议…

Capture One Pro 23:专业 Raw 图像处理的卓越之选

在当今的数字摄影时代&#xff0c;拥有一款强大的图像处理软件至关重要。而 Capture One Pro 23 for Mac/Win 无疑是其中的佼佼者&#xff0c;为摄影师和图像爱好者带来了前所未有的体验。 Capture One Pro 23 以其出色的 Raw 图像处理能力而闻名。它能够精准地解析和处理各种…

Priority_queue

一、priority_queue的介绍和使用 1.1 priority_queue的介绍 1.优先队列是一种容器适配器&#xff0c;根据严格的弱排序标准&#xff0c;它的第一个元素总是它所包含的元素中最大的。 2.优先队列类似于堆&#xff0c; 在堆中可以随时插入元素&#xff0c; 并且只能检索最大堆…

React中使用 ts 后,craco库配置别名时需要注意什么?

文章目录 前言编译报错如下解决方式总结 前言 我们都知道craco库可以用来覆盖react配置&#xff0c;如设置别名等。但是在项目使用 Typescript 后&#xff0c;我们需要额外配置&#xff0c;否则会造成编译报错。 详细craco配置可以查看之前文章&#xff1a; 项目初始化与配置…

SpringBoot:SpringBoot中使用Redisson实现分布式锁

一、前言 Redisson是一个在Redis的基础上实现的Java驻内存数据网格&#xff08;In-Memory Data Grid&#xff09;。它不仅提供了一系列的分布式的Java常用对象&#xff0c;还提供了许多分布式服务。 刚好项目中需要使用到分布式锁&#xff0c;记录一下Redisson是如何使用分布式…

PHP 页面报错Warning</b>: Cannot modify header information - headers already sent by

先给出解决方案再解释&#xff0c;如果急着用就不用看解释了。 解决方案一&#xff1a;保存php文件编码为utf-8无BOM码&#xff0c;具体操作可以用notepad等编辑器完成&#xff0c;把 sesstion_start() 放在文档所有输出&#xff08;包括html标签和php的输出语句&#xff0c;具…

场外个股期权标的有哪些?

今天带你了解场外个股期权标的有哪些&#xff1f;场外个股期权是一种金融衍生品&#xff0c;它不在交易所内进行交割&#xff0c;而是在交易所以外的场所进行交易的股票期权合约。 场外个股期权标的有哪些&#xff1f; 场外个股期权的标的通常包括A股市场上的融资融券标的&…

掌握Django文件处理:一步步构建上传功能

创建模型 首先先进入我们的testsite项目下&#xff0c;打开members/models.py文件&#xff0c;先添加我们保存文件的数据模型&#xff1a; class Document(models.Model):name models.CharField(max_length255)file models.FileField(upload_touploads/) # uploads/ 是文件…

批量提取 Word 文档中的全部图片

步骤 1、打开 WinRAR 任选一个现成的压缩包双击打开 WinRAR &#xff0c;或从开始菜单打开 WinRAR 2、直接把要提取图片的 Word 文档拖入 WinRAR 菜单区域 1 → 2 → 3&#xff0c;WinRAR 资源管理目录中的 media 就是该 Word 文档所要提取的全部图片所在文件夹 按住&#x…

【Vue】异步更新 $nextTick

文章目录 一、引出问题二、解决方案三、代码实现 一、引出问题 需求 编辑标题, 编辑框自动聚焦 点击编辑&#xff0c;显示编辑框让编辑框&#xff0c;立刻获取焦点 即下图上面结构隐藏&#xff0c;下面结构显示&#xff0c;并且显示的时候让它自动聚焦。 代码如下 问题 “…

Vue3:eachars 折线图 数据不联动 和 tooltip: trigger: ‘axis‘ 不生效,不提示数据

问题1&#xff1a; 点击折线图的头部数据&#xff08;Email、UnionAds等&#xff09; 下面数据线不联动问题 问题2&#xff1a;下图是没有提示数据的Demo 这是echars官网的提示数据图 3.解决办法 &#xff08;1&#xff09;检查是否设置&#xff1a;trigger&#xff1a;axi…

SELinux深度解析:安全增强型Linux的探索与应用(下)

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Linux &#xff1a;从菜鸟到飞鸟的逆袭》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、SELinux的工作机制 1、SELinux的三种状态&#xff1a;Pe…

在k8s中部署Kafka高可用集群超详细讲解

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《数据流专家&#xff1a;Kafka探索》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、Kafka简介 2、为什么在Kubernetes中部署Kafka 二、…

决策树Decision Tree

目录 一、介绍发展优点缺点基本原理 二、熵1、熵2、条件熵3、信息增益4、信息增益率 三、基尼系数四、ID3算法1、建树过程2、优点3、缺点 五、C4.51、二分法处理连续变量1、流程&#xff1a;2、示例 2、缺点 六、CART1、连续数据处理2、离散数据处理3、CART回归原理1、均方误差…

医学编码系统说明

简介 流程说明 登录系统 在浏览器中访问FNEHR的站点&#xff0c;输入医院编号、用户和密码&#xff0c;选择“Other”&#xff0c;点击“Login”按钮&#xff0c;登录系统&#xff1a; 登录后&#xff0c;在左边显示系统的菜单&#xff1a; 系统设置 医院设置 点击左侧的“Acc…

尚硅谷2024新版3小时速通Docker教程

尚硅谷2024新版3小时速通Docker教程 百度网盘&#xff1a;https://pan.baidu.com/s/1SncgHbdJehvZspjcrrbLSw?pwd6c27

【C语言】详解函数(下)(庖丁解牛版)

文章目录 1. 前言2. 数组做函数形参3. 函数嵌套调用和链式访问3.1 嵌套调用3.2 链式访问 1. 前言 详解C语言函数(上)的链接&#xff1a;http://t.csdnimg.cn/EGsfe 经过对函数的初步了解之后,相信大家已经对C语言标准库里的函数已经有初步的认知了&#xff0c;并且还学会了如…

【工具箱】嵌入式系统存储芯片——CS创世 SD NAND

大家都知道MCU是一种"麻雀"虽小&#xff0c;却"五脏俱全"的主控。它的应用领域非常广泛&#xff0c;小到手机手表&#xff0c;大到航空航天的设备上都会用到MCU.市面上目前几个主流厂商有意法半导体&#xff08;其中最经典的一款就是STM32系列&#xff09;…

足球俱乐部管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;教练管理&#xff0c;用户管理&#xff0c;合同信息管理&#xff0c;赛事管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;公告信息&#xff0c;赛事…

C++ STL - 容器

C STL&#xff08;标准模板库&#xff09;中的容器是一组通用的、可复用的数据结构&#xff0c;用于存储和管理不同类型的数据。 目录 零. 简介&#xff1a; 一 . vector&#xff08;动态数组&#xff09; 二. list&#xff08;双向链表&#xff09; 三. deque&#xff08…