全棧前端入門必看 koa2+mysql+vue+vant 構(gòu)建簡單版移動(dòng)端博客

Galence 發(fā)布于2019-08-02 11:13 / 2321人閱讀

摘要：要注意這里必須和創(chuàng)建的時(shí)候傳入的一致，因?yàn)榉?wù)端需要用創(chuàng)建時(shí)的來解密。是校驗(yàn)碼解析時(shí)需要一致才能取到信息過期時(shí)間設(shè)置為格式有。

koa2+mysql+vue+vant 構(gòu)建簡單版移動(dòng)端博客 具體內(nèi)容展示

開始正文

github地址

覺得對(duì)你有幫助的話,可以star一下^_^

必須安裝:

mysql

node.js

vue-cli

目錄結(jié)構(gòu)

代碼步驟

在 app 目錄下打開 node 運(yùn)行vue-cli vue init webpack 新建Vue項(xiàng)目

安裝以下依賴模塊:

"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"

詳細(xì)具體看github源碼

在 koa2 目錄下打開 node 運(yùn)行 npm init 編寫信息

安裝以下依賴模塊:

"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靜態(tài)文件
"koa2": "^2.0.0-alpha.7", // koa2
"mysql": "^2.16.0", // mysql
"uuid": "^3.3.2" // 生成userId

在 koa2/config.js 進(jìn)行 mysql 鏈接配置

// config.js  數(shù)據(jù)庫配置

    module.exports = {  // mysql 配置
      mysql: {
        host: "localhost", // 地址
        user: "root", // 用戶賬號(hào)
        password: "", // 密碼
        database: "test" // test庫
      },
      port: 3001 // 監(jiān)聽端口
    }

編寫 sql 配置

在 koa2/mysql.js 進(jìn)行編寫 sql 語句

// 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) // 評(píng)論表
    
    const insetUser = (val) => { // 注冊(cè)
      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評(píng)論數(shù)量
      let _sql = `UPDATE posts SET comments=? WHERE id=?`
      return query(_sql, val)
    }
    
    const updatePostsHot = (val) => { // 修改posts查看人數(shù)
      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) => { // 根據(jù)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 進(jìn)行編寫 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")
    )) // 設(shè)置靜態(tài)文件
    
    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"],
      })
    ); // 設(shè)置跨域
    
    app.use(bodyParser({
      formLimit: "1mb"
    })) // ctx body 中間件
    
    app.use(require("./routers/signUp.js").routes()) // 注冊(cè)
    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) // 監(jiān)聽端口
    
    console.log("listen in localhost:" + config.port)

分析登錄注冊(cè)

詳細(xì)分析一下登錄注冊(cè)

登錄 -> 有賬號(hào) -> 校驗(yàn)密碼 -> 成功 -> 返回Token

登錄 -> 沒有賬號(hào) -> 注冊(cè) -> 判斷是否有賬號(hào) -> 沒有-> sql注冊(cè)

///////////////////-> 注冊(cè) -> 有賬號(hào) -> 去登錄

注冊(cè)

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"); // 文件操作

// 注冊(cè)
router.post("/signUp", async (ctx, next) => {
// post請(qǐng)求 從body中獲取注冊(cè)參數(shù)
  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 說明 表中有數(shù)據(jù)
      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: "密碼輸入錯(cuò)誤",
        data: []
      }
    } else {  // 否者沒有注冊(cè)
      //處理上傳頭像
      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("注冊(cè)成功")
        ctx.body = {
          state: 1,
          msg: "注冊(cè)成功",
          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: "用戶未注冊(cè)!",
        data: []
      }
      console.log("用戶未注冊(cè)")
    } else {
      if (res[0].passWord === user.passWord) {
        let token = createToken(res[0]) // 創(chuàng)建token 存儲(chǔ)用戶id等重要信息

        ctx.body = {
          state: 1,
          msg: "用戶登錄成功!",
          data: [],
          token
        }
        console.log("密碼校驗(yàn)正確, 允許登錄")
      } else {
        ctx.body = {
          state: 0,
          msg: "用戶名或者密碼錯(cuò)誤!",
          data: []
        }
        console.log("用戶名或者密碼錯(cuò)誤")
      }
    }
  }).catch((err) => {
    ctx.body = {
      state: 0,
      msg: err,
      data: []
    }
  })

})

