koa+jwt+sequelize+nginx+vue+elementUI 撸一个属于本身的博客
源码地址html
博客地址前端
CSDNvue
运行项目前必读
- 三个项目中各类各样的受权参数 已所有修改为本身的受权参数，忘悉知！！！！忘悉知！！！！忘悉知！！！！
- 本身建立一个数据库名称就能够了，表是运行 node 时候自动建立好
以myblog3为数据库名称， admin 登陆页面有个一键生成地方生成帐号：admin 密码：123， 只能生成一次，由于是程序写死的帐号，省的您手动去数据库中 User 表去添加一条帐户信息。帐户的体系的增删改查的接口都已经实现，根据本身的需求去释放出来 您能够很愉快的登陆玩耍了
整套项目功能
- 前端 BLOG 功能介绍：
- 首页 （思惟导图（树状图））
- 文章 （文章列表，我的分类，热门文章，文章详情，文章目录结构）
- 留言（登陆，留言， 发邮件）
- 做品 （历年来的项目地址）
- 关于（关于项目介绍）
- 登陆 （普通登陆，Github 登陆， QQ 登陆（审核中...））
- Admin 后台系统功能介绍
- 首页
- 分类管理（CURD）
- 留言管理（CURD，经过，拒绝，回复）
- 文章
列表：CURD，上下架，上传图片，markdown 编辑器，评论列表按钮 评论列表：CURD，上下架，评论， 发邮件
- KOA 实现后端接口
- node 主要是后端接口，具体的接口的具体查看代码。
vue-blog-web
- 代理(5454 为 node 的端口)
proxyTable: {
"/mapi": {
target: "http://localhost:5454",
changeOrigin: true,
pathRewrite: {
"^/mapi": ""
}
},
}
复制代码
- 接口层封装(http/index.js)
import Axios from 'axios'
import Router from '../router'
export default {
get(url, params) {
return new Promise((resolve, reject) => {
Axios({
method: "get",
url: url,
params: {
...params,
author: 'admin'
},
validateStatus: function(status) {
// 截获状态码范围
return status >= 200 && status < 500
},
}).then(response => {
if (response.status == 200) {
resolve(response.data);
} else if (response.status == 401) {
// 无权限
} else if (response.status == 403) {
// session 过时
Router.push('/login')
} else {
reject(response.data)
}
})
.catch(error => {
reject(error);
})
})
},
post(url, method = 'post', params) {
return new Promise((resolve, reject) => {
Axios({
method,
url: url,
data: {
...params,
author: 'admin'
},
validateStatus: function(status) {
return status >= 200 && status < 500
},
}).then(response => {
if (response.status == 200) {
resolve(response.data);
} else if (response.status == 401) {
// Message.error('登陆信息过时，请从新登陆');
// Router.replace('/login')
resolve({});
} else if (response.status == 403) {
Router.push('/login')
} else {
reject(response.data)
}
})
.catch(error => {
reject(error);
})
})
},
fetch(url, params, headers = {}) {
return new Promise((resolve, reject) => {
Axios({
method: "post",
url: url,
data: params,
headers: {
"Content-Type": "application/json",
...headers
}
}).then(response => {
if (response.status == 200) {
resolve(response.data);
} else {
reject(response.data)
}
})
.catch(error => {
reject(error);
})
})
},
}
复制代码
- markdown 的语法编译成 html
<mavon-editor ref="editor" :value="content" :subfield="false"
:defaultOpen="'preview'" :toolbarsFlag="false" :editable="false"
:scrollStyle="true" :ishljs="true">
</mavon-editor>
复制代码
-
生成 H2，H3 的文章目录 具体查看（vue-blog-web/views/article/detail.vue）node
-
其余都是 vue 的基础的知识，省略。。。mysql
vue-blog-admin
- 项目基础配置详见(vue-cli3-admin)[github.com/liuxingzhij…]
- 代理(vue.config.js)
proxy: {
"/mapi": {
target: "http://localhost:5454",
changeOrigin: true,
pathRewrite: {
"^/mapi": ""
}
},
},
复制代码
- 全局变量
- .env.development
- .env.production
- 多级路由实现(首页 /文章管理 /文章评论)
多级路的缘由，由于如今不少的增长和删除都是弹窗的实现，可是一旦内容不少的时候的，新页面的就是最佳的方法
实现的主要方法： meta 的 hidden 的属性
具体查看（vue-blog-admin/src/router/routes.js）ios
vue-blog-koa
-
使用 koa-generator 生成 koa2 项目nginx
-
运行的项目必定先修改 config/db.js 的文件，否则会报错的，项目运行自动生成数据库，本身在数据库 User 表建立的一个用户，而后登陆 admin 的操做github
const Sequelize = require('sequelize');
/**
*
* 配置数据库
*
* 第一个参数 myblog3 数据库名字 (本身修改)
* 第二个参数 root 数据库名字 (本身修改)
* 第三个参数 password 数据库密码 (本身修改)
*/
const sequelize = new Sequelize('myblog3', 'root', '你的数据库密码', {
host: 'localhost',
dialect: 'mysql',
operatorsAliases: false,
dialectOptions: {
charset: "utf8mb4",
collate: "utf8mb4_unicode_ci",
supportBigNumbers: true,
bigNumberStrings: true
},
pool: {
max: 5,
min: 0,
acquire: 30000,
idle: 10000
},
timezone: '+08:00' //东八时区
});
module.exports = {
sequelize
}
复制代码
- jwt 权限校验
// 签发token
const token = jwt.sign(userToken, JWT_SECRET, { expiresIn: '10h' });
复制代码
- 接口白名单
- myblog3-app-5454.js
// jwt
app.use(
koajwt({ secret: JWT_SECRET }).unless({
path: [
// 登陆
/^\/api\/user\/login/,
...
],
})
);
复制代码
- middleware/JWTPath.js
module.exports = [
// 登陆
'/api/user/login',
...
];
复制代码
- 发送邮件 （controllers/SendEmailServer.js）发送邮件文章参考
const nodemailer = require("nodemailer");
// code...
// Use Smtp Protocol to send Email
var transporter = nodemailer.createTransport({
//node_modules/nodemailer/well-known/services.json 支持列表
host: 'smtp.qq.com',
port: 465, // SMTP 端口
secure: true,
auth: {
user: NODEMAILER.email,
//这里密码不是qq密码，是你设置的smtp密码（受权码）
pass: NODEMAILER.pass
}
});
复制代码
- node 调用第三方接口
const koaRequest = require('koa-http-request');
app.use(koaRequest({
json: true, //automatically parsing of JSON response
timeout: 3000, //3s timeout
// host: 'https://api.github.com'
}));
复制代码
-
github 受权 流程（controllers/GithubToken.js）web
- 注册 OAuth APP 的应用
- 保存 client_id client_secret
- 访问 GET: github.com/login/oauth…
- 跳转 http://localhost:3000/auth?code=8b309cc03f95 保存 code 字段
- github.com/login/oauth… POST 请求 body:{client_id,client_secret,code} 获取 token
- api.github.com/user POST 请求： body:{client_id,client_secret} header: {Authorization: token token}
-
上传图片（controllers/UploadServer.js）
koa-body 实现上传图片，递归建立目录等
-
sequelize 数据库实现 （controllers/schema.js） 以 user.js 为例子
const moment = require('moment');
module.exports = function(sequelize, DataTypes) {
return sequelize.define('user', {
id: {
type: DataTypes.INTEGER.UNSIGNED,
allowNull: false,
primaryKey: true,
autoIncrement: true
},
// 用户名字
username: {
type: DataTypes.STRING(100),
field: 'username',
allowNull: false
},
// 用户密码
password: {
type: DataTypes.STRING(255),
field: 'password',
allowNull: false
},
// 用户邮箱
email: {
type: DataTypes.STRING(100),
field: 'email',
allowNull: false
},
createdAt: {
type: DataTypes.DATE,
field: 'created_at',
get() {
return moment(this.getDataValue('createdAt')).format('YYYY-MM-DD HH:mm:ss');
}
},
updatedAt: {
field: 'updated_at',
type: DataTypes.DATE,
get() {
return moment(this.getDataValue('updatedAt')).format('YYYY-MM-DD HH:mm:ss');
}
}
}, {
// 若是为 true 则表的名称和 model 相同，即 user
// 为 false MySQL建立的表名称会是复数 users
// 若是指定的表名称本就是复数形式则不变
freezeTableName: true
})
}
复制代码
-
sequelize 的使用方法：
以 Article 为模型例子
- 建立
Article.create(params)
复制代码
- 编辑
Article.update({ browser }, {
where: {
id
},
fields: ['browser']
})
复制代码
- 查看详情
Article.findOne({
where: id,
});
复制代码
- 删除
Article.destroy({
where: {
id,
}
})
复制代码
- 分页列表
Article.findAndCountAll({
row: true,
limit: +pageSize,
offset: (pageIndex - 1) * (+pageSize),
order: [
['id', 'DESC']
],
});
复制代码
- 模糊搜索
const Op = Sequelize.Op;
Article.findAndCountAll({
row: true,
limit: +pageSize,
offset: (pageIndex - 1) * (+pageSize),
where:{
title: {
// 模糊查询
[Op.like]: '%' + keyword + '%',
},
}
order: [
['id', 'DESC']
],
});
复制代码
补充 Op 的知识
[Op.and]: {a: 5} // 且 (a = 5)
[Op.or]: [{a: 5}, {a: 6}] // (a = 5 或 a = 6)
[Op.gt]: 6, // id > 6
[Op.gte]: 6, // id >= 6
[Op.lt]: 10, // id < 10
[Op.lte]: 10, // id <= 10
[Op.ne]: 20, // id != 20
[Op.eq]: 3, // = 3
[Op.not]: true, // 不是 TRUE
[Op.between]: [6, 10], // 在 6 和 10 之间
[Op.notBetween]: [11, 15], // 不在 11 和 15 之间
[Op.in]: [1, 2], // 在 [1, 2] 之中
[Op.notIn]: [1, 2], // 不在 [1, 2] 之中
[Op.like]: '%hat', // 包含 '%hat'
[Op.notLike]: '%hat' // 不包含 '%hat'
[Op.iLike]: '%hat' // 包含 '%hat' (不区分大小写) (仅限 PG)
[Op.notILike]: '%hat' // 不包含 '%hat' (仅限 PG)
[Op.regexp]: '^[h|a|t]' // 匹配正则表达式/~ '^[h|a|t]' (仅限 MySQL/PG)
[Op.notRegexp]: '^[h|a|t]' // 不匹配正则表达式/!~ '^[h|a|t]' (仅限 MySQL/PG)
[Op.iRegexp]: '^[h|a|t]' // ~_ '^[h|a|t]' (仅限 PG)
[Op.notIRegexp]: '^[h|a|t]' // !~_ '^[h|a|t]' (仅限 PG)
[Op.like]: { [Op.any]: ['cat', 'hat']} // 包含任何数组['cat', 'hat'] - 一样适用于 iLike 和 notLike
[Op.overlap]: [1, 2] // && [1, 2](PG数组重叠运算符)
[Op.contains]: [1, 2] // @> [1, 2](PG数组包含运算符)
[Op.contained]: [1, 2] // <@ [1, 2](PG数组包含于运算符)
[Op.any]: [2,3] // 任何数组[2, 3]::INTEGER (仅限 PG)
[Op.col]: 'user.organization_id' // = 'user'.'organization_id', 使用数据库语言特定的列标识符, 本例使用 PG
复制代码
- 多对多的关系
Category.belongsToMany(Article, {
through: {
model: ArticleToCategory,
},
foreignKey: 'categoryId',
})
Article.belongsToMany(Category, {
through: {
model: ArticleToCategory,
},
foreignKey: 'articleId',
})
复制代码
数据库表介绍
- article -------------- 文章
- articleComment ------- 文章评论
- articleTocategory ---- 文章标签（多对多的关联关系）
- category ------------- 标签
- comment -------------- 留言
- user ----------------- 用户
发布
- 个人服务器环境 是 CentOS 7.5 64 位
- web 和 admin 打包发布 dist 的文件， koa 所有文件发布，别发布 nodel_modules 啊， 本身的服务器安装 node，nginx，pm2 ， Mysql 等操做
- 针对的 koa 项目发布须要注意点，由于线上每次上传图片写在 public/images 这个文件可千万不能覆盖，为了不这个问题，本身搭建一个文件服务项目，专门管理文件资源
- 安装其余环境 用
yum的命令安装 - 安装 Mysql blog.csdn.net/Zhooson/art…
- nginx 配置 blog.csdn.net/Zhooson/art…
- 其余环境自行安装，贼简单的啊哈
-
myblog3-web-2222.js / myblog3-admin-1111.js (2 个文件就是端口号不同)
执行pm2 start myblog3-web-2222.js把 web 的项目启动
执行pm2 start myblog3-admin-1111.js把 admin 的项目启动
执行pm2 start myblog3-app-5454.js把 node 的项目启动 -
文件夹结构； 以 web 为例子（须要先下载 express）
|--web
|---- dist (vue 打包的文件)
|---- myblog3-web-2222.js （ 文件以下代码所示）
|---- package.json （npm i express）
|---- node_moudles
//引入express中间件
var express = require('express');
var app = express();
//指定启动服务器到哪一个文件夹，我这边指的是dist文件夹
app.use(express.static('./dist'));
// 监听端口为1111
var server = app.listen(2222, function() {
console.info('复制打开浏览器');
});
复制代码
nginx 配置
-
登陆服务器(2 种登陆方式)
- Filezilla 软件登陆
- ssh 登陆
ssh -p 22 root@你的服务器ip地址 回车 输入密码 复制代码 -
已 ssh 登陆为例子： 查找 nginx.conf 的位置
whereis nginx.conf
复制代码
查找结果：
/usr/local/nginx/conf
复制代码
熟悉 vim 的操做的，直接操做，不熟悉的使用的 FileZilla 的软件去修改
- nginx.conf(以 web 为例子) 具体详见 ngixn.conf
#博客 - 后台管理
upstream myblog3Admin {
server 127.0.0.1:1111;
}
server {
listen 80;
server_name www.zhooson.cn;
#charset koi8-r;
#access_log logs/host.access.lsog main;
location / {
#设置主机头和客户端真实地址，以便服务器获取客户端真实IP
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#禁用缓存
proxy_buffering off;
#反向代理的地址
proxy_pass http://myblog3Web;
root /webproject/myblog3/web;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://myblog3Koa2;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
复制代码
- 在 web 和 admin 项目的时候访问 node 接口如何代理，关键代码以下
location /api {
proxy_pass http://myblog3Koa2;
}
复制代码
- 在 web 和 admin 用 mode：history 的配置
root /webproject/myblog3/web;
index index.html index.htm;
try_files $uri $uri/ /index.html;
复制代码
pm2
PM2 是 node 进程管理工具，能够利用它来简化不少 node 应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，并且使用很是简单。
安装方法
npm i pm2 -g
复制代码
经常使用命令记录
-
pm2 start app.js # 启动 app.js 应用程序
-
pm2 start app.js -i 4 # cluster mode 模式启动 4 个 app.js 的应用实例
-
pm2 start app.js --name="api" # 启动应用程序并命名为 "api"
-
pm2 start app.js --watch # 当文件变化时自动重启应用
-
pm2 start script.sh # 启动 bash 脚本
-
pm2 list # 列表 PM2 启动的全部的应用程序
-
pm2 monit # 显示每一个应用程序的 CPU 和内存占用状况
-
pm2 show [app-name] # 显示应用程序的全部信息
-
pm2 logs # 显示全部应用程序的日志
-
pm2 logs [app-name] # 显示指定应用程序的日志
-
pm2 flush # 清空全部日志文件
-
pm2 stop all # 中止全部的应用程序
-
pm2 stop 0 # 中止 id 为 0 的指定应用程序
-
pm2 restart all # 重启全部应用
-
pm2 reload all # 重启 cluster mode 下的全部应用
-
pm2 gracefulReload all # Graceful reload all apps in cluster mode
-
pm2 delete all # 关闭并删除全部应用
-
pm2 delete 0 # 删除指定应用 id 0
-
pm2 scale api 10 # 把名字叫 api 的应用扩展到 10 个实例
-
pm2 reset [app-name] # 重置重启数量
-
pm2 startup # 建立开机自启动命令
-
pm2 save # 保存当前应用列表
-
pm2 resurrect # 从新加载保存的应用列表
-
pm2 update # Save processes, kill PM2 and restore processes
-
pm2 generate # Generate a sample json configuration file
pm2 文档地址：pm2.keymetrics.io/docs/usage/…
关于 koa 中环境变量
在 blog-koa／package.json 中
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon myblog3-app-5454.js",
"prod": "cross-env NODE_ENV=production nodemon myblog3-app-5454.js"
},
复制代码
咱们在本地调试中可使用 npm run dev 去拿到 process.env.NODE_ENV的环境变量，咱们在 pm2 的环境下如何拿到呢？？
具体实现的方法：（本文此处的才标注此代码，具体文件中不作代码添加）
步骤 1: 和 myblog3-app-5454.js 同级别建立文件： ecosystem.config.js
// 这里能够写 生产环境，测试环境，预发布环境等
module.exports = {
apps: [{
// 生产环境
name: "myblog3-app-5454-prod",
// 项目启动入口文件
script: "./myblog3-app-5454.js",
// 项目环境变量
env: {
"NODE_ENV": "production",
"PORT": 5454
}
},
{
....
}]
}
复制代码
步骤 2: 修改的package.json文件，添加一行代码：
"start": "pm2 start ecosystem.config.js --only myblog3-app-5454-prod --watch"
复制代码
步骤 3: 如何运行项目
本文初说明能够用的 pm2 start myblog3-app-5454.js 的方式运行，如今使用 npm start启动， myblog3-app-5454-prod 表明这个进程的 name ，其实就是--name=myblog3-app-5454-prod 的写法
步骤 4: 直接文件中就能够 process.env.NODE_ENV
PS: 不须要的 process.env.NODE_ENV 此功能的彻底前一种方式就能够了，不过项目毕竟都是区分环境，最好的使用下哈
转载请附上原文出处连接及本声明。 原文连接：www.zhooson.cn/article/det… github.com/liuxingzhij…
相关文章
- 1. 利用hexo搭建一个只属于你本身的博客
- 2. Hexo和Github 搭建属于本身的博客（一）
- 3. 使用Hexo+Github一步步搭建属于本身的博客
- 4. 打造一个属于本身的server
- 5. 属于博主的博客
- 6. Node.js+Hexo+GitHub搭建属于本身的我的博客
- 7. 使用Hexo+Github搭建属于本身的博客（基础）
- 8. 从零开始搭建属于本身的博客
- 9. 搭建属于本身的技术博客
- 10. SpringBoot+Vue搭建属于本身的博客
- 更多相关文章...
- • PHP imagecreate - 新建一个基于调色板的图像 - PHP参考手册
- • 第一个MyBatis程序 - MyBatis教程
- • Kotlin学习（一）基本语法
- • ☆基于Java Instrument的Agent实现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
