全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客

时间 2019-12-13

标签前端入门 koa2+mysql+vue+vant koa mysql vue vant 构建简单移动博客栏目 MySQL 繁體版

原文原文链接

koa2+mysql+vue+vant 构建简单版移动端博客

具体内容展现

开始正文

github地址
 前端

以为对你有帮助的话,能够star一下^_^

必须安装: 
mysql 
node.js

vue-cli vue

目录结构
node

mysql

代码步骤

在 app 目录下打开 node 运行vue-cli vue init webpack 新建Vue项目 
安装如下依赖模块:
 webpack

"axios": "^0.18.0",
"js-cookie": "^2.2.0",
"js-md5": "^0.7.3",
"nprogress": "^0.2.0",
"vant": "^1.1.15",
"vue": "^2.5.2",
"vue-router": "^3.0.1"

详细具体看github源码

ios

在 koa2 目录下打开 node 运行 npm init 编写信息 
安装如下依赖模块: git

"jsonwebtoken": "^8.3.0",  // 生成token
"koa-bodyparser": "^4.2.1", // 解析requeset body
"koa-cors": "^0.0.16", // koa跨域
"koa-router": "^7.4.0", // koa-router
"koa-static": "^5.0.0", // koa静态文件
"koa2": "^2.0.0-alpha.7", // koa2
"mysql": "^2.16.0", // mysql
"uuid": "^3.3.2" // 生成userId

github

在 koa2/config.js 进行 mysql 连接配置web

// config.js  数据库配置

    module.exports = {  // mysql 配置
      mysql: {
        host: 'localhost', // 地址
        user: 'root', // 用户帐号
        password: '', // 密码
        database: 'test' // test库
      },
      port: 3001 // 监听端口
    }

编写 sql 配置

在 koa2/mysql.js 进行编写 sql 语句vue-router

// mysql.js   编写sql语句
    
    const mysql = require('mysql');
    const config = require('./config.js');
    
    var pool = mysql.createPool(config.mysql);
    
    const query = function (sql, val) {
      return new Promise((resolve, reject) => {
        pool.getConnection(function (err, connection) {
          if (err) {
            reject(err)
          } else {
            connection.query(sql, val, (err, res) => {
              if (err) {
                reject(err)
              } else {
                resolve(res)
              }
              connection.release();
            })
          }
        })
      })
    }

    const createTable = (sql) => {
      query(sql, [])
    }
    
    const usersTable = `CREATE TABLE IF NOT EXISTS users (
       id VARCHAR(36) NOT NULL,
       userName VARCHAR(16) NOT NULL,
       passWord VARCHAR(16) NOT NULL,
       avator VARCHAR(50) NOT NULL,
       createTime VARCHAR(50) NOT NULL,
       PRIMARY KEY (id) 
    )`;
    
    const postsTable = `CREATE TABLE IF NOT EXISTS posts (
       id INT NOT NULL AUTO_INCREMENT,
       userName VARCHAR(100) NOT NULL,
       userId VARCHAR(40) NOT NULL,
       avator VARCHAR(100) NOT NULL,
       title VARCHAR(100) NOT NULL,
       content TEXT(0) NOT NULL,
       hot VARCHAR(40) NOT NULL,
       comments VARCHAR(40) NOT NULL,
       createTime VARCHAR(100) NOT NULL,
       PRIMARY KEY (id) 
    )`;
    
    const commentTable = `CREATE TABLE IF NOT EXISTS comment (
       id INT NOT NULL AUTO_INCREMENT,
       userName VARCHAR(100) NOT NULL,
       content TEXT(0) NOT NULL,
       postId VARCHAR(40) NOT NULL,
       avator VARCHAR(100) NOT NULL,
       createTime VARCHAR(100) NOT NULL,
       PRIMARY KEY (id) 
    )`;
    
    
    // 建表
    createTable(usersTable) // 用户表
    createTable(postsTable) // 文章表
    createTable(commentTable) // 评论表
    
    const insetUser = (val) => { // 注册
      let _sql = `INSERT INTO users (id, userName, passWord, avator, createTime) VALUES (?,?,?,?,?)`
      return query(_sql, val)
    }
    
    const findUser = (val) => { // 查找全部User
      let _sql = `SELECT * FROM users WHERE userName = '${val}'`
      return query(_sql)
    }
    
    const createPosts = (val) => { // 新建posts
      let _sql = `INSERT INTO posts (userName, userId, avator, title, content, hot, comments, createTime) VALUES (?,?,?,?,?,?,?,?)`
      return query(_sql, val)
    }
    
    const updatePosts = (val) => { // 修改posts
      let _sql = `UPDATE posts SET title=?, content=? WHERE id=?`
      return query(_sql, val)
    }
    
    const updatePostsComment = (val) => { // 修改posts评论数量
      let _sql = `UPDATE posts SET comments=? WHERE id=?`
      return query(_sql, val)
    }
    
    const updatePostsHot = (val) => { // 修改posts查看人数
      let _sql = `UPDATE posts SET hot=? WHERE id=?`
      return query(_sql, val)
    }
    
    const postsList = (key, pg, size) => { // 查找全部posts
      let _sql = `SELECT * FROM posts ${ key ? "WHERE title LIKE '%"+key+"%' " : ' '}ORDER BY createTime DESC limit ${pg * size} , ${size}`
      return query(_sql)
    }
    
    const postDetail = (val) => { // 根据ID 查询 postsDetail
      let _sql = `SELECT * FROM posts WHERE id = '${val}'`
      return query(_sql)
    }
    
    const commentList = (val) => { // 获取留言列表
      let _sql = `SELECT * FROM comment WHERE postId = '${val}' ORDER BY createTime DESC`
      return query(_sql)
    }
    
    const createComment = (val) => { // 添加 留言
      let _sql = `INSERT INTO comment (userName, content, postId, avator, createTime) VALUES (?,?,?,?,?)`
      return query(_sql, val)
    }
    
    module.exports =  {
      insetUser,
      findUser,
      createPosts,
      postsList,
      updatePosts,
      updatePostsComment,
      updatePostsHot,
      postDetail,
      createComment,
      commentList
    }

