从零跟着撸web server后台

前言

接触前端也有一段时间了，感觉自己总是卡在很简单的地方，学习也是漫无目的的。所以在这段时间我意识到自己一定要好好思考一下是否坚持下去，重新找到新的突破口。还是再三思索下买了慕课网上的一门课来学习一下，总的来说这次购买没有令我失望，非常感谢老师让我收获满满，能够有信心继续前端的道路。

课程干货

• 接口：Node.js 处理 http 请求，搭建开发环境，处理路由，开发各个接口
• 数据存储：MySQL 介绍，Node.js 连接MySQL，接口对接 MySQL
• 登录：Cookie和Session，登录中间件开发，与前端页面联调（结合Nginx），使用 Redis 存储，Session
• 安全：预防SQL、XSS攻击
• 日志：Node.js 文件操作，stream 流，日志功能的开发，日志文件拆分，日志分析
• Express框架：Express 介绍和使用，中间件实现原理，开发 API 接口，结合常用插件，实现登录与日志
• Koa2 框架：Koa2 介绍和使用，中间件实现原理，开发API接口，结合常用插件，实现登录与日志
• 线上部署：PM2 介绍和配置，PM2 多进程模型，进程守候及日志记录

总体架构

项目的总体架构如下
课程使用了三种方法来实现，第一种是原生的node.js开发，我们可以学到很多原理性的东西；然后第二个是使用了express进行了项目的重构；最后是使用了koa2重构。我觉得使用koa2是最好的实现方法，其中用到了比较新的异步解决方案 async/await ，可以减少很多 promise的实现代码。所以我就以koa2作为项目的讲解。

项目开发过程

1. 安装koa脚手架 koa-generator

npm install koa-generator -g

使用 koa2 koa2-blog 命令生成一个项目。然后npm install 去下载依赖包，进入项目运行npm start 访问localhost:3000看是否安装成功

安装cross-env插件区分环境

npm install cross-env --save-dev

