devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：菜鸟追梦旅行 | 2024-02-07 17:29:10

赞

踩

python web前后端

         一、准备工作

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

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

        需要安装好以下Python库。

  1. from flask import Flask, request, render_template, jsonify
  2. import pymysql

         二、开始

        2.1 与数据库的连接

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

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

        2.2 与前端的连接

        2.2.1 前端文件

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Data Entry</title>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             margin: 20px;
  11.         }
  12.  
  13.         input {
  14.             padding: 8px;
  15.             margin-right: 10px;
  16.         }
  17.  
  18.         button {
  19.             padding: 10px;
  20.             cursor: pointer;
  21.         }
  22.  
  23.         .modal {
  24.             display: none;
  25.             position: fixed;
  26.             top: 50%;
  27.             left: 50%;
  28.             transform: translate(-50%, -50%);
  29.             padding: 20px;
  30.             background-color: #fff;
  31.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  32.             z-index: 1000;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.  
  38.     <h2>Data Entry</h2>
  39.  
  40.     <label for="name">Name:</label>
  41.     <input type="text" id="name" placeholder="Enter name">
  42.  
  43.     <button onclick="addData()">Add Data</button>
  44.  
  45.     <!-- Modal for success message -->
  46.     <div id="successModal" class="modal">
  47.         <p>Data added successfully!</p>
  48.         <button onclick="closeModal()">OK</button>
  49.     </div>
  50.  
  51.     <script>
  52.         function addData() {
  53.             const name = document.getElementById('name').value;
  54.  
  55.             fetch('/api/add_data', {
  56.                 method: 'POST',
  57.                 headers: {
  58.                     'Content-Type': 'application/json',
  59.                 },
  60.                 body: JSON.stringify({ name }),
  61.             })
  62.             .then(response => response.json())
  63.             .then(data => {
  64.                 if (data.success) {
  65.                     openModal();
  66.                 } else {
  67.                     alert(data.message);
  68.                 }
  69.             })
  70.             .catch(error => {
  71.                 console.error('Error:', error);
  72.                 alert('An error occurred. Please try again.');
  73.             });
  74.         }
  75.  
  76.         function openModal() {
  77.             const modal = document.getElementById('successModal');
  78.             modal.style.display = 'block';
  79.         }
  80.  
  81.         function closeModal() {
  82.             const modal = document.getElementById('successModal');
  83.             modal.style.display = 'none';
  84.         }
  85.     </script>
  86.  
  87. </body>
  88. </html>
        2.2.2 后端处理请求

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

  1. app = Flask(__name__)
  2.  
  3. @app.route('/') # 根路由
  4. def index():
  5.     return render_template('BS.html')
  6.  
  7. @app.route('/api/add_data', methods=['POST'])
  8. def add_data():
  9.     try:
  10.         data = request.json
  11.         name = data.get('name')
  12.  
  13.         if name:
  14.             # 插入数据到数据库
  15.             with get_connection() as connection:
  16.                 with connection.cursor() as cursor:
  17.                     cursor.execute('INSERT INTO users (name) VALUES (%s)', (name,))
  18.                     connection.commit()
  19.  
  20.             return jsonify({'success': True, 'message': 'Data added successfully'})
  21.         else:
  22.             return jsonify({'success': False, 'message': 'Name is required'})
  23.     except Exception as e:
  24.         return jsonify({'success': False, 'message': str(e)})
  25.  
  26. if __name__ == '__main__':
  27.     app.run(debug=True)
        2.3 Python，启动！

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

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

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

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

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

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

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

         三、结语

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/66583
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号