🌟 嗨，我是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.x
- Flask 框架
- 浏览器（支持现代浏览器如 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 os
app = Flask(__name__)
# HTML模板（直接嵌入到Python文件中）
HTML_TEMPLATE = '''
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>蛇年运势预测</title>
<style>
body {
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[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
width: 100%;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.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>
<body>
<div class="container">
<h1>✨ 2025蛇年运势预测 ✨</h1>
<div class="snake-decoration">🐍 ~ ~ ~</div>
<div class="snake-border">
<div class="input-section">
<div class="name-input">
<label>姓名</label>
<input type="text" id="name" placeholder="请输入您的姓名" autocomplete="off">
</div>
<div class="date-inputs">
<div class="input-group">
<label>出生年份</label>
<input type="text"
id="birth-year"
placeholder="如：1990"
maxlength="4"
autocomplete="off"
oninput="validateNumber(this, 1920, 2024, 4)">
</div>
<div class="input-group">
<label>出生月份</label>
<input type="text"
id="birth-month"
placeholder="如：1-12"
maxlength="2"
autocomplete="off"
oninput="validateNumber(this, 1, 12, 2)">
</div>
<div class="input-group">
<label>出生日期</label>
<input type="text"
id="birth-day"
placeholder="如：1-31"
maxlength="2"
autocomplete="off"
oninput="validateNumber(this, 1, 31, 2)">
</div>
</div>
<button onclick="getFortune()">查看运势</button>
</div>
</div>
<div id="result" class="result"></div>
</div>
<script>
function 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 class="snake-decoration">🐍 ~ ~ ~</div>
<h2>🌟 ${name}的蛇年运势预测 🌟</h2>
<div class="zodiac-info">
${getZodiacInfo(data.zodiac_sign, data.is_snake_year)}
</div>
<p>总体运势：${getEmoji(data.overall)} ${data.overall}</p>
<p>事业运：${getEmoji(data.career)} ${data.career}</p>
<p>感情运：${getEmoji(data.love)} ${data.love}</p>
<p>财运：${getEmoji(data.wealth)} ${data.wealth}</p>
<p>健康运：${getEmoji(data.health)} ${data.health}</p>
<p>🔮 幸运数字：${data.lucky_numbers.join('、')}</p>
<p>🎨 幸运颜色：${data.lucky_colors.join('、')}</p>
<p>🌿 开运方位：${data.lucky_directions.join('、')}</p>
${data.is_snake_year ? '<p class="special-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年是您的本命年 🎊<br>
<span style="color: #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) % 12
zodiac_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 fortune
@app.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 shutil
shutil.copy('蛇迎新春.png', 'static/蛇迎新春.png')
app.run(debug=True)
嗨，我是LucianaiB。如果你觉得我的分享有价值，不妨通过以下方式表达你的支持：👍 点赞来表达你的喜爱，📁 关注以获取我的最新消息，💬 评论与我交流你的见解。我会继续努力，为你带来更多精彩和实用的内容。
点击这里👉LucianaiB ，获取最新动态，⚡️ 让信息传递更加迅速。
