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

於立發表於2021-01-05

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

本文來源：魚立說。本文連結：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 後臺系統模板，最終的後臺系統效果將如圖所示：

enter image description here

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 提示框按鈕位置調整 - 簡書

相關文章