一.主页顶部和中心面板布局
（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.params
-
var 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.params
-
-
var 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.title
-
let userid
=req.body.params.userid
-
var 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
-
}
-
)
-
}
-
}
-
-
});
-
}
转载：https://blog.csdn.net/qq_55928824/article/details/129115444
查看评论