fdzcxy212206231
/
bloggingplatform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

把东西放入vue文件夹

Browse Source
search-results-page
黄佳程 1 week ago
parent 84605266ff
commit 55bfb8a598
20 changed files with 112 additions and 63 deletions
Show Stats Download Patch File Download Diff File

8
.idea/.gitignore vendored
Unescape View File

@ -0,0 +1,8 @@
# 默认忽略的文件
/shelf/
/workspace.xml
# 基于编辑器的 HTTP 客户端请求
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

9
.idea/bloggingplatform.iml
Unescape View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/inspectionProfiles/Project_Default.xml
Unescape View File

@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

6
.idea/misc.xml
Unescape View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" default="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>

8
.idea/modules.xml
Unescape View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/bloggingplatform.iml" filepath="$PROJECT_DIR$/.idea/bloggingplatform.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml
Unescape View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

0
.gitignore → vue/.gitignore vendored
Unescape View File

0
README.md → vue/README.md
Unescape View File

0
babel.config.js → vue/babel.config.js
Unescape View File

0
jsconfig.json → vue/jsconfig.json
Unescape View File

0
package-lock.json → vue/package-lock.json generated
Unescape View File

0
package.json → vue/package.json
Unescape View File

0
public/favicon.ico → vue/public/favicon.ico
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

0
public/index.html → vue/public/index.html
Unescape View File

0
src/App.vue → vue/src/App.vue
Unescape View File

0
src/assets/logo.png → vue/src/assets/logo.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

132
src/components/BlogSearch.vue → vue/src/components/BlogSearch.vue
Unescape View File

@ -1,75 +1,73 @@
<template> <template>
<!-- 搜索区域 --> <div>
<div v-if="!showResults" class="search-component"> <!-- 搜索区域 -->
<input type="text" v-model="searchTerm" placeholder="请输入搜索词" /> <div v-if="!showResults" class="search-component">
<button @click="performSearch">搜索</button> <input type="text" v-model="searchTerm" placeholder="请输入搜索词" />
</div> <button @click="performSearch">搜索</button>
<!-- 搜索结果展示区域 -->
<div v-if="showResults" class="search-results-page">
<!-- 搜索词展示 -->
<div class="search-term-display">
<h2>搜索结果：“{{ searchTerm }}”</h2>
</div> </div>
<!-- 排序与筛选区域 --> <!-- 搜索结果展示区域 -->
<div class="sort-filter-area"> <div v-if="showResults" class="search-results-page">
<!-- 排序方式选择 --> <!-- 搜索词展示 -->
<div class="sort-by"> <div class="search-term-display">
<label for="sort-select">排序方式：</label> <h2>搜索结果：“{{ searchTerm }}”</h2>
<select id="sort-select" v-model="sortBy">
<option value="relevance">相关性</option>
<option value="publishDate-desc">发布日期（最新）</option>
<option value="publishDate-asc">发布日期（最旧）</option>
<option value="popularity">热度</option>
</select>
</div> </div>
<!-- 筛选条件选择 --> <!-- 排序与筛选区域 -->
<div class="filter-by"> <div class="sort-filter-area">
<label for="category-select">文章类别：</label> <!-- 排序方式选择 -->
<select id="category-select" v-model="filterConditions.category"> <div class="sort-by">
<option value="">全部</option> <label for="sort-select">排序方式：</label>
<option value="food">美食</option> <select id="sort-select" v-model="sortBy">
<option value="travel">旅游</option> <option value="relevance">相关性</option>
<option value="technology">科技</option> <option value="publishDate-desc">发布日期（最新）</option>
</select> <option value="publishDate-asc">发布日期（最旧）</option>
<label for="time-range-select">时间范围：</label> <option value="popularity">热度</option>
<select id="time-range-select" v-model="filterConditions.timeRange"> </select>
<option value="">全部</option> </div>
<option value="this-week">本周</option>
<option value="this-month">本月</option>
<option value="this-year">本年内</option>
</select>
</div>
<!-- 应用筛选与排序按钮 --> <!-- 筛选条件选择 -->
<button @click="applyFilter">应用筛选</button> <div class="filter-by">
<button @click="sortResults">排序</button> <label for="category-select">文章类别：</label>
</div> <select id="category-select" v-model="filterConditions.category">
<option value="">全部</option>
<option value="food">美食</option>
<option value="travel">旅游</option>
<option value="technology">科技</option>
</select>
<label for="time-range-select">时间范围：</label>
<select id="time-range-select" v-model="filterConditions.timeRange">
<option value="">全部</option>
<option value="this-week">本周</option>
<option value="this-month">本月</option>
<option value="this-year">本年内</option>
</select>
</div>
<!-- 搜索结果列表展示 --> <!-- 应用筛选与排序按钮 -->
<div class="result-list-area"> <button @click="applyFilter">应用筛选</button>
<ul> <button @click="sortResults">排序</button>
<li v-for="(result, index) in searchResults" :key="index"> </div>
<!-- 突出显示搜索词 -->
<h3 v-html="result.title | highlight(searchTerm)"></h3>
<p v-html="result.summary | highlight(searchTerm)"></p>
<p>发布日期：{{ result.publishDate }}</p>
</li>
</ul>
</div>
<!-- 分页区域 --> <!-- 搜索结果列表展示 -->
<div class="pagination-area"> <div class="result-list-area">
<button @click="goToPreviousPage" :disabled="currentPage === 1">上一页</button> <ul>
<span>第{{ currentPage }}页 / 共{{ totalPages }}页</span> <li v-for="(result, index) in searchResults" :key="index">
<button @click="goToNextPage" :disabled="currentPage === totalPages">下一页</button> <!-- 突出显示搜索词 -->
</div> <h3 v-html="result.title | highlight(searchTerm)"></h3>
<p v-html="result.summary | highlight(searchTerm)"></p>
<p>发布日期：{{ result.publishDate }}</p>
</li>
</ul>
</div>
<!-- 返回相关区域 --> <!-- 最下面一排的导航按钮 -->
<div class="back-button-area"> <div class="bottom-navigation">
<button @click="goBackToSearch">返回搜索</button> <button @click="goToPreviousPage" :disabled="currentPage === 1">上一页</button>
<span>第{{ currentPage }}页 / 共{{ totalPages }}页</span>
<button @click="goToNextPage" :disabled="currentPage === totalPages">下一页</button>
<button @click="goBackToSearch">返回搜索</button>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -259,4 +257,12 @@ button {
.back-button-area { .back-button-area {
margin-top: 20px; margin-top: 20px;
} }
.bottom-navigation {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #ccc;
padding-top: 20px;
}
</style> </style>

0
src/main.js → vue/src/main.js
Unescape View File

0
vue.config.js → vue/vue.config.js
Unescape View File

0
yarn.lock → vue/yarn.lock
Unescape View File

Write Preview
Loading…
Cancel
Save