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

maybe_009 發布于2019-08-23 10:56 / 2295人閱讀

摘要：要注意這里必須和創建的時候傳入的一致，因為服務端需要用創建時的來解密。是校驗碼解析時需要一致才能取到信息過期時間設置為格式有。

koa2+mysql+vue+vant 構建簡單版移動端博客 具體內容展示

開始正文

github地址

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

必須安裝:

mysql

node.js

vue-cli

目錄結構

代碼步驟

在 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源碼

在 koa2 目錄下打開 node 運行 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靜態文件
"koa2": "^2.0.0-alpha.7", // koa2
"mysql": "^2.16.0", // mysql
"uuid": "^3.3.2" // 生成userId

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

// config.js  數據庫配置

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

編寫 sql 配置

在 koa2/mysql.js 進行編寫 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) // 評論表
    
    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一下 ^_^

云數據庫MySQL 移動端web前端框架前端構建 vue入門教程 jsp簡單個人博客

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96831.html

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

摘要：要注意這里必須和創建的時候傳入的一致，因為服務端需要用創建時的來解密。是校驗碼解析時需要一致才能取到信息過期時間設置為格式有。 koa2+mysql+vue+vant 構建簡單版移動端博客具體內容展示 showImg(https://segmentfault.com/img/remote/1460000015962704?w=375&h=670); showImg(https://s...

Galence 2019-08-02 11:13 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0

發表評論

登陸后可評論

0條評論

maybe_009

男|高級講師

我要關注我要私信

TA的文章

Vue基礎之內部指令（下）

閱讀 1834·2019-08-30 15:55
使用webpack手動搭建一個基于vue的單頁面應用

閱讀 1031·2019-08-26 11:57
《JavaScript高級程序設計》筆記：引用類型（五）

閱讀 537·2019-08-26 11:29
如何學習-什么是學習？

閱讀 3377·2019-08-26 10:49
ArcGis for JavaScript SDK

閱讀 1929·2019-08-23 18:40
白話es6系列二：你真的會聲明變量嗎

閱讀 1836·2019-08-23 16:04
JavaScript抖動的實現

閱讀 3123·2019-08-23 11:01
全棧前端入門必看 koa2+mysql+vue+vant 構建簡單版移動端博客

閱讀 2296·2019-08-23 10:56

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

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

相關文章