编写 koa2 配置

在 koa2/app.js 进行编写 koa2 配置

// app.js

    const path = require('path')
    const Koa = require('koa2');
    const router = require('koa-router');
    var cors = require('koa-cors');
    const bodyParser = require('koa-bodyparser');
    const config = require('./config.js');
    const server = require('koa-static');
    const jwt = require('jsonwebtoken')
    
    require('./mysql.js');
    
    const app = new Koa();
    
    app.use(server(
      path.join(__dirname , './public')
    )) // 设置静态文件
    
    app.use(cors({
          origin: 'http://localhost:8080',  // 容许 loclhost:8080 访问
          exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
          maxAge: 5,
          credentials: true,
          allowMethods: ['GET', 'POST'],
          allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
      })
    ); // 设置跨域
    
    app.use(bodyParser({
      formLimit: '1mb'
    })) // ctx body 中间件
    
    app.use(require('./routers/signUp.js').routes()) // 注册
    app.use(require('./routers/signIn.js').routes()) // 登陆
    
    app.use(require('./routers/createPosts.js').routes()) // 新建文章
    app.use(require('./routers/postsList.js').routes()) // 搜索文章
    app.use(require('./routers/postDetail.js').routes()) // 文章detail
    app.use(require('./routers/updatePosts.js').routes()) // 修改文章
    
    app.use(require('./routers/createComment.js').routes()) // 添加留言
    app.use(require('./routers/commentList.js').routes()) // 获取留言
    
    app.listen(config.port) // 监听端口
    
    console.log('listen in localhost:' + config.port)

分析登陆注册

详细分析一下登陆注册

登陆 -> 有帐号 -> 校验密码 -> 成功 -> 返回Token

登陆 -> 没有帐号 -> 注册 -> 判断是否有帐号 -> 没有-> sql注册

///////////////////-> 注册 -> 有帐号 -> 去登陆

signUp.js

// signUp.js

const router = require('koa-router')();
const uuidV1 = require('uuid/v1'); // 生成13位 userId
const userModel = require('../mysql.js');
const fs = require('fs'); // 文件操做

