HTML+CSS+Javascript+Flask实现前后端交互计算器

已于 2023-10-22 11:31:41 修改
阅读量756 收藏 8
点赞数 3
文章标签： html css javascript
于 2023-10-22 10:16:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78936942/article/details/133968718
版权

目录

这个作业属于哪个课程软件工程
这个作业要求在哪里作业要求
这个作业的目标实现前后端交互式科学计算器和利率计算器

作业描述

科学计算器功能要求

功能1： 实现加减乘除、取余、括号运算，确保运算顺序正确，计算结果正确，并将输入的表达式和结果存储到后端数据库中。

功能2： 提供清零和回退功能，以便用户可以方便地编辑输入的表达式。

功能3： 实现非法输入的检测与提示，确保用户输入的表达式符合数学运算规则。

功能4： 提供一个 “ans” 按钮，允许用户返回上一个计算结果。同时，显示历史记录，其中包括最后十个输入的表达式和相应的计算结果。历史记录应该从后端数据库中读取，不应使用缓存。

附加功能1： 支持计算根号、三角函数、log、科学计数法、微积分等附加功能，以提供更多数学计算选项。

附加功能2： 设计一个页面原型，包括用户界面和交互元素。

附加功能3： 项目部署。

利率计算器功能要求

功能1： 实现利率计算器，其中利率表被存储在数据库中。通过两个输入框，分别从前端读取用户的输入数据，进行计算并返回结果。输入为：

  • 存款/贷款金额
  • 存款/贷款时长（单位：年）

输出计算后的存款或贷款利息。在计算利率时，必须从数据库获取相应的利率，而不能在前端的某个变量中存储这个利率表。

数据库存储的利率表如下图所示：

  • 存款利率

    活期存款0.5
    整存整取定期存款-
    三个月2.85
    半年3.05
    一年3.25
    二年4.15
    三年4.75
    五年5.25

  • 贷款利率

    各项贷款-
    六个月5.85
    一年6.31
    一至三年6.40
    三至五年6.65
    五年6.80

扩展功能： 在前端页面中对相应的信息进行修改，实现对数据库表中数值的更新操作。输入需符合以下要求：

  • 存款/贷款
  • 时长（单位：年）
  • 修改后的利率

最终在数据库的表中相应位置的数据更新。

Gitcode仓库地址

gitcode代码

