全棧前端入門必看 koa2+mysql+vue+vant 構建簡單版移動端博客

時間  2019-11-29
標籤 前端 入門 koa2+mysql+vue+vant koa mysql vue vant 構建 簡單 移動 博客 欄目 MySQL 简体版
原文   原文鏈接

koa2+mysql+vue+vant 構建簡單版移動端博客

具體內容展現

開始正文

github地址
前端

以爲對你有幫助的話,能夠star一下^_^
必須安裝:
mysql
node.js
vue-cli
vue

目錄結構 node



代碼步驟


在 `app` 目錄下 打開 node 運行vue-cli `vue init webpack` 新建Vue項目
安裝如下依賴模塊: 
"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源碼

mysql

在 koa2 目錄下 打開 node 運行 npm init 編寫信息
安裝如下依賴模塊:
webpack

"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
複製代碼

在 koa2/config.js 進行 mysql 連接配置ios

// config.js  數據庫配置

    module.exports = {  // mysql 配置
      mysql: {
        host: 'localhost', // 地址
        user: 'root', // 用戶帳號
        password: '', // 密碼
        database: 'test' // test庫
      },
      port: 3001 // 監聽端口
    }
複製代碼

編寫 sql 配置

在 koa2/mysql.js 進行編寫 sql 語句git

// 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 配置github

// 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註冊
///////////////////-> 註冊 -> 有帳號 -> 去登陸

web

註冊
vue-router

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一下 ^_^

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程