前后端分离的经典后台管理系统。

主要用到的技术和组件：

前端：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.<requestLimits maxQueryString="length"/>

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元素：

<el-image
    style="width: 100px; height: 100px"
    :src="require('/Users/xxx/go/src/flow-system/output.jpeg')"
    :preview-src-list="[require('/Users/xxx/go/src/flow-system/output.jpeg')]">
</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处显示数组中的每个元素，并且要换行：

 <div style="border:1px solid #a5b6c8;background:#eef3f7; height: 150px; overflow: scroll">
            <ul>
                <li v-for="a in exif">{{a}}</li>
            </ul>
  </div>

利用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加上这个标签，<div class="upload-class">

    .upload-class {
        display: inline-block;
        vertical-align: top;

    }

 

七、其他前端小tips：

1、在设计布局时，首先要用div进行划分块。才能保证组件之间不会互相影响位置。

2、div的style中的width和height尽量使用绝对值，xxxpx，不要用百分比，不然在页面缩放或者分辨率不同的屏幕上，元素的位置排列会乱。

3、善用Chrome浏览器调试前端页面，console.log，还有布局选择箭头。如下图所示

 

点击后，可以选择某个组件查看其属性，点击某组件后可以在右边查看其style，然后直接在这里修改其值，页面也会跟着变化，多用于确认元素大小、方位。