Flask + Vue.js: Quickly implement single-page applications-Python Tutorial-php.cn

Flask + Vue.js: Quickly implement single-page applications

王林

Release： 2023-06-17 09:06:40

Original

1791 people have browsed it

With the rapid development of mobile Internet and Web technology, more and more applications need to provide a smooth and fast user experience. Traditional multi-page applications can no longer meet these needs, and single-page applications (SPA) have become one of the solutions.

So, how to quickly implement a single-page application? This article will introduce how to use Flask and Vue.js to build a SPA.

Flask is a lightweight web application framework written in Python. Its advantages are flexibility, easy expansion, and easy learning. Vue.js is a popular JavaScript framework that makes it easy to build interactive user interfaces.

Step 1: Create a Flask application

First, you need to create a Flask application. You can use the following code:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello world'

if __name__ == '__main__':
    app.run(debug=True)

Copy after login

The above code creates a simple Flask application. When the user When accessing the root directory, a string "Hello world" is displayed.

Step 2: Add static files

Next, you need to add a static folder, which is used to store Vue.js and other static files. In the Flask application, you can use the following code to add the static folder:

from flask import Flask, send_from_directory

app = Flask(__name__)

@app.route('/')
def index():
    return send_from_directory('static', 'index.html')

if __name__ == '__main__':
    app.run(debug=True)

Copy after login

In the above code, the send_from_directory function will be found from the static folderindex.html file and returned to the user.

Step 3: Write Vue.js code

Now you can start writing Vue.js code. Vue.js usually needs to be packaged using Webpack, but in this article only the vue.js and vue-router.js files that come with Vue.js are used to simplify the process.

First, you need to create a js folder under the static folder and add vue.js and vue there -router.js file. Then, create a app.js file under the static folder, and add the following code:

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '*', component: NotFound }
];

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const app = new Vue({
    router,
    el: '#app'
});

Copy after login

The above code is mainly to configure Vue Router, defining three Routing: / corresponds to the Home component, /about corresponds to the About component, * corresponds to NotFound Components. Home and About components can be defined in the app.js file:

const Home = {
    template: `
        <div>
            <h1>Home</h1>
            <p>This is home page.</p>
        </div>
    `
};

const About = {
    template: `
        <div>
            <h1>About</h1>
            <p>This is about page.</p>
        </div>
    `
};

const NotFound = {
    template: `
        <div>
            <h1>404 Not Found</h1>
            <p>The page you're looking for is not found.</p>
        </div>
    `
};

Copy after login

Step 4: Connect Vue.js and Flask applications

Now that the Vue.js and Flask applications are ready, they need to be connected. In index.html, add the following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flask + Vue.js</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script type="text/javascript" src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>

Copy after login

In the above code, <router-view></router-view> will be based on Vue Router The configuration dynamically displays the corresponding components. The url_for function passes the static file path generated by the Flask application to Vue.js.

Finally, add the following code to the Flask application:

from flask import Flask, send_from_directory

app = Flask(__name__)

@app.route('/')
def index():
    return send_from_directory('static', 'index.html')

@app.route('/<path:path>')
def any_path(path):
    return send_from_directory('static', 'index.html')

if __name__ == '__main__':
    app.run(debug=True)

Copy after login

In the above code, the any_path function will redirect all routes to index.html, prevent Vue Router from accessing the error page.

Now, the single-page application is complete! You can start the application through Flask, access routing in the browser, and test each page and interaction effect of the application.

Summary

This article introduces how to use Flask and Vue.js to implement a single-page application. By using Flask to provide the interface and Vue.js to render the page, you can quickly create a modern web application.

It is recommended that readers deeply understand the usage of Vue.js and Flask, and try to use other tools and frameworks to implement similar SPA.

The above is the detailed content of Flask + Vue.js: Quickly implement single-page applications. For more information, please follow other related articles on the PHP Chinese website!