前端自學筆記 - 第一篇(nginx/flutter/後臺系統/vuepress博客）

一、部署的nginx項目

項目列表

1. vuepress博客：http://blog.flutterweb.cn
2. yapi-mock： http://yapi.flutterweb.cn
3. mobx-demo： http://mobx.flutterweb.cn

nginx 配置二級域名

nginx是上按照從頭到尾的順序依次加載。

如果想配出像 blog.flutterweb.cn 前端靜態資源二級域名。需要先配置出一個端口。然後在下面配置反向代理。

nginx.conf配置demo

注意順序：
靜態資源先啓動一個服務，比如9600端口，後面的虛擬主機再去代理9600端口即可。
這個demo是爲了方便展示，也可以把端口文件寫在conf.d文件夾中，一樣的效果。

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access-flutterweb.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
     server {
        listen 9600;
        server_name yapi.flutterweb.cn;
        location / {
            root /usr/share/nginx/html/mobx;
            index  index.html index.htm;
        }
    }
    include /etc/nginx/conf.d/*.conf;
    server {
        listen       80;
        server_name mobx.flutterweb.cn;

        client_header_buffer_size 8k;
        client_max_body_size 40m;
        send_timeout 120;
        fastcgi_read_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_connect_timeout 300;
        fastcgi_intercept_errors on;
        root html;
        location ^~ / {
            proxy_set_header X-Real-IP       $remote_addr;
            proxy_set_header Host $http_host;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_pass http://www.flutterweb.cn:9600/;
        }
    }

}

配置完後可以通過 http://mobx.flutterweb.cn 來查看了

配置完說一個坑：
每次修改完配置後我都是nginx -s reload 重啓，但經常失效
還是兩步更保險點

1. nginx -s quit
2. nginx

二、Flutter

跟着jpang學習，完成了小demo；
附上地址：https://jspang.com/posts/2019...

可以說flutter最大的坑就在於安裝，當然如果有很快的梯子當我沒說。沒有的話可能要裝上個大半天。我window上裝flutter快花了一天的時間，卡主一個點就沒法進入下一步。

這裏貼上安裝最大的gradle包下載坑，其他flutter詳細教程及視頻見jpang

一、額外安裝步驟（也可以不單獨下載包，20-30分鐘下載時間，比較慢）
另一個文件需要下載好壓縮包到本地然後應用路徑修改爲自己的路徑
路徑：C:\Users\zhong\.gradle\wrapper\dists
比如：gradle-4.10.2-all
則把gradle-4.10.2-all.zip文件直接放在gradle-4.10.2-all目錄下，不需要解壓，flutter會自動幫助解壓。
版本最好不低於4.6

distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip
二、不需要改 文件源
build.gradle
不修改Flutter SDK包下的flutter.gradle文件, 路徑D:\flutter\flutter\packages\flutter_tools\gradle

原因：1. 加的國內鏡像，如果服務器改動將不能正常編譯 2. 我安裝了一下午就是更改了這兩個文件，採用默認的反而能編譯成功

三、後臺管理系統

現在有兩個比較好的後臺系統教程

1. Vue + Element UI 實現權限管理系統:https://www.cnblogs.com/xifen...
2. 手摸手，帶你用vue後臺：

https://juejin.im/post/59097c...

推薦學習的順序：
先1後2， 第一個教程更詳細，更容易明白，對於對後臺不太熟悉的小夥伴作爲入門特別合適。等教程一啃的差不多了，可以進入教程二了，這個教程難度更大點，但收穫會更大。

自己學習進度

vuex ,路由, elment ui動態換膚, 語言國際化
後面還剩一點東西，等有時間再整完