[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis，博客全栈项目之nginx反向代理和vue前端api
导语：
暑假在家闲着无事，就琢磨着做一个web博客练练手，现在已经做完了，把过程分享出来给大家看看，分享一下学习经验。这是第十一篇，开始配置nginx反向代理和vue前端api编写。
微信搜索 【web小馆】，回复 ”全栈博客项目“，即可获取 项目源码和后续的实战文章教程。
本文的目录
- 一，前后端分离跨域解决，nginx反向代理。
- 1，安装配置
- 2，原理
- 二，编写前端api
- 1，user.js
- 2，home.js
- 3，article.js
一，前后端分离跨域解决，nginx反向代理。
1，安装配置
现在我们已经把前端页面和后端接口都给写好了，但是取请求的时候就会跨域，报错。
怎么解决呢？可以使用nginx反向代理。
我们先下载一下nginx。
nginx下载地址，http://nginx.org/en/download.html。
![[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis，博客全栈项目之nginx反向代理和vue前端api_第1张图片](http://img.e-com-net.com/image/info8/03e171d3c7894dd5b3aa5ada4ed16a60.jpg)
下载安装就行了。
打开安装的目录，进入conf文件，我们要对其进行修改配置，适应我们的项目。
//找到location 注释掉，然后再下面加这三个配置端口。
# location / {
# root html;
# index index.html index.htm;
# }
location / {
proxy_pass http://localhost:8080;
}
location /qadmin-1.2/ {
proxy_pass http://localhost:8888;
}
location /api/ {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
}
修改完成后保存，进入cmd，进入nginx文件夹，开启服务。
cd C:\nginx-1.16.1
start nginx
2，原理
什么是nginx呢？
![[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis，博客全栈项目之nginx反向代理和vue前端api_第2张图片](http://img.e-com-net.com/image/info8/ac7d4232d3d34c95ad7fbed1b83362d9.jpg)
简单的说就是一个web服务器，它能够统一你本机的所有服务，做成一个方向的路口，并且根据请求的路径给它选择正确的响应服务。
1，如果我们的请求的是后台接口，那它就会把请求分配给node后台。
2，如果我们请求的是前端页面，那它就会把请求分配给前端界面。
二，编写前端api
1，user.js
关于用户的api接口
import axios from 'axios'
const debug = process.env.NODE_ENV == 'production'
//登陆
export function login (FormData) {
const url = debug ? 'http://47.112.***.***:80/api/user/login' : 'http://localhost:8000/api/user/login'
const p = new Promise(
(resolve, reject) => {
axios.post(url, FormData).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//注册
export function signup (FormData) {
const url = debug ? 'http://47.112.***.***:80/api/user/signup' : 'http://localhost:8000/api/user/signup'
const p = new Promise(
(resolve, reject) => {
axios.post(url, FormData).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//检验登陆状态
export function getSession () {
const url = debug ? 'http://47.112.***.***:80/api/user/getSession' : 'http://localhost:8000/api/user/getSession'
const p = new Promise(
(resolve, reject) => {
axios.get(url).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//退出登陆
export function logOut () {
const url = debug ? 'http://47.112.***.***:80/api/user/logout' : 'http://localhost:8000/api/user/logout'
const p = new Promise(
(resolve, reject) => {
axios.post(url).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//更新头像
export function upavatar (param) {
const url = debug ? 'http://47.112.***.***:80/api/user/updata/avatar' : 'http://localhost:8000/api/user/updata/avatar'
const p = new Promise(
(resolve, reject) => {
axios.post(url, param).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//更换名字
export function upname (param) {
const url = debug ? 'http://47.112.***.***:80/api/user/updata/name' : 'http://localhost:8000/api/user/updata/name'
const p = new Promise(
(resolve, reject) => {
axios.post(url, param, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
2，home.js
首页的api接口
import axios from 'axios'
const debug = process.env.NODE_ENV == 'production'
//文章列表
export function get (num) {
const url = debug ? 'http://47.112.***.***:80/api/article/list' : 'http://localhost:8000/api/article/list'
const data = Object.assign({}, {
num
})
const p = new Promise(
(resolve, reject) => {
axios.get(url, {
params: data
}).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//文章详情
export function getdetail (id) {
const url = debug ? 'http://47.112.***.***:80/api/article/detail' : 'http://localhost:8000/api/article/detail'
const data = Object.assign({}, {
id
})
const p = new Promise(
(resolve, reject) => {
axios.get(url, {
params: data
}).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//轮播图
export function getbaners () {
const url = debug ? 'http://47.112.***.***:80/api/file/banerslist' : 'http://localhost:8000/api/file/banerslist'
const p = new Promise(
(resolve, reject) => {
axios.get(url).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
3，article.js
文章相关的api接口
import axios from 'axios'
const debug = process.env.NODE_ENV == 'production'
//文章列表
export function get (lei,num) {
const url = debug ? 'http://47.112.***.***:80/api/article/list' : 'http://localhost:8000/api/article/list'
const data = Object.assign({}, {
lei,
num
})
const p = new Promise(
(resolve, reject) => {
axios.get(url, {
params: data
}).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//文章详情
export function getdetail (id) {
const url = debug ? 'http://47.112.***.***:80/api/article/detail' : 'http://localhost:8000/api/article/detail'
const data = Object.assign({}, {
id
})
const p = new Promise(
(resolve, reject) => {
axios.get(url, {
params: data
}).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//获取评论
export function getcomments (id) {
const url = debug ? 'http://47.112.***.***:80/api/article/comments' : 'http://localhost:8000/api/article/comments'
const data = Object.assign({}, {
id
})
const p = new Promise(
(resolve, reject) => {
axios.get(url, {
params: data
}).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//提交评论
export function postcomments (comments) {
const url = debug ? 'http://47.112.***.***:80/api/article/postcomments' : 'http://localhost:8000/api/article/postcomments'
const p = new Promise(
(resolve, reject) => {
axios.post(url, comments).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//增加阅读量
export function addhit (id, num) {
const url = debug ? 'http://47.112.***.***:80/api/article/addhit' : 'http://localhost:8000/api/article/addhit'
// console.log(id, num)
const data = Object.assign({}, {
id,
num
})
const p = new Promise(
(resolve, reject) => {
axios.get(url, {
params: data
}).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//点赞
export function addgood (id, idstr, num) {
const url = debug ? 'http://47.112.***.***:80/api/article/addgood' : 'http://localhost:8000/api/article/addgood'
// console.log(id, num)
const data = Object.assign({}, {
id,
idstr,
num
})
const p = new Promise(
(resolve, reject) => {
axios.get(url, {
params: data
}).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//收藏
export function addlike (id, idstr, num) {
const url = debug ? 'http://47.112.***.***:80/api/article/addlike' : 'http://localhost:8000/api/article/addlike'
// console.log(id, num)
const data = Object.assign({}, {
id,
idstr,
num
})
const p = new Promise(
(resolve, reject) => {
axios.get(url, {
params: data
}).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//取消点赞
export function subgood (id, idstr, num) {
const url = debug ? 'http://47.112.***.***:80/api/article/subgood' : 'http://localhost:8000/api/article/subgood'
// console.log(id, num)
const data = Object.assign({}, {
id,
idstr,
num
})
const p = new Promise(
(resolve, reject) => {
axios.get(url, {
params: data
}).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
//取消收藏
export function sublike (id, idstr, num) {
const url = debug ? 'http://47.112.***.***:80/api/article/sublike' : 'http://localhost:8000/api/article/sublike'
// console.log(id, num)
const data = Object.assign({}, {
id,
idstr,
num
})
const p = new Promise(
(resolve, reject) => {
axios.get(url, {
params: data
}).then((res) => {
resolve(res)
}).catch((err) => {
console.error(err)
})
}
)
return p
}
你们的赞就是对我最大的鼓励。谢谢~
微信搜索【web小馆】，回复全栈博客项目，即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！
