7 天開發後臺系統技術小結

在確定了後臺系統的詳細規劃和整體功能以後，花費時間更多的其實是對技術細節的打磨。本主題借鑑我開發個人網站 魚立說 的經驗，整理了在開發後臺系統過程可能會遇到的各種技術要點。

本文來源：魚立說。本文連結：https://www.yulisay.com/d/endskills.html，支援微信瀏覽器開啟。

更多精彩文章，請移步 魚立說個人網站 翻看。歡迎欣賞，吐槽不足之處。

---

涉及到的程式碼已經整理到 https://github.com/yulis-say/web-full-stack 中的 end-skills 目錄，若覺得有用，請分享並 star 。

1 後臺開發小結

下面對後臺系統的開發技術要點依次進行概括，包括必要的說明和資源引導。

1.1 後臺系統模板

搭建後臺系統，為了省時省力，可以選用一些流行的後臺系統模板。關於這部分，可以閱讀本站整理的《流行的後臺管理系統模板》一文。

考慮到技術的流行性和後臺功能的完善，本站使用了基於 Vue.js 和 Element-UI 實現的 vue-admin-template 作為參考，進行了後臺系統的搭建和二次開發。

參考 vue-element-admin 後臺系統模板，最終的後臺系統效果將如圖所示：

1.2 vue-admin-template 使用技巧

• 配置代理請求，解決跨域問題。做如下修改：

  修改 .env.development 檔案，VUE_APP_BASE_API 表示某個字首：
  VUE_APP_BASE_API = '/api'
  
  
  修改 vue.config.js 檔案，當遇到以 VUE_APP_BASE_API 開頭的請求時，就會把 target 欄位加上：
  devServer: {
      ……
      proxy: {
          [process.env.VUE_APP_BASE_API]: {
              target: 'http://api.com',// 你自己的域名
              secure: false,// 配置 https 介面
              changeOrigin: true,// 是否跨域
              pathRewrite: {
                ['^' + process.env.VUE_APP_BASE_API]: '/api'// 替換配置中的字首
              }
          }
      }
  }
  

• 修復 Markdown 排版樣式。使用 tui.editor 作為新編輯器，請參考 https://github.com/PanJiaChen/vue-element-admin/commit/3057489cc66e17b97a77512c1e3621b96c37a4ba 修復此 bug。具體修改：

  1. 把 package.json 檔案中的 "tui-editor" 依賴替換成 "@toast-ui/editor"；
  2. 使用參考中的 src/components/MarkdownEditor/index.vue 檔案內容替代你本地的檔案內容。
  

• 去除瀏覽器控制檯輸出的 async-validator 驗證警告：

  將 node_modules/async-validator 目錄中的 es/util.js、lib/util.js
  兩個檔案裡的 console.warn(type, errors); 註釋掉
  

• 在編譯原始碼的時候，Eslint 校驗失敗的時候會進行一些提示：

  Strings must use singlequote. 必須使用單引號，不能使用雙引號。
  Trailing spaces not allowed. 需要刪除多餘的空格。
  Attribute ':sizeOpts' must be hyphenated. 屬性有大寫，需要使用"-"取代。
  

1.3 Vue.js 使用技巧

• $nextTick() 會在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法，可以獲取更新後的 DOM。

• handler() 會在被偵聽物件的 property 改變時被呼叫，不論其被巢狀多深。

• computed 用來監控自定義變數，可以在頁面上進行雙向資料繫結展示出結果或作其他處理，比較適合對多個變數或者物件進行處理後返回一個結果值。

• 報錯：Critical dependency: the request of a dependency is an expression. 解決：將 babel-eslint 更換至穩定版本，比如由 "^10.0.3" 更換至 7.2.3。

1.4 Element-UI 使用技巧

• el-upload 上傳元件，可以使用 http-request 自定義上傳方法。如下程式碼做了簡略處理：

  <el-upload
    ref="upload"
    accept=".jpg, .jpeg, .png, .gif"
    :http-request="uploadFile"
  >
  
  
  uploadFile(params) {
    return new Promise((resolve, reject) => {
      const formData = new FormData()
      formData.append('file', file)
      getImage(formData).then(response => {
        this.tempUrl = response.data
        resolve(true)
      }).catch(() => {
        reject(false)
      })
    })
  }
  

• 調整 $confirm 提示框按鈕位置。$confirm 提示框的按鈕預設順序是取消、確定，修改程式碼進行調整：

  # CSS 調整
  .el-btn-custom-cancel {
    float: right;
    margin-left: 10px;
  }
  
  
  # 設定 $confirm 按鈕樣式
  this.$confirm(
      ……
      cancelButtonClass: 'btn-custom-cancel',
      ……
  }
  

• 報錯：Uncaught (in promise) cancel. 因為 this.$msgbox 沒有使用 .catch()，無法捕獲到取消操作。可以這麼寫：

  this.$msgbox({
      ……
  }).catch(error => error)
  

2 更多有用的網站

• Vue.js ：一套用於構建使用者介面的漸進式 JavaScript 框架，遵循 MIT 開源協議。網址：https://cn.vuejs.org/。

• Element ：網站快速成型工具，一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端元件庫。網址：https://element.eleme.cn。

• npm ：JavaScript 世界的包管理工具，並且是 Node.js 平臺的預設包管理工具。通過 npm 可以安裝、共享、分發程式碼，管理專案依賴關係。網址：https://www.npmjs.com/。

• Webpack ：一個靜態模組打包器(module bundler)，會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。網址：https://www.webpackjs.com。

• axios ：一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 Node.js 中。網址：http://www.axios-js.com/。

3 參考連結

① vue-element-admin 專案引導網站

② Markdown components can not preview html content · Issue #3308 · PanJiaChen/vue-element-admin

③ element $confirm 提示框按鈕位置調整 - 簡書