企业官网建设流程全解析

网站没有做实名认证,安阳实力网站建设首选,dedecms怎么做网站,桐城市美好乡村建设办公室网站目录 一、技术栈说明#xff08;轻量易部署#xff09; 二、环境准备 三、完整代码实现 1. 后端主文件 app.py 2. 前端模板文件夹及文件 #xff08;1#xff09;登录页面 login.html #xff08;2#xff09;计算器页面 calculator.html 四、代码核心部分解释 …目录一、技术栈说明轻量易部署二、环境准备三、完整代码实现1. 后端主文件 app.py2. 前端模板文件夹及文件1登录页面 login.html2计算器页面 calculator.html四、代码核心部分解释1. 登录验证逻辑2. Web 版计算逻辑3. 前端页面设计五、运行与使用步骤六、扩展建议可选总结基于 Python Flask 框架的带登录功能的 Web 版利率计算器支持通过浏览器访问、登录验证登录后可输入本金、利率、计息期数选择单利 / 复利计算并实时显示结果。以下是完整的实现方案包含前端页面登录页 计算器页和后端逻辑代码可直接运行适合新手部署和使用。一、技术栈说明轻量易部署后端Python Flask轻量级 Web 框架无需复杂配置新手友好前端HTML 简单 CSS无需前端框架页面简洁易用登录验证基于 Flask Session 的简单用户名密码验证演示用可扩展为数据库存储核心功能复用单利 / 复利计算逻辑适配 Web 表单提交二、环境准备首先安装 Flask 依赖打开终端 / 命令行执行pip install flask三、完整代码实现创建一个文件夹如interest_calculator在其中新建 2 个文件1. 后端主文件app.pypython运行from flask import Flask, render_template, request, session, redirect, url_for, flash import math # 初始化Flask应用 app Flask(__name__) # 配置Session密钥必须用于登录状态保存 app.secret_key interest_calc_2026_secure_key # 实际使用可替换为随机字符串 # 内置测试用户演示用实际可替换为数据库查询 VALID_USERS { admin: 123456, user1: user123 } # 登录验证装饰器保护计算器页面未登录则跳转到登录页 def login_required(f): def wrapper(*args, **kwargs): if username not in session: flash(请先登录后再使用计算器, warning) return redirect(url_for(login)) return f(*args, **kwargs) wrapper.__name__ f.__name__ return wrapper # 利率计算核心函数 def calculate_interest(principal, rate, periods, interest_typesimple): 计算单利/复利的利息和本息和 :param principal: 本金元 :param rate: 年利率百分比如5表示5% :param periods: 计息期数年 :param interest_type: 计息方式simple单利compound复利 :return: 利息保留2位小数、本息和保留2位小数 rate rate / 100 # 转换为小数 if interest_type simple: total principal * (1 rate * periods) else: total principal * math.pow((1 rate), periods) interest total - principal return round(interest, 2), round(total, 2) # 路由1登录页面GET请求显示页面POST请求验证登录 app.route(/login, methods[GET, POST]) def login(): # 如果已登录直接跳转到计算器页面 if username in session: return redirect(url_for(calculator)) if request.method POST: username request.form.get(username) password request.form.get(password) # 验证用户名密码 if username in VALID_USERS and VALID_USERS[username] password: session[username] username # 保存登录状态到Session flash(f登录成功欢迎 {username}, success) return redirect(url_for(calculator)) else: flash(用户名或密码错误请重新输入, danger) # GET请求显示登录页面 return render_template(login.html) # 路由2计算器页面需登录才能访问 app.route(/calculator, methods[GET, POST]) login_required def calculator(): result None # 存储计算结果 if request.method POST: try: # 获取表单输入 principal float(request.form.get(principal)) rate float(request.form.get(rate)) periods int(request.form.get(periods)) interest_type request.form.get(interest_type) # 校验输入合法性 if principal 0: flash(本金金额必须大于0, danger) elif rate 0 or rate 100: flash(年利率需在0-100之间如5表示5%, danger) elif periods 0: flash(计息期数必须大于0, danger) else: # 计算利息 interest, total calculate_interest(principal, rate, periods, interest_type) # 组装结果数据 result { principal: round(principal, 2), rate: rate * 100, # 转回百分比显示 periods: periods, interest_type: 单利 if interest_type simple else 复利, interest: interest, total: total } flash(计算成功, success) except ValueError: flash(输入错误请输入有效的数字, danger) # 渲染计算器页面传递登录用户名和计算结果 return render_template(calculator.html, usernamesession[username], resultresult) # 路由3退出登录 app.route(/logout) login_required def logout(): session.pop(username, None) # 清除登录状态 flash(已成功退出登录, success) return redirect(url_for(login)) # 路由4首页重定向到登录页 app.route(/) def index(): return redirect(url_for(login)) # 启动应用 if __name__ __main__: app.run(debugTrue, host0.0.0.0, port5000)2. 前端模板文件夹及文件在interest_calculator文件夹下新建templates子文件夹再在其中创建 2 个 HTML 文件1登录页面login.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 title利率计算器 - 登录/title style * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } body { background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .login-box { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 400px; } .login-box h2 { text-align: center; margin-bottom: 20px; color: #333; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; color: #666; } .form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } .btn { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; } .btn:hover { background-color: #0056b3; } .alert { padding: 10px; margin-bottom: 15px; border-radius: 4px; font-size: 14px; } .alert-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /style /head body div classlogin-box h2利率计算器 - 用户登录/h2 !-- 显示提示信息 -- {% with messages get_flashed_messages(with_categoriestrue) %} {% if messages %} {% for category, message in messages %} div classalert alert-{{ category }}{{ message }}/div {% endfor %} {% endif %} {% endwith %} !-- 登录表单 -- form methodPOST div classform-group label forusername用户名/label input typetext idusername nameusername required placeholder请输入用户名测试admin /div div classform-group label forpassword密码/label input typepassword idpassword namepassword required placeholder请输入密码测试123456 /div button typesubmit classbtn登录/button /form /div /body /html2计算器页面calculator.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 title利率计算器 - 主页/title style * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } body { background-color: #f5f5f5; padding: 20px; } .container { max-width: 600px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .header h2 { color: #333; } .header a { color: #dc3545; text-decoration: none; font-size: 14px; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; color: #666; } .form-group input, .form-group select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } .btn { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; } .btn:hover { background-color: #0056b3; } .alert { padding: 10px; margin-bottom: 15px; border-radius: 4px; font-size: 14px; } .alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .alert-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .alert-warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; } .result { margin-top: 20px; padding: 20px; background-color: #e9f7fe; border-radius: 4px; display: none; } .result.show { display: block; } .result h3 { margin-bottom: 10px; color: #333; } .result p { margin: 5px 0; font-size: 16px; color: #666; } .result p span { font-weight: bold; color: #007bff; } /style /head body div classcontainer div classheader h2欢迎 {{ username }} | 利率计算器/h2 a href/logout退出登录/a /div !-- 显示提示信息 -- {% with messages get_flashed_messages(with_categoriestrue) %} {% if messages %} {% for category, message in messages %} div classalert alert-{{ category }}{{ message }}/div {% endfor %} {% endif %} {% endwith %} !-- 计算器表单 -- form methodPOST div classform-group label forprincipal本金金额元/label input typenumber idprincipal nameprincipal step0.01 required placeholder请输入大于0的金额如10000.00 /div div classform-group label forrate年利率%/label input typenumber idrate namerate step0.01 required placeholder请输入0-100之间的数值如4.5 /div div classform-group label forperiods计息期数年/label input typenumber idperiods nameperiods min1 required placeholder请输入大于0的整数如3 /div div classform-group label forinterest_type计息方式/label select idinterest_type nameinterest_type required option valuesimple单利/option option valuecompound复利/option /select /div button typesubmit classbtn计算/button /form !-- 计算结果展示 -- {% if result %} div classresult show h3计算结果/h3 p本金span{{ result.principal }}/span 元/p p年利率span{{ result.rate }}/span %/p p计息期数span{{ result.periods }}/span 年/p p计息方式span{{ result.interest_type }}/span/p p到期利息span{{ result.interest }}/span 元/p p到期本息和span{{ result.total }}/span 元/p /div {% endif %} /div /body /html四、代码核心部分解释1. 登录验证逻辑用Flask Session保存登录状态login_required装饰器确保未登录用户无法访问计算器页面内置测试用户admin/123456、user1/user123实际使用可替换为数据库如 SQLite/MySQL查询登录失败 / 成功通过flash提示用户提升交互体验。2. Web 版计算逻辑复用之前的单利 / 复利计算函数适配 Web 表单的 POST 提交方式前端表单添加required属性强制输入后端额外校验数值合法性如本金 0、利率 0-100计算结果通过模板变量传递到前端格式化显示保留 2 位小数。3. 前端页面设计登录页 / 计算器页均做了简单样式优化适配浏览器显示提示信息分类展示成功 / 危险 / 警告结果区域仅在计算后显示界面更整洁。五、运行与使用步骤确保文件结构正确plaintextinterest_calculator/ ├── app.py └── templates/ ├── login.html └── calculator.html运行app.py终端执行python app.py打开浏览器访问http://localhost:5000或http://你的IP:5000局域网内其他设备也可访问登录输入测试用户名admin密码123456点击 “登录”使用计算器输入本金如 10000、年利率如 4.5、期数如 3选择计息方式点击 “计算”即可看到结果。六、扩展建议可选持久化用户将用户信息存入 SQLite/MySQL 数据库替代内置字典记住登录状态添加 “记住我” 功能延长 Session 有效期更多计息方式支持按月 / 按日计息增加 “计息周期” 选择项数据导出将计算结果导出为 Excel/CSV 文件样式优化使用 Bootstrap 框架美化页面适配手机端。总结核心功能实现了浏览器登录验证 利率计算支持单利 / 复利输入合法性校验结果清晰展示易用性基于 Flask 的轻量级架构代码结构清晰新手可快速部署和修改扩展性预留了扩展接口如数据库、更多计息方式可根据需求升级。整个应用无需复杂的服务器配置本地运行即可满足个人 / 小团队使用完全适配 “浏览器登录 利率计算” 的核心需求。