Python(Flask)+Vue(ElementUI)+MySQL全栈日记【1】

Python(Flask)+Vue(ElementUI)+MySQL全栈日记【1】

    • 安装
    • 注册页面(前端)
    • proxy不起作用问题
    • 后端接收不到数据问题
    • 后端无法解析数据问题
    • 后端收到的数据无法放进数据库问题

在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()

(实在太晚了,而且我还没有吃饭,第一篇先更新到这里吧)

你可能感兴趣的:(调试日记,python,vue,json,数据库,mysql)