萌新的全栈之旅

前篇

萌新的全栈之旅

前言

首先要记录的是登录模块

这里使用的是 mysql+JsonWebToken

koa2环境搭建

图省事可以直接使用koa-generator直接生成koa脚手架

首先使用vue-cli搭建vue脚手架
在cli根目录下新建server目录，用来放置服务端的代码
并在cli根目录下新建app.js文件，用来启动koa
在server文件夹内新建以下文件夹及文件

// 使用`tree /f`命令行生成文档树
// `tree /f > tree.txt`保存文档树
├─config  // 各类配置的文件夹
│      db.js
│      
├─controllers  // 控制器
│      user.js
│      
├─models  // 模型
│      user.js
│      
├─routes  // 路由
│      user.js
│      
├─schema  // 数据库表结构
│      user.js
│      
└─sql
       user.sql

koa组件

  "koa": "^2.3.0",
  "koa-bodyparser": "^4.2.0",  // 将post数据存入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",  // 静态文件服务
  "koa2-history-api-fallback": "^0.0.5"  // 解决vue前端路由与后端路由的冲突

mysql建表

（具体建库建表代码见）
先在自己的mysql数据库website创建一个数据库和表user
user内包含字段account和passwd
并且insert自己的账户密码（mysql基础不解释）

Sequelize

后台为了更方便得和数据库进行联系，这里使用Sequelize模块进行增删改查操作，
sequelize也支持promise
sequelize-auto模块可以将我们的数据库的表结构导出来

// 安装模块
npm i sequelize-auto && npm i sequelize mysql

进入server的目录，执行如下语句sequelize-auto -o "./schema" -d website -h 127.0.0.1 -u root -p 3306 -x XXXXX -e mysql，（其中 -o 参数后面的是输出的文件夹目录， -d 参数后面的是数据库名， -h 参数后面是数据库地址， -u 参数后面是数据库用户名， -p 参数后面是端口号， -x 参数后面是数据库密码，这个要根据自己的数据库密码来！ -e 参数后面指定数据库为mysql）

执行完就会在schema文件夹中生成user.js文件(user数据表结构)

sequelize-auto报错？

没有报错者请无视这条
若在window环境下使用sequelize-auto报错
就直接在sequelize-auto模块的\bin目录下执行
node sequelize-auto -o "./schema" -d website -h 127.0.0.1 -u root -p 3306 -x XXXXX -e mysql
再将生成的user.js复制到schema文件夹内

初始化数据库配置

在server目录下的config目录下我们新建一个db.js，用于初始化Sequelize和数据库的连接。

// db.js
const Sequelize = require('sequelize'); // 引入sequelize
// 使用url连接的形式进行连接，注意将root: 后面的XXXX改成自己数据库的密码
const Website = new Sequelize('mysql://root:XXXX@localhost/website',{
  define: {
    timestamps: false // 取消Sequelzie自动给数据表加入时间戳（createdAt以及updatedAt）
  }
}) 
module.exports = {
  Website // 将Todolist暴露出接口方便Model调用
}

建立model模型

// models/user.js
const db = require('../config/db.js')
const userModel = '../schema/user.js'
const WebsiteDb = db.Website // 引入数据库
const User = WebsiteDb.import(userModel)  // 导入数据模型

// 返回匹配到的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')

// 执行model方法返回user表匹配信息，并对信息进行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登陆模块

样式没什么好说的，使用了ElementUI
请求方面使用了axios

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

// 将axios给vue实例
// 之后在vue中就可以直接使用`this.$http`来代替引入axios
Vue.prototype.$http = axios

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

this.$message是ElementUI的一个组件用法，具体可看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)
        })
      }

结语

登陆模块仅仅将jwt存储在sessionStorage
以此来判断该用户有无登陆过该网站
并没有密码加密和使用其他类似于会话之类
这个只能之后了解到相关的用法再进行升级了

结语2

这是一篇要配合github代码才能看得明白的文章
有种像是写个自己看的感觉orz

萌新的全栈之旅 | 登录

前篇

前言