PSP表格

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划53
• Estimate• 估计这个任务需要多少时间53
Development开发13402020
• Analysis• 需求分析 (包括学习新技术）120200
• Design Spec• 生成设计文档2015
• Design Review• 设计复审1510
• Coding Standard• 代码规范 (为目前的开发制定合适的规范)1510
• Design• 具体设计3045
• Coding• 具体编码9001560
• Code Review• 代码复审6060
• Test• 测试（自我测试，修改代码，提交修改）180120
Reporting报告3040
• Test Repor• 测试报告1015
• Size Measurement• 计算工作量1010
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划1015
合计13752063

成品功能展示

科学计算器

1. 加减乘除
请添加图片描述
2.取余
请添加图片描述
3.括号运算
请添加图片描述
4.清零和回退
请添加图片描述
5.非法输入的检测和提示
设置多种非法输入的提示，在处理“++”，“/0"等错误表达式上方会有弹窗弹出报错，详细能够检测的错误表达式可以看我第一次作业的博客。
请添加图片描述
6.显示历史记录
数据库可视化软件选择Navicat，后面有同学和我说了更好用的数据库可视化软件，如果下次有机会尝试一下。
请添加图片描述
7.三角函数
请添加图片描述
8.log和ln
请添加图片描述
9.e和π
请添加图片描述
10. xy和x2
请添加图片描述

科学计算器和利率计算器的切换

在右下角设置了切换按钮，有一个小小的动画效果，点击即可切换。
请添加图片描述

利率计算器

1. 活期存款利息计算
请添加图片描述
2. 定期存款利息计算
请添加图片描述
3. 活期存款信息修改
请添加图片描述
4. 定期存款信息修改
请添加图片描述
5.贷款利息计算
请添加图片描述
6.贷款信息修改
请添加图片描述
7.不同功能的切换
下述视频的功能页面顺序为存款利息计算，存款信息修改，贷款利息计算，贷款信息修改。顶部三个按钮中灰色按钮代表该界面实现的是相对应的功能。
请添加图片描述

设计实现过程

设计原型图

原型图在第一次作业的UI界面的基础上进行了一些优化和改进，仍然采用粉色为主题色。添加了跳转按钮，分别放置在两个页面的左下角和右下角，营造一种翻页的感觉。在设计利率计算器时，一开始可能因为时间紧迫，急于实现功能，而没有充分考虑美观性。最后发现这种选择是明智的，作业差点来不及完成。


科学计算器界面图

存款利息计算功能界面图

存款信息修改功能界面图

贷款利息计算功能界面图

贷款信息修改界面图

用HTML+CSS+JavaScript实现前端

相对于上次使用的Qt，这次选择的工具好用了一万倍！唯一的不足之处在于需要花更多时间去学习，而Qt可以直接在可视化界面上进行设计，然后导出代码，非常适合零基础的用户。然而在实际使用过程中，Qt的操作却相当繁琐。鉴于这次项目要求前后端交互，我决定使用HTML、CSS和JavaScript作为实现工具，根据原型图先实现静态界面，这样做的好处是能够更灵活地控制界面的设计和交互效果。在实现计算器功能之后，对前端进行了进一步的美化，将一些按钮添加动画效果，增加交互性。
1. 鼠标放在科学计算器的按钮上，按钮会变成灰色
请添加图片描述
2.计算机转换按钮添加小动画
请添加图片描述
请添加图片描述
3.利率计算器“活期存款”“定期存款”“清空”等按钮鼠标在上面悬空按钮会浮动请添加图片描述

用python的flask框架实现前后端交互

因为在第一次作业中使用Python，并且知道自己还没有能力从头开始使用全新的语言和框架，所以这次我仍然选择Python作为开发语言，并且决定使用Flask框架。Flask是一个轻量级的微框架，它提供了基本的功能，但不会强加过多的复杂性。这使得它非常容易学习和上手，特别适合新手开发者。因此，我决定使用Flask框架并借助fetch实现前后端之间的交互。

代码说明

全部代码有点冗长，如果感兴趣的话可以通过我的gitcode链接查看完整代码。

fetch实现前后端的链接

fetch是JavaScript提供的用于在浏览器中发送网络请求的API。它可以向后端服务器发送HTTP请求并接收响应，从而实现前后端的通信。如：

function calculateResult() {
    let expression = document.getElementById("display").value;
    fetch('/calculator', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `expression=${encodeURIComponent(expression)}`
    })
    .then(response => response.text())
    .then(result => {
        if(['0','1','2','3','4','5','6','7','8','9','-'].includes(result[0])){
            document.getElementById("display").value = result;
        }else{
            setTimeout(function() {
            alert(result);
        }, 2);
        }
    });
}

Flask框架

Flask 提供了一个简单而灵活的方式来构建Web应用程序，同时也允许开发者根据项目的需求选择性地扩展其功能。它的轻量级特性使得可以很容易地上手，并且非常适合快速开发小型到中型规模的Web应用。

from flask import Flask
from flask import render_template
from flask import request
from flask import jsonify

app = Flask(__name__)

@app.route('/feiling/calculator')
def template():  # put application's code here
    return render_template('index.html')
···

科学计算器

实现界面

首先实现基本界面，并为每个按钮添加相应的运算功能。在输入的同时进行一些简单的错误输入判断，如对"++"、"sin(÷"等错误输入进行检测，通过弹出警告弹窗在网页顶部提醒用户。用户需要点击确认按钮才能关闭弹窗，起到提醒作用。

处理字符串

将字符串传递到后端进行处理，可以进行复杂错误的检测。后端处理还支持嵌套运算，可以确保正确的运算结果，并将其传递回前端显示。

