19 changed files with 1056 additions and 19 deletions
-
10.idea/.gitignore
-
4.idea/shelf/_2025_11_5_16_53____.xml
-
4.idea/shelf/_2025_11_5_17_05____.xml
-
4.idea/shelf/___1.xml
-
63.idea/shelf/在变基之前未提交的更改_[更改]1/shelved.patch
-
63.idea/shelf/在进行更新之前于_2025_11_5_17_05_取消提交了更改_[更改]/shelved.patch
-
64.idea/workspace.xml
-
BIN吴光慧学习笔记/11.6/11.6学习总结-吴光慧.docx
-
0吴光慧学习笔记/11.6/GuPiao.vue
-
BIN吴光慧学习笔记/11.6/道氏理论定义及基本观点2.docx
-
5吴光慧学习笔记/hello_vue3/src/App.vue
-
434吴光慧学习笔记/hello_vue3/src/components/GuPiao.vue
-
BIN孙维宁学习笔记/11.6孙维宁学习笔记.docx
-
0孙维宁学习笔记/孙维宁-夺宝奇兵超级云脑机构动向学习笔记-10.29.docx
-
BIN孙维宁学习笔记/孙维宁-学习股票基础道氏理论-11.6.docx
-
BIN尹顺宇学习笔记/尹顺宇11.06作业/尹顺宇11.06AI预测大模型之时空预测学习.docx
-
424尹顺宇学习笔记/尹顺宇11.06作业/尹顺宇11.06EasyExcel学习笔记.md
-
BIN尹顺宇学习笔记/尹顺宇11.06作业/尹顺宇11.06EasyExcel学习笔记.pdf
-
BIN尹顺宇学习笔记/尹顺宇11.06作业/尹顺宇11.06学习总结.docx
@ -1,10 +0,0 @@ |
|||
# 默认忽略的文件 |
|||
/shelf/ |
|||
/workspace.xml |
|||
# 基于编辑器的 HTTP 客户端请求 |
|||
/httpRequests/ |
|||
# 依赖于环境的 Maven 主目录路径 |
|||
/mavenHomeManager.xml |
|||
# Datasource local storage ignored files |
|||
/dataSources/ |
|||
/dataSources.local.xml |
|||
@ -0,0 +1,4 @@ |
|||
<changelist name="在进行签出之前于_2025_11_5_16_53_取消提交了更改_[更改]" date="1762332821806" recycled="true" deleted="true"> |
|||
<option name="PATH" value="$PROJECT_DIR$/.idea/shelf/在进行签出之前于_2025_11_5_16_53_取消提交了更改_[更改]/shelved.patch" /> |
|||
<option name="DESCRIPTION" value="在进行签出之前于 2025/11/5 16:53 取消提交了更改 [更改]" /> |
|||
</changelist> |
|||
@ -0,0 +1,4 @@ |
|||
<changelist name="在进行更新之前于_2025_11_5_17_05_取消提交了更改_[更改]" date="1762333549002" recycled="true" deleted="true"> |
|||
<option name="PATH" value="$PROJECT_DIR$/.idea/shelf/在进行更新之前于_2025_11_5_17_05_取消提交了更改_[更改]/shelved.patch" /> |
|||
<option name="DESCRIPTION" value="在进行更新之前于 2025/11/5 17:05 取消提交了更改 [更改]" /> |
|||
</changelist> |
|||
@ -0,0 +1,4 @@ |
|||
<changelist name="在变基之前未提交的更改_[更改]1" date="1762333474424" recycled="true" deleted="true"> |
|||
<option name="PATH" value="$PROJECT_DIR$/.idea/shelf/在变基之前未提交的更改_[更改]1/shelved.patch" /> |
|||
<option name="DESCRIPTION" value="在变基之前未提交的更改 [更改]" /> |
|||
</changelist> |
|||
@ -0,0 +1,63 @@ |
|||
Index: .idea/workspace.xml
|
|||
IDEA additional info: |
|||
Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP |
|||
<+><?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<project version=\"4\">\r\n <component name=\"AutoImportSettings\">\r\n <option name=\"autoReloadType\" value=\"SELECTIVE\" />\r\n </component>\r\n <component name=\"ChangeListManager\">\r\n <list default=\"true\" id=\"1250a154-aa13-4278-9e87-904a86c4dbd2\" name=\"更改\" comment=\"11.1\" />\r\n <option name=\"SHOW_DIALOG\" value=\"false\" />\r\n <option name=\"HIGHLIGHT_CONFLICTS\" value=\"true\" />\r\n <option name=\"HIGHLIGHT_NON_ACTIVE_CHANGELIST\" value=\"false\" />\r\n <option name=\"LAST_RESOLUTION\" value=\"IGNORE\" />\r\n </component>\r\n <component name=\"Git.Settings\">\r\n <option name=\"RECENT_BRANCH_BY_REPOSITORY\">\r\n <map>\r\n <entry key=\"$PROJECT_DIR$\" value=\"sunweining/feature-20251028175924-学习\" />\r\n </map>\r\n </option>\r\n <option name=\"RECENT_GIT_ROOT_PATH\" value=\"$PROJECT_DIR$\" />\r\n </component>\r\n <component name=\"PropertiesComponent\"><![CDATA[{\r\n \"keyToString\": {\r\n \"git-widget-placeholder\": \"dev\",\r\n \"last_opened_file_path\": \"D:/study_dbqb/Dbqb_Study/孙维宁学习笔记\",\r\n \"node.js.selected.package.tslint\": \"(autodetect)\"\r\n }\r\n}]]></component>\r\n <component name=\"TaskManager\">\r\n <task id=\"LOCAL-00001\" summary=\"11.1\">\r\n <option name=\"closed\" value=\"true\" />\r\n <created>1761983013107</created>\r\n <option name=\"number\" value=\"00001\" />\r\n <option name=\"presentableId\" value=\"LOCAL-00001\" />\r\n <option name=\"project\" value=\"LOCAL\" />\r\n <updated>1761983013107</updated>\r\n </task>\r\n <task id=\"LOCAL-00002\" summary=\"11.1\">\r\n <option name=\"closed\" value=\"true\" />\r\n <created>1761983018907</created>\r\n <option name=\"number\" value=\"00002\" />\r\n <option name=\"presentableId\" value=\"LOCAL-00002\" />\r\n <option name=\"project\" value=\"LOCAL\" />\r\n <updated>1761983018907</updated>\r\n </task>\r\n <option name=\"localTasksCounter\" value=\"3\" />\r\n <servers />\r\n </component>\r\n <component name=\"VcsManagerConfiguration\">\r\n <MESSAGE value=\"11.1\" />\r\n <option name=\"LAST_COMMIT_MESSAGE\" value=\"11.1\" />\r\n </component>\r\n</project> |
|||
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP |
|||
<+>UTF-8 |
|||
===================================================================
|
|||
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
|
|||
--- a/.idea/workspace.xml (revision f366c0480cf623186a778468de70c0443ae1d471)
|
|||
+++ b/.idea/workspace.xml (date 1762333349191)
|
|||
@@ -4,7 +4,7 @@
|
|||
<option name="autoReloadType" value="SELECTIVE" /> |
|||
</component> |
|||
<component name="ChangeListManager"> |
|||
- <list default="true" id="1250a154-aa13-4278-9e87-904a86c4dbd2" name="更改" comment="11.1" />
|
|||
+ <list default="true" id="1250a154-aa13-4278-9e87-904a86c4dbd2" name="更改" comment="11.5" />
|
|||
<option name="SHOW_DIALOG" value="false" /> |
|||
<option name="HIGHLIGHT_CONFLICTS" value="true" /> |
|||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" /> |
|||
@@ -18,13 +18,13 @@
|
|||
</option> |
|||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" /> |
|||
</component> |
|||
- <component name="PropertiesComponent"><![CDATA[{
|
|||
- "keyToString": {
|
|||
- "git-widget-placeholder": "dev",
|
|||
- "last_opened_file_path": "D:/study_dbqb/Dbqb_Study/孙维宁学习笔记",
|
|||
- "node.js.selected.package.tslint": "(autodetect)"
|
|||
+ <component name="PropertiesComponent">{
|
|||
+ "keyToString": {
|
|||
+ "git-widget-placeholder": "dev",
|
|||
+ "last_opened_file_path": "D:/study_dbqb/Dbqb_Study/孙维宁学习笔记",
|
|||
+ "node.js.selected.package.tslint": "(autodetect)"
|
|||
} |
|||
-}]]></component>
|
|||
+}</component>
|
|||
<component name="TaskManager"> |
|||
<task id="LOCAL-00001" summary="11.1"> |
|||
<option name="closed" value="true" /> |
|||
@@ -42,11 +42,20 @@
|
|||
<option name="project" value="LOCAL" /> |
|||
<updated>1761983018907</updated> |
|||
</task> |
|||
- <option name="localTasksCounter" value="3" />
|
|||
+ <task id="LOCAL-00003" summary="11.5">
|
|||
+ <option name="closed" value="true" />
|
|||
+ <created>1762333284024</created>
|
|||
+ <option name="number" value="00003" />
|
|||
+ <option name="presentableId" value="LOCAL-00003" />
|
|||
+ <option name="project" value="LOCAL" />
|
|||
+ <updated>1762333284024</updated>
|
|||
+ </task>
|
|||
+ <option name="localTasksCounter" value="4" />
|
|||
<servers /> |
|||
</component> |
|||
<component name="VcsManagerConfiguration"> |
|||
<MESSAGE value="11.1" /> |
|||
- <option name="LAST_COMMIT_MESSAGE" value="11.1" />
|
|||
+ <MESSAGE value="11.5" />
|
|||
+ <option name="LAST_COMMIT_MESSAGE" value="11.5" />
|
|||
</component> |
|||
</project> |
|||
\ No newline at end of file |
|||
@ -0,0 +1,63 @@ |
|||
Index: .idea/workspace.xml
|
|||
IDEA additional info: |
|||
Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP |
|||
<+><?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<project version=\"4\">\r\n <component name=\"AutoImportSettings\">\r\n <option name=\"autoReloadType\" value=\"SELECTIVE\" />\r\n </component>\r\n <component name=\"ChangeListManager\">\r\n <list default=\"true\" id=\"1250a154-aa13-4278-9e87-904a86c4dbd2\" name=\"更改\" comment=\"11.1\" />\r\n <option name=\"SHOW_DIALOG\" value=\"false\" />\r\n <option name=\"HIGHLIGHT_CONFLICTS\" value=\"true\" />\r\n <option name=\"HIGHLIGHT_NON_ACTIVE_CHANGELIST\" value=\"false\" />\r\n <option name=\"LAST_RESOLUTION\" value=\"IGNORE\" />\r\n </component>\r\n <component name=\"Git.Settings\">\r\n <option name=\"RECENT_BRANCH_BY_REPOSITORY\">\r\n <map>\r\n <entry key=\"$PROJECT_DIR$\" value=\"sunweining/feature-20251028175924-学习\" />\r\n </map>\r\n </option>\r\n <option name=\"RECENT_GIT_ROOT_PATH\" value=\"$PROJECT_DIR$\" />\r\n </component>\r\n <component name=\"PropertiesComponent\"><![CDATA[{\r\n \"keyToString\": {\r\n \"git-widget-placeholder\": \"dev\",\r\n \"last_opened_file_path\": \"D:/study_dbqb/Dbqb_Study/孙维宁学习笔记\",\r\n \"node.js.selected.package.tslint\": \"(autodetect)\"\r\n }\r\n}]]></component>\r\n <component name=\"TaskManager\">\r\n <task id=\"LOCAL-00001\" summary=\"11.1\">\r\n <option name=\"closed\" value=\"true\" />\r\n <created>1761983013107</created>\r\n <option name=\"number\" value=\"00001\" />\r\n <option name=\"presentableId\" value=\"LOCAL-00001\" />\r\n <option name=\"project\" value=\"LOCAL\" />\r\n <updated>1761983013107</updated>\r\n </task>\r\n <task id=\"LOCAL-00002\" summary=\"11.1\">\r\n <option name=\"closed\" value=\"true\" />\r\n <created>1761983018907</created>\r\n <option name=\"number\" value=\"00002\" />\r\n <option name=\"presentableId\" value=\"LOCAL-00002\" />\r\n <option name=\"project\" value=\"LOCAL\" />\r\n <updated>1761983018907</updated>\r\n </task>\r\n <option name=\"localTasksCounter\" value=\"3\" />\r\n <servers />\r\n </component>\r\n <component name=\"VcsManagerConfiguration\">\r\n <MESSAGE value=\"11.1\" />\r\n <option name=\"LAST_COMMIT_MESSAGE\" value=\"11.1\" />\r\n </component>\r\n</project> |
|||
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP |
|||
<+>UTF-8 |
|||
===================================================================
|
|||
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
|
|||
--- a/.idea/workspace.xml (revision 01f816774a0da35f14d27ece486a2a0b59203511)
|
|||
+++ b/.idea/workspace.xml (date 1762333474422)
|
|||
@@ -4,7 +4,7 @@
|
|||
<option name="autoReloadType" value="SELECTIVE" /> |
|||
</component> |
|||
<component name="ChangeListManager"> |
|||
- <list default="true" id="1250a154-aa13-4278-9e87-904a86c4dbd2" name="更改" comment="11.1" />
|
|||
+ <list default="true" id="1250a154-aa13-4278-9e87-904a86c4dbd2" name="更改" comment="11.5" />
|
|||
<option name="SHOW_DIALOG" value="false" /> |
|||
<option name="HIGHLIGHT_CONFLICTS" value="true" /> |
|||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" /> |
|||
@@ -18,13 +18,13 @@
|
|||
</option> |
|||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" /> |
|||
</component> |
|||
- <component name="PropertiesComponent"><![CDATA[{
|
|||
- "keyToString": {
|
|||
- "git-widget-placeholder": "dev",
|
|||
- "last_opened_file_path": "D:/study_dbqb/Dbqb_Study/孙维宁学习笔记",
|
|||
- "node.js.selected.package.tslint": "(autodetect)"
|
|||
+ <component name="PropertiesComponent">{
|
|||
+ "keyToString": {
|
|||
+ "git-widget-placeholder": "dev",
|
|||
+ "last_opened_file_path": "D:/study_dbqb/Dbqb_Study/孙维宁学习笔记",
|
|||
+ "node.js.selected.package.tslint": "(autodetect)"
|
|||
} |
|||
-}]]></component>
|
|||
+}</component>
|
|||
<component name="TaskManager"> |
|||
<task id="LOCAL-00001" summary="11.1"> |
|||
<option name="closed" value="true" /> |
|||
@@ -42,11 +42,20 @@
|
|||
<option name="project" value="LOCAL" /> |
|||
<updated>1761983018907</updated> |
|||
</task> |
|||
- <option name="localTasksCounter" value="3" />
|
|||
+ <task id="LOCAL-00003" summary="11.5">
|
|||
+ <option name="closed" value="true" />
|
|||
+ <created>1762333284024</created>
|
|||
+ <option name="number" value="00003" />
|
|||
+ <option name="presentableId" value="LOCAL-00003" />
|
|||
+ <option name="project" value="LOCAL" />
|
|||
+ <updated>1762333284024</updated>
|
|||
+ </task>
|
|||
+ <option name="localTasksCounter" value="4" />
|
|||
<servers /> |
|||
</component> |
|||
<component name="VcsManagerConfiguration"> |
|||
<MESSAGE value="11.1" /> |
|||
- <option name="LAST_COMMIT_MESSAGE" value="11.1" />
|
|||
+ <MESSAGE value="11.5" />
|
|||
+ <option name="LAST_COMMIT_MESSAGE" value="11.5" />
|
|||
</component> |
|||
</project> |
|||
\ No newline at end of file |
|||
@ -1,10 +1,9 @@ |
|||
<template> |
|||
<Count/> |
|||
<br> |
|||
<LoveTalk/> |
|||
<GuPiao/> |
|||
</template> |
|||
|
|||
<script setup lang="ts" name="App"> |
|||
import Count from './components/Count.vue' |
|||
import LoveTalk from './components/LoveTalk.vue' |
|||
import GuPiao from './components/GuPiao.vue'; |
|||
</script> |
|||
@ -0,0 +1,434 @@ |
|||
<template> |
|||
<div class="exam-system"> |
|||
<!-- 头部标题 --> |
|||
<header class="header"> |
|||
<div class="logo"> |
|||
<span class="icon">📋</span> |
|||
<span class="title">股票知识评测系统</span> |
|||
</div> |
|||
<div class="subtitle">全方面评估您股票知识水平,还能个性化学习建议</div> |
|||
</header> |
|||
|
|||
<div class="main-content"> |
|||
<!-- 左侧题目区域 --> |
|||
<div class="left-panel"> |
|||
<!-- 题目显示区 --> |
|||
<div class="question-area"> |
|||
<div class="question-header"> |
|||
<input type="text" v-model="searchText" placeholder="搜索题目..." class="search-input" /> |
|||
</div> |
|||
|
|||
<div class="question-content"> |
|||
<h3 class="question-title">{{ currentQuestion.title }}</h3> |
|||
|
|||
<div class="options"> |
|||
<div |
|||
v-for="option in currentQuestion.options" |
|||
:key="option.key" |
|||
class="option-item" |
|||
:class="{ 'selected': selectedAnswer === option.key }" |
|||
@click="selectAnswer(option.key)" |
|||
> |
|||
<span class="radio-btn" :class="{ 'checked': selectedAnswer === option.key }"></span> |
|||
<span class="option-label">{{ option.key }}. {{ option.text }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 答题卡预览区 --> |
|||
<div class="answer-preview"> |
|||
<div class="preview-content"> |
|||
<!-- 可以显示答题进度或其他信息 --> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部按钮 --> |
|||
<div class="bottom-actions"> |
|||
<button class="btn btn-secondary" @click="submitExam">提交</button> |
|||
<button class="btn btn-primary" @click="previousQuestion">← 上一题</button> |
|||
<button class="btn btn-primary" @click="nextQuestion">下一题 →</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 右侧答题卡 --> |
|||
<div class="right-panel"> |
|||
<div class="answer-card"> |
|||
<div class="card-header"> |
|||
<span class="folder-icon">📁</span> |
|||
<span class="card-title">试题导航</span> |
|||
</div> |
|||
|
|||
<div class="card-grid"> |
|||
<div |
|||
v-for="(item, index) in totalQuestions" |
|||
:key="index" |
|||
class="grid-item" |
|||
:class="getQuestionStatus(index)" |
|||
@click="jumpToQuestion(index)" |
|||
> |
|||
{{ index + 1 }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed } from 'vue' |
|||
|
|||
// 搜索文本 |
|||
const searchText = ref('') |
|||
|
|||
// 当前题目索引 |
|||
const currentQuestionIndex = ref(0) |
|||
|
|||
// 用户答案记录 |
|||
const userAnswers = ref({}) |
|||
|
|||
// 选中的答案 |
|||
const selectedAnswer = ref('') |
|||
|
|||
// 总题目数 |
|||
const totalQuestions = ref(25) |
|||
|
|||
// 题目数据(示例) |
|||
const questions = ref([ |
|||
{ |
|||
id: 1, |
|||
title: '以下哪个不属于股票的基本特征?', |
|||
options: [ |
|||
{ key: 'A', text: '收益性' }, |
|||
{ key: 'B', text: '风险性' }, |
|||
{ key: 'C', text: '流动性' }, |
|||
{ key: 'D', text: '确定性' } |
|||
] |
|||
}, |
|||
{ |
|||
id: 2, |
|||
title: '股票市场的主要功能是什么?', |
|||
options: [ |
|||
{ key: 'A', text: '资金融通' }, |
|||
{ key: 'B', text: '价格发现' }, |
|||
{ key: 'C', text: '资源配置' }, |
|||
{ key: 'D', text: '以上都是' } |
|||
] |
|||
} |
|||
// 可以添加更多题目... |
|||
]) |
|||
|
|||
// 当前题目 |
|||
const currentQuestion = computed(() => { |
|||
return questions.value[currentQuestionIndex.value] || questions.value[0] |
|||
}) |
|||
|
|||
// 选择答案 |
|||
const selectAnswer = (answer) => { |
|||
selectedAnswer.value = answer |
|||
userAnswers.value[currentQuestionIndex.value] = answer |
|||
} |
|||
|
|||
// 上一题 |
|||
const previousQuestion = () => { |
|||
if (currentQuestionIndex.value > 0) { |
|||
currentQuestionIndex.value-- |
|||
selectedAnswer.value = userAnswers.value[currentQuestionIndex.value] || '' |
|||
} |
|||
} |
|||
|
|||
// 下一题 |
|||
const nextQuestion = () => { |
|||
if (currentQuestionIndex.value < questions.value.length - 1) { |
|||
currentQuestionIndex.value++ |
|||
selectedAnswer.value = userAnswers.value[currentQuestionIndex.value] || '' |
|||
} |
|||
} |
|||
|
|||
// 跳转到指定题目 |
|||
const jumpToQuestion = (index) => { |
|||
currentQuestionIndex.value = index |
|||
selectedAnswer.value = userAnswers.value[index] || '' |
|||
} |
|||
|
|||
// 获取题目状态 |
|||
const getQuestionStatus = (index) => { |
|||
if (index === currentQuestionIndex.value) { |
|||
return 'current' |
|||
} |
|||
if (userAnswers.value[index]) { |
|||
return 'answered' |
|||
} |
|||
return '' |
|||
} |
|||
|
|||
// 提交考试 |
|||
const submitExam = () => { |
|||
const answeredCount = Object.keys(userAnswers.value).length |
|||
if (answeredCount < questions.value.length) { |
|||
if (confirm(`您还有 ${questions.value.length - answeredCount} 道题未作答,确定要提交吗?`)) { |
|||
// 提交逻辑 |
|||
console.log('提交答案:', userAnswers.value) |
|||
} |
|||
} else { |
|||
// 提交逻辑 |
|||
console.log('提交答案:', userAnswers.value) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.exam-system { |
|||
min-height: 100vh; |
|||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); |
|||
color: #fff; |
|||
font-family: 'Microsoft YaHei', Arial, sans-serif; |
|||
} |
|||
|
|||
.header { |
|||
padding: 20px 40px; |
|||
background: rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.logo { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
font-size: 24px; |
|||
font-weight: bold; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.icon { |
|||
font-size: 28px; |
|||
} |
|||
|
|||
.subtitle { |
|||
color: rgba(255, 255, 255, 0.8); |
|||
font-size: 14px; |
|||
margin-left: 38px; |
|||
} |
|||
|
|||
.main-content { |
|||
display: flex; |
|||
gap: 20px; |
|||
padding: 20px 40px; |
|||
max-width: 1400px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.left-panel { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20px; |
|||
} |
|||
|
|||
.question-area { |
|||
background: rgba(20, 40, 80, 0.6); |
|||
border: 1px solid rgba(100, 150, 200, 0.3); |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.question-header { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.search-input { |
|||
width: 100%; |
|||
padding: 10px 15px; |
|||
background: rgba(0, 0, 0, 0.3); |
|||
border: 1px solid rgba(100, 150, 200, 0.3); |
|||
border-radius: 4px; |
|||
color: #fff; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.search-input::placeholder { |
|||
color: rgba(255, 255, 255, 0.4); |
|||
} |
|||
|
|||
.question-content { |
|||
padding: 20px 0; |
|||
} |
|||
|
|||
.question-title { |
|||
color: rgba(255, 255, 255, 0.6); |
|||
font-size: 14px; |
|||
margin-bottom: 20px; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.options { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
} |
|||
|
|||
.option-item { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 12px; |
|||
padding: 12px 15px; |
|||
background: rgba(0, 0, 0, 0.2); |
|||
border: 1px solid rgba(100, 150, 200, 0.3); |
|||
border-radius: 4px; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.option-item:hover { |
|||
background: rgba(100, 150, 200, 0.2); |
|||
border-color: rgba(100, 150, 200, 0.5); |
|||
} |
|||
|
|||
.option-item.selected { |
|||
background: rgba(220, 80, 80, 0.3); |
|||
border-color: rgba(220, 80, 80, 0.6); |
|||
} |
|||
|
|||
.radio-btn { |
|||
width: 18px; |
|||
height: 18px; |
|||
border: 2px solid rgba(255, 255, 255, 0.5); |
|||
border-radius: 50%; |
|||
display: inline-block; |
|||
position: relative; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.radio-btn.checked { |
|||
border-color: #e74c3c; |
|||
background: #e74c3c; |
|||
} |
|||
|
|||
.radio-btn.checked::after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
width: 8px; |
|||
height: 8px; |
|||
background: #fff; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.option-label { |
|||
font-size: 15px; |
|||
} |
|||
|
|||
.answer-preview { |
|||
background: rgba(20, 40, 80, 0.6); |
|||
border: 1px solid rgba(100, 150, 200, 0.3); |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
min-height: 150px; |
|||
} |
|||
|
|||
.bottom-actions { |
|||
display: flex; |
|||
gap: 15px; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.btn { |
|||
padding: 12px 30px; |
|||
border: none; |
|||
border-radius: 4px; |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.btn-primary { |
|||
background: rgba(60, 120, 180, 0.8); |
|||
color: #fff; |
|||
} |
|||
|
|||
.btn-primary:hover { |
|||
background: rgba(60, 120, 180, 1); |
|||
} |
|||
|
|||
.btn-secondary { |
|||
background: rgba(60, 120, 180, 0.8); |
|||
color: #fff; |
|||
} |
|||
|
|||
.btn-secondary:hover { |
|||
background: rgba(70, 130, 190, 1); |
|||
} |
|||
|
|||
.right-panel { |
|||
width: 280px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.answer-card { |
|||
background: rgba(20, 40, 80, 0.6); |
|||
border: 1px solid rgba(100, 150, 200, 0.3); |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
} |
|||
|
|||
.card-header { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
margin-bottom: 20px; |
|||
padding-bottom: 15px; |
|||
border-bottom: 1px solid rgba(100, 150, 200, 0.2); |
|||
} |
|||
|
|||
.folder-icon { |
|||
font-size: 20px; |
|||
} |
|||
|
|||
.card-title { |
|||
color: #6db3f2; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.card-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(5, 1fr); |
|||
gap: 10px; |
|||
} |
|||
|
|||
.grid-item { |
|||
aspect-ratio: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: rgba(60, 120, 180, 0.6); |
|||
border-radius: 4px; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.grid-item:hover { |
|||
background: rgba(60, 120, 180, 0.8); |
|||
transform: scale(1.05); |
|||
} |
|||
|
|||
.grid-item.current { |
|||
background: #3498db; |
|||
box-shadow: 0 0 10px rgba(52, 152, 219, 0.5); |
|||
} |
|||
|
|||
.grid-item.answered { |
|||
background: rgba(60, 120, 180, 0.8); |
|||
} |
|||
|
|||
.grid-item:nth-child(1) { |
|||
background: #e74c3c; |
|||
} |
|||
|
|||
.grid-item:nth-child(2) { |
|||
background: #27ae60; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,424 @@ |
|||
# EasyExcel学习 |
|||
|
|||
## 1.环境搭建 |
|||
|
|||
``` |
|||
<dependency> |
|||
<groupId>com.alibaba</groupId> |
|||
<artifactId>easyexcel</artifactId> |
|||
<version>3.1.2</version> |
|||
</dependency> |
|||
``` |
|||
|
|||
**项目结构**: |
|||
|
|||
 |
|||
|
|||
|
|||
|
|||
## 2.本地模拟实现 |
|||
|
|||
### 1.简单写入excel |
|||
|
|||
第一步:首先创建实体类Employee |
|||
|
|||
> @ExcelProperty(value = "员工id",index = 0)注解就是代表的excel表的表头的每一列的名字 |
|||
|
|||
```java |
|||
@Data@Data |
|||
|
|||
@NoArgsConstructor |
|||
@AllArgsConstructor |
|||
public class Employee { |
|||
@ExcelProperty(value = "员工id",index = 0) |
|||
private Integer id; |
|||
@ExcelProperty(value = "员工姓名",index = 1) |
|||
private String name; |
|||
@ExcelProperty(value = "入职日期",index = 2) |
|||
private Date date; |
|||
@ExcelProperty(value = "员工工资",index = 3) |
|||
private Double salary; |
|||
} |
|||
``` |
|||
|
|||
第二步:创建工具类:用于获取当前文件夹的路径 |
|||
|
|||
``` java |
|||
public class TestFileUtil { |
|||
public static String getPath(){ |
|||
return TestFileUtil.class.getResource("/").getPath().replace("classes/", ""); |
|||
} |
|||
|
|||
public static void main(String[] args) { |
|||
System.out.println(getPath()); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
第三步:写操作主要代码: |
|||
|
|||
```java |
|||
public class SimpleWrite { |
|||
|
|||
//准备测试数据的方法 |
|||
private List<Employee> data(int count) { |
|||
List<Employee> list = ListUtils.newArrayList(); |
|||
for (int i = 1; i < count; i++) { |
|||
|
|||
list.add(new Employee(i,"测试数据1"+i,new Date(),6.6*i)); |
|||
} |
|||
return list; |
|||
} |
|||
//快速入门写数据 |
|||
@Test |
|||
public void write(){ |
|||
String fileName = TestFileUtil.getPath() + "simpleWrite" + System.currentTimeMillis() + ".xlsx"; |
|||
// 这里 需要指定写用哪个class去写,然后写到第一个sheet,名字为模板 然后文件流会自动关闭 |
|||
EasyExcel.write(fileName, Employee.class).sheet("模板").doWrite(data(10)); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
### 2.简单读出excel |
|||
|
|||
只需要一个方法,就可以读出excel表格信息并在控制台打印 |
|||
|
|||
```java |
|||
//快速入门读数据 |
|||
public class SimpleReader { |
|||
@Test |
|||
public void read(){ |
|||
|
|||
String fileName = TestFileUtil.getPath() + "simpleWrite1762401148464.xlsx"; |
|||
// 这里默认每次会读取100条数据 然后返回过来 直接调用使用数据就行 |
|||
// 具体需要返回多少行可以在`PageReadListener`的构造函数设置 |
|||
EasyExcel.read(fileName, Employee.class, new PageReadListener<Employee>(dataList -> { |
|||
for (Employee demoData : dataList) { |
|||
System.out.println(demoData); |
|||
} |
|||
})).sheet().doRead(); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
### 3.批量写入excel |
|||
|
|||
``` java |
|||
public class ManyWrite { |
|||
//准备测试数据的方法 |
|||
private List<Employee> data(int count) { |
|||
List<Employee> list = ListUtils.newArrayList(); |
|||
for (int i = 1; i < count; i++) { |
|||
list.add(new Employee(i,"测试数据1"+i,new Date(),6.6*i)); |
|||
} |
|||
return list; |
|||
} |
|||
//批量写数据 |
|||
@Test |
|||
public void write(){ |
|||
// 方法2: 如果写到不同的sheet 同一个对象 |
|||
String fileName = TestFileUtil.getPath() + "repeatedWrite" + System.currentTimeMillis() + ".xlsx"; |
|||
// 这里 指定文件 |
|||
try (ExcelWriter excelWriter = EasyExcel.write(fileName, Employee.class).build()) { |
|||
|
|||
WriteSheet writeSheet = EasyExcel.writerSheet( "测试数据").build(); |
|||
long t1 =System.currentTimeMillis(); |
|||
// 去调用写入 |
|||
for (int i = 0; i < 100; i++) { |
|||
|
|||
// 分页去数据库查询数据 这里可以去数据库查询每一页的数据 |
|||
List<Employee> data = data(10000); |
|||
excelWriter.write(data, writeSheet); |
|||
} |
|||
long t2 =System.currentTimeMillis(); |
|||
System.out.println("耗时:"+(t2-t1)); |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
### 4.读海量数据 |
|||
|
|||
读海量数据需要自定义监听器EmployeeListener |
|||
|
|||
```java |
|||
//自定义监听器读数据 |
|||
public class EmployeeListener implements ReadListener<Employee> { |
|||
private ArrayList<Employee> list = new ArrayList<>(); |
|||
private int count = 100; |
|||
private EmployeeDao dao; |
|||
public EmployeeListener(EmployeeDao dao) { |
|||
this.dao = dao; |
|||
} |
|||
//每读完一行数据,就会调用此方法 |
|||
@Override |
|||
public void invoke(Employee employee, AnalysisContext analysisContext) { |
|||
//将读取的一行数据保存到list中 |
|||
list.add(employee); |
|||
//判断是不是到达缓存量了 |
|||
if(list.size()>=100){ |
|||
//操作数据库 |
|||
dao.save(list); |
|||
list = new ArrayList<>(count); |
|||
} |
|||
} |
|||
//读完整个excel之后后调用此方法 |
|||
@Override |
|||
public void doAfterAllAnalysed(AnalysisContext analysisContext) { |
|||
if(list.size()>0){ |
|||
//操作数据库 |
|||
dao.save(list); |
|||
list = new ArrayList<>(count); |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
以下是Dao层模拟数据库操作 |
|||
|
|||
```java |
|||
//模拟操作数据库 |
|||
public class EmployeeDao { |
|||
public void save(List<Employee> list){ |
|||
System.out.println(list.size()+"模拟操作数据库"); |
|||
|
|||
} |
|||
} |
|||
``` |
|||
|
|||
```java |
|||
//读海量数据 |
|||
public class ManyRead { |
|||
@Test |
|||
public void read(){ |
|||
String fileName = TestFileUtil.getPath() + "repeatedWrite1762406295595.xlsx"; |
|||
ExcelReader reader = EasyExcel.read(fileName, Employee.class, new EmployeeListener(new EmployeeDao())).build(); |
|||
ReadSheet sheet = EasyExcel.readSheet().build(); |
|||
reader.read(sheet); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
### 5.使用模板填充Excel表格 |
|||
|
|||
首先在模板中用{.}定义好每一列的名称对应什么 |
|||
|
|||
 |
|||
|
|||
``` java |
|||
//练习填充数据 |
|||
public class FillWriter { |
|||
//准备测试数据的方法 |
|||
private List<Employee> data(int count) { |
|||
List<Employee> list = ListUtils.newArrayList(); |
|||
for (int i = 1; i < count; i++) { |
|||
|
|||
list.add(new Employee(i,"测试数据1"+i,new Date(),6.6*i)); |
|||
} |
|||
return list; |
|||
} |
|||
@Test |
|||
public void write(){ |
|||
String fileName = TestFileUtil.getPath() + "listFill" + System.currentTimeMillis() + ".xlsx"; |
|||
String templateFileName = TestFileUtil.getPath() + "模板.xlsx"; |
|||
try (ExcelWriter excelWriter = EasyExcel.write(fileName).withTemplate(templateFileName).build()) { |
|||
WriteSheet writeSheet = EasyExcel.writerSheet().build(); |
|||
long t1 = System.currentTimeMillis(); |
|||
for (int i = 0; i < 100; i++) { |
|||
excelWriter.fill(data(10000), writeSheet); |
|||
} |
|||
long t2 = System.currentTimeMillis(); |
|||
System.out.println("耗时:"+(t2-t1)); |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
## 3.前后端端实现导入导出Excel |
|||
|
|||
**listener定义**: |
|||
|
|||
```java |
|||
package com.itheima.listener; |
|||
|
|||
import com.alibaba.excel.context.AnalysisContext; |
|||
import com.alibaba.excel.read.listener.ReadListener; |
|||
import com.itheima.domain.Employee; |
|||
import com.itheima.service.EmployeeService; |
|||
|
|||
import java.util.ArrayList; |
|||
import java.util.List; |
|||
|
|||
public class EmployeeListener implements ReadListener<Employee> { |
|||
/** |
|||
* 批量处理的数据量阈值 |
|||
*/ |
|||
private int count = 10000; |
|||
private EmployeeService dao ; |
|||
|
|||
/** |
|||
* 临时存储读取的数据列表 |
|||
*/ |
|||
private List<Employee> list = new ArrayList<>(count); |
|||
|
|||
public EmployeeListener(EmployeeService dao) { |
|||
this.dao = dao; |
|||
} |
|||
|
|||
/** |
|||
* 处理每一行数据 |
|||
* 当读取到一行数据时会调用此方法 |
|||
* @param employee 当前行的员工数据 |
|||
* @param analysisContext 分析上下文 |
|||
*/ |
|||
@Override |
|||
public void invoke(Employee employee, AnalysisContext analysisContext) { |
|||
list.add(employee); |
|||
// 当累积的数据量达到阈值时,执行批量插入操作 |
|||
if(list.size()>=count){ |
|||
dao.addData(list); |
|||
// 重新初始化列表,准备下一批数据 |
|||
list = new ArrayList<>(count); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 所有数据解析完成后的回调方法 |
|||
* 用于处理剩余未达到批量阈值的数据 |
|||
* @param analysisContext 分析上下文 |
|||
*/ |
|||
@Override |
|||
public void doAfterAllAnalysed(AnalysisContext analysisContext) { |
|||
// 处理最后一批未达到阈值的数据 |
|||
if(list.size()>0){ |
|||
dao.addData(list); |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
**pojo层:** |
|||
|
|||
pojo层和上面定义一致: |
|||
|
|||
``` |
|||
@Data |
|||
@NoArgsConstructor |
|||
@AllArgsConstructor |
|||
public class Employee { |
|||
@ExcelProperty(value = "员工id",index = 0) |
|||
private Integer id; |
|||
@ExcelProperty(value = "员工姓名",index = 1) |
|||
private String name; |
|||
@ExcelProperty(value = "入职日期",index = 2) |
|||
private Date date; |
|||
@ExcelProperty(value = "员工工资",index = 3) |
|||
private Double salary; |
|||
} |
|||
``` |
|||
|
|||
**controller层:** |
|||
|
|||
主要是两个方法,一个上传,一个下载 |
|||
|
|||
```java |
|||
@Controller |
|||
@RequestMapping("/") |
|||
public class MyController { |
|||
@Autowired |
|||
private EmployeeService service; |
|||
|
|||
@RequestMapping("/upload") |
|||
@ResponseBody |
|||
public void upload(MultipartFile file, HttpServletResponse response) throws IOException { |
|||
long start = System.currentTimeMillis(); |
|||
EasyExcel.read(file.getInputStream(), Employee.class, new EmployeeListener(service)).sheet().doRead(); |
|||
long end = System.currentTimeMillis(); |
|||
response.setContentType("text/html;charset=utf-8"); |
|||
|
|||
response.getWriter().print("上传成功,共用时:"+(end-start)); |
|||
|
|||
} |
|||
|
|||
@RequestMapping("/download") |
|||
public void download(HttpServletResponse response) throws IOException { |
|||
// 这里注意 使用swagger 会导致各种问题,直接用浏览器或者用postman |
|||
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); |
|||
response.setCharacterEncoding("utf-8"); |
|||
// 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系 |
|||
String fileName = URLEncoder.encode("数据库中导出的数据", "UTF-8").replaceAll("\\+", "%20"); |
|||
response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx"); |
|||
ExcelWriter writer = EasyExcel.write(response.getOutputStream(), Employee.class).build(); |
|||
WriteSheet sheet = EasyExcel.writerSheet("数据").build(); |
|||
writer.write(service.getData(), sheet); |
|||
writer.close(); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
**Service层** |
|||
|
|||
```java |
|||
package com.itheima.service; |
|||
|
|||
import com.itheima.domain.Employee; |
|||
import org.springframework.stereotype.Service; |
|||
|
|||
import java.util.List; |
|||
|
|||
public interface EmployeeService { |
|||
public List<Employee> getData(); |
|||
public void addData(List<Employee> list); |
|||
} |
|||
``` |
|||
|
|||
```java |
|||
package com.itheima.service.impl; |
|||
|
|||
import com.itheima.domain.Employee; |
|||
import com.itheima.mapper.EmployeeMapper; |
|||
import com.itheima.service.EmployeeService; |
|||
import org.springframework.beans.factory.annotation.Autowired; |
|||
import org.springframework.stereotype.Service; |
|||
|
|||
import java.util.List; |
|||
|
|||
@Service |
|||
public class EmployeeServiceImpl implements EmployeeService { |
|||
|
|||
@Autowired |
|||
private EmployeeMapper dao; |
|||
|
|||
@Override |
|||
public List<Employee> getData() { |
|||
return dao.getData(); |
|||
} |
|||
|
|||
@Override |
|||
public void addData(List<Employee> list) { |
|||
dao.beathInsert(list); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
**Mapper层** |
|||
|
|||
```java |
|||
public interface EmployeeMapper { |
|||
public void beathInsert(@Param("list") List<Employee> list); |
|||
|
|||
// @Select("select * from employee ") |
|||
@Select("select * from employee") |
|||
@ResultType(Employee.class) |
|||
List<Employee> getData(); |
|||
|
|||
} |
|||
``` |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue