Web design based on Python language (hand-in-hand teaching you to design a personal blog website)-python black hole net

News from this site

Rental advertising space, please contact the webmaster if you need cooperation

gfg

article

22689

browse

+focus

classification

no classification

date

2024-11(8)

Web design based on Python language (hand-in-hand teaching you to design a personal blog website)

posted on 2024-11-02 14:08 read(678) comment(0) like(22) collect(3)

Overall design idea

The idea of designing a web page involves many aspects, from the page structure and style on the front end to the data processing and logic implementation on the back end.

1. Determine the needs and functionality of your website

First of all, we need to clarify the functional requirements of the website, such as user registration and login, blog article publishing and display, comment system, etc.

2. Choose a technology stack

Choose the right framework and tools. For Python, common web frameworks include Flask and Django.

3. Set up the project structure

A reasonable project structure helps organize the code and facilitates subsequent maintenance and expansion.

4. Front-end design

The front end is mainly responsible for the display of web pages and user interaction, and can use HTML, CSS and JavaScript .

5. Backend design

The backend is responsible for business logic processing, database operations, user authentication, etc.

6. Database Design

Design the database model to determine the data that needs to be stored and its relationships.

7. Integrate front-end and back-end

The front-end and back-end are integrated through the API interface to realize data interaction.

8. Testing and Deployment

Perform sufficient testing to ensure that the functionality and performance meet the requirements before deploying to the server.

Practical Application

We can use the Flask framework to implement a simple blog website.

Step 1: Install Flask

First, you need to install Flask. You can install it using pip:

pip install flask

Step 2: Create the project structure

Create a project directory with the following structure:


my_blog/
├── static/
│   └── styles.css
├── templates/
│   ├── layout.html
│   ├── home.html
│   └── post.html
|   └── new_post.html
├── app.py
└── blogdata.py

Step 3: Set up the Flask application

Write the following code in app.py:


from flask import Flask, render_template, request, redirect, url_for
from blogdata import get_posts, get_post, add_post
 
app = Flask(__name__)
 
@app.route('/')
def home():
    posts = get_posts()
    return render_template('home.html', posts=posts)
 
@app.route('/post/<int:post_id>')
def post(post_id):
    post = get_post(post_id)
    return render_template('post.html', post=post)
 
@app.route('/new', methods=['GET', 'POST'])
def new_post():
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']
        add_post(title, content)
        return redirect(url_for('home'))
    return render_template('new_post.html')
 
if __name__ == '__main__':
    app.run(debug=True)

Step 4: Create blog data processing

Simulate some blog data and operations in blogdata.py:


posts = [
    {
        'id': 1,
        'title': 'First Post',
        'content': 'This is the content of the first post.'
    },
    {
        'id': 2,
        'title': 'Second Post',
        'content': 'This is the content of the second post.'
    }
]
 
def get_posts():
    return posts
 
def get_post(post_id):
    for post in posts:
        if post['id'] == post_id:
            return post
    return None
 
def add_post(title, content):
    new_post = {
        'id': len(posts) + 1,
        'title': title,
        'content': content
    }
    posts.append(new_post)
'run

Step 5: Create HTML Template

Create the following HTML files in templatesthe directory:

`layout.html`


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <header>
        <h1>我的博客</h1>
        <nav>
            <a href="{{ url_for('home') }}">Home</a>
            <a href="{{ url_for('new_post') }}">New Post</a>
        </nav>
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        <p>&copy; 2024 我的博客</p>
    </footer>
</body>
</html>

home.html


{% extends 'layout.html' %}
 
{% block content %}
    <h2>Blog Posts</h2>
    <ul>
        {% for post in posts %}
            <li>
                <a href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a>
            </li>
        {% endfor %}
    </ul>
{% endblock %}

post.html


{% extends 'layout.html' %}
 
{% block content %}
    <h2>{{ post.title }}</h2>
    <p>{{ post.content }}</p>
    <a href="{{ url_for('home') }}">Back to Home</a>
{% endblock %}

new_post.html


{% extends 'layout.html' %}
 
{% block content %}
    <h2>New Post</h2>
    <form method="POST">
        <div>
            <label for="title">Title:</label>
            <input type="text" id="title" name="title">
        </div>
        <div>
            <label for="content">Content:</label>
            <textarea id="content" name="content"></textarea>
        </div>
        <button type="submit">Add Post</button>
    </form>
{% endblock %}

Step 6: Create a style file

staticCreate in the directorystyles.css


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
 
header {
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}
 
nav a {
    color: white;
    margin: 0 1rem;
    text-decoration: none;
}
 
main {
    padding: 2rem;
}
 
footer {
    text-align: center;
    padding: 1rem;
    background-color: #333;
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
}