vue flask mysql,Vue + Flask 实现单页面应用

矫情吗；* 2023-01-17 08:21 117阅读 0赞

↑关注 + 星标 ，每天学Python新技能

后台回复【大礼包】送你Python自学大礼

![aa8c1bbfb3d0e254dd0194a9ae92bc8d.png][]

今天使用我们一起来尝试，使用 Vue + Flask 搭建一个简单的单页面应用。

前端

环境配置

首先安装 vue

1npm install vue

创建 vue 工程

1\# 使用 webpack 打包工具初始化一个名为 frontend 的工程

2vue init webpack frontend

安装依赖

1\# 进入工程目录

2cd frontend

3\# 安装 vue-router

4npm install vue-router --save-dev

5\# 安装 element-ui

6npm i element-ui -S

7\# 安装 SASS 加载器

8npm install sass-loader node-sass --save-dev

9\# 安装依赖

10npm install

启动工程

1npm run dev

此时，一个最简 vue 应用就完成了。

我们看一下 src 文件夹，这里就是我们写前端代码的地方了

![02ca77ff70f387055b6a1f0e705b2152.png][]

如下文件的作用

assets：用于存放资源文件

components：用于存放 Vue 功能组件

views：用于存放 Vue 视图组件

router：用于存放 vue-router 配置

api：存放编写的 api 调用代码

config：用于存放一些公共配置，如后端 url 等

utils：公共方法

App.vue：组件模板

main.js：项目的入口文件

下面我们就简单实现一个登陆功能，来进一步理解下各个文件的作用。

添加代码

首先处理配置信息，在 config 文件夹中创建 url.js 文件

1const devUrl = 'http://127.0.0.1:9980';

2//const proUrl = 'http://apiUrl.com';

4export default\{

5    apiUrl: devUrl,

6    apiPrefix: 'api',

7    gitHub: ''

8\}

在 api 文件夹中创建 https.js 文件

1import axios from 'axios'

2import qs from 'qs'

3import Config from '../config';

5axios.defaults.timeout = 5000;

6axios.defaults.headers.post\['Content-Type'\] = 'application/x-www-form-urlencoded;charset=UTF-8';

7axios.defaults.baseURL = '';

