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})}}});
}