叨叨游戏网
您的当前位置:首页vue3+express全栈——博客开发(1)

vue3+express全栈——博客开发(1)

来源:叨叨游戏网

前前后后花了大概半个月,中间上课,准备考试,所以断断续续的 

教程是b站up主:明明明明明歌

超级nice!!

接下来是我的回顾总结

博客分为服务端和客户端(server & client)

1、server基础搭建

db:Heidisql

GenId 用 SnowFlake

db/DbUtils.js

连接

const sqlite3=require("sqlite3").verbose()
const path=require("path")//这个不知道
const GenId=require("../utils/SnowFlake")

//连接数据库
var db=new sqlite3.Database(path.join(__dirname,"blog.sqlite3"))
const genid=new GenId({WorkerId:1})

数据库操作相关函数,拿和放

//promise优化db.all,避免回调地狱
db.async={}
db.async.all=(sql,params)=>{
    return new Promise((resolve,reject)=>{
        db.all(sql,params,(err,rows)=>{
            resolve({err,rows})
        })
    })
}

//修改添加
db.async.run=(sql,params)=>{
        return new Promise((resolve,reject)=>{
            db.run(sql,params,(err,rows)=>{
                resolve({err,rows})
            })
        })
    }

//导出去
module.exports={db,genid}

app.js

配置:express,multer,sqlites

/**
"multer"上传功能的中间件
"sqlite3"数据库
"uuid"不易重复id生成,如token
*/
const express = require("express");
const multer=require("multer")
const path=require("path")
const app = express();
const port = 8080;
const {db,genid}=require("../server/db/DbUtils")

开放跨域请求(没咋懂,先照写)

//开放跨域请求
app.use(function(req,res,next){
    //设置允许跨域的域名,*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin","*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers","*");
    //跨域允许的请求方式
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
    if(req.method=="OPTIONS")res.sendStatus(200);//让options尝试请求快速结束
    else next();
});
//中间件,先执行往前写,路由往后写
app.use(express.json())//express

//这个是后来放上传图片的地方
const updata=multer({//multer
    dest:"./public/upload/temp"
})
app.use(updata.any())

//制定静态资源路径
app.use(express.static(path.join(__dirname,"public")))

这个是后来跟权限相关的功能,在同个文件就先放这了

//category/_token/add 只要有token就校验
const ADMIN_TOKEN_PATH = "/_token"
app.all("*",async (req,res,next)=>{
    if(req.path.indexOf(ADMIN_TOKEN_PATH)>-1)
    {
        let{token}=req.headers;

        let admin_token_sql="SELECT * FROM `admin` WHERE `token` = ?"
        let adminResult=await db.async.all(admin_token_sql,[token])
        if(adminResult.err !=null || adminResult.rows.length == 0)
        {
            res.send({
                code:403,
                msg:"请先登录"
            })
            return
        }
        else{//进入下一个接口
            next()
        }
    }
    else{
        next()
    }
})

注册路由+启动提醒

//注册路由
app.use("/admin",require("./routers/AdminRouter"))
app.use("/category",require("./routers/CategoryRouter"))
app.use("/blog",require("./routers/BlogRouter"))
app.use("/upload",require("./routers/UploadRouter"))

app.get("/", (req, res) => {
    res.send("hello");
});

app.listen(port, () => {
    console.log(`启动成功`);
});

下面是4个路由(下一篇见~)

因篇幅问题不能全部显示,请点此查看更多更全内容