function setString(c) {
    if(['+','×','÷'].includes(c)){
        if (display.value.length > 0 && (isNumeric(display.value[display.value.length - 1]) || display.value[display.value.length - 1] == ')' || display.value[display.value.length - 1] == 'e' || display.value[display.value.length - 1] == 'π')) {
            display.value += c;
        } else{
            display.value += c;
            setTimeout(function() {
            alert("表达式输入错误，"+c+"的使用不正确，请仔细检查后正确输入");
        }, 2); // 1000毫秒 = 1秒
        }
    }else if(c == '-'){
        if (display.value.length > 0 && (isNumeric(display.value[display.value.length - 1]) || display.value[display.value.length - 1] == ')' || display.value[display.value.length - 1] == 'e' || display.value[display.value.length - 1] == 'π'|| display.value[display.value.length - 1] == '(')) {
            display.value += "-";
        }else{
            display.value += "-";
            setTimeout(function() {
            alert("表达式输入错误，-的使用不正确，请仔细检查后正确输入");
        }, 2);
        }
    }else if(c=='('){
        if (display.value == "0" || display.value == "0.0") {
            display.value = "(";
        } else if (['+', '-', '*', '÷', '('].includes(display.value.charAt(display.value.length - 1))) {
            display.value += '(';
        }else{
            display.value += '(';
            setTimeout(function() {
            alert("表达式输入错误，(的使用不正确，请仔细检查后正确输入");
        }, 2);
        }
    }else if(c==')'){
        if (display.value.length > 0 && (/\d/.test(display.value.slice(-1)) || display.value.slice(-1) == 'e' || display.value.slice(-1) == 'π' || display.value.slice(-1) == ')') && display.value.includes('(') && display.value.split('(').length > display.value.split(')').length) {
            display.value += ')';
        }
        else{
            display.value += ')';
            setTimeout(function() {
            alert("表达式输入错误，)的使用不正确，请仔细检查后正确输入");
        }, 2);
        }
    }else if(["sin", "sinh", "cos", "cosh","tan","tanh"].includes(c)){
        if (display.value == "0" || display.value == "0.0") {
            display.value = c+"(";
        } else if (['+', '-', '*', '÷', '('].includes(display.value.slice(-1))) {
            display.value += c+"(";
        }else{
            display.value += c+"(";
            setTimeout(function() {
            alert("有关"+c+"的操作不符合要求，请重新输入");
        }, 2);
        }
    }else if(["π","e"].includes(c)){
        if (display.value == "0" || display.value == "0.0") {
            display.value = c;
        } else if (!(/[0-9\)]$/.test(display.value))) {
            display.value += c;
        }else{
            display.value += c;
            setTimeout(function() {
            alert("有关"+c+"的操作不符合要求，请重新输入");
        }, 2);
        }
    }else if(c== '^'){
        if (["e","π",")"].includes(display.value[display.value.length - 1])||isNumeric(display.value[display.value.length - 1]))  {
            display.value += "^(";
        }else{
            display.value += "^(";
            setTimeout(function() {
            alert("有关x^y的操作不符合要求，请重新输入");
        }, 2);
        }
    }else if(c=="^2"){
        if (["e","π",")"].includes(display.value[display.value.length - 1])||isNumeric(display.value[display.value.length - 1])) {
            display.value += "^2";
        }else{
            display.value += "^2";
            setTimeout(function() {
            alert("有关x^2的操作不符合要求，请重新输入");
        }, 2);
        }
    }else if(["ln","log"].includes(c)){
        if (display.value == "0" || display.value == "0.0") {
            display.value = c+"(";
        } else if (['+', '-', '*', '÷', '('].includes(display.value.charAt(display.value.length - 1))) {
            display.value += c+"(";
        }else{
            display.value += c+"(";
            setTimeout(function() {
            alert("有关"+c+"的操作不符合要求，请重新输入");
        }, 2);
        }
    }else if(c=='%'){
        if (display.value.length > 0 && (isNumeric(display.value[display.value.length - 1]) || display.value[display.value.length - 1] == ')' || display.value[display.value.length - 1] == 'e' || display.value[display.value.length - 1] == 'π')) {
            display.value += c;
        } else{
            display.value += c;
            setTimeout(function() {
            alert("表达式输入错误，"+c+"的使用不正确，请仔细检查后正确输入");
        }, 2); // 1000毫秒 = 1秒
        }
    }
}

