从零开始搭建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.html

if __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配置http://www.pythondoc.com/flask-sqlalchemy/config.html

from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy

app = 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.py
from flask import Flask, render_template, jsonify, request
from flask_sqlalchemy import SQLAlchemy
from 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'] = True
app.config['SQLALCHEMY_UCSO'] = True

db = 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 是增加数据
    db.session.commit()   #提交了才会到数据库中
    return 'success'


if __name__ == '__main__':
    app.run(debug=True)

接下来试一下

这是查询接口 最大id9

新增接口 再查询下

加进去了