Flask框架创建项目初期总结 vue项目准备

创建项目虚拟环境及安装相关依赖

创建项目在项目内打开设置
第一步

第二步

打开项目终端查看虚拟环境是否成功
如果没有成功则需要手动开启

虚拟环境配置好后要安装相关依赖
讲有含有依赖名称的文件放到项目内
然后打开项目终端进行安装
安装好之后可以输入 pip list查看一下是否全部安装

创建flask结构

利用工程模式创建app
在根目录创建create_app.py文件
在里面进行编写

from flask import Flask  #导入Flask
from flask_cors import CORS  #跨域
def create_app(config):
    flask_app=Flask(__name__)   #实例化flask对象
    #加载配置项
	flask_app.config.from_object(config)
    #注册蓝图

    #绑定db

    # 跨域
    CORS(flask_app)

    return flask_app

项目内创建settings目录里创建config.py文件
在里边编写序偶需要的配置项

class DefaultConfig:
    SECRET_KEY='asdasfjsfagfasfa'   #cookie秘钥
    SQLALCHEMY_DATABASE_URI=''   #数据库配置项
    SQLALCHEMY_TRACK_MODIFICATIONS=False # 追踪数据的修改信号
    SQLALCHEMY_ECHO=True  # 是否在控制台打印输出sql语句
    JSON_AS_ASCII=False    #json类型是否转换

#继承自上边的类，避免以后的修改
class DevConfig(DefaultConfig):
    # 数据库类型+数据库操作引擎://用户名:密码@主机名:端口/数据库名
    SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:mysql密码@127.0.0.1:3306/数据库名'

项目根目录创建app.py文件 在里边导入配置项 app实例create_app

from create_app import create_app  #导入创建好的create_app
from settings.config import DevConfig  #导入配置项

app=create_app(DevConfig)

#通过功能函数方式创建了对象

可以在里面编写main 运行框架
也可以在调试配置对话框里配置运行



配置好之后下次就可地点击旁边的开始就可以运行

在里面配置蓝图

在项目内创建views目录里创建users.py文件
在里面进行编写

from flask import Blueprint  #导入蓝图
from flask_restful import Api,Resource
# # url_prefix  # 指定当前蓝图下所有路由的前缀
user_dp=Blueprint('user_dp',__name__,url_prefix='/users') #实例化蓝图对象

api=Api(user_dp)  #实例化蓝图收集器#实例化一个Api对象 Api对象的作用是用来搜集路由的

#定义类视图 继承自Resource类，通过Api的实例化对象进行搜集
class UserView(Resource):
    def get(self):       #测试是否成功
        return 'ssss'
#添加路由
api.add_resource(UserView,'/user') #完整地址是 /users/user

然后在create_app.py里注册一下

from flask import Flask  #导入Flask
from views.users import user_dp  #导入实例化的蓝图对象
from flask_cors import CORS
def create_app(config):
    flask_app=Flask(__name__)   #实例化flask对象
    #加载配置项
    flask_app.config.from_object(config)

    #注册蓝图
    flask_app.register_blueprint(user_dp)

    #绑定db

    # 跨域
    CORS(flask_app)

    return flask_app

注册数据库配置

在目录创建models目录里创建model.py文件进行编写模型类

from flask_sqlalchemy import SQLAlchemy  #导入

db=SQLAlchemy()  #实例化数据库连接对象

#创建模型类
class UserModel(db.Model):
    # primary_key主键   autoincrement自增  default默认
    id=db.Column(db.Integer,primary_key=True,autoincrement=True,comment='ID')
    name=db.Column(db.String(32),default='',comment='名字')

然后在create_app.py里注册一下

from flask import Flask  #导入Flask
from views.users import user_dp  #导入实例化的蓝图对象
from models.model import db   #导入实例化的数据库连接对象
from flask_cors import CORS
def create_app(config):
    flask_app=Flask(__name__)   #实例化flask对象
    #加载配置项
    flask_app.config.from_object(config)

    #注册蓝图
    flask_app.register_blueprint(user_dp)

    #绑定db
    db.init_app(flask_app)

    # 跨域
    CORS(flask_app)

    return flask_app

在根目录创建manage.py文件配置迁移项

from flask_script import Manager #Manager类作业是把命令行运行该文件的时候，添加一些命令
from app import app   #导入app
from flask_migrate import MigrateCommand,Migrate    # 导入迁移类和迁移命令类
from models.model import db    #导入实例化后的数据库对象

manage=Manager(app)  #实例化命令行管理对象
migrate=Migrate(app,db)  #实例化迁移执行类
manage.add_command('db',MigrateCommand)  #给命令行管理对象添加一组命令


# 注意编写好了要启动一下
if __name__ == '__main__':
    manage.run()

在python终端运行命令进行迁移

#  初始化迁移文件  # 初始化，只需要初始化一次
python manage.py db init

# 生成迁移文件
python manage.py db migrate

# 执行迁移
python manage.py db upgrade

# 迁移完成

vue项目的准备工作

创建vue项目

在指定的目录下 打开cmd
输入 vue create 项目名

然后回车安装
分别是vue3 vue2 和自定义选项安装
一般都是选择自定义选项安装 便捷自由度高
选择第三个

目前来说只需要 Router跟vuex就行了

选择2.x

然后会有选项 yes 选择第一个 no 这三个

如果出现这个就说明创建成功

vue项目创建好后把依赖也装进去
在项目内打开cmd输入 指令进行安装

npm install

Element跟axios的配置安装

npm 安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
在vue项目终端进行安装

npm install element-ui -S

axios安装 npm安装

npm install axios --save

然后在项目内的src目录里的main.js文件中进行配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui'     //Element配置
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

import axios from 'axios'       //axios配置
axios.defaults.baseURL='http://127.0.0.1:5000'  //前后端跨域联调  后端域名 
Vue.prototype.$axios=axios    // 这一段可有可无

Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app')

如果没有输入 Vue.prototype.$axios=axios 这段代码
vue中是这样调用axios的
需要导入 不需要this开头

如若加了 Vue.prototype.$axios=axios 这段代码
就算不导入axios 也可以 不过要加上this头

Vue.prototype.自定义=axios 这段代码可以自定义
如果Vue.prototype.aaa=axios 写成这样的话
那么调用的时候就要this.aaa调用了