python后端框架flask_Vue+Flask轻量级前端、后端框架,如何完美同步开发

导言我们的Vue2.0应用:简读-微信公众号RSS,即将进入后端开发。

Vue+Flask作为轻量级前端、后端框架,非常适合组合起来快速开发。一个是js,一个是Python。

Bonus:

可以完美实现跨域调试,不需要JSONP,也不需要服务器端设置'Access-Control-Allow-Origin' -> Vue 2.0 起步(4) 轻量级后端Flask用户认证 - 微信公众号RSS

问题

作为一个全(ku)能(bi)的全栈开发人员,前、后端往往是一个人搞定。开发过程中最常见问题是,每次前端修改了html/js,一般先要用webpack编译,再手工复制编译后文件到Flask的工作目录,后端框架才能使用更新后html/js。

那么,对于追求极致效率的人,如何完美实现:前后端共用代码同步更新呢?

解决注意:以下是以初始化模板为“vue init webpack ”为例

观察Vue开发时,webpack热替换的编译代码中,含有以下文件:app.js (包含打包后的所有HTML、js、CSS文件)

__webpack_hmr (webpack热替换文件)

那我们把这些文件让 Flask引用一下Vue http://localhost:8080 的这两个文件,不就可以实现同步更新了吗?如果初始化模板“vue init webpack-simple ”,则替换app.js为dist/build.js

实施新建两个目录,存放Flask的模板和静态文件:/static//templates/Flask 最简后台服务器程序(10行代码):# /app.py#!/usr/bin/env python# encoding: utf-8from flask import Flask, render_template, redirect

app = Flask(__name__)@app.route('/')def index():

return render_template('index.html')@app.route('/__webpack_hmr')def npm():

return redirect('http://localhost:8080/__webpack_hmr')if __name__ == '__main__':

app.run(debug=True)复制Vue项目/index.html,到Flask模板文件夹/templates下面,然后添加引用 app.js:如果初始化模板“vue init webpack-simple ”,则替换app.js为dist/build.js# /templates/index.htmlhtml>

简读 - 公众号RSS

大家要问了,/templates/index.html里,不仅有 app.js,还有其它的几行?

是的,等我一一道来:是引用font-awesome图标,如果你没有用到图标CSS,也可以忽略这一行

同时,复制/node_modules/font-awesome/整个文件夹,到Flask的静态文件夹/static下面:/static/font-awesome/1.1.js、2.2.js...,这些文件是vue-router里,如果定义了路由懒加载,那除了app.js以外,webpack编译时,会多出这些类似的文件,大家用 npm run build可以看到产生了哪些懒加载js,然后把它们加入到 /templates/index.html里面去:

同步更新

现在,同时运行前端、后端开发环境:npm run devpython app.py

打开两个浏览器:Vue.js: http://locahost:8080Flask: http://localhost:5000

Vue、Flask同步更新前

这时,我们更新一下,比如前端框架里,Home.vue代码中标题的名字:# /src/components/Home.vue

