devbox
正经夜光杯
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于Flask的自定义网站设计与实现（代码全文+讲解V1.0）_flask加载自定义网页

作者：正经夜光杯 | 2024-08-12 06:56:04

赞

踩

flask加载自定义网页

Flask 是一个用 Python 编写的轻量级 Web 应用框架。它基于 Werkzeug WSGI 工具包和 Jinja2 模板引擎，设计上强调简洁和可扩展性。对于python web方向的开发人员来说，这是一个必会的基本方法。

【注1】开源代码见文章末尾，项目效果见：

        域名还没搞好...，准确的是说一个下来好贵啊。能不能只卖域名和dns...

【注2】本次项目使用pycharm2023和python3.9进行开发（本地），相关解释器建议选择接近版本。如有疑问请评论区咨询，我若看见会在第一时间回复。

【注3】主要参考：

（1）Flask基本框架参考：Flask实现个人博客系统（附源码）_flask个人博客-CSDN博客

（2）服务器部署参考：新手如何使用腾讯云服务器部署Flask项目_腾讯云服务器部署flask项目csrf防御-CSDN博客

后续版本更新超链接：

【更新中，尽情期待！】

0.  项目介绍

本项目使用flask设计了一个深度学习项目平台，用来实现一个展示各种关于python（主要是深度学习方向）的毕设（课设/项目等）。 本项目借鉴于开源博客项目，由于项目具体需求，对部分代码进行了修改。按照二次开发原则，同样开源在csdn和GitHub中。由于本项目纯属自娱自乐，故不定期更新...(当然在首次更新时会有一个较为完整的东西，后续更新见版本号或其它博客)

最新版项目首页展示

1.  从零开始建立项目

与以往的python深度学习项目不同，在pycharm中提供了flask的基本框架，因此选择项目模板进行建立。（这样会自动安装好一些基本的包）

图1  创建项目

 在自动生成之后，一般会得到static用于存放静态文件、templates用于放置html静态模板、和一个运行程序app。在本章中，我们首先对这三个做一个基本的编写，来实现一个简易的网页。

1.1  简易前端设计

