vue+go-gin+nginx实现后台管理系统
前后端分离的经典后台管理系统。
主要用到的技术和组件：
前端：vuejs，组件element ui、ant vue、axios
后端：golang，框架go-gin，swagger组件
服务代理：nginx
过程中的疑难问题和关键点记录：
一、nginx反向代理：
mac下修改/usr/local/etc/nginx/nginx.conf.default文件：修改后需要重启nginx。
server {
listen 80;
server_name xxx.com;
root /data/nginx/cpmWeb;
index index.html index.htm;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-
revalidate, max-age=0';
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://127.0.0.1:8080/;
}
location /api/swagger/index.html {
proxy_pass http://127.0.0.1:8080/swagger/index.html;
}后端的服务是在8080端口，利用proxy_pass实现反向代理，也就是任何访问127.0.0.1:80/api或者127.0.0.1:80/api/swagger/index.html，都会反向代理到后端服务的8080端口相应路径上。这样做是能够让前端中的api访问找到对应路径，比如前端需要访问后端某个api，localhost:80/api/xxx。会访问到对应后端的api。
二、get方法的参数大小限制
get方法一般采用在url最后添加参数，比如xxx:80/api/getusername?username=xxx。其中?后面的就是我们可以通过get方法传递的参数(params)。但是这个参数是有长度限制的。浏览器和服务器都对这个参数有限制。对于长参数，建议采用post方法。
浏览器：
1、IE
IE浏览器（Microsoft Internet Explorer） 对url长度限制是2083（2K+53），超过这个限制，则自动截断（若是form提交则提交按钮不起作用）。
2、firefox
firefox（火狐浏览器）的url长度限制为 65 536字符，但实际上有效的URL最大长度不少于100,000个字符。
3、chrome
chrome（谷歌）的url长度限制超过8182个字符返回本文开头时列出的错误。
4、Safari
Safari的url长度限制至少为 80 000 字符。
5、Opera
Opera 浏览器的url长度限制为190 000 字符。Opera 9 地址栏中输入190 000字符时依然能正常编辑。
服务器：
1、Apache
Apache能接受url长度限制为8 192 字符
2、IIS
Microsoft Internet Information Server(IIS)能接受url长度限制为16 384个字符。
这个是可以通过修改的（IIS7）configuration/system.webServer/security/requestFiltering/requestLimits@maxQueryStringsetting.
3、Perl HTTP::Daemon
Perl HTTP::Daemon 至少可以接受url长度限制为8000字符。Perl HTTP::Daemon中限制HTTP request headers的总长度不超过16 384字节(不包括post,file uploads等)。但当url超过8000字符时会返回413错误。
这个限制可以被修改，在Daemon.pm查找16×1024并更改成更大的值。
4、ngnix
可以通过修改配置来改变url请求串的url长度限制。
client_header_buffer_size 默认值：client_header_buffer_size 1k
large_client_header_buffers默认值 ：large_client_header_buffers 4 4k/8k
修改后需重启nginx服务。
三、实现本地图片裁剪和预览
利用element的el-image元素：
style裁剪图片为100*100大小，src就是本地图片，需要用到require(本地路径)，对于url图片，可直接src=http://xxx。preview-src-list是预览图片，预览本地图片，需要[require(本地路径)]。对于url图片，直接preview-src-list=http://xxx。
效果如下：
点击图片可预览：
四、对不确定元素的数据传输和解析。
有时候，前端向后端发送请求，后端返回的数据是无规律的，不知道有几个，也不知道有什么字段，这种情况下，无法通过强类型表示和传输。因此采用go的interface，可以表示任何数据。
比如：
type Base64resp struct {
Format string `json:"format"`
Width string `json:"width"`
Height string `json:"height"`
Size string `json:"size"`
Exif interface{} `json:"exif"`
}其中exif就是interface类型。传递给前端后，怎么解析呢？
如果不解析，直接打印出来，就是一串json字符串，不够美观和直观。
因此需要解析：
可以对这串进行分解成数组，然后通过vue打印数组的方式在网页上打印出来。
this.printObject(response.data.data.exif)，response.data.data.exif就是那串字符串，printObject是解析方法：
printObject(obj){
var temp = new Array(20).fill("");
let index = 0
for(var i in obj){
temp[index] += i+":"+obj[i];
index++;
}
this.exif = temp
},其中temp就是暂时存放的数组，this.exif就是要在div中显示的数组。再看看div中如何表示exif这个数组。
首先是初始化，exif为空数组。
export default {
data() {
return {
exif: [],
}
}
}然后在div处显示数组中的每个元素，并且要换行：
- {{a}}
利用v-for属性来轮询exif数组，然后打印轮询出的数据。
效果如下：
ComponentsConfiguration:
ExifIFDPointer:90
ExifVersion:0221
FlashpixVersion:0100
Orientation:1
PixelXDimension:4032
PixelYDimension:3024
ResolutionUnit:2
SceneCaptureType:0
XResolution:72/1
YResolution:72/1
五、axios的pos方法要设置"Content-Type"为"application/x-www-form-urlencoded"
如果post方法传递参数，没有设置该content-type，会报错：
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
axios默认的Content-Type为application/json，因此需要设置该值为application/x-www-form-urlencoded。
await axios
.post('http://127.0.0.1:8080/flow/test',{
base64info:input,
}, {
headers:{
"Content-Type": "application/x-www-form-urlencoded"
}
})
.then(response => {xxx})
六、多个div放在同一行中：给所有的div加上这个标签，
.upload-class {
display: inline-block;
vertical-align: top;
}
七、其他前端小tips：
1、在设计布局时，首先要用div进行划分块。才能保证组件之间不会互相影响位置。
2、div的style中的width和height尽量使用绝对值，xxxpx，不要用百分比，不然在页面缩放或者分辨率不同的屏幕上，元素的位置排列会乱。
3、善用Chrome浏览器调试前端页面，console.log，还有布局选择箭头。如下图所示
点击后，可以选择某个组件查看其属性，点击某组件后可以在右边查看其style，然后直接在这里修改其值，页面也会跟着变化，多用于确认元素大小、方位。
