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

主要用到的技术和组件:

前端: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,然后直接在这里修改其值,页面也会跟着变化,多用于确认元素大小、方位。

 

Logo

前往低代码交流专区

更多推荐