寫個網站吧！ --Flask+Vue.js+MySQL+Docker（2）--前端

前序內容請觀看：點這兒！

寫個小站的業務可能大家也不是太關心，反而頁面的實現效果是最關心的，這裏我就先講前端的部分。

先說說涉及到的技術棧,首先是Vue.js，作爲現在最火的前端框架，不多說啥了；接着是Element-UI，爲什麼選擇這個，不僅僅是餓了麼的實力，更多的我是按照Github的星數選擇的；關於一些icon，阿里的iconfont是我最喜歡的，不過這裏有一個小坑，等會會分享一下；最後是一些插件，因爲Vue現在和TS的切合度還有待提升，這裏我還是選擇了JS，Vue-route，jslint都是常用的一些就不多說了，還有就是axios用來實現後端數據讀取。

目錄

BUG

架構

Template

Axios

---

BUG

1. 開發環境下，儘管後端我使用了flask-cors來解決跨域，但是好像沒啥用，而再生產環境下是生效的，所以在開發環境下還是要設置proxytable:

//vue.config.js

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

在“axios”獲取後端路徑直接去掉端口號之前的部分即可。

在生產環境，因爲後端使用了flask-cors，所以把這個設置再改回來才行。詳見跨域。

2. 我也不知道爲什麼，iconfont的在線引用總是找不到。因爲想要彩色的icon，所以使用了symbol的格式，但是symbol的代碼我不知放在哪兒，在index.html和main.js裏面都試過了，然而都不行。最終還是下載下來，不用在線獲取的話可以讓讀取的性能更好一點，但是更新的話可能會麻煩點。下面是下載下來icon font後的使用指南：

首先把文件夾放在"assets"文件夾裏面，在main.js裏面引用一下：

import './assets/font/iconfont.js'

然後在.vue中使用即可。 

<svg class="icon" aria-hidden="true" style="padding: 20px 50px">
      <use xlink:href="#icon-github"></use>
    </svg>

.icon {
    width: 5em; height: 5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }

3. 圖片。基礎薄弱，連個圖片也難倒我了。

最後還是用的element自帶的<el-image>,下面是輪播圖使用的部分代碼。

<el-carousel-item v-for="item in items" :key="item">
        <el-image
          style="width: 450px; height: 300px"
          :src=item
          :fit="fit"></el-image>
      </el-carousel-item>

items{
    imgURL1: require('@/assets/lunBo/1.jpg'),
    ...
}

架構

因爲是單頁面，整個項目架構也沒太注意：

vue-router中使用的三個分頁面我放置在了component中。

Template

在App.vue中，主要使用了Element自帶的佈局方法，頭組件，兩邊欄，加main頁面，因爲todo類的應用和日期關係很大，所以右邊欄直接放置了Element的日曆（偷懶！），左邊欄主要是存鏈接，主要工作量還是在實現CRUD和其他功能的main頁面裏。

具體代碼，按照element的內容寫，真的非常方便。

Axios

這個也是簡單的看看手冊就可以用了，下面是簡答的示例代碼。

getTableData () {
      axios.get(this.path)
        .then((res) => {
          this.tableData = res.data
        })
        .catch((error) => {
          console.error(error)
        })
    },

因爲前端遇到的坑確實不是很多，這裏只是大致介紹一下業務代碼。有待學習和優化的還有很多，所以這篇對於熟悉Vue的價值不大，記錄下來供自己反省把！