应付性小作业，总体：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()

成功解决问题！