从零开始的Vue+flask项目实战-登录系统的实现-flask基础学习

从今天开始，一周内从零开始完成一个基于Vue+Flask的登录系统

关于使用Django实现，可以点击下方链接查看

从零开始的Django+vue项目实战（1）_vue+django项目怎么导入-CSDN博客

正文开始

Flask下载配置

Flask下载配置不过多赘述了，不过在过程中遇到了一点小问题，命令行中输入如下命令无反应

pip install Flask

如果问题相同，那应该就是网络的问题，换一下源就好了，输入如下命令修改配置即可

pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/

本人使用的pycharm这一款IDE进行开发，打开后按照如下图片新建一个project

创建好之后，我们在左边一栏打开app.py，应该是如下图片的样子

实在不太理解就直接记住，反正大部分也是写死的东西，不写错就问题不大

Debug模式

我们每次写完代码进行调试，都需要点击右上方三角形运行

每次都要从头进行解释运行，不够高效，所以我们可以开启Debug模式

专业版

专业版开启方法如下

社区版

如果是社区版也没关系，按照如下方法即可

这样我们点击运行后，调试窗口会出现如下提示

这样每次修改完代码，Ctrl+S保存后在浏览器页面点击刷新即可，调试过程简单高效。

Host&Port配置

前面是Host，后面是Port。

127.0.0.1是自己的电脑设备，5000是其中一个端口，通俗一点就是Host是有很多抽屉的大容器，Port可以指定使用其中的哪一个抽屉，不过姚注意的是，每个端口不能同时被不同服务占用，也就是说，一个抽屉不能放两个人的东西

如果需要修改，我们可以按照如下方法进行修改

 

--host=0.0.0.0意为在局域网内的其他设备可以通过你设备的ip地址进行访问

--port=1248意为端口号为1248

！注意，中间有个空格把两个配置隔开！ 

更改后如下

 几种路由的写法

根路由

普通路由

path中接受参数

其中所传参数的具体格式为 /<类型:变量名>

小案例

我们在看小说的时候，往往点进去一本书默认就是第一页，仔细看路由却没有传值
下面我们实现一下不传参默认为列表第一页，传参默认为参数所在页

Post & Get

具体项目中，我们一般会接受到前端发送的请求，大多为POST或GET请求

具体使用哪个方法接收与前端对应起来即可。

格式如下(在路由后用逗号隔开)：, methods=["请求类别"]

跨域配置

由于本项目是在本机上同时运行前后端，不可避免地会有跨域问题，flask中的CORS插件很好、很简便地解决了这个问题。

下载flask-cors插件

命令行中输入以下命令

pip install flask-cors

 稍作等待，看到下面提示就说明没有问题啦！

导入并使用

from flask_cors import CORS

CORS(app)

这是我们前几行应该是这样的：

非常简单地在flask后端配置并解决了跨域问题

总结

简单了解这些，也就只能算是了解了flask后端的皮毛了。