当前位置: 首页 > news >正文

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个人博客系统(三)

一.主页顶部和中心面板布局 &#xff08;1&#xff09; 首先先去element-plus选择合适的布局el-container (2)在头部处编写相应的菜单栏el-menu,在这里要注意动态绑定路由的问题:default-active"$route.path"。将default-active设置为$route.path&#xff0c;el-me…...

Python第三方模块

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a;小刘主页 ♥️每天分享云计算网络运维课堂笔记&#xff0c;努力不一定有收获&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️夕阳下&#xff0c;是最美的绽放&#xff0…...

怎样查询PMP成绩?

【如何查询成绩】1、输入网址&#xff08;PMI官网&#xff0c;不知道网址的私戳&#xff09;&#xff0c;点击 Log In如果忘记 PMI 的账号和密码了&#xff0c;怎么办&#xff1f;可以在你报名机构官网的个人中心的学习中心的我的报名处查看 PMI 的注册名和密码2、点击 Exam An…...

说说变量 __name__ 和它可能取到的一个值 __main__

结合 例子 弄懂 变量__name__ 和它的值’ main’这两个东西。 首先&#xff0c;明白两个定义&#xff0c; __name__是一个变量&#xff0c; __main__是个普通字符串&#xff0c;不是变量&#xff0c;但可以作为变量的值。 例子&#xff1a; 1.py 代码如下&#xff1a; if _…...

软考高级-信息系统管理师之整体管理(最新版)

整体管理 1、项目整体管理概述2、制定项目章程(选择,案例,论文)制定项目章程过程制定项目章程的依据1、协议2.项目工作说明书:3、商业论证4、事业环境因素包括,但不限于如下事项。5、组织过程资产:项目选择方法项目启动会议项目目标引导技术3、制订项目管理计划(选择)项目管…...

JVM学习篇垃圾收集器ParNewCMS与底层三色标记算法详解

1. 垃圾收集算法 2. 分代收集理论 当前虚拟机的垃圾收集都采用分代收集算法&#xff0c;这种算法没有什么新的思想&#xff0c;只是根据对象存活周期的不同将内存分为几块。一般将java堆分为新生代和老年代&#xff0c;这样我们就可以根据各个年代的特点选择合适的垃圾收集算法…...

基于FFmpeg和Screen Capturer Recorder实现屏幕和声音的录制

当我们看到一些精彩的视频画面&#xff0c;但无法下载时&#xff0c;可以通过录屏的方式将视频和音频录制下来。 这个时候我们需要安装采集视频和音频的工具screen-capture-recorder。 以下是在windows10环境下&#xff0c;基于FFmpeg和Screen Capturer Recorder实现屏幕和声音…...

猿人学14题详解

目测重点在于cookie&#xff1a;mz和m 获取mz.js: https://match.yuanrenxue.com/static/match/match14/m.js 获取设置m&#xff1a; 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基础学习

作为前端开发者&#xff0c;也很有必要了解一些运维部署知识。 nginx的作用有哪些&#xff1f; 负载平衡动静分离反向代理 何为反向代理&#xff1f; 反向代理即是&#xff0c;用户访问nginx服务器&#xff0c;nginx又将请求转发到真正服务器上&#xff0c;为什么用户不能直…...

【HDFS】FsDatasetImpl#recoverClose方法

recoverClose的目的recoverClose的过程recoverClose的调用点一、前言 HDFS客户端写文件时,如果某个datanode发生错误或者异常。客户端会把这个datanode从pipeline里踢除,然后进行pipiline recovery,用剩余datanodes去写或者满足一定的条件时补充新的datanode到pipeline中写…...

加油站会员管理小程序实战开发教程15 完结篇

这篇是本次实战课程的最后一篇,我们在上篇还有两个问题没解决。一个是会员卡类型显示不对,一个是不同的会员卡我们希望背景色显示不同。我们先处理一下这两个问题 1 显示会员卡类型 在列表上直接显示会员卡类型,目前显示的是数字,这个是因为枚举类型导致的。枚举类型在数…...

学习 Python 之 Pygame 开发坦克大战(五)

学习 Python 之 Pygame 开发坦克大战&#xff08;五&#xff09;坦克大战完善地图1. 创建砖墙2. 给砖墙增加子弹击中的碰撞效果3. 给砖墙添加坦克不能通过的碰撞效果4. 添加石墙5. 添加玩家基地6. 最终效果坦克大战完善地图 我的素材放到了百度网盘里&#xff0c;里面还有原版…...

【ROS】Windows系统安装ROS体验

大家平时玩ROS都是在Ubuntu系统上&#xff0c;那Windows系统可以安装吗&#xff0c;答案是&#xff1a;可以的&#xff01;Windows为了发展自家的物联网生态&#xff0c;已经在Windows系统支持ROS了。 文章目录1.安装VS 20172.安装Chocolatey & Git3.安装ROS4.运行ROS例程1…...

第1讲-初步认识数据库系统(测试题总结)

一、测试题 数据库系统 包含 数据库管理系统 详细版&#xff1a; 数据库管理系统DBMS是数据管理软件&#xff0c;在用户和操作系统之间。 数据库系统DBS由数据库&#xff0c;数据库管理系统&#xff08;及其应用开发工具&#xff09;、应用程序和数据库管理员DBA组成的存储、管…...

进程-操作系统结构

进程-操作系统结构 中文仅本人理解&#xff0c;有错误请联系我。 操作系统为不同方面服务&#xff0c;有不同的设计角度。 为用户&#xff1a; 使用 为程序员&#xff1a;创造 程序员需要关注的就是system call接口的调度 file systems&#xff1a;ntfs&#xff0c;ext4 commu…...

【网络原理6】数据链路层协议——以太网

数据链路层负责的是相邻两个网络节点之间的数据以帧为单位进行传输。 具体关于数据链路层的介绍&#xff0c;已经在这一篇文章当中提到了。 初识网络&#xff1a;IP、端口、网络协议、TCP-IP五层模型_革凡成圣211的博客-CSDN博客TCP/IP五层协议详解https://blog.csdn.net/weix…...

组合数学原理与例题

目录 一、前言 二、计数原理 1、加法原理 2、分割立方体&#xff08;lanqiaoOJ题号1620&#xff09; 3、乘法原理 4、挑选子串&#xff08;lanqiaoOJ题号1621&#xff09; 5、糊涂人寄信&#xff08;lanqiaoOJ题号1622&#xff09; 6、战斗吧N皇后&#xff08;lanqiaoO…...

【机器学习 深度学习】通俗讲解集成学习算法

目录&#xff1a;集成学习一、机器学习中的集成学习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 字符生成是一个具有挑战性的问题,特别是对于一些由大量字符组成的书写系统,近年来受到了广泛的关注。然而,现有的字体生成方法通常是在监督学习中。它们需要大量的配对数据,这是劳动密集型和昂贵的收集。此外,常见的图像到图像转换模型通常将风格定义为纹理和颜…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战:导出框架元素数据到Excel 在结构工程师的日常工作中,经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时,还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么? 一键点击,就能将ETABS中所有框架元素的基…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...