搭建Flask+Vue及配置Vue 基础路由
最近一直在看关于Python的东西,准备多学习点东西.以前的项目是用Vue+Java写的,所以试着在升级下系统的前提下.能不能使用Python+Vue做一遍.
选择Flask的原因是不想随大流,并且比较轻量级,后面深度的配置会随着学习的不断深入,也随时写进入博客
第一步:安装Vue项目,这个请查看之前的帖子https://www.cnblogs.com/0909/p/9853618.html
第二步:配置路由,并且改变起始页面,首先需要在 src/components/xx.vue 如图所示,其中flaskTovue.vue是测试python与vue的连接是否成功的
第三步:配置路由 src/router/index.js
第四部:配置App.vue 修改成如图的样子:
第五步:npm run dev ,如图所示.可以试着在 "#/"后面输入About等看看页面是切换成功.
第六步:Python 和 Vue 通过Flask 连接起来,我是参考了例子:https://www.jianshu.com/p/ead7317d01ec
Python 代码如下(通过Pycharm 配置Flask 自行百度.因为比较容易)
代码如下:
##测试成功
from flask import Flask
from flask import jsonify
from flask_cors import CORS app = Flask(__name__)
cors = CORS(app, resources={r"/getMsg": {"origins": "*"}}) @app.route('/')
def hello_world():
return 'Hello World!' @app.route('/getMsg',methods=['GET','POST'])
def home():
response = {
##这里面填写和后台交互的代码
'msg': 'Hello, Python !'
}
return jsonify(response) ##启动运行
if __name__ == '__main__':
app.run()
第七步:flaskTovue.vue的设置
代码如下:
<template>
<div>
<span>{{ serverResponse }} </span>
<button @click="getData">GET DATA</button>
</div>
</template> <script>
import axios from "axios"; export default {
name: "my-first-vue",
data: function() {
return {
serverResponse: "resp"
};
},
methods: {
getData() {
var that = this;
// 对应 Python 提供的接口,这里的地址填写下面服务器运行的地址,本地则为127.0.0.1,外网则为 your_ip_address
const path = "http://127.0.0.1:5000/getMsg";
axios
.get(path)
.then(function(response) {
// 这里服务器返回的 response 为一个 json object,可通过如下方法需要转成 json 字符串
// 可以直接通过 response.data 取key-value
// 坑一:这里不能直接使用 this 指针,不然找不到对象
var msg = response.data.msg;
// 坑二:这里直接按类型解析,若再通过 JSON.stringify(msg) 转,会得到带双引号的字串
that.serverResponse = msg; alert(
"Success " + response.status + ", " + response.data + ", " + msg
);
})
.catch(function(error) {
alert("Error " + error);
});
}
}
};
</script>
成功之后测试结果为:
搭建Flask+Vue及配置Vue 基础路由的更多相关文章
- vue全局配置----小白基础篇
今天学习vue全局配置.希望帮助我们去了解vue的全局配置,快速开发. Vue.config是vue的全局配置对象.包含Vue的所有全局属性: silent:boolean(默认值:false)--- ...
- Vue - 项目配置 ( element , 安装路由 , 创建路由 )
1,安装element : vue add element 2,安装路由 : vue add router 3,创建路由的过程 : (1) 新建 vu ...
- vue --- vscode 配置 .vue文件生成结构
1.选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,输入vue 选择vue后,编辑器会自动打开一个名字为vue.json的文件 2.复制以下内容到这个文件 ...
- vue环境配置脚手架环境搭建vue工程目录
首先在初始化一个vue项目之前,我们需要下载node.js,并且安装! 下载地址: nodejs.cn/download 安装完成之后,windows+r 运行命令 cmd 输入node -v 检 ...
- Vue脚手架结构及vue-router路由配置
首先官网介绍,用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做 ...
- vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境
目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...
- vue环境配置脚手架搭建,生命周期,钩子
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- Vue开发之基础路由
1.router-link和router-view组件 src/App.vie文件内容: <template> <div id="app"> <div ...
- vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面
vue如何配置路由 .获取路由的参数.部分刷新页面.缓存页面:http://www.mamicode.com/info-detail-1941546.html vue-router传递参数的几种方式: ...
随机推荐
- spring.net 集成nhibernate配置文件(这里暴露了GetCurrentSession 对于 CurrentSession unbond thread这里给出了解决方法)
我这里主要分成了两个xml来进行spring.net管理实际情况中可自己根据需要进行分类 Dao2.xml <?xml version="1.0" encoding=&quo ...
- combogrid change check multiple
this.SetDict = function (obj, dicType, multiple, Ischeckbox, callback, change) { obj.combogrid({ pan ...
- A. Xor-tree
题目意思: 给一颗n个节点的树,每个节点有一个值要么是0要么是1,改变某个节点的值时,它的儿子不变,它儿子的儿子翻转,它儿子的儿子的儿子不变,如此类推.给定各个节点的目标值,求最少的翻转次数,使得达到 ...
- .html与.text的异同
.html与.text的方法操作是一样,只是在具体针对处理对象不同 .html处理的是元素内容,.text处理的是文本内容 .html只能使用在HTML文档中,.text 在XML 和 HTML 文档 ...
- js-day
1.克莱托指数 公式 :体重(kg) / (身高(m) * 身高(m)) < 20 : 偏瘦 > 20 <25 : 正常 > 25 : 偏旁 步骤: 1.输入体重(weight ...
- Firefox浏览器控件安装方法
说明:只需要安装up6.exe即可,up6.exe为插件集成安装包. 1.以管理员身份运行up6.exe.up6.exe中已经集成Chrome插件.
- stream.fail() eof() EOF
ifstream infile("student.dat"); while((c=infile.get())!=EOF){} //EOF的值是-1 但在 #include&l ...
- Mac php7本地安装mongodb扩展以适配使用mongo扩展的线上老代码
从https://pecl.php.net/package/mongodb官网下载压缩包(不懂事的我下载了1.5.1版本) 解压安装包 tar -zxvf mongodb-1.5.1.tgz 进入解压 ...
- React基础篇 (3)-- 生命周期
生命周期是react中的重要部分,理解它有助于我们更合理的书写逻辑. 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移 ...
- 汇编Shellcode的技巧
汇编Shellcode的技巧 来源 https://www.4hou.com/technology/3893.html 本文参考来源于pentest 我们在上一篇提到要要自定义shellcode,不 ...