其他更详细的有关处理字符串的公式可以看我第一次作业的博客。

利率计算器

连接数据库

作业要求有关利率表的数值从数据库调用，选用Mysql进行操作。

conn = pymysql.connect(
    host='localhost',
    port=3306,
    user='root',
    password='******',
    database='calculator'
)

cursor = conn.cursor()

cursor.execute("""
    CREATE TABLE IF NOT EXISTS calculations (
        id INT AUTO_INCREMENT PRIMARY KEY,
        expression VARCHAR(255),
        result FLOAT
    )
""")

界面切换

利率计算器相对复杂的地方在于需要根据不同的功能展示不同的界面，与科学计算器不同，它的界面需求更加灵活。

在实现利率计算器时，我学到了许多有关界面设计的技巧。通过将不需要显示的界面属性设置为隐藏 style="display: none;，在需要时将属性改成**“block”**灵活切换界面，使用户可以在不同功能间进行切换。例如，下图展示了存款利率的修改和存款利率计算两个功能，当用户切换到某个功能时，对应的按钮会变为灰色，以便用户清晰地知道当前所处的功能模块。

<div id="change loan rate" style="display: none;">

function switchToChangeLoanRate() {
    document.getElementById("calculator").style.display = "none";
    document.getElementById("rate calculator save").style.display = "none";
    document.getElementById("rate calculator loan").style.display = "none";
    document.getElementById("change save rate").style.display = "none";
    document.getElementById("change loan rate").style.display = "block";
}

这种设计使得利率计算器具有更强的适应性和用户友好性，让用户能够更方便地进行操作。

关于存款功能分析

  1. 计算存款利息

    输入存款金额和存款时长信息。
    存款利息 = 存款金额 × 存款利率 × 存款时长 存款利息=存款金额\times存款利率\times存款时长 存款利息=存款金额×存款利率×存款时长

  • 活期存款

    从与后端连接的数据库中获取活期存款的利率，这个利率不会因存款时间的长短而改变。然后将计算结果发送到前端以供展示。

@app.route('/cal_time', methods=['POST'])
def cal_time():
    time = request.form['time']
    money = request.form['money']

    insert = "SELECT rate FROM current_account_deposit"
    cursor.execute(insert)
    data = cursor.fetchall()

    if not data:
        return "error"

  • 定期存款

    根据用户输入的存款时长，从与后端链接的数据库中获取相应的利率，并将利息计算结果发送至前端进行展示。

@app.route('/cal_demand', methods=['POST'])
def cal_demand():
    time = request.form['time']
    money = request.form['money']

    insert = "SELECT rate FROM Fixed_Deposit_Interest_Rate WHERE time = " + time
    cursor.execute(insert)
    data = cursor.fetchall()

    if not data:
        return "error"
    else:
        data=data[0][0]
        result = data * float(money) * float(time) / 100.0
        return str(result)
  1. 修改存款利息信息

  • 活期利率修改

    对活期利率进行修改时，可以选择不填写存款时长，直接更新存储在数据库中的活期利率。

@app.route('/change_save_time', methods=['POST'])
def change_save_time():
    tax_rate = request.form['tax_rate']

    insert = "UPDATE current_account_deposit SET rate = " + tax_rate
    cursor.execute(insert)
    conn.commit()

    return "finish"

  • 定期利率修改

    当进行定期利率的修改时，需要输入新的存款利率和存款时长，以便更新存储在数据库中的定期利率信息。

    点击“修改活期”或“修改定期”按钮后，系统将进行相应的数据库修改操作。操作完成后，将弹出一个名为“finish”的提示窗口，以通知用户修改已成功完成。

