Python（Flask）+Vue（ElementUI）+MySQL全栈日记【1】

最新推荐文章于 2025-12-18 15:48:33 发布

原创最新推荐文章于 2025-12-18 15:48:33 发布 · 2.1k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

调试日记

这篇博客记录了使用Python Flask、Vue（ElementUI）和MySQL进行全栈开发时遇到的问题及解决过程。在安装过程中遇到了PyMySQL的配置问题，前端注册页面的构建，以及Vue-Router的配置。在开发中，前端axios的proxy配置、数据传递、后端数据解析和存储到数据库的步骤都遇到了挑战，逐一得到解决。

Python（Flask）+Vue（ElementUI）+MySQL全栈日记【1】

在Web技术课上被布置了服务端编程的作业。虽然以前一直都是只会写前端的，这下也试着全栈一次……！

安装

安装所需要的所有东西本身就并非易事。下载了PyCharm（没错，我以前一直是在VSCode里写Python的），在虚拟环境里安装了PyMySQL（原来只需要在PyCharm的终端里pip install就行了啊），SQL的基本语法还因为最近都在用MongoDB忘掉了……不过最后还是安装好了。

本来是想着在第一版网站里就直接判断是否已经登录，如果是就直接进主页，不是则跳转登录注册；但是发现这样必须得依靠cookies（至少从我现在的知识水平是这样），所以还是先老老实实做注册登录吧……

注册页面（前端）

先创建了Vue项目，添加了ElementUI，然后就可以开始写了！
……好吧，还是不行，得先加上Vue-Router。Flask管后端项目的路由，Vue-Router管前端项目的，咱俩各叫各的（）。

16:52:17，完成了Vue-Router的配置（复习）。Git Commit了一次（Vue项目会自动配置为Git项目），记录下来现在的状态。现在可以开始写UI了（终于）。

proxy不起作用问题

不知道为什么，在vue.config.js文件里配置了proxy的情况下，axios的post仍然不识别proxy，而是试图把请求post给http://localhost:8080/cors/localhost:5000/register。

解决：只要不非把proxy的路径改成/cors，直接用/api就可以了。

后端接收不到数据问题

前端代码是

  axios.get('/api/register',JSON.stringify(this.form))

的时候，无法把数据传到后端。

解决：只要不非把proxy的路径改成/cors，直接用/api就可以了。

后端无法解析数据问题

后端接收到的数据类型是bytes，无法解析出需要的参数。

解决：将bytes解析为string，再把string解析为对象。

——这样之后依然无法解析。

解决：
前端代码：

axios.get('/api/register',{
          params:JSON.stringify(this.form)
        })

后端代码：

data = str(request.data, encoding="utf=8")
    a = json.loads(request.args["0"])
    print(a['password'])
    data = json.dumps(data)
    return data, 200, {"ContentType": "application/json"}