Python从0到100（四十）：Web开发简介——从前端到后端（文末免费送书）

1. Web开发的基本概念

Web开发是构建网站和Web应用程序的过程，通常分为前端和后端两个部分。前端负责用户界面和交互，后端处理数据存储、业务逻辑和服务器通信。

2. 前端开发简介

技术栈：HTML、CSS、JavaScript
职责：设计网页结构、样式与交互，保证良好的用户体验
框架和工具：React、Vue、Angular、Webpack等
工作流程：设计—编码—调试—优化

3. 后端开发简介

技术栈：Python（Django、Flask）、Java（Spring）、Node.js、PHP等
职责：实现业务逻辑、数据库交互、用户身份验证、API接口等
数据库：MySQL、PostgreSQL、MongoDB等
服务器：处理请求，响应客户端

4. 前后端如何协同工作

前端通过HTTP请求调用后端API
后端返回JSON等数据格式给前端
前端动态渲染界面，完成用户交互
使用RESTful、GraphQL等接口规范提高效率

5. Python在Web开发中的作用

Python提供了多种后端框架，方便快速搭建服务
Django适合大型项目，功能齐全
Flask轻量灵活，适合小型应用和微服务
丰富的第三方库支持数据库、身份验证、数据处理等

6. 免费资源与送书活动

🎁 免费送书：本文末留言或私信，回复“Python Web开发”，即可免费领取《Python Web开发实战》电子书！

📚 推荐书籍：

《Flask Web开发实战》
《Django入门与实战》
《现代前端开发技术》

好的！这里给你一个简单的 Python Flask 入门示例，帮你快速搭建一个基础的 Web 服务，包含前端页面和后端接口：

Python Flask 入门示例

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# 首页，渲染简单的 HTML 页面
@app.route('/')
def index():
    return '''
    <h1>欢迎使用 Flask Web 服务</h1>
    <form action="/api/greet" method="post">
      <input type="text" name="name" placeholder="请输入你的名字" />
      <button type="submit">发送</button>
    </form>
    '''

# 后端 API 接收 POST 请求，返回 JSON
@app.route('/api/greet', methods=['POST'])
def greet():
    name = request.form.get('name', '访客')
    return jsonify({'message': f'你好，{name}！欢迎学习 Flask！'})

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

运行步骤

安装 Flask：

pip install flask

保存上面代码为 app.py，然后运行：

python app.py

浏览器打开 http://127.0.0.1:5000/，输入名字点击发送，即可看到后台返回的欢迎消息。

明白！这里给你一个更完整的Python Flask前后端分离示例骨架，含前端简单页面+后端REST API，并示范用Fetch调用接口。

Flask前后端分离基础示例

1. Flask后端（app.py）

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许跨域请求

@app.route('/api/greet', methods=['POST'])
def greet():
    data = request.get_json()
    name = data.get('name', '访客')
    return jsonify({'message': f'你好，{name}！欢迎使用Flask API！'})

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

2. 前端HTML（index.html）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Flask 前后端分离示例</title>
</head>
<body>
  <h1>Flask API 演示</h1>
  <input type="text" id="nameInput" placeholder="请输入你的名字" />
  <button onclick="sendName()">发送</button>

  <p id="result"></p>

  <script>
    async function sendName() {
      const name = document.getElementById('nameInput').value || '访客';
      const res = await fetch('http://127.0.0.1:5000/api/greet', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({name})
      });
      const data = await res.json();
      document.getElementById('result').innerText = data.message;
    }
  </script>
</body>
</html>

3. 运行说明

安装依赖：

pip install flask flask-cors

启动后端服务：

python app.py

直接打开index.html（本地文件或放到任意静态服务器），输入名字点击发送，前端通过Fetch调用Flask API，显示返回消息。

好的！这里给你一个基于 React + Flask 后端API 的前后端分离示例，包含完整代码和运行步骤，帮你快速搭建现代 Web 应用骨架。

React + Flask 前后端分离示例

1. Flask 后端（app.py）

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许跨域请求

@app.route('/api/greet', methods=['POST'])
def greet():
    data = request.get_json()
    name = data.get('name', '访客')
    return jsonify({'message': f'你好，{name}！欢迎使用Flask API！'})

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

运行后端

pip install flask flask-cors
python app.py

2. React 前端（src/App.js）

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');

  const sendName = async () => {
    const res = await fetch('http://127.0.0.1:5000/api/greet', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: name || '访客' }),
    });
    const data = await res.json();
    setMessage(data.message);
  };

  return (
    <div style={{ maxWidth: 400, margin: 'auto', padding: 20 }}>
      <h1>React + Flask 示例</h1>
      <input
        type="text"
        placeholder="请输入你的名字"
        value={name}
        onChange={(e) => setName(e.target.value)}
        style={{ width: '100%', padding: 8, fontSize: 16 }}
      />
      <button onClick={sendName} style={{ marginTop: 10, padding: '8px 16px' }}>
        发送
      </button>
      <p style={{ marginTop: 20, fontSize: 18 }}>{message}</p>
    </div>
  );
}

export default App;

3. 创建 React 项目及启动

npx create-react-app my-flask-react-app
cd my-flask-react-app
# 替换 src/App.js 内容为上面代码
npm start

4. 访问说明

