前篇

萌新的全棧之旅

前言

首先要記錄的是登錄模塊

koa2環(huán)境搭建

圖省事可以直接使用koa-generator直接生成koa腳手架

首先使用vue-cli搭建vue腳手架
在cli根目錄下新建server目錄，用來放置服務(wù)端的代碼
并在cli根目錄下新建app.js文件，用來啟動koa
在server文件夾內(nèi)新建以下文件夾及文件

// 使用`tree /f`命令行生成文檔樹
// `tree /f > tree.txt`保存文檔樹
├─config  // 各類配置的文件夾
│      db.js
│      
├─controllers  // 控制器
│      user.js
│      
├─models  // 模型
│      user.js
│      
├─routes  // 路由
│      user.js
│      
├─schema  // 數(shù)據(jù)庫表結(jié)構(gòu)
│      user.js
│      
└─sql
       user.sql

koa組件

  "koa": "^2.3.0",
  "koa-bodyparser": "^4.2.0",  // 將post數(shù)據(jù)存入ctx.request.body
  "koa-json": "^2.0.2",  // 美觀的輸出JSON response
  "koa-logger": "^3.0.1",  // 打印http請求
  "koa-router": "^7.2.1",  // 路由
  "koa-static": "^4.0.1",  // 靜態(tài)文件服務(wù)
  "koa2-history-api-fallback": "^0.0.5"  // 解決vue前端路由與后端路由的沖突

mysql建表

（具體建庫建表代碼見）
先在自己的mysql數(shù)據(jù)庫website創(chuàng)建一個(gè)數(shù)據(jù)庫和表user
user內(nèi)包含字段account和passwd
并且insert自己的賬戶密碼（mysql基礎(chǔ)不解釋）

Sequelize

后臺為了更方便得和數(shù)據(jù)庫進(jìn)行聯(lián)系，這里使用Sequelize模塊進(jìn)行增刪改查操作，
sequelize也支持promise
sequelize-auto模塊可以將我們的數(shù)據(jù)庫的表結(jié)構(gòu)導(dǎo)出來

// 安裝模塊
npm i sequelize-auto && npm i sequelize mysql

進(jìn)入server的目錄，執(zhí)行如下語句sequelize-auto -o "./schema" -d website -h 127.0.0.1 -u root -p 3306 -x XXXXX -e mysql，（其中 -o 參數(shù)后面的是輸出的文件夾目錄， -d 參數(shù)后面的是數(shù)據(jù)庫名， -h 參數(shù)后面是數(shù)據(jù)庫地址， -u 參數(shù)后面是數(shù)據(jù)庫用戶名， -p 參數(shù)后面是端口號， -x 參數(shù)后面是數(shù)據(jù)庫密碼，這個(gè)要根據(jù)自己的數(shù)據(jù)庫密碼來！ -e 參數(shù)后面指定數(shù)據(jù)庫為mysql）

執(zhí)行完就會在schema文件夾中生成user.js文件(user數(shù)據(jù)表結(jié)構(gòu))

sequelize-auto報(bào)錯？

沒有報(bào)錯者請無視這條
若在window環(huán)境下使用sequelize-auto報(bào)錯
就直接在sequelize-auto模塊的\bin目錄下執(zhí)行
node sequelize-auto -o "./schema" -d website -h 127.0.0.1 -u root -p 3306 -x XXXXX -e mysql
再將生成的user.js復(fù)制到schema文件夾內(nèi)

初始化數(shù)據(jù)庫配置

在server目錄下的config目錄下我們新建一個(gè)db.js，用于初始化Sequelize和數(shù)據(jù)庫的連接。

// db.js
const Sequelize = require('sequelize'); // 引入sequelize
// 使用url連接的形式進(jìn)行連接，注意將root: 后面的XXXX改成自己數(shù)據(jù)庫的密碼
const Website = new Sequelize('mysql://root:XXXX@localhost/website',{
  define: {
    timestamps: false // 取消Sequelzie自動給數(shù)據(jù)表加入時(shí)間戳（createdAt以及updatedAt）
  }
}) 
module.exports = {
  Website // 將Todolist暴露出接口方便Model調(diào)用
}

