koa2+mysql+vue+vant 构建简单版移动端博客

具体内容展示

开始正文

github地址
<br/>

觉得对你有帮助的话,可以star一下^_^

必须安装:<br/>
mysql <br/>
node.js

vue-cli<br/>

目录结构


<br/><br/>

代码步骤

<br/>
app 目录下 打开 node 运行vue-cli vue init webpack 新建Vue项目<br/>
安装以下依赖模块:
<br/>

"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 编写信息<br/>
安装以下依赖模块: <br/>

"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

<br/>

在 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注册

///////////////////-> 注册 -> 有账号 -> 去登录

注册<br/>

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();
}

<br/>

其他的接口就不做解释了

项目打包后,放在 Koa2 / public / 下,就可以访问 localhost:3001 查看页面了

Github地址

都是基本的mysql语句操作,和业务逻辑, 具体看github源码

觉得对你有帮助的话,可以star一下 ^_^

全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客的更多相关文章

  1. Koa2+MySQL+VUE+ElementIUI搭建简单的后台管理小系统

    如题,前端入坑许久,还是写个小东西出来吧 想要搭建自己的一个后台管理,实现简单的增删改查,看起来很简单 其实是真的简单,没有想的那么难,我也就写了一个月吧, 当然是假的,其实也就每天一两个小时,花了大 ...

  2. uni-app高分开源电影项目源码案例分析,支持一套代码发布小程序、APP平台多个平台(前端入门必看)

    uni-app-Video 一个优秀的uni-app案例,旨在帮助大家更快的上手uni-app,共同进步! Features ​ 代码编写简洁,注释清晰,快速入门必备: 支持在线模糊搜索: 程序类目懒 ...

  3. 知数堂MYSQL优化课---CU论坛版主 DBA 博客

    http://www.cnblogs.com/MYSQLZOUQI/category/546261.html

  4. spring boot + vue + element-ui全栈开发入门——spring boot后端开发

    前言 本文讲解作为后端的spring boot项目开发流程,如果您还不会配置spring boot环境,就请点击<玩转spring boot——快速开始>,如果您对spring boot还 ...

  5. Java编程学习知识点分享 入门必看

    Java编程学习知识点分享 入门必看 阿尔法颜色组成(alpha color component):颜色组成用来描述颜色的透明度或不透明度.阿尔法组成越高,颜色越不透明. API:应用编程接口.针对软 ...

  6. spring boot + vue + element-ui全栈开发入门——开篇

    最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...

  7. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

  8. spring boot + vue + element-ui全栈开发入门

    今天想弄弄element-ui  然后就在网上找了个例子 感觉还是可以用的  第一步是完成了  果断 拿过来  放到我这里这  下面直接是连接  点进去 就可以用啊 本想着不用vue   直接导入连接 ...

  9. Liunx新手入门必看

    安装CentOS(Linux的一个常用发行版本,互联网公司经常使用这个发行版)用到的软件: VMware_workstation_full_12.5.2.exe 虚拟机软件,虚拟机由这个软件安装.管理 ...

随机推荐

  1. Vscode 下 PlantUML 插件的安装(windows and ubuntu)

    目录 Windows 下安装 JAVA 安装环境配置: 测试 Ubuntu 16.04 下安装 Windows 下安装 Vscode graphviz PlantUML JAVA(推荐长期稳定版本,官 ...

  2. VS制作dll、def文件的使用、dll加入工程使用

    1.VS新建工程,在选项的时候,选择dll和空项目,保持干净的dll库: 创建完以后,添加头文件以及源文件. 2.将外部模块使用的接口导出: (1)函数导出: __declspec(dllexport ...

  3. VS工程的相对路径写法

    最近搭建一个VS工程的框架,为了让所有人都能直接使用,要使用相对路径,下面的几种常见路径的写法: 1.两个点“..\”表示在工程文件(*.vcxproj)的上一级目录. 2.一个点“.\”则表示和工程 ...

  4. Amsterdam Distance

    题目描述 Your friend from Manhattan is visiting you in Amsterdam. Because she can only stay for a short ...

  5. resent|aspiration|deficiency|diagnosed|distract|emphasize

    VERB 怨恨;憎恶;愤恨If you resent someone or something, you feel bitter and angry about them. She resents h ...

  6. phpcms数组处理后键值插入(php自带库函数)和自己处理办法比较。

    phpcms处理: public function insert($data, $table, $return_insert_id = false, $replace = false) {  if(! ...

  7. verilog乘法器的设计

    在verilog编程中,常数与寄存器变量的乘法综合出来的电路不同于寄存器变量乘以寄存器变量的综合电路.知乎里的解释非常好https://www.zhihu.com/question/45554104, ...

  8. LeetCode Day 8

    LeetCode0015 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 例如, 给 ...

  9. 微软推出精简版Windows10Lean系统意欲何为?

    提起Windows系统,自然无须多言都知道它的重要性.在经历了Windows Vista的失败. Windows 7的成功.Windows 8的平庸和Windows 10的复兴之后,微软算是积累下了大 ...

  10. 林轩田机器学习基石笔记3—Types of Learning

    上节课我们主要介绍了解决线性分类问题的一个简单的方法:PLA.PLA能够在平面中选择一条直线将样本数据完全正确分类.而对于线性不可分的情况,可以使用Pocket Algorithm来处理.本节课将主要 ...