一.主页顶部和中心面板布局

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