Vue Cli3 + TypeScript 前後端分離開發詳細指南

TypeScript 是趨勢，也確實解決了我們開發以及調試前端的很多痛點，我覺得我們有必要上TS。TypeScript 是 JavaScript 的超集，也就是說JavaScript能幹的他都能幹，並且TS提供了很多語言擴展，提供了數據類型的 ts 讓你在調試的時候不只是對着一堆 undefined 發愁了.

環境準備

1. 安裝node.js

   • Windows：下載安裝 http://nodejs.org/dist/v0.10.26/x64/node.exe

   • Mac：需安裝Homebrew，使用 brew 命令來安裝 brew install node

   • 輸出版本號檢查安裝是否成功 node -v

2. 安裝webpack（可不安裝）

   • npm install webpack --save-dev

3. TypeScript環境安裝

   • npm install -g typescript

   • 輸出版本號檢查安裝是否成功 tsc -v

4. vue Cli3安裝

   • npm install -g @vue/cli

   • 輸出版本號檢查安裝是否成功 vue --version

5. IDE準備

   • 推薦 WebStorm 或 VSCode

Vue Cli3 搭建項目

1. vue create fm-fronted-demo

2. 選擇自定義特色 - Manually select features，選擇項如下：

各項含義：

(1) Babel - 用於轉換ES6語法，適配低版本瀏覽器 - 需要

(2) TypeScript - 需要

(3) PWA Support - 漸進式應用 - 暫不需要

(4) Router - vue router路由 - 需要

(5) Vuex - vue狀態管理，組件數據通信 - 需要

(6) CSS Pre-processors - CSS預處理（Less/Sass）- 不需要

(7) Linter/Formatter - 代碼規範校驗 - 需要

(8) Unit Testing - 單元測試 - 暫不需要

(9) E2E Testing - 端到端測試 - 暫不需要

3. 配置功能細節，配置項如下：

4. 運行項目：

在根目錄執行 npm install安裝需要的依賴包，再執行npm run serve啓動項目，訪問 http://localhost:8080 即可看到剛剛新建的項目。

簡單入門

1. 目錄介紹

(1) node_modules - 項目所依賴的所有模塊，相當於 Maven 導入的 jar 包文件

(2) public - 頁面的入口，因爲搭建的是基於vue-router的單頁面應用，所以所有的組件都將渲染至 public 目錄下的 index.html

(3) src - 源文件
assets - 靜態資源文件
componets - 通用組件
views - 展示的頁面

(4) App.vue 渲染至 index.html 的根組件，可以理解爲根 DOM

(5) main.ts 全局配置信息，配置全局對象

(6) router.ts 路由配置信息

(7) shims-tsx.d.ts,shims-vue.d.ts - typescript的描述文件

(8) store.ts - vuex 狀態管理配置文件

(9) babel.config.js - babel 配置文件

(10) package.json,package-lock.json - webpack 包管理配置文件

(11) tsconfig.json - ts配置文件

(12) tslint.json - 代碼規範校驗規則配置文件

2. 寫一個 .vue 文件

(1) 在 views 目錄新建 Test.vue文件

(2) 寫一個簡單的數字遍歷

(3) 配置路由router

(4) 訪問 http://localhost:8080/#/test 即可看見效果

(5) 上手之後就可以看文檔了，按需查看就可以

VUE官方文檔：https://cn.vuejs.org/v2/guide/

TypeScript基礎語法：https://www.runoob.com/typescript/ts-basic-syntax.html

常用插件及調試發佈

1. 引入 Axios

Axios 和 Ajax 功能類似，使用上都用於和服務端交互，不同的是 Axios 的實現基於 promise 的。

• 安裝：項目根目錄執行 npm install axios

• 配置封裝：在 main.ts 中添加（可進一步封裝get，post方法）

• get 方式

this.$http.get("/user/info",{
    params:{
       userId:1
    }
}).then(data => {
   if (data) {
   //dosth
    } else {
     //dosth
   }
})
.catch(err => {
   //dosth
   });

• post 方式

this.$http
  .post("/manage/users/configLevel", user)
  .then(data => {
      //dosth
 })
.catch(err => {
     //dosth
});

2. 引入 iview

目前市面上用的比較廣的，生態比較完整的PC端UI框架就是Element UI 和 iView，個人更喜歡 iView.

• 安裝：項目根目錄執行 npm install iview --save

• 文檔：https://www.iviewui.com/docs/guide/install

3. 使用 vue-i18n 實現國際化

• 安裝：項目根目錄執行 npm install vue-i18n

4. 本地調試

• 本地調試採用配置 nginx 代理的方式，前端代理 8080 端口，後端用特殊的 url 代理服務端請求，配置信息如下。

server {
listen       80;
server_name  127.0.0.1;
client_max_body_size 20m;
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
add_header 'Access-Control-Max-Age' '86400' always;
location /rest {
   proxy_read_timeout 600s;
   proxy_pass http://127.0.0.1:9090;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "upgrade";
   proxy_set_header Host $host;
}

location / {
   proxy_read_timeout 600s;
   proxy_pass http://127.0.0.1:8080;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "upgrade";
   proxy_set_header Host $host;
   }
}

5. 打包發佈

打包發佈分成兩種，一種是單獨部署，即前端和後端項目分開部署，另一種是在一起部署，即將 vue 項目打包後複製到 Web 項目裏的 靜態資源目錄內。

(1) 配置打包路徑，在根目錄新建 文件 vue.config.ts

(2) 打包命令：npm run build

(3) 將生成的 dist 目錄內的全部文件複製到 web 項目中即可

服務端開發指南

1. Controller 全部用 @RestController修飾

2. 前端 Post 傳遞的對象參數用 @RequestBody 接收

3. 返回給前端的對象規範化，統一化，即 Controller 全部返回一種對象，對象參考格式如下：

import java.io.Serializable;

public class CommonObjectResponse implements Serializable {

    private boolean ok;
    private String message;
    private Object obj;

    public CommonObjectResponse(Object obj) {
        this.ok = true;
        this.message = "ok";
        this.obj = obj;
    }

    public CommonObjectResponse(boolean ok, String message, Object obj) {
        this.ok = ok;
        this.message = message;
        this.obj = obj;
    }

    public static CommonObjectResponse ok() {
        return new CommonObjectResponse(null);
    }

    public static CommonObjectResponse ok(Object obj) {
        return new CommonObjectResponse(obj);
    }

    public static CommonObjectResponse notOk(String message) {
        return new CommonObjectResponse(false, message, null);
    }

    public Object getObj() {
        return obj;
    }

    public void setObj(Object obj) {
        this.obj = obj;
    }

    public boolean isOk() {
        return ok;
    }

    public void setOk(boolean ok) {
        this.ok = ok;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

更多

更多內容請參考 Demo : 待上傳