安庆市住房和建设厅网站,微网站免费建站系统,网站建设工作内容,网站栏目设计模板#x1f31f; 嗨#xff0c;我是LucianaiB#xff01;
#x1f30d; 总有人间一两风#xff0c;填我十万八千梦。
#x1f680; 路漫漫其修远兮#xff0c;吾将上下而求索。 豆包MarsCode 蛇年编程大作战 | #x1f40d; 蛇年运势预测
在线体验地址#xff1a;蛇年… 嗨我是LucianaiB 总有人间一两风填我十万八千梦。 路漫漫其修远兮吾将上下而求索。 豆包MarsCode 蛇年编程大作战 | 蛇年运势预测
在线体验地址蛇年运势预测 可直接运行代码
目录 前提说明 1.1 豆包MarsCode介绍1.2 背景说明 前期工作 2.1 创建Pycharm项目2.2 安装插件 项目准备 3.1 开始一直的微调 作品效果展示 蛇年运势预测系统使用教程 5.1 系统要求5.2 安装步骤 5.2.1 环境准备5.2.2 文件准备 5.3 启动应用 5.3.1 运行服务器5.3.2 访问应用 5.4 使用说明 5.4.1 输入个人信息5.4.2 获取运势预测5.4.3 查看预测结果 5.5 注意事项5.6 技术支持
前提说明
豆包MarsCode介绍
豆包 MarsCode 是一款由字节跳动推出的智能开发工具基于豆包大模型开发旨在通过 AI 技术提升开发者的编程效率和质量。它以插件形式集成到主流 IDE如 Visual Studio Code 和 JetBrains IDEs中同时也提供云端 IDE 版本支持多种主流编程语言。
背景说明
在当今快节奏的编程世界中找到一款既高效又便捷的开发工具无疑是每个程序员的梦想。而豆包的 MarsCode 正是这样一款神器它不仅极大地简化了开发流程还让复杂的代码生成变得轻而易举。无论是初学者还是经验丰富的开发者都能在MarsCode的帮助下快速搭建出令人惊叹的项目。
在最近参与的一个豆包文章项目中我使用了MarsCode来搭建一个以“蛇年主题”为核心的个人项目——“蛇年运势预测系统”。这个系统不仅让我深刻体会到MarsCode的强大功能还让我对编程的乐趣有了全新的认识。
MarsCode的智能代码生成功能让我能够轻松地创建项目大纲快速搭建前端页面并且在遇到问题时迅速定位并解决。它就像一个智能助手时刻陪伴在我的身边帮助我优化代码、美化界面甚至自动修复一些常见的错误。这种高效、智能的开发体验让我对编程充满了信心和热情。
接下来就让我带你走进这个充满趣味的“蛇年运势预测系统”的开发之旅看看MarsCode是如何让这一切变得如此简单而美好的
前期工作
创建Pycharm项目
1.创建一个python项目名为蛇年运势预测这里使用conda配置环境
2.安装插件
打开Pycharm,点击File(文件)然后选择Settings选择Plugins输入“MarsCode”并点击Install进行安装 安装完成后点击Restart IDE重启Pycharm。
项目准备
开始一直的微调
开始多轮对话 在编程过程中遇到大量的代码调试工作是很常见的。具体对话过程确实可能非常繁琐就像你所说可能需要反复多次调整才能得到满意的代码结果。这个过程确实需要极大的耐心要不断地去查找代码中的bug对发现的问题进行调试然后根据调试结果进行相应的修改。每一次修改后都要重新运行代码查看是否解决了问题又是否引入了新的问题。如此反复循环直到代码能够按照预期正常运行。这个过程虽然辛苦但当最终看到代码成功运行实现预期功能时那种成就感是难以言喻的。 使用命令(目的对整体项目有一个大概的了解) 我创建了一个python项目蛇年运势预测帮我对这个项目进行一个大纲的创建 可以发现他已经把我们大部分想要的已经创建成功了 使用命令(目的使用MarsCode美化前端页面) 美化前端页面 相比较前面就是已经将前端美化的时间上已经差不多了 使用命令(目的处理bug) 这个年的范围太广了请帮我增加月日用来去判断运势预测因为这个是关于蛇年的运势预测请帮我加入蛇相关的元素 在这个时候我们突然发现他的月份无法正常使用我们直接选择让他进行处理 使用命令(目的处理bug) 他的月份无法正常选择且年月日的布局不是很合理。请帮我修改这个问题使其美观且可以正确的处理问题 相比较前面就是已经将前端美化的时间上已经差不多了 使用命令(目的加入背景使其美观) 在同目录下有一个照片请把它设置为整个前端的一个背景 此时已经将前端美化的时间上已经差不多了 使用命令(最后一次美观) 将整个前端的界面进行一个美观优化。例如框架或者格子之类的使其变得高大上 这就是最后的成品很不错的体验。
作品效果展示
我们在main函数中右击然后运行主函数
我们可以看到运行成功并且出现了本地可访问的网站
访问网站输入姓名以出生年份出生月份出生日期即可2025蛇年运势预测可以看到整个运势预测 蛇年运势预测系统使用教程
系统要求
Python 3.xFlask 框架浏览器支持现代浏览器如 Chrome、Firefox、Edge 等
安装步骤
环境准备
# 安装必要的Python包
pip install flask文件准备
将背景图片 蛇迎新春.png 放在项目根目录下确保 main.py 文件存在
启动应用
运行服务器
python main.py访问应用
打开浏览器访问 http://localhost:5000
使用说明
1. 输入个人信息
在姓名输入框中输入您的姓名在生辰信息区域填写 出生年份1920-2024出生月份1-12出生日期1-31
2. 获取运势预测
点击查看运势按钮系统将自动生成您的运势预测结果
3. 查看预测结果
预测结果包含以下信息
您的生肖属相总体运势事业运势感情运势财运健康运势幸运数字幸运颜色开运方位
注意事项
请确保输入真实的出生日期以获得准确预测系统会自动校验日期的有效性运势预测仅供娱乐参考页面支持响应式设计可在各种设备上正常显示
技术支持
如遇到技术问题请检查
Python 和 Flask 是否正确安装背景图片是否位于正确位置服务器是否正常运行浏览器控制台是否有错误信息
祝您使用愉快新年吉祥
总结
本文介绍了使用豆包MarsCode开发“蛇年运势预测系统”的全过程。豆包MarsCode是一款基于AI技术的智能开发工具能够显著提升开发效率适用于多种主流编程语言和主流IDE。
开发过程 项目创建与环境搭建 使用PyCharm创建了一个名为“蛇年运势预测”的Python项目并通过conda配置环境。随后安装了MarsCode插件为后续开发提供了智能支持。 项目开发与优化 在开发过程中MarsCode的智能代码生成功能发挥了重要作用。通过简单的命令快速生成了项目大纲并美化了前端页面。同时MarsCode还帮助解决了代码中的bug优化了布局和功能例如增加了蛇年相关的元素和背景图片提升了界面的美观度和用户体验。 功能实现与测试 系统实现了蛇年运势预测的核心功能用户输入姓名和出生日期后即可获取包括总体运势、事业、感情、财运、健康等多方面的预测结果。经过多轮调试和优化系统最终能够稳定运行并支持响应式设计可在不同设备上正常显示。 使用教程与支持 文章详细介绍了系统的使用方法包括环境准备、安装步骤、启动应用和使用说明。同时还提供了技术支持指南帮助用户解决可能遇到的问题。
项目特点
高效开发借助MarsCode的智能生成功能大幅减少了代码编写和调试的时间。美观界面通过MarsCode优化前端页面美观且具有蛇年特色。功能完善系统不仅预测运势还提供了幸运数字、颜色和开运方位等信息。易用性高界面简洁操作方便支持多种设备访问。
通过本次项目作者深刻体会到MarsCode的强大功能和高效开发体验。它不仅简化了开发流程还让编程变得更加有趣。未来作者将继续探索MarsCode的更多功能开发更多有趣的项目。
附录代码
from flask import Flask, render_template_string, request, jsonify, send_from_directory
import random
import osapp Flask(__name__)# HTML模板直接嵌入到Python文件中
HTML_TEMPLATE
!DOCTYPE html
html langzh
headmeta charsetUTF-8title蛇年运势预测/titlestylebody {font-family: Microsoft YaHei, sans-serif;max-width: 900px;margin: 20px auto;padding: 20px;min-height: 100vh;background: url(/static/蛇迎新春.png) center center fixed;background-size: cover;position: relative;color: #333;}/* 添加一个半透明遮罩层 */body::before {content: ;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(255, 255, 255, 0.65);z-index: -1;}.container {background-color: rgba(255, 255, 255, 0.8);padding: 40px;border-radius: 20px;box-shadow: 0 15px 30px rgba(0,0,0,0.15);transition: all 0.3s ease;backdrop-filter: blur(3px);position: relative;z-index: 1;border: 2px solid #d81e06;background-image: linear-gradient(45deg, #d81e06 12px, transparent 0),linear-gradient(-45deg, #d81e06 12px, transparent 0);background-position: top left, top right;background-repeat: no-repeat;background-size: 30px 30px;}.container::before,.container::after {content: ;position: absolute;width: 30px;height: 30px;bottom: 0;border: 2px solid #d81e06;}.container::before {left: 0;border-width: 0 0 2px 2px;}.container::after {right: 0;border-width: 0 2px 2px 0;}h1 {color: #d81e06;text-align: center;font-size: 2.5em;margin-bottom: 30px;text-shadow: 2px 2px 4px rgba(0,0,0,0.1);position: relative;padding-bottom: 15px;}h1::after {content: ;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 100px;height: 3px;background: linear-gradient(90deg, transparent, #d81e06, transparent);}.input-section {text-align: center;margin: 30px 0;display: flex;flex-direction: column;align-items: center;gap: 25px;width: 100%;max-width: 600px;margin: 0 auto;}.name-input {position: relative;margin-bottom: 30px;width: 100%;max-width: 400px;margin: 0 auto 30px;}.name-input::after {content: ;position: absolute;bottom: -10px;left: 0;width: 100%;height: 1px;background: linear-gradient(90deg, transparent, rgba(216,30,6,0.2), transparent);}.name-input label {position: absolute;left: 15px;top: -10px;background: white;padding: 0 5px;color: #666;font-size: 14px;z-index: 1;}.name-input input {width: 100%;padding: 15px;border: 2px solid #eee;border-radius: 8px;font-size: 16px;transition: all 0.3s ease;}.date-inputs {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;width: 100%;background: rgba(255, 255, 255, 0.9);padding: 30px;border-radius: 15px;box-shadow: 0 5px 15px rgba(0,0,0,0.05);margin: 20px 0;border: 1px solid rgba(216,30,6,0.3);position: relative;}.date-inputs::before {content: 生辰信息;position: absolute;top: -12px;left: 20px;background: white;padding: 0 10px;color: #d81e06;font-weight: bold;font-size: 14px;}.input-group {position: relative;padding: 5px;}.input-group label {font-size: 14px;color: #666;font-weight: 500;margin-bottom: 8px;display: block;}.input-group input {width: 100%;padding: 12px 15px;border: 2px solid rgba(216,30,6,0.2);border-radius: 8px;font-size: 16px;transition: all 0.3s ease;background-color: white;height: 45px;}.input-group input:focus {outline: none;border-color: #d81e06;box-shadow: 0 0 10px rgba(216,30,6,0.1);}input[typenumber] {-moz-appearance: textfield;appearance: textfield;width: 100%;}input[typenumber]::-webkit-outer-spin-button,input[typenumber]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}select {cursor: pointer;background-image: url(data:image/svgxml,%3Csvg xmlnshttp://www.w3.org/2000/svg width12 height12 fill%23666 viewBox0 0 16 16%3E%3Cpath dM7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z/%3E%3C/svg%3E);background-repeat: no-repeat;background-position: calc(100% - 12px) center;padding-right: 35px;}select:invalid {color: #999;}option {color: #333;}button {background: linear-gradient(45deg, #d81e06, #ff4b2b);color: white;border: none;border-radius: 25px;padding: 15px 50px;font-size: 18px;font-weight: bold;cursor: pointer;transition: all 0.3s ease;margin-top: 30px;min-width: 250px;text-shadow: 1px 1px 2px rgba(0,0,0,0.2);box-shadow: 0 5px 15px rgba(216,30,6,0.3);position: relative;overflow: hidden;}button::before {content: ;position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition: 0.5s;}button:hover::before {left: 100%;}button:active {transform: translateY(1px);box-shadow: 0 3px 10px rgba(216,30,6,0.3);}button:disabled {background: #cccccc;cursor: not-allowed;transform: none;box-shadow: none;}.result {background-color: rgba(255, 255, 255, 0.85);backdrop-filter: blur(3px);padding: 30px;border-radius: 15px;margin-top: 30px;border: 1px solid rgba(216,30,6,0.2);position: relative;animation: fadeIn 0.5s ease;}keyframes fadeIn {from { opacity: 0; transform: translateY(20px);}to { opacity: 1;transform: translateY(0);}}.result h2 {color: #d81e06;text-align: center;margin-bottom: 25px;font-size: 1.8em;}.result p {margin: 15px 0;padding: 12px;border-radius: 8px;background-color: rgba(255,255,255,0.7);border-left: 3px solid #d81e06;transition: all 0.3s ease;}.result p:hover {transform: translateX(5px);background-color: rgba(255,255,255,0.9);}.special-note {background: linear-gradient(45deg, rgba(216,30,6,0.1), rgba(255,75,43,0.1));border: 2px dashed #d81e06;padding: 20px;border-radius: 12px;text-align: center;margin-top: 25px;position: relative;overflow: hidden;}.special-note::before {content: ;position: absolute;left: 20px;top: 50%;transform: translateY(-50%);font-size: 24px;}.special-note::after {content: ;position: absolute;right: 20px;top: 50%;transform: translateY(-50%);font-size: 24px;}/* 新增样式 */.snake-border {position: relative;border: 2px solid #d81e06;padding: 40px;margin: 20px 0;border-radius: 15px;}.snake-border::before {content: ;position: absolute;top: -15px;left: 20px;background: white;padding: 0 10px;font-size: 24px;}.snake-decoration {text-align: center;margin: 15px 0;font-size: 28px;background: linear-gradient(45deg, #d81e06, #ff4b2b);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: slither 3s infinite ease-in-out;}keyframes slither {0% { transform: translateX(-10px); }50% { transform: translateX(10px); }100% { transform: translateX(-10px); }}/style
/head
bodydiv classcontainerh1✨ 2025蛇年运势预测 ✨/h1div classsnake-decoration ~ ~ ~/divdiv classsnake-borderdiv classinput-sectiondiv classname-inputlabel姓名/labelinput typetext idname placeholder请输入您的姓名 autocompleteoff/divdiv classdate-inputsdiv classinput-grouplabel出生年份/labelinput typetext idbirth-year placeholder如1990 maxlength4autocompleteoffoninputvalidateNumber(this, 1920, 2024, 4)/divdiv classinput-grouplabel出生月份/labelinput typetext idbirth-month placeholder如1-12 maxlength2autocompleteoffoninputvalidateNumber(this, 1, 12, 2)/divdiv classinput-grouplabel出生日期/labelinput typetext idbirth-day placeholder如1-31 maxlength2autocompleteoffoninputvalidateNumber(this, 1, 31, 2)/div/divbutton onclickgetFortune()查看运势/button/div/divdiv idresult classresult/div/divscriptfunction validateNumber(input, min, max, maxLength) {// 只允许输入数字input.value input.value.replace(/[^\d]/g, ).slice(0, maxLength);let value parseInt(input.value);if (input.value.length maxLength || value max) {if (value min) {input.value min.toString();} else if (value max) {input.value max.toString();}}validateDate();}function validateDate() {const year parseInt(document.getElementById(birth-year).value);const month parseInt(document.getElementById(birth-month).value);const dayInput document.getElementById(birth-day);const day parseInt(dayInput.value);if (isNaN(year) || isNaN(month) || isNaN(day)) return;let maxDays 31;if ([4, 6, 9, 11].includes(month)) {maxDays 30;} else if (month 2) {maxDays (year % 4 0 (year % 100 ! 0 || year % 400 0)) ? 29 : 28;}if (day maxDays) {dayInput.value maxDays.toString();}}function getFortune() {const year document.getElementById(birth-year).value;const month document.getElementById(birth-month).value;const day document.getElementById(birth-day).value;const name document.getElementById(name).value;if (!year || !month || !day || !name) {alert(请填写完整信息);return;}if (year.length ! 4 || parseInt(year) 1920 || parseInt(year) 2024) {alert(请输入有效的出生年份);return;}const button document.querySelector(button);button.disabled true;button.innerHTML 正在测算...;fetch(/get_fortune, {method: POST,headers: {Content-Type: application/json,},body: JSON.stringify({name: name,birth_year: year,birth_month: month,birth_day: day})}).then(response response.json()).then(data {const resultDiv document.getElementById(result);resultDiv.style.display block;resultDiv.innerHTML div classsnake-decoration ~ ~ ~/divh2 ${name}的蛇年运势预测 /h2div classzodiac-info${getZodiacInfo(data.zodiac_sign, data.is_snake_year)}/divp总体运势${getEmoji(data.overall)} ${data.overall}/pp事业运${getEmoji(data.career)} ${data.career}/pp感情运${getEmoji(data.love)} ${data.love}/pp财运${getEmoji(data.wealth)} ${data.wealth}/pp健康运${getEmoji(data.health)} ${data.health}/pp 幸运数字${data.lucky_numbers.join(、)}/pp 幸运颜色${data.lucky_colors.join(、)}/pp 开运方位${data.lucky_directions.join(、)}/p${data.is_snake_year ? p classspecial-note 恭喜您2024年是您的本命年要记得戴红色饰品以旺运避凶/p : };button.disabled false;button.innerHTML 查看运势;}).catch(error {console.error(Error:, error);alert(获取运势失败请重试);button.disabled false;button.innerHTML 查看运势;});}function getEmoji(fortune) {const emojis {大吉: ,吉: ✨,中平: ⭐,小凶: ☁️,大凶: ⚡};return emojis[fortune] || ;}function getZodiacInfo(zodiacSign, isSnakeYear) {const baseInfo 您的生肖属相${zodiacSign};if (isSnakeYear) {return ${baseInfo}br 2024年是您的本命年 brspan stylecolor: #d81e06温馨提示本命年要特别注意趋吉避凶建议佩戴红色饰品助您好运连连/span;}return baseInfo;}/script
/body
/html
def calculate_fortune(birth_year, birth_month, birth_day, name):# 定义运势等级luck_levels [大吉, 吉, 中平, 小凶, 大凶]# 计算生肖zodiac_year (int(birth_year) - 4) % 12zodiac_signs [鼠, 牛, 虎, 兔, 龙, 蛇, 马, 羊, 猴, 鸡, 狗, 猪]zodiac_sign zodiac_signs[zodiac_year]is_snake_year (zodiac_year 5)# 根据月日调整运势权重month_weight (int(birth_month) * int(birth_day)) % 5# 生成运势fortune {zodiac_sign: zodiac_sign,is_snake_year: is_snake_year,overall: luck_levels[(month_weight int(birth_day)) % 5],career: luck_levels[(month_weight int(birth_month)) % 5],love: luck_levels[(month_weight int(birth_year) % 5) % 5],wealth: luck_levels[(month_weight sum(map(int, str(birth_day)))) % 5],health: luck_levels[(month_weight sum(map(int, str(birth_month)))) % 5],lucky_numbers: random.sample(range(1, 50), 3),lucky_colors: random.sample([红色, 黄色, 青色, 紫色, 金色, 银色], 2),lucky_directions: random.sample([东, 南, 西, 北, 东南, 西南, 东北, 西北], 2)}return fortuneapp.route(/)
def index():return render_template_string(HTML_TEMPLATE)app.route(/get_fortune, methods[POST])
def get_fortune():data request.get_json()birth_year data.get(birth_year)birth_month data.get(birth_month)birth_day data.get(birth_day)name data.get(name)fortune_result calculate_fortune(birth_year, birth_month, birth_day, name)return jsonify(fortune_result)# 添加静态文件路由
app.route(/static/path:filename)
def serve_static(filename):return send_from_directory(static, filename)if __name__ __main__:# 确保static目录存在if not os.path.exists(static):os.makedirs(static)# 如果图片不在static目录中将其复制到static目录if not os.path.exists(static/蛇迎新春.png) and os.path.exists(蛇迎新春.png):import shutilshutil.copy(蛇迎新春.png, static/蛇迎新春.png)app.run(debugTrue) 嗨我是LucianaiB。如果你觉得我的分享有价值不妨通过以下方式表达你的支持 点赞来表达你的喜爱 关注以获取我的最新消息 评论与我交流你的见解。我会继续努力为你带来更多精彩和实用的内容。 点击这里LucianaiB 获取最新动态⚡️ 让信息传递更加迅速。
