[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之nginx反向代理和vue前端api

导语:

暑假在家闲着无事,就琢磨着做一个web博客练练手,现在已经做完了,把过程分享出来给大家看看,分享一下学习经验。这是第十一篇,开始配置nginx反向代理和vue前端api编写。

微信搜索 【web小馆】,回复 ”全栈博客项目“,即可获取 项目源码和后续的实战文章教程。

本文的目录一,前后端分离跨域解决,nginx反向代理。1,安装配置2,原理二,编写前端api1,user.js2,home.js3,article.js

一,前后端分离跨域解决,nginx反向代理。
1,安装配置

现在我们已经把前端页面和后端接口都给写好了,但是取请求的时候就会跨域,报错。

怎么解决呢?可以使用nginx反向代理。
我们先下载一下nginx。
nginx下载地址,http://nginx.org/en/download.html。
[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之nginx反向代理和vue前端api
下载安装就行了。
打开安装的目录,进入conf文件,我们要对其进行修改配置,适应我们的项目。
[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之nginx反向代理和vue前端api

//找到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
简单的说就是一个web服务器,它能够统一你本机的所有服务,做成一个方向的路口,并且根据请求的路径给它选择正确的响应服务。

1,如果我们的请求的是后台接口,那它就会把请求分配给node后台。

2,如果我们请求的是前端页面,那它就会把请求分配给前端界面。

二,编写前端api
1,user.js

关于用户的api接口
[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之nginx反向代理和vue前端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接口
[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之nginx反向代理和vue前端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接口
[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之nginx反向代理和vue前端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
}

[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之nginx反向代理和vue前端api

你们的赞就是对我最大的鼓励。谢谢~
[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之nginx反向代理和vue前端api

微信搜索【web小馆】,回复全栈博客项目,即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言,潜移默化的提升你的计算机基础知识和前端技术。小米粥,一个专注的web全栈工程师,我们下期再见!

[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之nginx反向代理和vue前端api
[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之nginx反向代理和vue前端api

关注博主即可阅读全文


原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

[记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之nginx反向代理和vue前端api

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » [记录十一] Vue(全家桶)+node+koa2+mysql+nginx+redis,博客全栈项目之nginx反向代理和vue前端api
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