重零开始搭建python flask+vue 小型web项目以及flask_sqlalchemy访问数据库
前言
作者是一个前端开发者，之前从未接触过python，也没接触过后端开发，所有这篇文章中有很多以前端的角度对python flask的理解，好了话不多说，开始搭建网站吧开始
创建项目目录
flaskdemo——flask# 存放后端文件——flask-dist # 存放前端打包后的文件——flask-web # 存放前端vue文件
flask-web 文件夹可以先不用创建 一会用vue-cli生成框架的时候自动生成
搭建vue应用
安装vue前要先搭建前端环境1.安装node
node官网直接下载就好了，npm会跟node同时装上，安装好了cmd执行 node -v npm -v查看是否安装成功
node -v #显示版本号npm -v#显示版本号
2.安装 vue-cli
cmd中执行 npm install -g @vue/cli 安装vue-cli3.x 如果你电脑中有低版本vue cli（1.x,2.x） 你需要先通过 npm uninstall vue-cli -g 卸载它,详情见vue-cli官网，当然想使用vue-cli 3 一下版本也是可以的 安装成功执行 vue --version 看是否执行成功
vue --version#显示版本号
3.创建vue项目
cmd 切换到 flaskdemo 文件夹上执行
vue create flask-web#3.x版本vue init webpack flask-web#3一下版本
会自动生成flask-web文件夹，cdm切换到flask-web文件夹下执行
npm run serve
弹出如下网页就是执行成功了
4.修改打包文件地址，并配置代理
3.x版本在flask-web文件夹下创建vue.config.js文件 并加入下面代码
module.exports = {// 基本路径baseUrl: './',outputDir: './../flask-dist',// 生产环境是否生成 sourceMap 文件productionSourceMap: false,// 服务器端口号devServer: {port: 7001,},devServer: {proxy: {'/api': {target: 'http://127.0.0.1:5000', //后端运行端口changeOrigin: true,ws: true,pathRewrite: {'^/api': ''}}}}}
配置代理主要是前端开发时不能每次小修改都要进行一次打包，所有开发调试时访问后端接口的时候通过代理没有跨域问题，在axios里请求的时候加上一个变量打包时让他为空就可以了
搭建后端flask应用
1.安装虚拟环境python不像前端开发那样装包 可以 -g全局 或者装到当前文件夹node_modules中，所有每次装包都要装到全局的python下了，但是你可能开发多个项目切需要不同版本的包，所有对包的管理就很麻烦，所有预发安装虚拟环境，每个python项目自己的包都会安装到自己的虚拟环境中
cmd中执行
pip install virtualenv #virtualenv就是创建虚拟环境的工具
cmd切换到flask文件夹下执行
virtualenv venv #在flask文件夹下生成个虚拟环境 venv是虚拟环境名字 可以自己命名
接下在运行虚拟环境
/venv/Scripts/activate
执行成功后如下图
2.安装 相应的包
pip install flask #flask框架包pip install flask_sqlalchemy #flask操作数据库包pip install pymysql #操作数据库引擎
3.创建后端文件
这里作者使用的是pycharm编辑器
flask文件夹下创建一个run.py 写入如下代码
from flask import Flask, render_template #引入包中要使用的类app = Flask(__name__, static_url_path='/', static_folder='./../flask-dist', template_folder='./../flask-dist')#生成app对象 static_folder 设置资源位置 就是 js文件夹 css文件夹的目录 template_folder html文件位置@app.route('/')def index():return render_template('index.html') # template_folder 设置的路径下的 index.htmlif __name__ == '__main__':app.run(debug=True)
运行下run.py
进入127.0.0.：5000
但是身为一个前端关注的不是这种后端运行环境的web项目 ,更关注请求后端的接口在我的理解@app.route(’/’) /也算是一种接口只是返回的 html
4.flask_sqlalchemy 访问数据库
在安装包的时候以及让安装了flask_sqlalchemy包，由于我是个只会前端的前端，所有本地搭建数据库所有在百度云上卖了一个mysql，接下来操作就是针对这个进行操作
在mls_web数据库中 有个user表
在run.app中加入 为了防止混乱我把之前写过的节加进来了 详细的config配置/flask-sqlalchemy/config.html
from flask import Flask, render_templatefrom flask_sqlalchemy import SQLAlchemyapp = Flask(__name__, static_url_path='/', static_folder='./../../flask-dist', template_folder='./../../flask-dist')app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://name:pwd@106.13.174.205:3306/mls_web'# mysql+pymysql 这是声明数据库和链接数据库的引擎 name pwd 就是可以访问数据库的用户名密码 106.13.174.205:3306 是数据库地址 /mls_web 这是数据库名字app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True 如果设置成 True (默认情况)，Flask-SQLAlchemy 将会追踪对象的修改并且发送信号。这需要额外的内存， 如果不必要的可以禁用它。db = SQLAlchemy(app)声明数据对象@app.route('/')def index():return render_template('index.html')if __name__ == '__main__':app.run(debug=True)
这样就连接上了数据库
然后要对数据库中的表进行映射，大概的意思就是把数据库中的表看成一个类，表中的每行数据看成是这个类的实例，列明就是对象属性的键，表中数据就是对象的值
安装包
pip install sqlacodegen
cmd 切换到 flask目录 执行
sqlacodegen --outfile=models.py mysql+pymysql://name:pwd@106.13.174.205:3306/mls_web
生成一个models.py文件 user表的映射
在里面加入
def to_json(self):return {'id': self.id,'name': self.name,'pwd': self.pwd}
这是把表中的内容转成json的方法
把这个models.py 引入到 run.py
--run.pyfrom flask import Flask, render_template, jsonify, requestfrom flask_sqlalchemy import SQLAlchemyfrom models import *app = Flask(__name__, static_url_path='/', static_folder='./../../flask-dist', template_folder='./../../flask-dist')app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://mls:a838502774@106.13.174.205:3306/mls_web'app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = Trueapp.config['SQLALCHEMY_UCSO'] = Truedb = SQLAlchemy(app)@app.route('/')def index():return render_template('index.html')@app.route('/getUser', methods=['GET', 'POST']) # 查询数据的接口def get_user():res = db.session.query(User).all()#User是从models里导入的 temp = []for x in res:temp.append(x.to_json())return jsonify(data=temp)@app.route('/addUser', methods=['POST'])#新增数据的接口def add_user():data = request.json #获取传过来的参数u = User(name=data.get("name"),pwd=data.get("pwd"))#根据传过来参数创建一条数据db.session.add(u) #add 是增加数据mit() #提交了才会到数据库中return 'success'if __name__ == '__main__':app.run(debug=True)
接下来试一下
这是查询接口 最大id9
新增接口 再查询下
加进去了
