Vue + Flask 实现单页面应用

Python技术大本营

今天使用我们一起来尝试,使用 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 文件夹,这里就是我们写前端代码的地方了

图片

如下文件的作用\

  • 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';
3
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';
 4
 5axios.defaults.timeout = 5000;
 6axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; 
 7axios.defaults.baseURL = '';
 8
 9function buildApiUrl(url) {
10  return `${Config.apiUrl}/${Config.apiPrefix}/${url}`;
11}
12
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);
23
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);
34
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}
65
66export default {
67    fetchGet,
68    fetchPost
69}
这里封装了 axios 的 post 和 get 请求。

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

 1<template>
 2    <div>
 3        首页
 4    </div>
 5</template>
 6
 7<script>
 8    export default{
 9        name: "Main"
10    }
11</script>
12
13<style>
14</style>

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

  1<template>
  2  <div>
  3    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
  4      <h3 class="login-title">欢迎登录</h3>
  5      <el-form-item label="账号" prop="username">
  6        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
  7      </el-form-item>
  8      <el-form-item label="密码" prop="password">
  9        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
 10      </el-form-item>
 11      <el-form-item>
 12        <el-button class="login-button" type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
 13      </el-form-item>
 14    </el-form>
 15
 16    <el-dialog
 17      title="温馨提示"
 18      :visible.sync="dialogVisible"
 19      width="30%"
 20      :before-close="handleClose">
 21      <span>请输入账号和密码</span>
 22      <span slot="footer" class="dialog-footer">
 23        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
 24      </span>
 25    </el-dialog>
 26
 27    <el-dialog
 28      title="温馨提示"
 29      :visible.sync="dialogVisible1"
 30      width="30%"
 31      :before-close="handleClose">
 32      <span>错误的账号或密码</span>
 33      <span slot="footer" class="dialog-footer">
 34        <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
 35      </span>
 36    </el-dialog>
 37  </div>
 38</template>
 39
 40<script>
 41import https from '../api/https.js'
 42  export default {
 43    name: "Login",
 44    data() {
 45      return {
 46        form: {
 47          username: '',
 48          password: ''
 49        },
 50
 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        },
 60
 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};
 73
 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() {
 93
 94      }
 95    }
 96  }
 97</script>
 98
 99<style lang="scss" scoped>
100    .login-button {
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</style>

修改 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'
 6
 7Vue.use(Router)
 8
 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 文件

 1<template>
 2  <div id="app">
 3    <!--<img src="./assets/logo.png">-->
 4    <router-view/>
 5  </div>
 6</template>
 7
 8<script>
 9export default {
10  name: 'App'
11}
12</script>
13
14<style>
15#app {
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}
23</style>

最后在配置入口文件 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'
 7
 8// 导入 elementUI
 9import ElementUI from 'element-ui'
10import 'element-ui/lib/theme-chalk/index.css'
11
12// 导入 axios
13import axios from 'axios'
14import QS from 'qs'
15
16Vue.prototype.$axios = axios
17Vue.prototype.qs = QS
18
19Vue.config.productionTip = false
20
21Vue.use(VueRouter)
22Vue.use(ElementUI)
23
24
25/* eslint-disable no-new */
26new Vue({
27  el: '#app',
28  router,
29  //components: { App },
30  //template: '<App/>'
31    render: h => h(App)
32
33})

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

1npm run dev

如果看到类似的

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

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

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

图片

后端

后端代码,我准备用 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
14
15
16api_login.add_resource(LoginView, '/login')
这里仅仅给出了最核心的 api 代码,还是非常简单的。更多的关于 flask_restful,可以查看其官网。

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

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

以上就是本次分享的所有内容,如果你觉得文章还不错,欢迎关注公众号:Python编程学习圈,每日干货分享,发送“J”还可领取大量学习资料,内容覆盖Python电子书、教程、数据库编程、Django,爬虫,云计算等等。或是前往编程学习网,了解更多编程技术知识。

阅读 324

关注公粽号:Python编程学习圈,可免费领取最新Python技术资料包。

23 声望
0 粉丝
0 条评论
推荐阅读
使用VScode的几点感受,对比Pycharm、Jupyter优劣势
之前一直是PyCharm+Jupyter的组合,能满足几乎所有的Python开发需求。最近我开始用vscode,发现很香。PyCharm适合做项目开发,或者平常写写脚本,算是全能型IDE。但PyCharm体积大,对硬件消耗厉害,不够轻便。Jup...

Python技术大本营阅读 232

封面图
50天用vue3完成了50个web项目,我学到了什么?
通过本文的50个web示例你将学到:Vue3核心基础语法和进阶语法less核心基础语法和进阶语法scss核心基础语法和进阶语法1.Expanding Cards效果如图所示:源码在线示例学到了什么?JavascriptVue ref方法定义基本响应式...

夕水21阅读 2k

封面图
一个被忽略的前端细分领域
大家好,我卡颂。回想下你学新技术的主要途径是什么?看书?看技术文档?看博文?看视频?归纳起来,无外乎文字、视频两种形式。从纸媒时代到互联网时代,再到移动互联网时代,虽然信息的载体发生变化,但信息的...

卡颂18阅读 1.4k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫12阅读 1.2k

封面图
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫12阅读 1.7k

封面图
数字华容道「思否猫版」
思否社区首届「猫猫杯」线上代码共创大赛日程已接近尾声,各路大神狂拽炫酷的项目已经出炉了。奈何拖延症,我还在想“创意点”,同时考虑到实现周期要赶上 deadline,纠结之时,无意间在地铁上瞟见有人在看《最强大...

wuwhs12阅读 1.4k评论 8

利用思否猫素材实现一个连连看小游戏
vue3实现一个思否猫连连看小游戏本文参与了1024程序员节,欢迎正在阅读的你也加入。通过本文,你将学到:vue3的核心语法vue3的状态管理工具pinia的用法sass的用法基本算法canvas实现一个下雪的效果,一些canvas的...

夕水17阅读 1.7k评论 8

封面图

关注公粽号:Python编程学习圈,可免费领取最新Python技术资料包。

23 声望
10 粉丝
宣传栏