python Vue + Axios + Flask + mySQL

應付性小作業，總體：Vue + Axios + Flask + mySQL ，細節：Element UI、Echarts

代碼+數據庫+PPT放在github了

前期準備

npm下載

如何運行一個Vue項目

前後端分離-通信

前後端在一個機子上分別運行

一次性成功超棒的筆記

前後端分機運行

根據上面的筆記，在get_msg.py中將app.run()改爲

app.run(host='0.0.0.0', port=5000)

打開後端接口網頁，總報錯。發現原來是IP輸錯了

這個IP是根據局域網分配的，不同局域網有不同的IP地址

打開cmd，輸入ipconfig， 標紅圈的就是

打開192.168.43.174:5000 就可以收到數據啦

然後把後端部署到小夥伴的電腦上，我訪問他的端口，也OK

跨域問題

問題

一臺機子運行成功後，試了試分機運行前後端，一直報錯：Network error

Access to XMLHttpRequest at 'http://' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解決方案

我們還真以爲是網絡問題，傻乎乎的換了網，後來發現是通信問題，後端拒絕跨域訪問。很簡單，在後端加一句話就行。

CORS(app, supports_credentials=True) 

參考博文

發送數據庫查詢結果到前端

問題

報錯：‘dict’ object is not callable

解決方法

 將數據庫的數據轉化爲JSON標準格式輸出 

在前後端傳輸過程中，後端會返回一個JSON格式的數據（資源）給前端使用。這就要求我們return的數據是一個dict。

而通過flask-SQLAlchemy這一ORM工具所構建的數據庫表模型，通過其語句所取出的數據通常是object類型的，這一類型並不能直接在方法中return返回一個JSON格式，因此需要先對從數據庫中取出的數據進行序列化，然後再return給前端。

其他問題

懶得把問題一一列舉了，後來做了個PPT做演示，其中列了一些要點和問題，以及前後端代碼都放在github，希望能幫到看到這篇博文的人，以及（如果可能）多年以後再一次要用到VUE的自己。

el-table 修改表格背景色

      <el-table :data="areaList" style="width: 100%"
                row-class-name="area-list-row"
                :header-cell-style="{background:'#025C67',color:'#ffffff'}">

<style>
  .el-table .area-list-row {
    background: #025C67;
    text-align: center;
    color: #ffffff;
  }
</style>

 el-table 修改hover背景色

參考博文

.el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: #212e3e !important;
}

模糊查詢

用到了Element UI中一個很棒的函數.filyer()，不用再在和數據庫死磕了！真的很棒！！

:data="areaList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()) || data.serviceArea.toLowerCase().includes(search.toLowerCase()) )"

加上v-if是因爲不加會報錯，不加也不影響使用效果，超讚！！！

原碼在https://element.eleme.cn/#/zh-CN/component/table

ImportError: No module named 'MySQLdb'

https://www.jianshu.com/p/7b707d619dda

MySQLdb只支持Python2.，還不支持3.
可以用PyMySQL代替。安裝方法：

pip install PyMySQL

然後在數據庫初始化的地方加上：

import pymysql
pymysql.install_as_MySQLdb()

成功解決問題！