The introduction

  • Our Vue2.0 application: simple reading – wechat official account RSS, is about to enter the back-end development.
  • Vue+Flask is a lightweight front-end and back-end framework that is ideal for quick development. One is JS and one is Python.

Bonus: Perfect cross-domain debugging, no NEED for JSONP, no need for server set ‘Access-Control-allow-Origin’ -> Vue 2.0 startup (4) Flask user authentication – micro account RSS

The problem

As a full stack developer with full ku power (BI), the front and back ends are often handled by one person. The most common problem is that every time the front end modifies the HTML/JS, it is usually compiled in Webpack and then manually copied into Flask’s working directory so that the backend framework can use the updated HTML/JS. So, for those who are looking for the ultimate efficiency, how to achieve the perfect implementation: synchronous updating of the code shared by the front and back end?

To solve

Note: The following uses vue init webpack as an example

When observing Vue development, the compiled code for webpack hot replacement contains the following files:

app.js (Contains all the HTML packed,Js, CSS files)__webpack_hMR (Webpack hot replacement file)Copy the code

Flask will reference Vue http://localhost:8080 for these two files and then update them synchronously.

If you initialize the template “vue init webpack-simple “, replace app.js with dist/build.js

The implementation of

  • Create two new directories for Flask templates and static files:
/static/
/templates/Copy the code
  • Flask Minimal backend server application (10 lines of code) :
# /app.py
#! /usr/bin/env python
# encoding: utf-8
from flask import Flask, render_template, redirect

app = Flask(__name__)

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

@app.route('/__webpack_hmr')
def npm(a):
    return redirect('http://localhost:8080/__webpack_hmr')

if __name__ == '__main__':
    app.run(debug=True)Copy the code
  • Copy the Vue project /index.html into the Flask templates folder /templates and add a reference to app.js:

    If you initialize the template “vue init webpack-simple “, replace app.js with dist/build.js 

# /templates/index.html

       
<html>
  <head>
    <meta charset="utf-8">
    <title>Short reading - RSS public account</title>
    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
  </head>
  <body>
    <div id="app"></div>
    <! -- built files will be auto injected -->
    <script type="text/javascript" src="http://localhost:8080/app.js"></script>
    <script type="text/javascript" src="http://localhost:8080/1.1.js"></script>
    <script type="text/javascript" src="http://localhost:8080/2.2.js"></script>
  </body>
</html>Copy the code

Templates /index.html, how many other lines are there in app.js? Yes, when I tell you:

  • <link> is a reference to the font-awesome icon. If you don’t use icon CSS, you can ignore this line 
    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">Copy the code

    At the same time, copy/node_modules/font-awesome/The entire folder, go to Flask’s static folder /static:

    /static/font-awesome/Copy the code
  • 1.1. Js, 2.2 js… These files are in vue-router if definedRoute lazy loadingIn addition to app.js, webPack compilation will add these similar files for everyone to usenpm run buildYou can see which lazy js are generated and add them to /templates/index.html: 
    <script type="text/javascript" src="http://localhost:8080/1.1.js"></script>
<script type="text/javascript" src="http://localhost:8080/2.2.js"></script>Copy the code

Synchronous update

Now, run both front-end and back-end development environments at the same time:

npm run dev
python app.pyCopy the code

Open two browsers:

Vue.js: http://locahost:8080
Flask: http://localhost:5000Copy the code




Vue and Flask before update synchronization

At this point, let’s update the header name of the home.vue code in the front-end framework:

# /src/components/Home.vue
<template>
  <div>
    <div class="jumbotron">
      <h1 class="display-3 text-success">Changed in Vue</h1>.</p>
    </div>
  </div>
</template>Copy the code

Do you immediately see that both browser Windows on the front and back end are updated at the same time? !





After synchronizing updates

OK! Next, we will develop the public number RSS application back-end procedures, please look forward to!

Vue 2.0 startup (1) Scaffolding tool Vue – CLI + Webstorm 2016 + Webpack Vue 2.0 Startup (2) Components and VUE-Router instance – wechat official account RSS Vue 2.0 Startup (3) Vue 2.0 (2) : Flask user authentication (Vue 2.0) : Flask user authentication (Vue 2.0) : Flask user authentication (Vue 2.0) : Flask user authentication (Vue 2.0)… Vue 2.0 start (7) Final: public number article grab – wechat public number RSS