【享你所想】Nodejs+koa+vue 博客系统开发教程+源码

项目初始化 

1、首先 安装git  初始化项目 git init

项目搭建

2、安装koa；命令：npm install koa

#################################

3、 安装重启服务工具 命令 npm install nodemon

编写脚本：

"scripts": {

    "dev": "nodemon ./src/main.js",

    "test": "echo \"Error: no test specified\" && exit 1"

  },

 接下来可以执行 npm run dev     热更新部署

项目的基本优化

 4、读取配置文件的资源工具：安装 dotenv   命令：npm install dotenv

const dotenv =require('dotenv')

dotenv.config()

console.log("端口=",process.env.APP_PORT)

module.exports = process.env

 改写main.js文件，使得配置文件生效

const Koa =require('koa')
const {APP_PORT} =require('./config/default')
const app = new Koa()
console.log("APP_PORT=",APP_PORT)
//中间件
app.use((ctx,next)=>{

    ctx.body='Hello api'
})
app.listen(APP_PORT,()=>{

    console.log(`server is running on http://localhost:${APP_PORT}`)
})

添加路由

根据不同的url，调用不同的处理函数

 1、首先安装koa-router,命令：npm i koa-router

实现的步骤：

     a、导入router包；

     b、实例化router；

     c、 编写路由；

     d、注册中间件。

//导入路由组件
const Router =require('koa-router')

//实例化组件
const indexRouter = new Router()
//编写路由
indexRouter.get('/',(ctx,next)=>{
    ctx.body ="hello koa-router"
})
adminRouter.get('/admin',(ctx,next)=>{
    ctx.body ="hello koa-router-admin"
})
console.log("APP_PORT=",APP_PORT)
//注册中间件
app.use(indexRouter.routes())
app.use(adminRouter.routes())

目录结构优化

注意：router组件可以抽取到独立的文件router中，业务相关的又可以抽取到文件app中；使得系统更加具有结构性。

 

控制器请求业务

使用中间件koa-body，安装命令：npm i koa-body 功能：解析body

 

 注册中间件 koa-body  改写 app/index.js文件

const Koa =require('koa')
const { koaBody } = require('koa-body')
const indexRouter =require('../router/admin')

const app = new Koa()

app.use(
    koaBody({
        multipart: true,    //解析多个文件
        formidable: {
            maxFileSize: 100 * 1024 * 1024,    // 设置上传文件大小最大限制，默认2M
            //uploadDir: 可以填写一个路径，不填写默认为 os.tmpDir()
        }
    })
)

 解析请求的数据

    async register(ctx,next){
        
        const {username,password} = ctx.query
        console.log("参数1：",JSON.stringify(ctx.query))
        const ret =await createUser(username,password)
        console.log("返回",ret)
        ctx.body=ret
    }

 拆分Service层，主要做数据库处理业务 创建 service/AdminService.js文件

class AdminService
{
    async createUser(username,password){
     //todo 写入数据库
     return "ok"
    }
}
module.exports =new AdminService()

 数据库操作

 主要依赖Sequelize实现数据库的操作

 

Sequelize的安装

 连接数据库（MYSQL5.7）

const {Sequelize} =require('sequelize')

//数据库配置
const seqConnect =new Sequelize('nodejs','root','123456',{

   host:'192.168.31.147',
   port:'3306',
   dialect:'mysql'
})
//测试连接
seqConnect.authenticate().then(()=>{

    console.log("mysql service connect success!")
}).catch(err=>{

    console.log(`mysql service connect error!,${err}`)

})

module.exports =seqConnect

 模型基础（使用sequelize.define）

const {DataTypes}  = require('sequelize')

const seqConnect =require('../db/database')

//创建模型Admin
const Admin =seqConnect.define('admin',{
//id 不用手动创建
 username:{
    type:DataTypes.STRING,
    allowNull:false,
    unique:true,
    comment:'用户名'
 },
password:{
    type:DataTypes.CHAR(64),
    allowNull:false,
    comment:'密码'
 },
 is_admin:{
    type:DataTypes.BOOLEAN,
    defaultValue:0,
    allowNull:false,
    comment:'1:管理员;0:一般用户'
 }
},{
    timestamps:false //创建表的时候不会自动添加创建时间和更新时间的字段
})
Admin.sync({force:true}) //创建后注释掉，不然下次执行会删除之前的表重新创建，数据会清空

密码加密 加密方式（bcryptjs）

 安装命令：npm i bcryptjs

//注册时候密码加密
const cryptPassword= async (ctx,next)=>{
    const {password} =ctx.query
    
    const salt =bcrypt.genSaltSync(10)
    const hash =bcrypt.hashSync(password,salt) //密文
    ctx.query.password=hash
    await next()
}

页面截图：

源码已经上传到git：https://gitcode.net/weixin_38221772/nodejs-koa-vue.git