使用python进行前后端分离的web开发

꧁是小阿狸꧂

已于 2023-12-19 23:04:52 修改

阅读量2.5k

点赞数 29

文章标签：前端 python flask 后端

于 2023-12-19 23:03:44 首次发布

本文链接：https://blog.csdn.net/weixin_63816885/article/details/135089206

版权

一、准备工作

需要掌握Python的基本语法，数据库的基本语法，然后就是比较难得部分，需要掌握后端框架（例如：Flask、Django），前端开发的三剑客（HTML、CSS、JavaScript）的基础知识，然后就是最重要的部分，就是前后端分离时异步发送请求的方法（例如：xmlhtmlrequest、fetch），以及使用Python代码连接数据库的操作，这一部分是有点难理解的。

本文例子使用flask后端框架，使用fetch来进行异步处理请求，使用pymysql库来连接MySQL数据库。

需要安装好以下Python库。

from flask import Flask, request, render_template, jsonify
import pymysql

二、开始

2.1 与数据库的连接

我们需要知道我们数据库的一些数据，如果你修改过，你需要去数据库中查询。

# 连接数据库
db_config ={
    'host':'your_host',      # 数据库主机地址
    'user':'your_username',  # 数据库用户名
    'password':'your_password',  # 数据库密码
    'database':'your_database',  # 数据库名称
    'charset':'utf8mb4',      # 字符集，根据实际需要修改
    'cursorclass':pymysql.cursors.DictCursor  # 返回字典形式的游标
}
def get_connection():
    return pymysql.connect(**db_config)

2.2 与前端的连接

2.2.1 前端文件

我写了一个简单的前端文件，将css和js代码都写到一个html文本里了，简单的加了一些配置。然后就是使用fetch来进行异步申请。xmlhtmlrequest是比较老的异步申请的方法，fetch是比较新的方法，因此选择了fetch来处理申请。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Entry</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        input {
            padding: 8px;
            margin-right: 10px;
        }

        button {
            padding: 10px;
            cursor: pointer;
        }

        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
    </style>
</head>
<body>

    <h2>Data Entry</h2>

    <label for="name">Name:</label>
    <input type="text" id="name" placeholder="Enter name">

    <button onclick="addData()">Add Data</button>

    <!-- Modal for success message -->
    <div id="successModal" class="modal">
        <p>Data added successfully!</p>
        <button onclick="closeModal()">OK</button>
    </div>

    <script>
        function addData() {
            const name = document.getElementById('name').value;

            fetch('/api/add_data', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ name }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    openModal();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred. Please try again.');
            });
        }

        function openModal() {
            const modal = document.getElementById('successModal');
            modal.style.display = 'block';
        }

        function closeModal() {
            const modal = document.getElementById('successModal');
            modal.style.display = 'none';
        }
    </script>

</body>
</html>

2.2.2 后端处理请求

首先需要实例化一个对象，然后需要创造与前端文件相对应的URL和请求方式（常见的请求方式有POST、GET方法，其他方法请自行了解，诶嘿）。我这个是从前端添加数据，将数据传输到后端，然后由后端再添加到数据库中，进行异常捕捉以及开启调试以便出现问题及时改正。

app = Flask(__name__)

@app.route('/') # 根路由
def index():
    return render_template('BS.html')

@app.route('/api/add_data', methods=['POST'])
def add_data():
    try:
        data = request.json
        name = data.get('name')

        if name:
            # 插入数据到数据库
            with get_connection() as connection:
                with connection.cursor() as cursor:
                    cursor.execute('INSERT INTO users (name) VALUES (%s)', (name,))
                    connection.commit()

            return jsonify({'success': True, 'message': 'Data added successfully'})
        else:
            return jsonify({'success': False, 'message': 'Name is required'})
    except Exception as e:
        return jsonify({'success': False, 'message': str(e)})

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

2.3 Python，启动！

我是在Pycharm专业版中执行程序，专业版可以自动创建flask项目，如果你用的是pycharm社区版也不要气馁。专业版只是帮忙自动创建了两个文件夹（static和templates）而已，社区版只需要手动创建这两个文件。然后就是将你的css、js文件等其他的存放在static文件夹里（社区版好像创建不了css和js文件，可以都写到html文件里，专业版可以写一起也可以不写一起），html文件放在templates文件夹里，你的flask.py文件需要跟这两个文件夹是同级的，这样程序执行时会自动去寻找资源。

下述图片就是启动成功的字样。

然后图片中的网址是可以点进去的，它是个默认网址，可以修改后面的端口号，一般不建议改，你这里修改了，前端文件里可能也需要修改。

下图就是我的界面，我的功能就是个简单的将名字添加到数据库里。

现在我的数据库里面是什么都没有的。

然后我在网页端输入了名字123后，就会添加到数据库中。

到现在就基本上大功告成了。然后你自己有什么需求就具体修改咯。

三、结语

我是写了一个简单的例子，重点是前后端的分离操作和异步申请方式以及数据库的连接，数据库的连接还好一点，异步申请这一块是有点难搞的，需要细究一些。

祝愿我们在前进的道路上能够越来越优秀，加油哦ヾ(◍°∇°◍)ﾉﾞ

꧁是小阿狸꧂

关注

29
点赞
踩
53

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用python进行前后端分离的web开发

我是写了一个简单的例子，重点是前后端的分离操作和异步申请方式以及数据库的连接，数据库的连接还好一点，异步申请这一块是有点难搞的，需要细究一些。祝愿我们在前进的道路上能够越来越优秀，加油哦ヾ(◍°∇°◍)ﾉﾞ。
复制链接

扫一扫