启动 Flask 后端监听 http://127.0.0.1:5000
启动 React 前端监听 http://localhost:3000
在前端输入名字，点击发送，调用 Flask API 并显示响应消息

5. 进一步建议

可增加后端数据库支持（SQLite、MySQL等）
使用 React Router 实现多页面
生产环境建议用 Nginx 做前后端代理
后端部署可用 Gunicorn + Docker
添加身份认证（JWT、OAuth2等）

明白！这里给你一个更详细的 Flask + React 项目骨架示范，包含数据库支持（SQLite）、简单用户数据存储与查询，帮你快速搭建带数据库的前后端分离应用。

Flask + React 全栈示范项目骨架（含数据库）

1. 后端 Flask （app.py）

from flask import Flask, request, jsonify
from flask_cors import CORS
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
CORS(app)

# SQLite 数据库配置
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
db = SQLAlchemy(app)

# 用户模型
class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(80), nullable=False)

# 初始化数据库（首次运行时）
@app.before_first_request
def create_tables():
    db.create_all()

@app.route('/api/users', methods=['POST'])
def add_user():
    data = request.get_json()
    name = data.get('name')
    if not name:
        return jsonify({'error': '名字不能为空'}), 400

    user = User(name=name)
    db.session.add(user)
    db.session.commit()
    return jsonify({'id': user.id, 'name': user.name}), 201

@app.route('/api/users', methods=['GET'])
def list_users():
    users = User.query.all()
    return jsonify([{'id': u.id, 'name': u.name} for u in users])

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

2. React 前端（src/App.js）

import React, { useState, useEffect } from 'react';

function App() {
  const [name, setName] = useState('');
  const [users, setUsers] = useState([]);
  const [error, setError] = useState('');

  // 获取用户列表
  useEffect(() => {
    fetch('http://127.0.0.1:5000/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  const addUser = async () => {
    setError('');
    if (!name.trim()) {
      setError('请输入名字');
      return;
    }

    const res = await fetch('http://127.0.0.1:5000/api/users', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ name }),
    });

    if (res.ok) {
      const user = await res.json();
      setUsers(prev => [...prev, user]);
      setName('');
    } else {
      const err = await res.json();
      setError(err.error || '添加失败');
    }
  };

  return (
    <div style={{ maxWidth: 500, margin: 'auto', padding: 20 }}>
      <h1>用户管理</h1>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="请输入名字"
        style={{ width: '100%', padding: 8, fontSize: 16 }}
      />
      <button onClick={addUser} style={{ marginTop: 10, padding: '8px 16px' }}>
        添加用户
      </button>
      {error && <p style={{ color: 'red' }}>{error}</p>}

      <h2 style={{ marginTop: 30 }}>用户列表</h2>
      <ul>
        {users.map(u => (
          <li key={u.id}>{u.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3. 运行步骤

安装后端依赖：

pip install flask flask-cors flask-sqlalchemy

运行后端：

python app.py

创建 React 项目并替换 src/App.js：

npx create-react-app myapp
cd myapp
# 替换 src/App.js 文件内容为上述 React 代码
npm start

4. 说明

前端输入用户名字，提交后调用 Flask API，存入 SQLite 数据库
页面自动拉取并展示所有用户
演示了前后端如何协同，数据库增删查功能骨架
你可以基于此扩展更多业务逻辑和功能

Python从0到100（四十）：Web开发简介-从前端到后端（文末免费送书）

Python从0到100（四十）：Web开发简介——从前端到后端（文末免费送书）

目录

1. Web开发的基本概念

2. 前端开发简介

3. 后端开发简介

4. 前后端如何协同工作

5. Python在Web开发中的作用

6. 免费资源与送书活动

Python Flask 入门示例

运行步骤

Flask前后端分离基础示例

1. Flask后端（app.py）

2. 前端HTML（index.html）

3. 运行说明

React + Flask 前后端分离示例

1. Flask 后端（app.py）

运行后端

2. React 前端（src/App.js）

3. 创建 React 项目及启动

4. 访问说明

5. 进一步建议

Flask + React 全栈示范项目骨架（含数据库）

1. 后端 Flask （app.py）

2. React 前端（src/App.js）

3. 运行步骤

4. 说明

lichongyang

发表回复取消回复

Latest posts

Text widget

Python从0到100（四十）：Web开发简介-从前端到后端（文末免费送书）

Python从0到100（四十）：Web开发简介——从前端到后端（文末免费送书）

目录

1. Web开发的基本概念

2. 前端开发简介

3. 后端开发简介

4. 前后端如何协同工作

5. Python在Web开发中的作用

6. 免费资源与送书活动

Python Flask 入门示例

运行步骤

Flask前后端分离基础示例

1. Flask后端（app.py）

2. 前端HTML（index.html）

3. 运行说明

React + Flask 前后端分离示例

1. Flask 后端（app.py）

运行后端

2. React 前端（src/App.js）

3. 创建 React 项目及启动

4. 访问说明

5. 进一步建议

Flask + React 全栈示范项目骨架（含数据库）

1. 后端 Flask （app.py）

2. React 前端（src/App.js）

3. 运行步骤

4. 说明

lichongyang

发表回复 取消回复

Latest posts

Text widget

发表回复取消回复