初始化项目
This commit is contained in:
458
frontend/src/components/LotteryResults.vue
Normal file
458
frontend/src/components/LotteryResults.vue
Normal file
@@ -0,0 +1,458 @@
|
||||
<template>
|
||||
<div class="lottery-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="lottery-header">
|
||||
|
||||
</header>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="main-content">
|
||||
<!-- 左侧用户信息面板 -->
|
||||
<aside class="user-panel">
|
||||
<div class="panel-section">
|
||||
<h3>账户信息</h3>
|
||||
<div class="user-info">
|
||||
<div class="info-item">
|
||||
<span class="label">账户:</span>
|
||||
<span class="value">pmk1 (VIP)</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">快开码:</span>
|
||||
<span class="value">4701262635</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">余额:</span>
|
||||
<span class="value">125.7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section">
|
||||
<h3>开奖明细</h3>
|
||||
<div class="lottery-details">
|
||||
<div class="detail-item">
|
||||
<span class="label">期号:</span>
|
||||
<span class="value">20200114</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="label">开奖号码:</span>
|
||||
<div class="winning-numbers">
|
||||
<div class="ball red">5</div>
|
||||
<div class="ball green">8</div>
|
||||
<div class="ball blue">7</div>
|
||||
<div class="ball yellow">9</div>
|
||||
<div class="ball purple">2</div>
|
||||
<div class="ball pink">3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 右侧开奖结果表格 -->
|
||||
<div class="results-section">
|
||||
<div class="section-header">
|
||||
<div class="header-controls">
|
||||
<div class="filter">
|
||||
<label>期数:</label>
|
||||
<select>
|
||||
<option>1~10</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter">
|
||||
<label>玩法:</label>
|
||||
<select>
|
||||
<option>总和值</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="results-table-container">
|
||||
<table class="results-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>期号</th>
|
||||
<th>日期</th>
|
||||
<th>开奖时间</th>
|
||||
<th>开奖号码</th>
|
||||
<th>冠亚和</th>
|
||||
<th>冠亚军</th>
|
||||
<th>2串</th>
|
||||
<th>4串</th>
|
||||
<th>大小</th>
|
||||
<th>龙虎</th>
|
||||
<th>1~5尾</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="result in lotteryResults" :key="result.issue">
|
||||
<td>{{ result.issue }}</td>
|
||||
<td>{{ result.date }}</td>
|
||||
<td>{{ result.time }}</td>
|
||||
<td class="numbers-column">
|
||||
<div class="ball" v-for="(number, index) in result.numbers" :key="index" :class="getBallColorClass(index)">
|
||||
{{ number }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ result.sum }}</td>
|
||||
<td>{{ result.firstSecondSum }}</td>
|
||||
<td>{{ result.twoSeries }}</td>
|
||||
<td>{{ result.fourSeries }}</td>
|
||||
<td>{{ result.size }}</td>
|
||||
<td>{{ result.dragonTiger }}</td>
|
||||
<td class="tails-column">
|
||||
<div class="tail" v-for="(tail, index) in result.tails" :key="index" :class="getTailClass(tail)">
|
||||
{{ tail }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LotteryResults',
|
||||
data() {
|
||||
return {
|
||||
lotteryResults: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 页面加载时从后端获取彩票开奖结果数据
|
||||
this.fetchLotteryResults();
|
||||
},
|
||||
methods: {
|
||||
async fetchLotteryResults() {
|
||||
try {
|
||||
const response = await fetch('http://localhost:8080/api/lottery/results');
|
||||
if (response.ok) {
|
||||
this.lotteryResults = await response.json();
|
||||
} else {
|
||||
console.error('获取数据失败:', response.status);
|
||||
// 如果后端没有数据，使用模拟数据
|
||||
this.useMockData();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取数据时发生错误:', error);
|
||||
// 如果连接后端失败，使用模拟数据
|
||||
this.useMockData();
|
||||
}
|
||||
},
|
||||
useMockData() {
|
||||
// 使用模拟数据
|
||||
this.lotteryResults = [
|
||||
{
|
||||
issue: '202001214',
|
||||
date: '2020-01-21',
|
||||
time: '15:10:00',
|
||||
numbers: ['5', '8', '7', '9', '2', '3', '1', '10', '12', '4', '6', '11'],
|
||||
sum: '62',
|
||||
firstSecondSum: '33',
|
||||
twoSeries: '22',
|
||||
fourSeries: '',
|
||||
size: '大',
|
||||
dragonTiger: '龙',
|
||||
tails: ['虎', '龙', '虎', '虎', '龙']
|
||||
},
|
||||
{
|
||||
issue: '202001213',
|
||||
date: '2020-01-21',
|
||||
time: '15:05:00',
|
||||
numbers: ['8', '3', '7', '9', '5', '4', '6', '10', '12', '1', '2', '11'],
|
||||
sum: '67',
|
||||
firstSecondSum: '32',
|
||||
twoSeries: '22',
|
||||
fourSeries: '',
|
||||
size: '大',
|
||||
dragonTiger: '龙',
|
||||
tails: ['虎', '龙', '虎', '虎', '龙']
|
||||
},
|
||||
{
|
||||
issue: '202001212',
|
||||
date: '2020-01-21',
|
||||
time: '15:00:00',
|
||||
numbers: ['2', '8', '10', '11', '9', '12', '5', '3', '7', '4', '6', '1'],
|
||||
sum: '67',
|
||||
firstSecondSum: '32',
|
||||
twoSeries: '22',
|
||||
fourSeries: '',
|
||||
size: '大',
|
||||
dragonTiger: '龙',
|
||||
tails: ['虎', '龙', '虎', '虎', '龙']
|
||||
}
|
||||
];
|
||||
},
|
||||
getBallColorClass(index) {
|
||||
// 根据号码位置返回不同的颜色类
|
||||
const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'pink', 'orange', 'cyan', 'magenta', 'lime', 'teal', 'indigo'];
|
||||
return colors[index % colors.length];
|
||||
},
|
||||
getTailClass(tail) {
|
||||
// 根据龙虎返回不同的颜色类
|
||||
return tail === '龙' ? 'dragon' : 'tiger';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lottery-container {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* 顶部导航栏样式 */
|
||||
.lottery-header {
|
||||
background-color: #1a73e8;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-settings, .btn-exit {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-settings:hover, .btn-exit:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.header-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
background-color: #1557b0;
|
||||
}
|
||||
|
||||
.sub-tabs {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.sub-tab {
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sub-tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.sub-tab.active {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-settings.small {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 主要内容区域 */
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 左侧用户信息面板 */
|
||||
.user-panel {
|
||||
width: 200px;
|
||||
background-color: #f5f5f5;
|
||||
border-right: 1px solid #ddd;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panel-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.panel-section h3 {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-item, .detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.winning-numbers {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* 右侧开奖结果表格 */
|
||||
.results-section {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.filter select {
|
||||
padding: 4px 6px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 开奖结果表格 */
|
||||
.results-table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.results-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.results-table th, .results-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.results-table th {
|
||||
background-color: #f5f5f5;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.results-table tr:nth-child(even) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
/* 号码球样式 */
|
||||
.ball {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.numbers-column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ball.blue { background-color: #1a73e8; }
|
||||
.ball.red { background-color: #ea4335; }
|
||||
.ball.green { background-color: #34a853; }
|
||||
.ball.yellow { background-color: #fbbc05; }
|
||||
.ball.purple { background-color: #9c27b0; }
|
||||
.ball.pink { background-color: #e91e63; }
|
||||
.ball.orange { background-color: #ff9800; }
|
||||
.ball.cyan { background-color: #00bcd4; }
|
||||
.ball.magenta { background-color: #ff00ff; }
|
||||
.ball.lime { background-color: #00ff00; }
|
||||
.ball.teal { background-color: #009688; }
|
||||
.ball.indigo { background-color: #3f51b5; }
|
||||
|
||||
/* 龙虎样式 */
|
||||
.tails-column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.tail {
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tail.dragon { background-color: #ea4335; color: white; }
|
||||
.tail.tiger { background-color: #1a73e8; color: white; }
|
||||
</style>
|
||||
18
run-project.bat
Normal file
18
run-project.bat
Normal file
@@ -0,0 +1,18 @@
|
||||
@echo off
|
||||
|
||||
rem 启动后端Spring Boot应用
|
||||
echo 正在启动后端应用...
|
||||
start "后端服务" cmd /k "cd /d e:\git_resp\bocai && java -jar target/bocai-0.0.1-SNAPSHOT.jar"
|
||||
|
||||
rem 等待后端启动
|
||||
ping 127.0.0.1 -n 5 > nul
|
||||
|
||||
rem 启动前端Vue应用
|
||||
echo 正在启动前端应用...
|
||||
start "前端服务" cmd /k "cd /d e:\git_resp\bocai\frontend && npm run dev"
|
||||
|
||||
echo 前后端应用已启动！
|
||||
echo 后端服务：http://localhost:8080
|
||||
echo 前端服务：通常为 http://localhost:5173 (具体端口请查看前端启动日志)
|
||||
echo 按任意键退出...
|
||||
pause > nul
|
||||
21
run-project.sh
Normal file
21
run-project.sh
Normal file
@@ -0,0 +1,21 @@
|
||||
#!/bin/bash
|
||||
|
||||
# 启动后端Spring Boot应用
|
||||
echo "正在启动后端应用..."
|
||||
cd "$(dirname "$0")" && java -jar target/bocai-0.0.1-SNAPSHOT.jar &
|
||||
|
||||
# 等待后端启动
|
||||
sleep 5
|
||||
|
||||
# 启动前端Vue应用
|
||||
echo "正在启动前端应用..."
|
||||
cd frontend && npm run dev &
|
||||
|
||||
echo "前后端应用已启动！"
|
||||
echo "后端服务：http://localhost:8080"
|
||||
echo "前端服务：通常为 http://localhost:5173 (具体端口请查看前端启动日志)"
|
||||
echo "按 Ctrl+C 停止所有服务..."
|
||||
|
||||
# 等待用户中断
|
||||
trap "kill 0" EXIT
|
||||
wait
|
||||
@@ -0,0 +1,32 @@
|
||||
package com.tem.bocai.controller;
|
||||
|
||||
import com.tem.bocai.entity.LotteryResult;
|
||||
import com.tem.bocai.repository.LotteryResultRepository;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
@RestController
|
||||
@RequestMapping("/api/lottery")
|
||||
public class LotteryResultController {
|
||||
|
||||
@Autowired
|
||||
private LotteryResultRepository lotteryResultRepository;
|
||||
|
||||
// 获取所有彩票开奖结果
|
||||
@GetMapping("/results")
|
||||
public List<LotteryResult> getAllLotteryResults() {
|
||||
return lotteryResultRepository.findAll();
|
||||
}
|
||||
|
||||
// 根据期号获取彩票开奖结果
|
||||
@GetMapping("/results/{issue}")
|
||||
public LotteryResult getLotteryResultByIssue(@PathVariable String issue) {
|
||||
return lotteryResultRepository.findAll()
|
||||
.stream()
|
||||
.filter(result -> result.getIssue().equals(issue))
|
||||
.findFirst()
|
||||
.orElse(null);
|
||||
}
|
||||
}
|
||||
153
src/main/java/com/tem/bocai/entity/LotteryResult.java
Normal file
153
src/main/java/com/tem/bocai/entity/LotteryResult.java
Normal file
@@ -0,0 +1,153 @@
|
||||
package com.tem.bocai.entity;
|
||||
|
||||
import java.util.List;
|
||||
import jakarta.persistence.Column;
|
||||
import jakarta.persistence.ElementCollection;
|
||||
import jakarta.persistence.Entity;
|
||||
import jakarta.persistence.GeneratedValue;
|
||||
import jakarta.persistence.GenerationType;
|
||||
import jakarta.persistence.Id;
|
||||
import jakarta.persistence.JoinColumn;
|
||||
import jakarta.persistence.Table;
|
||||
|
||||
@Entity
|
||||
@Table(name = "lottery_results")
|
||||
public class LotteryResult {
|
||||
@Id
|
||||
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
||||
private Long id;
|
||||
|
||||
@Column(name = "issue", nullable = false, unique = true)
|
||||
private String issue; // 期号
|
||||
|
||||
@Column(name = "date", nullable = false)
|
||||
private String date; // 日期
|
||||
|
||||
@Column(name = "time", nullable = false)
|
||||
private String time; // 开奖时间
|
||||
|
||||
@ElementCollection
|
||||
@JoinColumn(name = "result_id")
|
||||
@Column(name = "number")
|
||||
private List<String> numbers; // 开奖号码
|
||||
|
||||
@Column(name = "sum", nullable = false)
|
||||
private String sum; // 总和值
|
||||
|
||||
@Column(name = "first_second_sum", nullable = false)
|
||||
private String firstSecondSum; // 冠亚和
|
||||
|
||||
@Column(name = "two_series", nullable = false)
|
||||
private String twoSeries; // 2串
|
||||
|
||||
@Column(name = "four_series", nullable = false)
|
||||
private String fourSeries; // 4串
|
||||
|
||||
@Column(name = "size", nullable = false)
|
||||
private String size; // 大小
|
||||
|
||||
@Column(name = "dragon_tiger", nullable = false)
|
||||
private String dragonTiger; // 龙虎
|
||||
|
||||
@ElementCollection
|
||||
@JoinColumn(name = "result_id")
|
||||
@Column(name = "tail")
|
||||
private List<String> tails; // 1~5尾
|
||||
|
||||
// getter和setter方法
|
||||
public Long getId() {
|
||||
return id;
|
||||
}
|
||||
|
||||
public void setId(Long id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
public String getIssue() {
|
||||
return issue;
|
||||
}
|
||||
|
||||
public void setIssue(String issue) {
|
||||
this.issue = issue;
|
||||
}
|
||||
|
||||
public String getDate() {
|
||||
return date;
|
||||
}
|
||||
|
||||
public void setDate(String date) {
|
||||
this.date = date;
|
||||
}
|
||||
|
||||
public String getTime() {
|
||||
return time;
|
||||
}
|
||||
|
||||
public void setTime(String time) {
|
||||
this.time = time;
|
||||
}
|
||||
|
||||
public List<String> getNumbers() {
|
||||
return numbers;
|
||||
}
|
||||
|
||||
public void setNumbers(List<String> numbers) {
|
||||
this.numbers = numbers;
|
||||
}
|
||||
|
||||
public String getSum() {
|
||||
return sum;
|
||||
}
|
||||
|
||||
public void setSum(String sum) {
|
||||
this.sum = sum;
|
||||
}
|
||||
|
||||
public String getFirstSecondSum() {
|
||||
return firstSecondSum;
|
||||
}
|
||||
|
||||
public void setFirstSecondSum(String firstSecondSum) {
|
||||
this.firstSecondSum = firstSecondSum;
|
||||
}
|
||||
|
||||
public String getTwoSeries() {
|
||||
return twoSeries;
|
||||
}
|
||||
|
||||
public void setTwoSeries(String twoSeries) {
|
||||
this.twoSeries = twoSeries;
|
||||
}
|
||||
|
||||
public String getFourSeries() {
|
||||
return fourSeries;
|
||||
}
|
||||
|
||||
public void setFourSeries(String fourSeries) {
|
||||
this.fourSeries = fourSeries;
|
||||
}
|
||||
|
||||
public String getSize() {
|
||||
return size;
|
||||
}
|
||||
|
||||
public void setSize(String size) {
|
||||
this.size = size;
|
||||
}
|
||||
|
||||
public String getDragonTiger() {
|
||||
return dragonTiger;
|
||||
}
|
||||
|
||||
public void setDragonTiger(String dragonTiger) {
|
||||
this.dragonTiger = dragonTiger;
|
||||
}
|
||||
|
||||
public List<String> getTails() {
|
||||
return tails;
|
||||
}
|
||||
|
||||
public void setTails(List<String> tails) {
|
||||
this.tails = tails;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
package com.tem.bocai.repository;
|
||||
|
||||
import com.tem.bocai.entity.LotteryResult;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import org.springframework.stereotype.Repository;
|
||||
|
||||
@Repository
|
||||
public interface LotteryResultRepository extends JpaRepository<LotteryResult, Long> {
|
||||
// 可以添加自定义查询方法
|
||||
}
|
||||
Reference in New Issue
Block a user