然后在package.json文件里面设置好环境的启动方式

 "scripts": {
    "start": "node bin/www",
    "dev": "cross-env NODE_ENV=dev ./node_modules/.bin/nodemon bin/www",
    "prd": "cross-env NODE_ENV=production pm2 start pm2.conf.json",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

2. 初始化路由

根据框架提供的思路和方式，我们创建了 user 和 blog 分别处理不同的路由（只负责路由处理，不涉及数据的处理，降低耦合性）

const router = require('koa-router')()
//统一的处理接口数据函数
const { getList, getDetail, newBlog, updateBlog, delBlog } = require('../controller/blog')
const { SuccessModel, ErrorModel } = require('../model/resModel')//成功和失败的模型
const loginCheck = require('../middleware/loginCheck')//是否登陆的中间件
router.prefix('/api/blog')//路由前缀
router.get('/list', async function (ctx, next) {
    let author = ctx.query.author || ''
    const keyword = ctx.query.keyword || ''
    if (ctx.query.isadmin) {
        if (ctx.session.username == null) {
            ctx.body = new ErrorModel('未登录')
            return
        }
        // 强制查询自己的博客
        author = ctx.session.username
    }
    const listData = await getList(author, keyword)
    ctx.body = new SuccessModel(listData)
})

router.get('/detail', async function (ctx, next) {
    const data = await getDetail(ctx.query.id)
    ctx.body = new SuccessModel(data)
})

router.post('/new', loginCheck, async function (ctx, next) {
    const body = ctx.request.body
    body.author = ctx.session.username
    const data = await newBlog(body)
    ctx.body = new SuccessModel(data)
})

router.post('/update', loginCheck, async function (ctx, next) {
    const val = await updateBlog(ctx.query.id, ctx.request.body)
    if (val) {
        ctx.body = new SuccessModel()
    } else {
        ctx.body = new ErrorModel('更新博客失败')
    }
})

router.post('/del', loginCheck, async function (ctx, next) {
    const author = ctx.session.username
    const val = await delBlog(ctx.query.id, author)
    if (val) {
        ctx.body = new SuccessModel()
    } else {
        ctx.body = new ErrorModel('删除博客失败')
    }
})
module.exports = router

3. 新建模型

首先解释一下SuccessModel和ErrorModel , 作用主要是供全局返回信息使用的。如登陆成功或者失败返回的标志位及提示信息

class BaseModel{
    constructor(data,message){
        if(typeof data === 'string'){
            this.message = data
            data = null
            message = null
        }
        if(data){
            this.data = data
        }
        if(message){
            this.message = message
        }
    }
}
class SuccessModel extends BaseModel{
    constructor(data,message){
        super(data,message)
        this.errno = 0
    }
}

class ErrorModel extends BaseModel{
    constructor(data,message){
        super(data,message)
        this.errno = -1
    }
}
module.exports = {
    SuccessModel,
    ErrorModel
}

4. 中间件开发

登陆校验的中间件 loginCheck
其实就是检查 session 中是否存有用户名的信息（信息在登陆成功时写进 session）

const { ErrorModel } = require('../model/resModel')

module.exports = async (ctx, next) => {
    if (ctx.session.username) {
        await next()
        return
    }
    ctx.body = new ErrorModel('未登录')
}

5. 控制层开发

接下来就讲一下控制层的实现，主要是连接数据库的sql语句来实现数据的交互

const xss = require('xss')
const { exec } = require('../db/mysql')

const getList = async (author, keyword) => {
    let sql = `select * from blogs where 1=1 `
    if (author) {
        sql += `and author='${author}' `
    }
    if (keyword) {
        sql += `and title like '%${keyword}%' `
    }
    sql += `order by createtime desc;`

    return await exec(sql)
}
const getDetail = async (id) => {
    const sql = `select * from blogs where id='${id}'`
    const rows = await exec(sql)
    return rows[0]
}
const newBlog = async (blogData = {}) => {
    // blogData 是一个博客对象，包含 title content author 属性
    const title = xss(blogData.title)
    const content = xss(blogData.content)
    const author = blogData.author
    const createTime = Date.now()

    const sql = `
        insert into blogs (title, content, createtime, author)
        values ('${title}', '${content}', ${createTime}, '${author}');
    `
    const insertData = await exec(sql)
    return {
        id: insertData.insertId
    }
}
const updateBlog = async (id, blogData = {}) => {
    // id 就是要更新博客的 id
    // blogData 是一个博客对象，包含 title content 属性

    const title = xss(blogData.title)
    const content = xss(blogData.content)
    const sql = `
        update blogs set title='${title}', content='${content}' where id=${id}
    `
    const updateData = await exec(sql)
    if (updateData.affectedRows > 0) {
        return true
    }
    return false
}
const delBlog = async (id, author) => {
    // id 就是要删除博客的 id
    const sql = `delete from blogs where id='${id}' and author='${author}';`
    const delData = await exec(sql)
    if (delData.affectedRows > 0) {
        return true
    }
    return false
}
module.exports = {
    getList,
    getDetail,
    newBlog,
    updateBlog,
    delBlog
}

5. 连接数据库

说明一下 exec函数其实就是数据库查询的函数

const mysql = require('mysql')
const { MYSQL_CONF } = require('../conf/db')
//创建链接对象
const con = mysql.createConnection(MYSQL_CONF)
//开始连接
con.connect()
//统一执行sql函数
function exec(sql) {
    const promise = new Promise((resolve, reject) => {
        con.query(sql, (err, result) => {
            if (err) {
                reject(err)
                return
            }
            resolve(result);
        })
    })
    return promise
}
module.exports = {
    exec,
    escape:mysql.escape
}

连接 mysql 的具体配置，分为生产环境和开发环境

const env = process.env.NODE_ENV  //获取环境变量
let MYSQL_CONF
if (env === 'dev') {
    MYSQL_CONF = {
        host: 'localhost',
        user: 'root',
        port: 3306,
        password: 'password',
        database: 'myblog'
    }
}
if (env === 'production') {
    MYSQL_CONF = {
        host: 'localhost',
        user: 'root',
        port: 3306,
        password: 'password',
        database: 'myblog'
    }
}
module.exports = {
    MYSQL_CONF
}

项目的WEB安全

1. sql 注入

   const sql = `select username,realname from users where username=${username} andpassword=${password};`

首先我们看一下 sql 的数据库查询，要是用户名输入 zhangsan' --就会把后面的密码注释了（也就是说不用密码就可以登陆）
解决方式是使用 mysql:escape进行转义

2. xss攻击

比如新建博客的时候可能会输入 <script>alert(1)</script>的形式，就会造成xss攻击，解决方式就是转义字符（如<,>等基本可以避免攻击）

const newBlog = async (blogData = {}) => {
    // blogData 是一个博客对象，包含 title content author 属性
    const title = xss(blogData.title)
    const content = xss(blogData.content)
    const author = blogData.author
    const createTime = Date.now()

    const sql = `
        insert into blogs (title, content, createtime, author)
        values ('${title}', '${content}', ${createTime}, '${author}');
    `
    const insertData = await exec(sql)
    return {
        id: insertData.insertId
    }
}

项目的日志

利用node的文件流，创建一个写文件流，并把它记录到本地文件当中

// logger
app.use(async (ctx, next) => {
	const start = new Date()
	await next()
	const ms = new Date() - start
	console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})

const ENV = process.env.NODE_ENV
//记录日志
if (ENV !== 'production') {
  app.use(morgan('dev'));
} else {
  const logFileName = path.resolve(__dirname, 'logs', 'access.log')
  const writeStream = fs.createWriteStream(logFileName, {
    flags: 'a'
  })
  app.use(morgan('combined', {
    stream: writeStream
  }));
}

中间件原理实现

const http = require('http')

// 组合中间件
function compose(middlewareList) {
  return function (ctx) {
    // 中间件调用
    function dispatch(i) {
      const fn = middlewareList[i]
      try {
        return Promise.resolve(fn(ctx, dispatch.bind(null, i+1)))
      } catch(err) {
        return Promise.reject(err)
      }
    }
    return dispatch(0)
  }
}

class LikeKoa2 {
  constructor() {
    this.middlewareList = []
  }

  use(fn) {
    this.middlewareList.push(fn)
    return this
  }

  createCtx(req, res) {
    const ctx = {
      req,
      res
    }
    return ctx
  }

  handleRequest(ctx, fn) {
    return fn(ctx)
  }

  callback() {
    const fn = compose(this.middlewareList)
    return (req, res) => {
      const ctx = this.createCtx(req, res)
      return this.handleRequest(ctx, fn)
    }
  }

  lsiten(...args) {
    const server = http.createServer(this.callback())
    server.listen(...args)
  }
}
module.exports = {
  LikeKoa2
}

上线与配置

1. pm2 介绍

• 进程守护，如果系统崩溃则会自动重启 node app.js和 nodemon app.js
• 启动多进程，充分利用cpu和内存
• 自带日志记录功能

2. pm2 配置与多进程

• 优点： 充分利用多核cpu优势。

• 缺点： 多进程之间，内存无法共享；解决方法是多进程访问redis，实现数共享

{
    "apps": {
        "name": "web-server",
        "script": "./bin/www.js",
        "watch": true, // 进行实时监听
        "ignore_watch": [
            "node_modules",
            "logs"
        ],
        "instances": 4, // 进程数，根据系统核数
        "error_file": "logs/error.log",
        "out_file": "logs/access.log",
        "log_date_format": "YYYY-MM-DD HH:mm:ss"
    }
}

总结

通过这一次的学习，让我懂得了如何进行后台方面的开发。学会了使用node进行数据库连接，后台接口的开发以及路由分配等基础而又重要的知识点。而且重要的是我学会了如何去设计代码，能够以一种简介明了的风格展现在我面前，考虑到生产环境和开发环境之间的配置，项目虽小但功能都全。希望自己在学习之后能够开发一个更加完善的项目，以及把前端部分的页面实现出来。

ps：笔者最近开通了微信公众号，大家可以关注一下哦，谢谢大家的支持！