@app.route('/change_save_demand', methods=['POST'])
def change_save_demand():
    tax_rate = request.form['tax_rate']
    tax_time = request.form['tax_time']

    insert = "UPDATE Fixed_Deposit_Interest_Rate SET rate = " + tax_rate + " WHERE time = " + tax_time
    cursor.execute(insert)
    conn.commit()

    return "finish"

关于贷款功能分析

  1. 计算贷款利息

贷款利息 = 贷款金额 × 贷款利率 × 贷款时长 贷款利息=贷款金额\times贷款利率\times贷款时长 贷款利息=贷款金额×贷款利率×贷款时长

在输入贷款金额和贷款时长后，从可选的贷款利率时长中进行选择，如“六个月”、“一年”等。系统会根据选择从与后端链接的数据库中获取相应的利率，并计算出相应的利息并将利息计算结果发送至前端展示。

@app.route('/cal_loan', methods=['POST'])
def cal_loan():
    time = request.form['loan_time']
    time2 = request.form['loantime']
    money = request.form['loan_money']
    insert = "SELECT rate FROM demand_deposit WHERE time = '" + time +"'"
    cursor.execute(insert)
    data = cursor.fetchall()

    if not data:
        return "error"
    else:
        data=data[0][0]
        result = data * float(money) * float(time2) / 100.0
        return str(result)
  1. 修改贷款信息

从可选的贷款利率时长中进行选择，如“六个月”、“一年”等。在输入贷款利率后，点击“确认修改”按钮，系统将对相应的数据库进行修改操作。操作完成后，弹出一个名为“finish”的提示窗口，通知用户修改已成功完成。

@app.route('/change_loan', methods=['POST'])
def change_loan():
    change_loan_tax = request.form['change_loan_tax']
    change_loan_time = request.form['change_loan_time']
    insert = "UPDATE demand_deposit SET rate = " + change_loan_tax + " WHERE time = '" + change_loan_time+"'"
    cursor.execute(insert)
    conn.commit()

    return "finish"

两个计算器的切换

通过将不需要显示的计算器界面属性设置为隐藏，在需要时灵活切换界面，使用户可以在不同计算器间进行切换。

功能结构图

请添加图片描述

心路历程和收获

通过这个项目，我学到了如何处理前后端交互，如何利用Flask框架搭建后端服务。也学到了如何设计并管理一个简单的数据库用于存储利率信息，在操作过程中加深了对HTML、CSS和JavaScript的理解，并学会了如何将它们结合起来构建一个完整的前端应用。通过解决各种错误和挑战，提高了问题解决和调试的能力。最重要的是，我完成了一个功能完整的项目！这使我对前后端交互有了更深入的理解和信心。最大的心愿是下次写作业不要这么仓促，但这也证明我的能力还有欠缺，还需要多多学习！多多努力！

