前後端分離的經典後臺管理系統。
主要用到的技術和組件：
前端：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，然後直接在這裏修改其值，頁面也會跟着變化，多用於確認元素大小、方位。
