前篇
前言
首先要记录的是登录模块
这里使用的是
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: '<App/>',
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
网友评论