vue3+ts+node个人博客系统(三)
一.主页顶部和中心面板布局
(1) 首先先去element-plus选择合适的布局el-container
(2)在头部处编写相应的菜单栏el-menu,在这里要注意动态绑定路由的问题:default-active="$route.path"。将default-active设置为$route.path,el-menu-item的index设为要跳转的路由(并且点击菜单项,会直接push到点击的页面)。注意:一定要设置el-submenu的index属性(1,2,3…)。不然会出bug

,
(3) 紧接着需要设计el-main中心的布局,同时需要满足点击不同菜单栏的时候,对应的el-main面板不一样,会跳转到对应的组件中
<!-- 中间内容主体区域 --><el-main><!-- 路由占位符 --><router-view></router-view></el-main>



二、主页的中心面板的具体布局
(1)左侧的布局:分别是用el-card来包裹一个小组件 ,中心面板主要也是使用el-container里面的一种布局

(2)中间的主要文章展示的布局

(3)最终的效果

三、获取所有的标签接口设计
(1)这里为了能够获取不同用户自己拥有的标签,所有需要上传相应的用户id
// 获取所有的标签
exports.blogList = (req, res) => {//获取 tb_tag的全部标签信息var sql = `select * from tb_tag where userid=${req.query.userid}` //?用于占位db.query(sql, (err, data) => {console.log("sss",data)if(err) {return res.send('错误:' + err.message)}res.send(data)})
}
四、添加标签的接口设计
(1)在这里为了能够适应不同用户添加各自不同的标签,故在添加标签的时候需要把当前登录的用户的id当做一个条件
// 添加标签
exports.addtag = (req, res) => {//获取 tb_tag的全部标签信息var sql = `INSERT into tb_tag VALUES (null,'${req.body.params.name}','${req.body.params.userid}')` //?用于占位db.query(sql, (err, data) => {if(err) {return res.send('错误:' + err.message)}res.send(data)})
}
六、获取所有的分类接口设计
// 获取所有分类
exports.categoryList = (req, res) => { //获取 tb_cate的全部分类信息var sql = `select * from tb_cate where userid=${req.query.userid}` //?用于占位db.query(sql, (err, data) => {if(err) {return res.send('错误:' + err.message)}res.send(data)})
}
七、添加分类接口设计
// 添加分类
exports.addcategory = (req, res) => {var sql = `INSERT into tb_cate VALUES (null,'${req.body.params.name}','${req.body.params.userid}')` //?用于占位
db.query(sql, (err, data) => {if(err) {return res.send('错误:' + err.message)}res.send(data)
})
}
八、删除相应的分类接口设计
// 删除分类
exports.deleteCate=(req, res) => {let id = req.body.paramsvar sql=`DELETE FROM tb_cate WHERE id = ${id} ;`db.query(sql, (err, data) => {if(err) {return res.send('错误:' + err.message)}res.send(data)
})
}
九、获取所有的博客文章接口设计,同时带当前的页数和条数的参数
exports.allblog = (req, res) => {//获取tb_blog表全部数据var sql = `select * from tb_blog where userid=${req.query.userid}`db.query(sql, (err, data) => { let curpage =Number(req.query.query.currentPage)//当前页,前端传的页码 let pagesize = req.query.query.pageSize//每页显示的数量// let sumpage=Math.ceil(data.length/pagesize)//返一个总页码let sumpage=data.length//返一个总页码
console.log(req.query.username)if(err) {return res.send('错误:' + err.message)} else {if (curpage == '') {// console.log(data.splice(0,pagesize))//这里是前端未传参数默认返第一页数据data=data.splice(0,pagesize)//利用数组方法截取数据res.send({data,sumpage})}else{//这里是前端传参数返回的数据data = data.splice((curpage - 1) * pagesize, pagesize)//利用数组方法截取数据// console.log(data.splice((curpage - 1) * 4, pagesize))res.send({data,sumpage})} }})
}
十、删除对应博客文章接口设计
exports.delete=(req, res) => {let id = req.body.paramsvar sql=`DELETE FROM tb_blog WHERE id = ${id} ;`db.query(sql, (err, data) => {if(err) {return res.send('错误:' + err.message)}res.send(data)
})
}
十一、模糊查询接口设计
exports.look=(req, res)=> {let title = req.body.params.titlelet userid=req.body.params.useridvar sql=`SELECT * FROM tb_blog WHERE userid=${userid} and title LIKE '%${title}%'`db.query(sql, (err, data) => {let curpage =Number(req.body.params.page.currentPage)//当前页,前端传的页码 let pagesize = req.body.params.page.pageSize//每页显示的数量// let sumpage=Math.ceil(data.length/pagesize)//返一个总页码let sumpage=data.length//返一个总页码if (err) {return res.send('错误:' + err.message)}else {if (curpage == '') {// console.log(data.splice(0,pagesize))//这里是前端未传参数默认返第一页数据data = data.splice(0, pagesize)//利用数组方法截取数据res.send({data, sumpage})}else {//这里是前端传参数返回的数据data = data.splice((curpage - 1) * pagesize, pagesize)//利用数组方法截取数据// console.log(data.splice((curpage - 1) * 4, pagesize))res.send({data, sumpage})}}});
}
相关文章:
vue3+ts+node个人博客系统(三)
一.主页顶部和中心面板布局 (1) 首先先去element-plus选择合适的布局el-container (2)在头部处编写相应的菜单栏el-menu,在这里要注意动态绑定路由的问题:default-active"$route.path"。将default-active设置为$route.path,el-me…...
Python第三方模块
♥️作者:小刘在C站 ♥️个人主页:小刘主页 ♥️每天分享云计算网络运维课堂笔记,努力不一定有收获,但一定会有收获加油!一起努力,共赴美好人生! ♥️夕阳下,是最美的绽放࿰…...
怎样查询PMP成绩?
【如何查询成绩】1、输入网址(PMI官网,不知道网址的私戳),点击 Log In如果忘记 PMI 的账号和密码了,怎么办?可以在你报名机构官网的个人中心的学习中心的我的报名处查看 PMI 的注册名和密码2、点击 Exam An…...
说说变量 __name__ 和它可能取到的一个值 __main__
结合 例子 弄懂 变量__name__ 和它的值’ main’这两个东西。 首先,明白两个定义, __name__是一个变量, __main__是个普通字符串,不是变量,但可以作为变量的值。 例子: 1.py 代码如下: if _…...
软考高级-信息系统管理师之整体管理(最新版)
整体管理 1、项目整体管理概述2、制定项目章程(选择,案例,论文)制定项目章程过程制定项目章程的依据1、协议2.项目工作说明书:3、商业论证4、事业环境因素包括,但不限于如下事项。5、组织过程资产:项目选择方法项目启动会议项目目标引导技术3、制订项目管理计划(选择)项目管…...
JVM学习篇垃圾收集器ParNewCMS与底层三色标记算法详解
1. 垃圾收集算法 2. 分代收集理论 当前虚拟机的垃圾收集都采用分代收集算法,这种算法没有什么新的思想,只是根据对象存活周期的不同将内存分为几块。一般将java堆分为新生代和老年代,这样我们就可以根据各个年代的特点选择合适的垃圾收集算法…...
基于FFmpeg和Screen Capturer Recorder实现屏幕和声音的录制
当我们看到一些精彩的视频画面,但无法下载时,可以通过录屏的方式将视频和音频录制下来。 这个时候我们需要安装采集视频和音频的工具screen-capture-recorder。 以下是在windows10环境下,基于FFmpeg和Screen Capturer Recorder实现屏幕和声音…...
猿人学14题详解
目测重点在于cookie:mz和m 获取mz.js: https://match.yuanrenxue.com/static/match/match14/m.js 获取设置m: https://match.yuanrenxue.com/api/match/14/m 一、还原16进制 const fs require(fs); const parser require(babel/parser); const gen…...
Allegro如何快速把推挤的走线变平滑操作指导
Allegro如何快速把推挤的走线变平滑操作指导 Allegro有个非常强大的功能,推挤命令,可以快速的让走线以不报DRC的形式避让目标 推挤后的效果如下图 但是走线不够平滑,如果每一段都去再推一下比较费时间,下面介绍allegro本身自带的优化类似走线的功能 具体操作如下 点击Rout…...
nginx基础学习
作为前端开发者,也很有必要了解一些运维部署知识。 nginx的作用有哪些? 负载平衡动静分离反向代理 何为反向代理? 反向代理即是,用户访问nginx服务器,nginx又将请求转发到真正服务器上,为什么用户不能直…...
【HDFS】FsDatasetImpl#recoverClose方法
recoverClose的目的recoverClose的过程recoverClose的调用点一、前言 HDFS客户端写文件时,如果某个datanode发生错误或者异常。客户端会把这个datanode从pipeline里踢除,然后进行pipiline recovery,用剩余datanodes去写或者满足一定的条件时补充新的datanode到pipeline中写…...
加油站会员管理小程序实战开发教程15 完结篇
这篇是本次实战课程的最后一篇,我们在上篇还有两个问题没解决。一个是会员卡类型显示不对,一个是不同的会员卡我们希望背景色显示不同。我们先处理一下这两个问题 1 显示会员卡类型 在列表上直接显示会员卡类型,目前显示的是数字,这个是因为枚举类型导致的。枚举类型在数…...
学习 Python 之 Pygame 开发坦克大战(五)
学习 Python 之 Pygame 开发坦克大战(五)坦克大战完善地图1. 创建砖墙2. 给砖墙增加子弹击中的碰撞效果3. 给砖墙添加坦克不能通过的碰撞效果4. 添加石墙5. 添加玩家基地6. 最终效果坦克大战完善地图 我的素材放到了百度网盘里,里面还有原版…...
【ROS】Windows系统安装ROS体验
大家平时玩ROS都是在Ubuntu系统上,那Windows系统可以安装吗,答案是:可以的!Windows为了发展自家的物联网生态,已经在Windows系统支持ROS了。 文章目录1.安装VS 20172.安装Chocolatey & Git3.安装ROS4.运行ROS例程1…...
第1讲-初步认识数据库系统(测试题总结)
一、测试题 数据库系统 包含 数据库管理系统 详细版: 数据库管理系统DBMS是数据管理软件,在用户和操作系统之间。 数据库系统DBS由数据库,数据库管理系统(及其应用开发工具)、应用程序和数据库管理员DBA组成的存储、管…...
进程-操作系统结构
进程-操作系统结构 中文仅本人理解,有错误请联系我。 操作系统为不同方面服务,有不同的设计角度。 为用户: 使用 为程序员:创造 程序员需要关注的就是system call接口的调度 file systems:ntfs,ext4 commu…...
【网络原理6】数据链路层协议——以太网
数据链路层负责的是相邻两个网络节点之间的数据以帧为单位进行传输。 具体关于数据链路层的介绍,已经在这一篇文章当中提到了。 初识网络:IP、端口、网络协议、TCP-IP五层模型_革凡成圣211的博客-CSDN博客TCP/IP五层协议详解https://blog.csdn.net/weix…...
组合数学原理与例题
目录 一、前言 二、计数原理 1、加法原理 2、分割立方体(lanqiaoOJ题号1620) 3、乘法原理 4、挑选子串(lanqiaoOJ题号1621) 5、糊涂人寄信(lanqiaoOJ题号1622) 6、战斗吧N皇后(lanqiaoO…...
【机器学习 深度学习】通俗讲解集成学习算法
目录:集成学习一、机器学习中的集成学习1.1 定义1.2 分类器(Classifier)1.2.1 决策树分类器1.2.2 朴素贝叶斯分类器1.2.3 AdaBoost算法1.2.4 支持向量机1.2.5 K近邻算法1.3 集成学习方法1.3.1 自助聚合(Bagging)1.3.2 提升法(Boosting)1.3.2.1 自适应adaboost1.3.3 …...
汉字----dgfont
Abstract 字符生成是一个具有挑战性的问题,特别是对于一些由大量字符组成的书写系统,近年来受到了广泛的关注。然而,现有的字体生成方法通常是在监督学习中。它们需要大量的配对数据,这是劳动密集型和昂贵的收集。此外,常见的图像到图像转换模型通常将风格定义为纹理和颜…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
(一)单例模式
一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...
SQL Server 触发器调用存储过程实现发送 HTTP 请求
文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...
JS红宝书笔记 - 3.3 变量
要定义变量,可以使用var操作符,后跟变量名 ES实现变量初始化,因此可以同时定义变量并设置它的值 使用var操作符定义的变量会成为包含它的函数的局部变量。 在函数内定义变量时省略var操作符,可以创建一个全局变量 如果需要定义…...
