微信公众号：萝卜大杂烩
关注可了解更多的原创内容。问题或建议，请公众号留言或加本人微信;如果你觉得文章对你有帮助，欢迎加微信交流
今天使用我们一起来尝试，使用 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>
5template>
6
7<script> 8 export default{ 9 name: "Main"10 }11script>
12
13<style>14style>
在 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>
38template>
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 } 97script>
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 }113114 .login-title {115 text-align: center;116 margin: 0 auto 40px auto;117 color: #303133;118 }119style>
修改 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
4 <router-view/>
5 div>
6template>
7
8<script> 9export default {10 name: 'App'11}12script>
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}23style>
最后在配置入口文件 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: ''
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，可以查看其官网。
至此，一个简单的前后端分离的单页面应用就完成了。
看完本文，你可以按着步骤自己实现下。刚接触的伙伴在看的过程中在某些地方可能有疑惑，其实我也研究了好久，也有好多存疑的地方。不过，我还是建议不要妄求每个点都了解的特别清楚，先明白关键点，试着实现一下，回头去看相关资料的时候，也更有感触一些。
猜泥稀饭：
扫一扫
7218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
