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"}
后端收到的数据无法放进数据库问题
发现少了一行语句,加上就可以了。
db.commit()
(实在太晚了,而且我还没有吃饭,第一篇先更新到这里吧)