9function buildApiUrl(url)\{

10  return \`$\{Config.apiUrl\}/$\{Config.apiPrefix\}/$\{url\}\`;

11\}

13axios.interceptors.request.use((config) => \{

14    if(config.method == 'post')\{

15        config.data = qs.stringify(config.data);

16    \}

17    return config;

18\}, (error) => \{

19    console.log('error params')

20    return Promise.reject(error);

21\}

22);

24axios.interceptors.response.use((res) => \{

25    if(!res.data.success) \{

26        return Promise.resolve(res);

27    \}

28    return res;

29\}, (error) => \{

30    console.log('Network error')

31    return Promise.reject(error);

32\}

33);

35//返回一个Promise(发送post请求)

36export function fetchPost(url, params)\{

37    let apiUrl = buildApiUrl(url);

38    return new Promise((resolve, reject) => \{

39        axios.post(apiUrl, params)

40            .then(response => \{

41                resolve(response);

42            \}, err => \{

43                reject(err);

44            \})

45            .catch((error) => \{

46                reject(error)

47            \})

48    \})

49\}

50返回一个Promise(发送get请求)

51export function fetchGet(url, param)\{

52    let apiUrl = buildApiUrl(url);

53    return new Promise((resolve, reject) => \{

54        axios.get(apiUrl, \{params: param\})

55            .then(response => \{

56                resolve(response)

57            \}, err => \{

58                reject(err)

59            \})

60            .catch((error) => \{

61                reject(error)

62            \})

63    \})

64\}

66export default \{

67    fetchGet,

68    fetchPost

69\}

这里封装了 axios 的 post 和 get 请求。

在 views 下面创建首页视图 Main.vue

3        首页

9        name: "Main"

10    \}

在 views 下面创建登陆视图 Login.vue

### 欢迎登录 ###

12        登录

17      title="温馨提示"

18      :visible.sync="dialogVisible"

19      width="30%"

20      :before-close="handleClose">

21      请输入账号和密码

23        确 定

28      title="温馨提示"

29      :visible.sync="dialogVisible1"

30      width="30%"

31      :before-close="handleClose">

32      错误的账号或密码

34        确 定

42  export default \{

43    name: "Login",

44    data() \{

45      return \{

46        form: \{

47          username: '',

48          password: ''

49        \},

51        // 表单验证，需要在 el-form-item 元素中增加 prop 属性

52        rules: \{

53          username: \[

54            \{required: true, message: '账号不可为空', trigger: 'blur'\}

55          \],

56          password: \[

57            \{required: true, message: '密码不可为空', trigger: 'blur'\}

58          \]

59        \},

61        // 对话框显示和隐藏

62        dialogVisible: false,

63        dialogVisible1: false,

64      \}

65    \},

66    methods: \{

67      onSubmit(formName) \{

68        // 为表单绑定验证功能

69        this.$refs\[formName\].validate((valid) => \{

70             var username = this.form\['username'\];

71             var pwd = this.form\['password'\];

72             var login\_info = \{username: username, password: pwd\};

74          if (valid) \{

75              https.fetchPost('login', login\_info).then((data) => \{

76                             console.log(data.data\['code'\])

77                             if (data.data\['code'\] == 200) \{

78                                 this.$router.push("/home");

79                             \} else \{

80                this.dialogVisible1 = true;

81                return false;

82              \}

83                         \})

84            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航

85            //this.$router.push("/main");

86          \} else \{

87            this.dialogVisible = true;

88            return false;

89          \}

90        \});

91      \},

92      handleClose() \{

94      \}

95    \}

96  \}

101        text-align: center;

102    \}

103  .login-box \{

104    border: 1px solid \#DCDFE6;

105    width: 350px;

106    margin: 180px auto;

107    padding: 35px 35px 15px 35px;

108    border-radius: 5px;

109    -webkit-border-radius: 5px;

110    -moz-border-radius: 5px;

111    box-shadow: 0 0 25px \#909399;

112  \}

113

114  .login-title \{

115    text-align: center;

116    margin: 0 auto 40px auto;

117    color: \#303133;

118  \}

119

修改 router 下面路由函数 index.js

1import Vue from 'vue'

2import Router from 'vue-router'

3import HelloWorld from '@/components/HelloWorld'

4import Login from '@/views/Login'

5import Main from '@/views/Main'

7Vue.use(Router)

9export default new Router(\{

10  routes: \[

11    \{

12      path: '/',

13      name: 'HelloWorld',

14      component: HelloWorld

15    \},

16        \{

17            // Main 页面

18            path: '/main',

19            name: 'Main',

20            component: Main

21        \},

22        \{

23            // 登陆页面

24            path: '/login',

25            name: 'Login',

26            component: Login

27        \},

28  \]

29\})

修改 App.vue 文件

10  name: 'App'

11\}

16  font-family: 'Avenir', Helvetica, Arial, sans-serif;

17  -webkit-font-smoothing: antialiased;

18  -moz-osx-font-smoothing: grayscale;

19  text-align: center;

20  color: \#2c3e50;

21  margin-top: 60px;

22\}

最后在配置入口文件 main.js

1// The Vue build version to load with the \`import\` command

2// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

3import Vue from 'vue'

4import App from './App'

5import router from './router'

6import VueRouter from 'vue-router'

8// 导入 elementUI

9import ElementUI from 'element-ui'

10import 'element-ui/lib/theme-chalk/index.css'

12// 导入 axios

13import axios from 'axios'

14import QS from 'qs'

16Vue.prototype.$axios = axios

17Vue.prototype.qs = QS

19Vue.config.productionTip = false

21Vue.use(VueRouter)

22Vue.use(ElementUI)

25/\* eslint-disable no-new \*/

26new Vue(\{

27  el: '\#app',

28  router,

29  //components: \{ App \},

30  //template: ''

31    render: h => h(App)

33\})

下面我们启动我们的前端程序

1npm run dev

如果看到类似的

1Your application is running here: http://localhost:8080

说明我们的前端代码构建成功。

现在我们在浏览器中打开上面的地址，就可以得到页面如下：

![27e61d98ceeb54d1a1e0b72da4e5417a.png][]

后端

后端代码，我准备用 flask + flask\_restful 来搭建

1class LoginView(Resource):

2    def post(self):

3        try:

4            username = request.get\_json()\['username'\]

5            pwd = request.get\_json()\['password'\]

6            user = User.query.filter\_by(username=username).first()

7            if user is not None and user.verify\_password(pwd):

8                login\_user(user)

9                return \{'code': 200, 'message': 'you are login now!'\}

10            else:

11                return \{'code': 403, 'message': 'wrong account or password'\}

12        except:

13            raise

16api\_login.add\_resource(LoginView, '/login')

这里仅仅给出了最核心的 api 代码，还是非常简单的。更多的关于 flask\_restful，可以查看其官网。

至此，一个简单的前后端分离的单页面应用就完成了。

看完本文，你可以按着步骤自己实现下。刚接触的伙伴在看的过程中在某些地方可能有疑惑，其实我也研究了好久，也有好多存疑的地方。不过，我还是建议不要妄求每个点都了解的特别清楚，先明白关键点，试着实现一下，回头去看相关资料的时候，也更有感触一些。

[aa8c1bbfb3d0e254dd0194a9ae92bc8d.png]: /images/20221021/48701b70d70b4d3890643643972ceef9.png
[02ca77ff70f387055b6a1f0e705b2152.png]: /images/20221021/3eea6158199244c0a6625e2f50a07720.png
[27e61d98ceeb54d1a1e0b72da4e5417a.png]: /images/20221021/abff7857a27f40438a7a0583c11d522b.png