module.exports = router

生成Token, 解析Token

createToken.js , checkToken.js 原理

    // createToken.js
    const jwt = require("jsonwebtoken");
    
    // 創(chuàng)建token
    //登錄時(shí)：核對(duì)用戶名和密碼成功后，應(yīng)用將用戶的id 作為JWT Payload的一個(gè)屬性
    module.exports = function(user){
    
    // jwt.sign 參數(shù)詳情
    //第一個(gè)是Payload，也就是用戶信息（要注意payload不要傳整個(gè)文檔，Payload需要的是唯一且不變的數(shù)據(jù)，否則當(dāng)Payload改變的時(shí)候需要重新下發(fā)token）。這里我們用文檔的id，目的是唯一標(biāo)識(shí)用戶
    
    // 第二個(gè)參數(shù)是密鑰，也就是你生成Signature時(shí)所用到的加密密鑰。要注意這里必須和創(chuàng)建jwt的時(shí)候傳入的secret一致，因?yàn)榉?wù)端需要用創(chuàng)建時(shí)的secret來解密。
    
    // 第三個(gè)參數(shù)則是設(shè)置一個(gè)token的過期時(shí)間，這里我們?cè)O(shè)置的是1天。
    
    
        const token = jwt.sign({
            userId: user.id,
            userName: user.userName,
            avator: user.avator
        }, "kuaifengle", {    // "kuaifengle"  是校驗(yàn)碼    解析時(shí)需要一致 才能取到 user 信息
            expiresIn: "24h" //過期時(shí)間設(shè)置為24h 格式有(s, m, h , day)。那么decode這個(gè)token的時(shí)候得到的過期時(shí)間為 : 創(chuàng)建token的時(shí)間 +　設(shè)置的值
        });
        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 {
            // 根據(jù) "kuaifengle" 鑰解析 token 判斷是否失效
            tokenContent = await jwt.verify(token, "kuaifengle");     //如果token過期或驗(yàn)證失敗，將拋出錯(cuò)誤
            // 存入ctx 中 next() 可以獲取到設(shè)置的 userInfo 數(shù)據(jù)
            ctx.userInfo = tokenContent
        } catch (err) {
            ctx.body = {
                state: 0,
                msg: "用戶登錄驗(yàn)證失效"
            }
        }
        await next();
    }

其他的接口就不做解釋了

項(xiàng)目打包后,放在 Koa2 / public / 下,就可以訪問 localhost:3001 查看頁面了

Github地址

都是基本的mysql語句操作,和業(yè)務(wù)邏輯, 具體看github源碼

覺得對(duì)你有幫助的話,可以star一下 ^_^

云數(shù)據(jù)庫MySQL 移動(dòng)端web前端框架前端構(gòu)建 vue入門教程 jsp簡單個(gè)人博客

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52844.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Galence

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Qt/Ununtu篇一：基于ubuntu操作系統(tǒng)下的Qt的安裝

閱讀 2411·2021-11-16 11:44
ucloud，烏蘭察布快杰共享型云主機(jī)測評(píng) – 基于AMD Rome EPYC2處理器

閱讀 848·2021-09-10 11:16
開發(fā)第一個(gè)VUE插件

閱讀 2224·2019-08-30 15:54
網(wǎng)頁保存為圖片及高清截圖的優(yōu)化 | canvas跨域圖片配置

閱讀 1042·2019-08-30 15:53
CSS魔法堂：Box-Shadow 沒那么簡單啦:)

閱讀 1894·2019-08-30 13:00
CSS Sprite雪碧圖的應(yīng)用

閱讀 615·2019-08-29 17:07
css使既有浮動(dòng)又有左右margin的多個(gè)元素兩端對(duì)其

閱讀 3509·2019-08-29 16:39
如何設(shè)計(jì) Web App 應(yīng)用架構(gòu)？「兩分鐘了解 IOING」

閱讀 3135·2019-08-29 13:30

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

全棧前端入門必看 koa2+mysql+vue+vant 構(gòu)建簡單版移動(dòng)端博客

相關(guān)文章