// 注册
router.post('/signUp', async (ctx, next) => {
// post请求 从body中获取注册参数
  let user = {
    userName: ctx.request.body.userName,
    passWord: ctx.request.body.passWord,
    repeatPass: ctx.request.body.repeatPass,
    avator: ctx.request.body.avator
  }

  await userModel.findUser(user.userName).then(async (res) => {
    if (res.length) { // length > 1 说明 表中有数据
      try {
        throw Error('用户已存在')
      } catch (err) {
        console.log(err)
      }
      ctx.body = {
        state: 0,
        msg: '用户已存在!',
        data: []
      }
    } else if (!user.userName || user.passWord !== user.repeatPass) {
      ctx.body = {
        state: 0,
        msg: '密码输入错误',
        data: []
      }
    } else {  // 否者没有注册
      //处理上传头像
      let base64Data = user.avator.replace(/^data:image\/\w+;base64,/, "");
      let dataBuffer = new Buffer(base64Data, 'base64');
      let getName = Number(Math.random().toString().substr(3)).toString(36) + Date.now()

      // 上传图片到 public/images 文件夹中
      await fs.writeFile('./public/images/' + getName + '.png', dataBuffer, err => {
          if (err) {
            console.log(err);
            return false
          }
          console.log('头像上传成功') 
      });  

      await userModel.insetUser([uuidV1(), user.userName, user.passWord, getName, new Date().getTime()]).then((res) => {
        console.log('注册成功')
        ctx.body = {
          state: 1,
          msg: '注册成功',
          data: []
        }
      }).catch((err) => {
        ctx.body = {
          state: 0,
          msg: err,
          data: []
        }
      })
    }

  })

})

module.exports = router

登陆

signIn.js

// signIn.js
let router = require('koa-router')();
let userModel = require('../mysql.js');

const createToken = require('../token/createToken.js');

router.post('/signIn',async (ctx, next) => {
  let user = {
    userName: ctx.request.body.userName,
    passWord: ctx.request.body.passWord
  }

  await userModel.findUser(user.userName).then((res) => {
    if (!res.length) {
      ctx.body = {
        state: 0,
        msg: '用户未注册!',
        data: []
      }
      console.log('用户未注册')
    } else {
      if (res[0].passWord === user.passWord) {
        let token = createToken(res[0]) // 建立token 存储用户id等重要信息

        ctx.body = {
          state: 1,
          msg: '用户登陆成功!',
          data: [],
          token
        }
        console.log('密码校验正确, 容许登陆')
      } else {
        ctx.body = {
          state: 0,
          msg: '用户名或者密码错误!',
          data: []
        }
        console.log('用户名或者密码错误')
      }
    }
  }).catch((err) => {
    ctx.body = {
      state: 0,
      msg: err,
      data: []
    }
  })

})

module.exports = router

生成Token, 解析Token

createToken.js , checkToken.js 原理

// createToken.js
    const jwt = require('jsonwebtoken');
    
    // 建立token
    //登陆时：核对用户名和密码成功后，应用将用户的id 做为JWT Payload的一个属性
    module.exports = function(user){
    
    // jwt.sign 参数详情
    //第一个是Payload，也就是用户信息（要注意payload不要传整个文档，Payload须要的是惟一且不变的数据，不然当Payload改变的时候须要从新下发token）。这里咱们用文档的id，目的是惟一标识用户
    
    // 第二个参数是密钥，也就是你生成Signature时所用到的加密密钥。要注意这里必须和建立jwt的时候传入的secret一致，由于服务端须要用建立时的secret来解密。
    
    // 第三个参数则是设置一个token的过时时间，这里咱们设置的是1天。
    
    
        const token = jwt.sign({
            userId: user.id,
            userName: user.userName,
            avator: user.avator
        }, 'kuaifengle', {    // "kuaifengle"  是校验码    解析时须要一致 才能取到 user 信息
            expiresIn: '24h' //过时时间设置为24h 格式有(s, m, h , day)。那么decode这个token的时候获得的过时时间为 : 建立token的时间 +　设置的值
        });
        return token;  返回token  前端存在浏览器cookie 中
    };

//  checkToken.js
    const jwt = require('jsonwebtoken');
    
    // 接口访问必需要有Token (须要用户登陆)
    module.exports = async ( ctx, next ) => {
        const authorization = ctx.get('Authorization'); // request 带过来的 token  存在浏览器的cookie中
        if (authorization == '') {
            ctx.body = {
                state: 0,
                msg: '用户未登陆'
            }
            return false
        }
        const token = authorization;
        let tokenContent;
        try {
            // 根据 "kuaifengle" 钥解析 token 判断是否失效
            tokenContent = await jwt.verify(token, 'kuaifengle');     //若是token过时或验证失败，将抛出错误
            // 存入ctx 中 next() 能够获取到设置的 userInfo 数据
            ctx.userInfo = tokenContent
        } catch (err) {
            ctx.body = {
                state: 0,
                msg: '用户登陆验证失效'
            }
        }
        await next();
    }

其余的接口就不作解释了

项目打包后,放在 Koa2 / public / 下,就能够访问 localhost:3001 查看页面了

Github地址

都是基本的mysql语句操做,和业务逻辑, 具体看github源码

以为对你有帮助的话,能够star一下 ^_^