建立model模型

// models/user.js
const db = require('../config/db.js')
const userModel = '../schema/user.js'
const WebsiteDb = db.Website // 引入數(shù)據(jù)庫
const User = WebsiteDb.import(userModel)  // 導(dǎo)入數(shù)據(jù)模型

// 返回匹配到的user信息
const getUserByAccount = async (account) => {
  const userInfo = await User.findOne({
    where: {
      account: account
    }
  })

  return userInfo
}

module.exports = {
  getUserByAccount
}

controller控制器

// controllers/user.js
const jwt = require('jsonwebtoken')
const user = require ('../models/user.js')

// 執(zhí)行model方法返回user表匹配信息，并對信息進(jìn)行jwt操作并返回
const postSingin = async (ctx) => {
  const data = ctx.request.body
  const userInfo = await user.getUserByAccount(data.account)

  if(userInfo !== null) {
    if(data.passwd !== userInfo.passwd) {
      ctx.body = {
        success: false,
        info: '密碼錯誤'
      }
    } else {
      const userToken = {
        name: userInfo.account,
        id: userInfo.id
      }
      const secret = 'cheesekun-website'
      const token = jwt.sign(userToken, secret)

      ctx.body = {
        success: true,
        token: token
      }
    }
  }else {
    ctx.body = {
      success: false,
      info: '用戶不存在'
    }
  }
}

module.exports = {
  postSingin
}

定義路由

// routes/user.js
const user = require('../controllers/user.js')
const router = require('koa-router')()

router.post('/user', user.postSingin)

module.exports = router

app.js入口配置

const Koa = require('koa')
const Router = require('koa-router')()
const json = require('koa-json')
const logger = require('koa-logger')
const bodyParser = require('koa-bodyparser')
const static = require('koa-static')
const historyApiFallback = require('koa2-history-api-fallback')
const path = require('path')
const app = new Koa()

const user = require('./server/routes/user.js')

app.use(bodyParser())
app.use(json())  // 美化返回的 json
app.use(logger())

app.on('error', async(err, ctx) => {
  console.log('server error', err)
})

Router.use('/api', user.routes())
app.use(Router.routes())

app.listen(8889, () => {
  console.log('koa2 server in 8889')
})

vue登陸模塊

樣式?jīng)]什么好說的，使用了ElementUI
請求方面使用了axios

// src/main.js
import axios from 'axios'
// ... 省略
Vue.config.productionTip = false

// 將axios給vue實(shí)例
// 之后在vue中就可以直接使用`this.$http`來代替引入axios
Vue.prototype.$http = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

this.$message是ElementUI的一個(gè)組件用法，具體可看ElementUI

// src/components/signin/signin.vue
signin() {
        const signinObj = {
          account: this.account,
          passwd: this.passwd
        }
        this.$http.post('/api/user', signinObj)
        .then((res) => {
          if(res.data.success) {
            sessionStorage.setItem('token', res.data.token)  // 將jwt存入sessionStorage
            this.$message({
              type: 'success',
              message: '登錄成功'
            })

            this.$router.push({path: '/music'})

          }else {
            this.$message.error(res.data.info)
            sessionStorage.setItem('token', null)
          }
        })
        .catch((err) => {
          this.$message.error('請求錯誤！')
          sessionStorage.setItem('token', null)
        })
      }

結(jié)語

登陸模塊僅僅將jwt存儲在sessionStorage
以此來判斷該用戶有無登陸過該網(wǎng)站
并沒有密碼加密和使用其他類似于會話之類
這個(gè)只能之后了解到相關(guān)的用法再進(jìn)行升級了

結(jié)語2

這是一篇要配合github代碼才能看得明白的文章
有種像是寫個(gè)自己看的感覺orz