本地开发需要解决的就是跨域的问题。
思路:
作为一个公众号项目,肯定是服务类的,所以前端需要 客户端 和 管理端,也就是说,我们开了两个vue项目。
- 客户端采用 vue 移动开发;
- 管理端需要处理很多信息和数据,手机处理也不方便,这里直接采用pc网页开发,用了 vue-admin(很棒的一个内容管理系统模板,广告一下。)
端口以及路径:
- 微信服务器:
- 端口:本地开发使用
ngrok
内网穿透,默认将微信服务器发来的消息转发到后端的7101
端口即可,不用通过nginx。 - 路径:
/mpapi/mp/xxx
- 端口:本地开发使用
- (前端1)管理端:
- 端口:
9529
- 路径:
/wxapi/v1/admin/xxx
- 端口:
- (前端2)客户端:
- 端口:
9530
- 路径:
/wxapi/v1/user/xxx
- 端口:
- (中间)nginx:
- 端口:
80
- 连接前、后端通讯,将前端的
/wxapi/v1/admin/xxx
以及/wxapi/v1/user/xxx
转发到后端7101
端口
- 端口:
- (后端)go:
- 端口:
7101
- 接收并处理 管理端(
/wxapi/v1/admin/xxx
) 、客户端(/wxapi/v1/user/xxx
) 以及 微信服务器(/mpapi/mp/xxx
) 发来的连接。
- 端口:
具体做法:
- 前端两个vue项目,可以使用webpack的代理功能,将数据发送到80端口;
- nginx代理的80端口,通过location判断收到的消息,转发到对应的后端;
- 后端go,正常开发,不需要做任何额外设置。
目的:
可以前、后端联合开发,不需要进行后期联调。
跨域的设置,由nginx完成。 后端不需要进行跨域设置,以免上线后忘记删代码,导致任何人都能调用接口。
项目build后,不需要再进行额外配置,直接本地测试。
比较适合小团队,小项目,特别是全栈程序猿一个人完成的。
具体实现:
一、使用cli3创建vue项目,这里不说了。
二、配置vue项目:
- 根目录创建
vue.config.js
文件
其他的项目配置,这里不说,只记录关于webpack代理的代码,如下:
// 其他设置...
module.exports = {
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: 'http://localhost' + process.env.VUE_APP_BASE_API,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
},
// 其他设置...
}
// 其他设置...
- 根目录创建
.env.development
和.env.production
两个文件
.env.development
中的VUE_APP_BASE_API
是开发环境的,
.env.production
中的VUE_APP_BASE_API
是线上环境的。 - 这里几个配置总的意思 就是将前端的数据代理到 localhost 下面,也就是默认的80端口。
三、配置nginx:
#... 其他配置 ...
server {
listen 80; #监听80端口
server_name localhost; # 当前服务的域名
root E:\\project\\y-ticket\\dist;
# 上面 root 配置,是将80端口的目录指向到 vue项目的编译目录,项目build以后,直接在浏览器输入 http://localhost 即可,无需其他额外配置
location ^~/wxapi {
# 使用nginx处理跨域问题,后端就不需要配置了
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin http://localhost:9529,http://localhost:9530;
add_header Access-Control-Allow-Headers content-type,X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
if ($request_method = 'OPTIONS') {
return 200;
}
rewrite ^/wxapi/(.*)$ /wxapi/$1 break; # 将80端口所有的 wxapi 连接重写
proxy_pass http://localhost:7101/; # 转发后端的 7101 端口
# 前端一共有两个,分别是 /wxapi/v1/admin/xxx 以及 /wxapi/v1/user/xxx ,
# 这里只通过 wxapi 正则,就能将两个前端的连接同时处理,不需要写多个 location 了。
}
}
#... 其他配置 ...
四、后端:
- 创建go项目、设定7101端口
- 可以用go的http自己实现,或者使用框架,我这里用的是beego api 模式。
- 项目中分配路由:
/wxapi/v1/admin/xxx
:来源于管理端/wxapi/v1/user/xxx
:来源于用户端/mpapi/mp/xxx
:来源于微信服务器