2301_78936942
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
simple-web-calculator:调用flask和Django Web服务执行传统操作的简单Web计算器
05-02
总结来说，"simple-web-calculator"项目展示了如何利用JavaScript、Flask和Django构建一个简单的Web计算器应用，涉及前端交互、后端计算以及两者之间的通信。这个项目对于学习Web开发基础和实践前后端协作是一个很好...
py-flask项目开发-截止日期计算器
11-26
在本项目"py-flask项目开发-截止日期计算器"中，我们将探讨如何使用Python的Flask框架构建一个实用的应用程序，该应用能够帮助用户计算截止日期。Flask是一个轻量级的Web服务程序，它提供了丰富的功能来创建交互式的...
flask与js交互的示例代码_一天一点Processing|02基本结构&初级代码解读
weixin_39863371的博客
11-27 162
本教程解读来源于《Learning Processing》一书，希望与各位同学共同学习。由于笔者仅有一点点编程基础，在标注时恐有遗漏，写得不明白之处望请见谅。基本结构//初始化函数 void setup(){ } //周期回调函数 void draw(){ } //鼠标事件函数 void mousePressed(){ } //键盘事件函数 void key...
用JavaScript制作简单的网页计算器
小言同学的博客
11-12 8353
一、题目 利用JavaScript中的函数，完成数字加、减、乘、除的运算，实现一个简单的计算器。 二、代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>网页计算器</title> </head> <body> <div> <p>数字1：<input type="text" id="num1"/&g
创建一个游戏商城涉及很多功能，如商品展示、购买、结账等。在这里，我将为您提供一个简单的游戏商城示例，使用Python（基于Flask框架）和JavaScript（用于前端交互）。
最新发布
AntonioMargery的博客
05-20 634
创建一个游戏商城涉及很多功能，如商品展示、购买、结账等。在这里，我将为您提供一个简单的游戏商城示例，使用Python（基于Flask框架）和JavaScript（用于前端交互）。# 这里只是简单示例，实际应用中需要集成支付系统和其他逻辑。2. JavaScript前端 (使用Fetch API与后端交互)1. Python后端 (使用Flask)# ... 其他游戏数据。# 假设的游戏商品数据。
基于flask的web计算器设计与实现.zip
06-22
资源包含文件：设计报告word+答辩PPT+项目源码+使用说明+项目截图 注意: 1. 全部源代码在code文件夹中 2. 全部报告在报告文件夹中，其中最重要的报告文档是“详细设计报告” 环境要求：python 3.x * 如何查看本地python环境： 1. 进入cmd 2. 输入 python --version 3. 如出现如 "Python 3.6.5 :: Anaconda, Inc." ，其他python3以上版本皆可 使用步骤: 1. 进入cmd 2. 路径进入SoftwareEngDesign_Calculate/code下（win是\） 3. 输入 python calculate.py python app.py 4. 如果没有报错，按照命令行提示，在浏览器中网址栏输入http://127.0.0.1:5000/ 5. 即可使用计算器 详细介绍参考：https://biyezuopin.blog.csdn.net/article/details/122996773
Python后端Flask、Django分别如何在html模板中引入css、js等static资源
qq_50502307的博客
11-10 1829
Flask、Django分别如何在html模板中引入css、js等static资源 问题描述： 之前一直做的前端，写页面的时候像css、js这些资源都是href=“”或src=“”等直接引入就可以了；在学习pyhton后端框架flask和django时就会遇到渲染html页面时资源无效，才知道是需要做一些修改的，在此做个笔记。 方法： Flask中 像原本的： <link rel="stylesheet" href="../stnatic/bootstrap/css/bootstrap.mi.cs
Flask 开发web后台时，css和js等静态文件加载不出来，某情况解决
YOU_hunter的博客
10-13 6902
奇怪的现象 今天用flask开发后台时，出现了一个非常诡异的现象！！！！ 我的静态文件竟…竟竟…然加载不了了！明明前两天弄得好好的，而且我很确信，我的路径什么的都是OK的。 真的，这个不是bug的bug解决起来好辛苦啊。试了很多方法。什么去掉google缓存啊，删除文件开发<!doctype html>字段，研究…/…/和/static/css/等。。。都不成功。哎，后面血与泪太多，...
MalwareAppDetector:基于网络的恶意软件Android应用检测器，它分析了Android应用中的权限使用情况和意图类型，并借助机器学习算法来确定该应用是恶意软件还是良性软件
04-17
**JavaScript、CSS和HTML** 用于构建前端界面。用户可以通过浏览器与MalwareAppDetector交互，上传APK文件，查看分析进度和结果。JavaScript负责动态更新页面，CSS确保了界面的美观和用户体验，而HTML构建了页面结构...
Interest-Calculator:这是一个使用flask用python制作的简单兴趣计算器
03-06
描述进一步确认了这是一个简单的利息计算器，它通过 Flask 实现。这可能包括用户输入本金、利率和时间，然后应用利息计算公式来得到结果。Flask 提供了处理 HTTP 请求和渲染网页模板的功能，使得开发者可以轻松构建...
calculadora_basica_flask:Flask和Python制作的基本计算器的学习项目
04-07
总之，"Flask和Python制作的基本计算器学习项目"是一个极好的实践平台，它涵盖了Web开发中的基础概念，如HTTP协议、路由、模板渲染以及前后端交互。通过学习和实践这个项目，你可以提升自己的Python编程和Web应用...
javascript网页计算器
10-21
用javascript编写程序，实现简单的网页计算器，包括显示当前时间，清零，加减乘除取模运算等。
网页可编程计算器
04-20
实现了网页可编程计算器，包括普通的数值计算、函数定义等功能 前端由python flask实习 后端由flex、bison实现词法、语法分析 需要安装flex、bison、python的flask包以及vs（需要用到vs的cl）
基于Vue前端框架的一个简单的网页计算器
AAAHTAAA的博客
05-05 512
计算器plus
【python】flask搭建一个上传网站css+js+flask（1）
清凌的博客
07-25 901
参考代码： https://github.com/blueimp/jQuery-File-Upload/ 代码逻辑由app.py决定，具体功能见我加上的注释： app.py #!flask/bin/python # Author: Ngo Duy Khanh # Email: ngokhanhit@gmail.com # Git repository: https://github.com...
flask 等等其他模拟环境中静态文件.css,.js,.html不能立即刷新
qq_40837106的博客
05-26 1169
最近在搞一个flask的网站项目，在VS code+插件的环境中运行没有任何问题，在flask的模拟环境中出现了一些bug，在修改bug后之后发现似乎仍然使用的是原来的没有修改的文件。查看了chrome 开发者工具之后发现确实是这样。 比如下图开发者工具中， 可以看到使用的html文件中有： <div class="submit"><input type="submit"...
分享本周所学——使用Flask实现Python程序服务化
weixin_48978134的博客
07-17 2194
大家好，欢迎来到《分享本周所学》第四期。本人是一名人工智能初学者，最近一周学习了如何用Flask将一个AI模型实现服务化，觉得非常有收获，就想把学到的东西分享给大家。不管你是像我一样想做AI的服务化，还是做其他程序的服务化，还是单纯想学一下Flask，相信这篇文章都会对你有所帮助。然后因为我也只是一名小白，所以有错误的地方还希望大佬们多多指正。上期文章链接《分享本周所学——Linux（Ubuntu）CUDA环境搭建以及借助PaddleSpeech实现实时录音的流式语音识别》https。......
flask-bootstrap 模版中所需的CSS/JS文件如何实现本地引入
热门推荐
小明的博客
01-12 1万+
笔者所写的是狗书前七章讲的项目,在学习过程中,因为是使用公司内网,每次运行都要联网很不方便,就研究了一下怎么将所需的CSS/JS文件进行本地引入, 模版扩展来自于bootstrap/base.html,就以bootstrap/base.html的用法为例. 首先通过联网运行的网页源代码确定所需的CSS/JS文件,如下图: 因为这个源代码已经修改过,所以显示的是修改后的
html+css+js+flask+json+mysql 实现注册登录
09-26
html css js flask json mysql 可以实现注册登录功能。 在前端方面，可以使用html和css来设计注册登录页面的样式，使用js来进行前端验证和交互。 在后端方面，可以使用flask来搭建服务器，使用json来传递数据，使用mysql来存储用户信息。 具体实现步骤如下： 1. 前端方面：设计注册登录页面的html和css样式，并使用js来进行表单验证。 2. 后端方面：使用flask创建注册登录的路由和视图函数，处理用户提交的数据。 3. 在注册功能中，将用户输入的用户名、密码等信息存储到mysql数据库中。 4. 在登录功能中，根据用户输入的用户名和密码在mysql数据库中进行验证，验证成功则登录成功。 5. 使用json来进行前后端数据的传递，例如将用户注册成功的信息返回给前端页面。 6. 可以在注册登录功能上增加一些其他功能，例如修改密码、找回密码等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值