简 读(Changed in Vue

。。。      

是不是立马看到,前后端两个浏览器窗口,都同时更新显示了?!

同步更新后调试完毕后,编译成生产环境:

vue2+Flask网站,轻松部署到免费主机Heroku

npm run build

复制/dist/目录下文件,到/app/templates, /app/static下

OK!下一步,我们就来开发公众号RSS应用的后端程序,敬请期待!

作者:非梦nj

链接:https://www.jianshu.com/p/3f6964028ec3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/431517.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql查询错误_一个奇怪的MySQL查询错误

t_user表的phone_number字段是varchar(255)类型的,表示手机号,在查询某个手机号时,sql语句如下:SELECT phone_number FROM t_user WHERE phone_number 13400000000查询结果:phone_number---------------------------…

hdu 3308 线段树

输入一串数字&#xff0c;有两个操作&#xff1a;Q a b 查询a到b区间内严格递增子串的最大长度 &#xff1b; U a b 把第a位数字替换成b 。注意输入的编号是从0开始 解法&#xff1a;线段树维护区间的严格递增子串的最大长度即可。注意细节。 #include <iostream> #inclu…

kafka创建topic命令_0748-5.14.4-Kafka的扩容和缩容

​文档编写目的在Kafka集群资源使用已超出系统配置的资源时&#xff0c;或者有大量资源闲置造成资源浪费的时候&#xff0c;需要分别通过扩容Kafka和缩容Kafka来进行调整。本篇文章Fayson主要介绍如何进行Kafka的扩容和缩容&#xff0c;以及变更后的Kafka集群如何进行负载均衡的…

java 对话框 显示图片_Java对话框上显示图片

手掌心其实有很多种方法可以解决图片显示大小的问题:使用photoshop修改. 优点是可以节省系统资源, 显示图片的时候,不用做处理,缺点是需要了解ps的基本操作使用JDialog 自定义对话框. 优点 可以实现复杂的效果, 缺点,代码量比较多使用ImageIcon, Image 类 实现图片的缩放,. 优点…

class-dump获取iOS私有api

转自&#xff1a;http://blog.csdn.net/sunyuanyang625/article/details/41440167 获取各类iOS私有api 安装工具class&#xff0d;dump 资源地址http://download.csdn.net/detail/map625/8191343 运行class&#xff0d;dump并编译src项目 编译之后在produce中找到编译好的class…

python能开发什么产品_三周学 Python ?不,三周做个产品

我的同事在看到毫无开发经验的我用三周时间&#xff0c;不但从零基础用上了 Python&#xff0c;还做出了一个客户关系管理系统&#xff0c;强烈邀请我分享经验。惶恐&#xff0c;因为我并没有出色的智商&#xff0c;也没有觉得三周学 Python 是一个体现自己牛叉的事情(不少人可…

爬楼梯 java_Leetcode 70.爬楼梯(Java)

题目&#xff1a;假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f;注意&#xff1a;给定 n 是一个正整数。示例 1&#xff1a;输入&#xff1a; 2输出&#xff1a; 2解释&#xff1a; 有两种方法可以爬…

WebView之2

首先需要添加权限&#xff1a; <uses-permission android:name"android.permission.INTERNET"/>   MainActivity: package com.wyl.webview;import android.app.Activity; import android.app.ProgressDialog; import android.os.Bundle; import android.vie…

火星云分发全网视频_好用的短视频一键分发软件,让工作效率提高10倍

随着近几年新媒体行业的高速发展&#xff0c;新媒体行业的红利也越来越来&#xff0c;也有越来越多的人想要享受到这波红利&#xff0c;于是不管是个人是企业都纷纷开始进入这个市场。不过也随之诞生了一系列麻烦繁琐的问题&#xff0c;如怎么持续创作内容&#xff0c;怎么花费…

java 采样_Java编程实现beta分布的采样或抽样实例代码

本文研究的主要是Java编程实现beta分布的采样或抽样&#xff0c;具体如下。本文将使用math3提供的工具包&#xff0c;对beta分布进行采样。如下程序是对alpha81&#xff0c;beta219的beta分布函数&#xff0c;进行抽样&#xff0c;共采样10000次。package function;/*** author…

树莓派 蓝牙音响_你应该拥有一个树莓派

为什么你应该拥有一个树莓派树莓派并不是极客的玩具树莓派可以用来做什么?它能实现的实在是太多了,最常见的比如自动化脚本 各种机器人bot: QQ/wechat/微博/facebook/telegram,IM结合爬虫 telegram的bot如今被黑产们结合比特币,做成了交易系统 使用宝塔linux面板,一键安装word…

训练集的识别率一直波动_机器学习验证集为什么不再有新意?

机器学习中&#xff0c;一般将样本数据分成独立的三部分&#xff1a;训练集、验证集和测试集。其中验证集在机器学习中所起到的作用是&#xff1a;开发模型总需要调节模型的参数&#xff0c;而整个调节过程需要在验证集数据上运行训练的模型&#xff0c;从而给出其表现的反馈信…

java写一个web聊天工具_javaweb写的在线聊天应用

写这个玩意儿就是想练练手&#xff0c; 用户需要登陆才能在线聊天&#xff0c;不要依赖数据库&#xff0c; 不需要数据库的操作&#xff0c; 所有的数据都是保存在内存中&#xff0c; 如果服务器一旦重启&#xff0c;数据就没有了&#xff1b;登录界面&#xff1a;聊天界面&…

python dataframe删除重复行_详解pandas使用drop_duplicates去除DataFrame重复项参数

Pandas之drop_duplicates&#xff1a;去除重复项方法DataFrame.drop_duplicates(subsetNone, keepfirst, inplaceFalse)参数这个drop_duplicate方法是对DataFrame格式的数据&#xff0c;去除特定列下面的重复行。返回DataFrame格式的数据。subset : column label or sequence o…

O-C相关-08-动态类型与静态类型

08-动态类型与静态类型 1, 什么是动态类型和静态类型 1) 动态语言 又叫动态编程语言&#xff0c;是指程序在运行时可以改变其结构&#xff1a;新的函数可以被引进&#xff0c;已有的函数可以被删除等在结构上的变化。比如众所周知的ECMAScript(JavaScript)便是一个动态语言。除…

python中numpy是什么_什么是NumPy?

本文是对官方文档的翻译&#xff0c;原文在此What is NumPy? - NumPy v1.14 Manual​docs.scipy.org以下开始正文。NumPy是Python的一个用于科学计算的基础包。它提供了多维数组对象&#xff0c;多种衍生的对象(例如隐藏数组和矩阵)和一个用于数组快速运算的混合的程序&#x…

java for循环 等待_java – 主题:忙等待 – 空循环

参见英文答案 > Is this starvation? 2个在我们的大学课程中,我们学习了Threads并使用“Busy Waiting”方法作为在TrafficLight等待的汽车的示例.为此,我们构建了三个类&#xff1a;> TrafficLight(实现Runnable)>汽车(实现Runna…

人物角色群体攻击判定(一)

我们制作3D动作游戏的时候,常常主人公是一对多人进行攻击,或者敌人在角色前方一定范围内进行攻击. 我们怎么实现这种效果呢&#xff1f; 1. 使用触发器(多体攻击)方便调试,可视化(推荐)2. 运用点乘和叉乘,判断敌人的角度和位置(单,多)一般3. 使用Physics的Physics.OverlapSpher…

mfc cimage加载显示图片_在微信小程序里实现图片预加载组件

网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单&#xff0c;通常的做法是在 JS 中使用 Image 对象即可&#xff0c;代码大致如下var image new Image() image.onload function() {console.log(图片加载完成) } image.src"//misc.360buyimg.com/lib…

java mongodb 删除字段类型_Mongodb基本数据类型、常用命令之增加、更新、删除

1.null---表示空值或者该字段不存在&#xff0c;如{"name"&#xff1a;null}2.布尔 --- 和java中的布尔一样&#xff0c;有两种&#xff1a;true,false,如{"sex":true}3.浮点数---shell中所有的数字都是浮点数&#xff0c;如{"age":12},{"m…