首先，在templates文件中创建一个base.html。这个文件是编写页面大致的框架，其他模块直接继承使用即可。这部分保留了开源老哥的原始代码，增加了一些注释。但是如果你是直接运行这个文件。你会发现在网页端是一个排版较为混乱的情况，这是因为没有配置相应的css和javaScript文件。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <!--头部信息，确保显示所有字符 -->
  5. <head>
  6.     <meta charset="UTF-8">
  7.  
  8.     <!--声明一个块，允许子模板覆盖该块的内容，以便不同页面可以设置不同的标题。 -->
  9.     <title>
  10.     {% block title %}
  11.         {# 其他页面可以重写标题 #}
  12.     {% endblock %}
  13.     </title>
  14.  
  15.     <!--引入外部CSS文件和JavaScript文件，用于页面样式和交互效果。-->
  16.     <link rel="stylesheet" href="/static/Navigation_bar/css/layui.css">
  17.     <link rel="stylesheet" href="/static/css/base.css">
  18.     <script src="/static/js/jquery.js"></script>
  19.     <script src="/static/Navigation_bar/layui.js"></script>
  20.  
  21.     <!--声明一个CSS块，子模板可以添加额外的CSS样式。-->
  22.     {% block css %}
  23.     {% endblock %}
  24. </head>
  25.  
  26. <!-- 主体部分，包括一个背景元素和一个导航栏-->
  27. <body>
  28. <div id="bg"></div>
  29. <ul class="layui-nav" lay-filter="">
  30.  
  31.     <!--导航栏部分,导航栏包含多个链接，根据用户是否登录显示不同的内容-->
  32.     <li class="layui-nav-item"><a href="/">在线博客平台</a></li>
  33.     {% if username %}
  34.         <li class="layui-nav-item{% block updatepwd_class %}{% endblock %}"><a href="/updatePwd">修改密码</a></li>
  35.     {% endif %}
  36.     <li class="layui-nav-item{% block blog_class %}{% endblock %}"><a href="/blog/blogAll">博客</a></li>
  37.     <li class="layui-nav-item{% block about_class %}{% endblock %}"><a href="/about">关于</a></li>
  38.  
  39.     <!--如果用户已登录，显示用户菜单和写博客的选项；如果未登录，显示注册和登录选项-->
  40.     {% if username %}
  41.         <li class="layui-nav-item" style="float: right; margin-right: 30px;">
  42.             <a href="javascript:;">{{ name }}</a>
  43.             <dl class="layui-nav-child">
  44.                 <dd><a href="/blog/myBlog">我的博客</a></dd>
  45.                 <dd><a href="/blog/myComment">我的评论</a></dd>
  46.                 <dd><a href="/logout">注销</a></dd>
  47.             </dl>
  48.         </li>
  49.         <li class="layui-nav-item{% block write_class %}{% endblock %}" style="float: right"><a href="/blog/writeBlog">写博客</a></li>
  50.     {% else %}
  51.         <li class="layui-nav-item{% block register_class %}{% endblock %}" style="float: right"><a href="/register">注册</a></li>
  52.         <li class="layui-nav-item{% block login_class %}{% endblock %}" style="float: right"><a href="/login">登录</a></li>
  53.     {% endif %}
  54. </ul>
  55.  
  56. <div class="content">
  57.     {% block content %}
  58.         {# 其他页面内容 #}
  59.     {% endblock %}
  60. </div>
  61.  
  62. <script>
  63. layui.use('element', function(){
  64.     var element = layui.element;
  65. });
  66. </script>
  67. </body>
  68. </html>

【注4】项目中所提供的jquery.js。这个文件是一个固定格式的库文件，是由 jQuery 项目团队编写和维护的。jQuery 是一个广泛使用的开源 JavaScript 库，其目的是简化 HTML 文档遍历、事件处理、动画以及 Ajax 交互。

1.2  简易flask运行

一个简易的flask界面运行，只需要：

  1. 用当前脚本名称实例化Flask对象。
  2. 创建一个url请求地址到python运行函数的一个映射。
  1. from flask import Flask, render_template
  2.  
  3. # 用当前脚本名称实例化Flask对象，方便flask从该脚本文件中获取需要的内容
  4. app = Flask(__name__)
  5.  
  6.  
  7. # 程序实例需要知道每个url请求所对应的运行代码是谁,所以程序中必须要创建一个url请求地址到python运行函数的一个映射。
  8. @app.route('/')
  9. def home():
  10.     return render_template('base.html')
  11.  
  12.  
  13. if __name__ == '__main__':
  14.     app.run(debug=True)
图2  简易flask平台

1.3  网站部署

1.3.1  服务器搭建

现有的服务器有很多，建议使用阿里或者腾讯的服务器，有学生优惠。本篇文章将基于腾讯服务器展示。

图3  腾讯服务器

上传项目，点击图3的登录按钮，使用如下图4所示的按钮上传项目：

图4  Linux服务器上传

1.3.2  服务器环境配置

查看python版本：

  1. which python
  2. python3 --version

【注5】一般来说，腾讯云服务器中的python3 版本是3.6.8 

安装Flask：

pip3 install flask --user

1.3.3  项目微调与部署

首先我们要进入文件管理器中修改，app.py文件。如下图所示，点击文件管理器的app.py那一栏就可进入编辑。

图5  修改app.py文件

修改端口后，运行程序：

  1. export PYTHONPATH=$PYTHONPATH:/home/lighthouse/.local/lib/python3.6/site-packages
  2. python3 ./DLM_test/app.py
图6  运行后部分截图

到这一步，输入你的公网网址加端口就可以进入网站了。

2.  登录、注册与注销功能

在讲述登录与注册功能之前，要引入一个关于蓝图（Blueprint）的概念。 蓝图是一种组织 Flask 应用程序的方式，它允许你将应用程序分成模块化的组件。这对于管理大型应用程序非常有用，因为你可以将应用分成更小、更可复用的部分。其实也就是在常规项目中，将可重复使用的函数都分类迁移到其它文件中，方便进行不同模块的修改。

具体来说，首先在原始目录下创建一个view文件夹用于存放蓝图文件，之后修改app.py文件如下所示：

  1. from flask import Flask, render_template
  2. from view.main import *
  3.  
  4. # 用当前脚本名称实例化Flask对象，方便flask从该脚本文件中获取需要的内容
  5. app = Flask(__name__)
  6.  
  7. # 注册蓝图
  8. app.register_blueprint(index)
  9.  
  10.  
  11. if __name__ == '__main__':
  12.     app.run(debug=True)

这个代码运行之后就是图2的结果，可以看出在主函数中进行了精简。本章将在这个main文件中继续定义登录和注册函数。

2.1  登录设计

2.1.1  登录窗口设计

登录窗口的设计基于login.html文件和register.css文件，原始代码在开源代码的基础上进行修改，以下是这部分的修改（登录框透明度和字体）。

  1. .register{
  2.     width: 440px; /* 设置元素的宽度为 440 像素 */
  3.     padding: 20px; /* 设置元素内部的填充（内边距）为 20 像素 */
  4.     margin: 20vh auto; /* 上下外边距为视口高度的 20%，左右外边距自动（使元素水平居中） */
  5.     /*background: white; !* 设置元素的背景颜色为白色 *!*/
  6.     border-radius: 15px; /* 设置元素的边框圆角半径为 15 像素，使边框圆滑 */
  7.     box-shadow: -2px -2px 25px #fff; /* 设置元素的盒子阴影，向左上方偏移 2 像素，模糊半径为 25 像素，阴影颜色为白色 */
  8.     background-color: rgba(255, 255, 255, 0.8); /* 设置透明度为0.8 */
  9.     /*padding: 20px;*/
  10.     /*border-radius: 10px; !* 添加圆角效果，可选 *!*/
  11.     /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); !* 添加阴影效果，可选 *!*/
  12. }
  13.  
  14. .register h1 {
  15.     font-size: 2em; /* 设置标题字体大小 */
  16. }
  17.  
  18. .register .layui-form-label {
  19.     font-size: 1.2em; /* 设置标签字体大小 */
  20. }
  21.  
  22. .register .layui-input {
  23.     font-size: 1.2em; /* 设置输入框字体大小 */
  24. }
  25.  
  26. .register .layui-btn {
  27.     font-size: 1.2em; /* 设置按钮字体大小 */
  28. }
  29. .tip{
  30.     font-size:16px;
  31.     color: red;
  32.     text-align: center;
  33.     margin: 10px;
  34.     margin-top: -10px;
  35. }
  36. .layui-form-item {
  37.     padding-right: 60px;
  38.     margin-bottom: 30px;
  39. }
  40. h1{
  41.     position: relative;
  42.     text-align: center;
  43.     top: -40px;
  44.     /*font-size: 2em; !* 设置标题字体大小 *!*/
  45. }

运行改界面的效果图如下图7所示：

图7  登录页面可视化

2.1.2  链接数据库

在上述的介绍种，我们完成了html的设计和编写。但是对于一个登录功能来说，它必须要链接数据库才可行。本次使用的是mysql数据库，在此节中已本地数据库为例。在下面代码中，实现了一个从网页获取登录名和密码的操作，并使用判断语句进行判断，如果判别成功将会进入到登录后的账号模式。

  1. # 登录请求
  2. @index.route('/login', methods=['POST', 'GET'])
  3. def login():
  4.     # 如果请求方法是 GET，函数会渲染并返回 login.html 模板页面，通常用于显示登录表单。
  5.     if request.method == 'GET':
  6.         return render_template('login.html')
  7.  
  8.     # 如果请求方法是 POST，函数会从表单数据中获取 username 和 password。
  9.     if request.method == 'POST':
  10.         username = request.form.get('username')
  11.         password = request.form.get('password')
  12.  
  13.         user = User.query.filter(User.username == username).first();
  14.  
  15.         if (user is not None) and (check_password_hash(user.password, password)):
  16.             session['username'] = user.username
  17.             session.permanent = True
  18.             # 正确登录后的界面
  19.             return redirect(url_for('index.home'))
  20.         else:
  21.             flash("账号或密码错误")
  22.             return render_template('login.html');

在模板作者的原文中，给出了User函数这一定义。通过使用此函数来进行数据库的初始构建，下面是其实现代码：

  1. from app import app
  2. from flask_sqlalchemy import SQLAlchemy
  3. from werkzeug.security import generate_password_hash
  4.  
  5. # 实例化
  6. db = SQLAlchemy(app);
  7.  
  8.  
  9. class User(db.Model):
  10.     # 设置表名
  11.     __tablename__ = 'blog_login_user';
  12.     # id，主键并自动递增
  13.     id = db.Column(db.Integer, primary_key=True, autoincrement=True)
  14.     username = db.Column(db.String(64), unique=True)
  15.     password = db.Column(db.String(256), nullable=True)
  16.     name = db.Column(db.String(64))
  17.  
  18.     # 设置只可写入，对密码进行加密
  19.     def password_hash(self, password):
  20.         self.password = generate_password_hash(password);

【注5】这里的表名是你自己的数据库。

2.1.3  权限增加

与博客不同，本项目只给“管理员”开放编写项目的权限。因此在前后端需要增加对应的筛选语句，首先在前端方面，在原始的“写博客”/“项目发布”出增加一个session判断语句：

  1.         <!--发布权限 -->
  2.         {% if session['is_special_user'] %}
  3.             <li class="layui-nav-item{% block write_class %}{% endblock %}" style="float: right"><a href="/blog/writeBlog">项目发布</a></li>
  4.         {% endif %}

其次，分别修改User函数和login函数：

  1.         if (user is not None) and (check_password_hash(user.password, password)):
  2.             session['username'] = user.username
  3.             session['is_special_user'] = user.is_special_user  # 将权限信息存储到会话中，这里对于非管理员的其它用户不给予发布项目的权力。
  4.             session.permanent = True
  5.             # 正确登录后的界面
  6.             return redirect(url_for('index.home'))

对于User函数，除了进行如下的修改之外，还需要在mysql中更新数据表： 

  1. class User(db.Model):
  2.     # 设置表名
  3.     __tablename__ = 'blog_login_user';
  4.     # id，主键并自动递增
  5.     id = db.Column(db.Integer, primary_key=True, autoincrement=True)
  6.     username = db.Column(db.String(64), unique=True)
  7.     password = db.Column(db.String(256), nullable=True)
  8.     name = db.Column(db.String(64))
  9.     # 权限字段
  10.     is_special_user = db.Column(db.Boolean, default=False)
  11.  
  12.     # 设置只可写入，对密码进行加密
  13.     def password_hash(self, password):
  14.         self.password = generate_password_hash(password);

也就是手动添加权限：

UPDATE blog_login_user SET is_special_user = TRUE WHERE username = '具有权限的用户名';

对于更新后的数据表，可以参照下图所示，其中1代表具有发布权限的账号：
 

图8  权限更新可视化

2.2  注册设计

注册代码没有什么更新的，在上述完成权限分类后，会自动默认之后注册的都没有使用项目发布的权限。如果后续想要小范围增加权限，只需在MySQL中更新即可。

  1. @index.route('/register', methods=['POST', 'GET'])
  2. def register():
  3.     if request.method == 'GET':
  4.         return render_template('register.html')
  5.     if request.method == 'POST':
  6.         name = request.form.get('name')
  7.         username = request.form.get('username')
  8.         password = request.form.get('password')
  9.         user = User.query.filter(User.username == username).first();
  10.         if user is not None:
  11.             flash("该用户名已存在")
  12.             return render_template('register.html')
  13.         else:
  14.             user = User(username=username, name=name)
  15.             # 调用password_hash对密码加密
  16.             user.password_hash(password)
  17.             db.session.add(user)
  18.             db.session.commit();
  19.             flash("注册成功！")
  20.             return render_template('register.html')

2.3  注销（登出）设计

同样的，直接使用原有的登出部分：

  1. # 退出账号，如果不退出的话，在这个浏览器中会保存
  2. @index.route('/logout')
  3. def logout():
  4.     session.clear()
  5.     return redirect(url_for('index.home'))

2.4  服务器更新

在更新上述代码后，在服务器上直接运行：

python3 ./DLM_test/app.py

会报如下图所示的错误：

图9  服务器端报错

这里是循环的问题，有的时候在本地体现不出来，可以参照下述代码对app.py和database.py文件进行修改：

  1. from flask import *
  2.  
  3. from database import config
  4.  
  5. # 用当前脚本名称实例化Flask对象，方便flask从该脚本文件中获取需要的内容
  6. app = Flask(__name__)
  7. app.config.from_object(config)
  8. app.secret_key = "flaskblog"
  9.  
  10. from database.database import init_db
  11. # 初始化数据库
  12. init_db(app)
  13.  
  14.  
  15. # 注册蓝图，为了打破循环，必须在这里进行导包
  16. def register_blueprints(app):
  17.     from view.main import index
  18.     from view.blog import blog
  19.     app.register_blueprint(index)
  20.     app.register_blueprint(blog)
  21.  
  22.  
  23. register_blueprints(app)
  24.  
  25. # from database.database import *
  26. from database.database import User
  27.  
  28. # 后续一样
  1. from flask_sqlalchemy import SQLAlchemy
  2. from werkzeug.security import generate_password_hash
  3. # from app import app
  4.  
  5. # 实例化
  6. db = SQLAlchemy();
  7.  
  8.  
  9. def init_db(app):
  10.     db.init_app(app)
  11.  
  12.  
  13. class User(db.Model):
  14.     # 设置表名
  15.     __tablename__ = 'blog_login_user';
  16.     # id，主键并自动递增
  17.     id = db.Column(db.Integer, primary_key=True, autoincrement=True)
  18.     username = db.Column(db.String(64), unique=True)
  19.     password = db.Column(db.String(256), nullable=True)
  20.     name = db.Column(db.String(64))
  21.     # 权限字段
  22.     is_special_user = db.Column(db.Boolean, default=False)
  23.  
  24.     # 设置只可写入，对密码进行加密
  25.     def password_hash(self, password):
  26.         self.password = generate_password_hash(password);

2.4.1  在服务器上配置mysql

一般来说，在初始的腾讯云服务器中是没有mysql的，那么你就需要自己配置一个。输入下面的安装语句：

  1. # 安装仓库
  2. sudo yum install mysql
  3.  
  4. # 安装服务器
  5. sudo yum install mysql-server

在连续点击两个y之后，使用如下语句进行激活mysql，并使用第三个语句进行测试。

  1. sudo systemctl start mysqld
  2.  
  3. sudo systemctl enable mysqld
  4.  
  5. sudo systemctl status mysqld

 正常运行的样子应该如下图10所示：

图10  服务器mysql状态

在了解mysql状态被激活之后，现在开始尝试在服务器中登录，正确登录可以得到如下11所示的图。

mysql -u root

图11 正确登录mysql

后面就比较简单了，直接复制上述的数据库建立表就可以。

【注6】 这里在服务器上有个脑壳痛的问题，那就是python3.6所对应的哈希表加密没有script的，所以你最好手动修改管理员的密码，使用database中的测试文件。至于常规用户的注册等则无需修改，在服务器生成的里面注册就行。

3.  功能设计与实现

3.1  项目发布相关

项目发布部分则是完全借用的flask开源博客框架部分，只不过在界面上改了一个名字。有所区别的是，在使用2.1.3的权限增加后，只有管理员用户才可以使用此功能。这里就不作累述，如果后续有更新此部分，将展示更新后的代码。

【此部分，后续持续更新中...】

3.2  用户使用相关（基于框架的新增与删减）

对于用户的使用部分，我们将页面修改为这个样子：

图12  用户界面V1.0

 首页、项目一栏不用多说。就是展示界面和查看已经发布的项目，在这里主要对个人中心加以描述。在V1.0版本中，这里包括着个人常规信息和修改密码等功能。

这里主要增加两个部分，一个是在html中增加下面的代码：

  1. {% extends "base.html" %}
  2. {% block title %}个人中心{% endblock %}
  3. {% block content %}
  4. <div class="user-info" style="margin-top: 50px;">
  5.     <form class="layui-form" action="/blog/update_myself" method="post" enctype="multipart/form-data">
  6.         <div class="layui-form-item">
  7.             <div class="layui-input-block" style="text-align: center;">
  8.                 {% if user.photo %}
  9.                     <img src="{{ url_for('static', filename=user.photo) }}" alt="用户头像" style="max-width: 150px; border-radius: 50%;" id="user-avatar">
  10.                 {% else %}
  11.                     <img src="{{ url_for('static', filename='./img/boy_first.png') }}" alt="默认头像" style="max-width: 150px; border-radius: 50%;" id="user-avatar">
  12.                 {% endif %}
  13.                 <input type="file" name="photo" class="layui-input" style="display: none;" id="photo-input">
  14.             </div>
  15.         </div>
  16.         <div class="layui-form-item" style="text-align: left;">
  17.             <label class="layui-form-label" style="text-align: left;">用户昵称</label>
  18.             <div class="layui-input-block" style="margin-left: 110px;">
  19.                 <input type="text" name="name" required lay-verify="required" placeholder="请输入昵称:" class="layui-input" value="{{ user.nickname }}" readonly>
  20.             </div>
  21.         </div>
  22.         <div class="layui-form-item" style="text-align: left;">
  23.             <label class="layui-form-label" style="text-align: left;">登录名</label>
  24.             <div class="layui-input-block" style="margin-left: 110px;">
  25.                 <input type="text" name="username" required lay-verify="required" class="layui-input" value="{{ user.username }}" readonly>
  26.             </div>
  27.         </div>
  28.         <div class="layui-form-item" style="text-align: left;">
  29.             <label class="layui-form-label" style="text-align: left;">密码</label>
  30.             <div class="layui-input-block" style="margin-left: 110px;">
  31.                 <input type="password" name="password" placeholder="请输入新密码:" class="layui-input" readonly>
  32.             </div>
  33.         </div>
  34.         <div class="layui-form-item">
  35.             <div class="layui-input-block">
  36.                 <button type="button" class="layui-btn" id="edit-btn">修改</button>
  37.                 <button type="submit" class="layui-btn" id="save-btn" style="display: none;">保存</button>
  38.                 <button type="button" class="layui-btn layui-btn-primary" id="cancel-btn" style="display: none;">取消</button>
  39.             </div>
  40.         </div>
  41.     </form>
  42. </div>
  43.  
  44. <script>
  45. document.getElementById('edit-btn').addEventListener('click', function() {
  46.     var inputs = document.querySelectorAll('input[name="name"], input[name="password"]');
  47.     inputs.forEach(function(input) {
  48.         input.removeAttribute('readonly');
  49.     });
  50.     document.getElementById('user-avatar').addEventListener('click', function() {
  51.         document.getElementById('photo-input').click();
  52.     });
  53.     document.getElementById('edit-btn').style.display = 'none';
  54.     document.getElementById('save-btn').style.display = 'inline-block';
  55.     document.getElementById('cancel-btn').style.display = 'inline-block';
  56. });
  57.  
  58. document.getElementById('cancel-btn').addEventListener('click', function() {
  59.     var inputs = document.querySelectorAll('input[name="name"], input[name="password"]');
  60.     inputs.forEach(function(input) {
  61.         input.setAttribute('readonly', 'readonly');
  62.         input.value = input.defaultValue; // 还原初始值
  63.     });
  64.     document.getElementById('photo-input').style.display = 'none';
  65.     document.getElementById('edit-btn').style.display = 'inline-block';
  66.     document.getElementById('save-btn').style.display = 'none';
  67.     document.getElementById('cancel-btn').style.display = 'none';
  68. });
  69. </script>
  70. {% endblock %}

另一个是在blog文件中增加如下部分，当然，你也可以选择单开一个蓝图。

  1. # 个人中心页面
  2. @blog.route('/myself')
  3. @login_limit
  4. def myself():
  5.     username = session.get("username")
  6.     user = User.query.filter(User.username == username).first()
  7.     # user = get_user_info(username)
  8.     return render_template("myself.html", user=user)
  9.  
  10.  
  11. # 用户信息更新
  12. @blog.route('/update_myself', methods=['POST'])
  13. @login_limit
  14. def update_myself():
  15.     username = session.get("username")
  16.     name = request.form.get("name")
  17.     password = request.form.get("password")
  18.     photo = request.files.get("photo")
  19.  
  20.     user_data = {"name": name}
  21.     if password:
  22.         user_data["password"] = generate_password_hash(password)
  23.     if photo:
  24.         photo_path = f'static/uploads/{username}_photo.jpg'
  25.         photo.save(photo_path)
  26.         user_data["photo"] = photo_path
  27.  
  28.     update_user_info(username, user_data)
  29.     return redirect(url_for('blog.myself'))
  30.  
  31.  
  32. def update_user_info(username, user_data):
  33.     user = User.query.filter(User.username == username).first()
  34.     if user:
  35.         if "name" in user_data:
  36.             user.name = user_data["name"]
  37.             # print(user.name)
  38.         if "password" in user_data:
  39.             user.password = user_data["password"]
  40.         # 更换头像的功能在本版本还未更新！
  41.         # if "photo" in user_data:
  42.         #     user.photo = user_data["photo"]
  43.         db.session.commit()

 效果图如下所示：

3.3  服务器更新

3.1.1  服务器端项目发布BUG

（1）图片上传失败

图xx  服务器端图片上传失败

这里有两个需要修改的地方，一个是将上传函数修改为如下所示的：

  1. # 上传图片
  2. @blog.route('/imgUpload', methods=['POST'])
  3. @login_limit
  4. def imgUpload():
  5.     try:
  6.         file = request.files.get('editormd-image-file');
  7.         fname = secure_filename(file.filename);
  8.         ext = fname.rsplit('.')[-1];
  9.  
  10.         # 生成一个uuid作为文件名
  11.         fileName = str(uuid.uuid4()) + "." + ext;
  12.         filePath = os.path.join("/home/lighthouse/DLM_TEST/static/uploadImg/", fileName);
  13.         file.save(filePath)
  14.  
  15.         return {
  16.             'success': 1,
  17.             'message': '上传成功!',
  18.             'url': url_for('static', filename='uploadImg/' + fileName)  # 返回相对路径
  19.         }
  20.     except Exception as e:
  21.         logging.error(f"上传失败: {e}", exc_info=True)  # 记录详细的错误信息
  22.         return {
  23.             'success': 0,
  24.             'message': '上传失败'
  25.         }

另一个是将url改为服务器的网址，不然图片上传成果了也显示不出来。 

4.  项目地址

本项目全部开源，地址为：damoshishen/Deep_Learning_Mall (github.com) 该地址持续更新，同时扩展部分也会持续更新。

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/968229
推荐阅读
相关标签

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

  

闽ICP备14008679号