Home > Article > Backend Development > Flask + Vue.js: Quickly implement single-page applications

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

王林Original: 2023-06-17 09:06:401757browse

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)

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)

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'
});

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>
    `
};

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>

In the above code, 975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e 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)

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!

Python JavaScript flask vue.js html webpack Static 字符串接口 JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Flask-Testing: Best practices for unit testing in Python web applicationsNext article：Flask-Testing: Best practices for unit testing in Python web applications

See more

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

Related articles