完成并上线
This commit is contained in:
zhcnyuyang
parent
ad6e221fc7
commit
3938e8ba4e
@ -3,6 +3,13 @@
|
||||
<system.webServer>
|
||||
<rewrite>
|
||||
<rules>
|
||||
<rule name="Redirect to HTTPS" stopProcessing="true">
|
||||
<match url="(.*)" />
|
||||
<conditions>
|
||||
<add input="{HTTPS}" pattern="off" ignoreCase="true" />
|
||||
</conditions>
|
||||
<action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
|
||||
</rule>
|
||||
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
|
||||
<match url="(.*)" />
|
||||
<conditions logicalGrouping="MatchAll">
|
||||
|
||||
@ -8,7 +8,33 @@ export default defineComponent({
|
||||
titles:[],
|
||||
error:null,
|
||||
isLoading: false,
|
||||
pagination: null
|
||||
pagination: null as { page: number, pageSize: number, pageCount: number, total: number } | null,
|
||||
currentPageInput: 1,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_currentPage(): number {
|
||||
if (this.pagination && typeof this.pagination.page === 'number') {
|
||||
return this.pagination.page;
|
||||
}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const pageParam = params.get('page');
|
||||
if (pageParam) {
|
||||
const parsedPage = parseInt(pageParam, 10);
|
||||
if (!isNaN(parsedPage) && parsedPage > 0) {
|
||||
return parsedPage;
|
||||
}
|
||||
}
|
||||
return 1;
|
||||
},
|
||||
totalPages(): number {
|
||||
return (this.pagination && typeof this.pagination.pageCount === 'number' && this.pagination.pageCount > 0) ? this.pagination.pageCount : 1;
|
||||
},
|
||||
isFirstPage(): boolean {
|
||||
return this._currentPage === 1;
|
||||
},
|
||||
isLastPage(): boolean {
|
||||
return this._currentPage === this.totalPages;
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
@ -16,54 +42,109 @@ export default defineComponent({
|
||||
this.isLoading=true;
|
||||
this.error=null;
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const type = params.get('type');
|
||||
console.log('type!',type);
|
||||
let pageNum=1;
|
||||
if(this.isActiveRoute('Examples')){
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const page = params.get('page');
|
||||
if(page!=null){
|
||||
pageNum=parseInt(page, 10);
|
||||
const pageParam = params.get('page');
|
||||
if(pageParam!=null){
|
||||
const parsedPage = parseInt(pageParam, 10);
|
||||
if(!isNaN(parsedPage) && parsedPage > 0){
|
||||
pageNum=parsedPage;
|
||||
}
|
||||
}
|
||||
let reqarg='/api/project-examples?fields=title,createdAt&sort=createdAt:desc&pagination[page]='+pageNum+'&pagination[pageSize]=15';
|
||||
this.currentPageInput = pageNum;
|
||||
|
||||
let reqarg=`/api/project-examples?fields=title,createdAt&sort=createdAt:desc&pagination[page]=${pageNum}&pagination[pageSize]=15`;
|
||||
this.$axios.get(reqarg)
|
||||
.then(response =>{
|
||||
const resp = response.data;
|
||||
this.pagination = resp.meta.pagination;
|
||||
// if(resp.meta.pagination.pageCount==0){
|
||||
// window.location.href = '/Examples';
|
||||
// console.log('turn');
|
||||
// }
|
||||
|
||||
if (this.pagination && typeof this.pagination.page === 'number') {
|
||||
this.currentPageInput = this.pagination.page;
|
||||
}
|
||||
|
||||
if (resp && Array.isArray(resp.data)) {
|
||||
this.titles = resp.data;
|
||||
console.log('reqarg',reqarg);
|
||||
if(this.titles.length==0){
|
||||
this.error = "返回的 JSON 对象中不存在 'data' 数组";
|
||||
if(this.titles.length === 0 && this.pagination && this.pagination.pageCount > 0 && this.pagination.page > this.pagination.pageCount){
|
||||
// 如果请求的页码超出总页数，且有数据（虽然这里是 length === 0，但 pageCount > 0 暗示有数据分布在其他页）
|
||||
// 则跳转到最后一页
|
||||
this.navigateToPage(this.pagination.pageCount);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
this.error = "返回的 JSON 对象中不存在 'data' 数组";
|
||||
this.pagination = null;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
this.error = '请求失败，请稍后重试';
|
||||
this.pagination = null;
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
isActiveRoute:function(routename) {
|
||||
// Example: Apply style if route name starts with 'user-'
|
||||
console.log('Current route name:', this.$route.path, 'Comparing with:', routename);
|
||||
return this.$route.path === routename;
|
||||
navigateToPage(page: number | string) {
|
||||
const targetPage = Number(page);
|
||||
|
||||
if (isNaN(targetPage) || targetPage < 1 || (this.pagination && this.pagination.pageCount > 0 && targetPage > this.totalPages) || targetPage === this._currentPage) {
|
||||
if (targetPage !== this._currentPage && (targetPage < 1 || (this.pagination && this.pagination.pageCount > 0 && targetPage > this.totalPages))) {
|
||||
alert(`页码必须在 1 到 ${this.totalPages} 之间。`);
|
||||
}
|
||||
if (this.pagination && typeof this.pagination.page === 'number') {
|
||||
this.currentPageInput = this.pagination.page; // 重置输入框为当前有效页码
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 所有分页按钮都使用 window.location.href 跳转到 /Examples?page=xxx
|
||||
window.location.href = `/Examples?page=${targetPage}`;
|
||||
},
|
||||
goToFirstPage() {
|
||||
this.navigateToPage(1);
|
||||
},
|
||||
goToPreviousPage() {
|
||||
if (!this.isFirstPage) {
|
||||
this.navigateToPage(this._currentPage - 1);
|
||||
}
|
||||
},
|
||||
goToNextPage() {
|
||||
if (!this.isLastPage) {
|
||||
this.navigateToPage(this._currentPage + 1);
|
||||
}
|
||||
},
|
||||
goToLastPage() {
|
||||
if (this.pagination && this.pagination.pageCount) {
|
||||
this.navigateToPage(this.totalPages);
|
||||
}
|
||||
},
|
||||
jumpToPage() {
|
||||
const targetPage = Number(this.currentPageInput);
|
||||
if (!isNaN(targetPage)) {
|
||||
this.navigateToPage(targetPage);
|
||||
} else {
|
||||
alert('请输入有效的页码。');
|
||||
if (this.pagination && typeof this.pagination.page === 'number') {
|
||||
this.currentPageInput = this.pagination.page;
|
||||
}
|
||||
}
|
||||
},
|
||||
isActiveRoute(routePath: string): boolean {
|
||||
return this.$route.path === routePath;
|
||||
},
|
||||
toExamples:function(){
|
||||
window.location.href='/Examples';
|
||||
// 跳转到 /Examples 的第一页
|
||||
window.location.href='/Examples?page=1';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetch_items();
|
||||
// 同步 currentPageInput
|
||||
if (this.pagination && typeof this.pagination.page === 'number') {
|
||||
this.currentPageInput = this.pagination.page;
|
||||
} else {
|
||||
this.currentPageInput = this._currentPage; // _currentPage 会从 URL 读取 page 参数
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -86,15 +167,57 @@ export default defineComponent({
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-if="isLoading" class="text-center">加载中...</div>
|
||||
<div v-if="error" class="alert alert-danger">{{ error }}</div>
|
||||
<div v-if="!isLoading && !error && titles.length === 0 && pagination && pagination.pageCount === 0" class="text-center">
|
||||
暂无数据
|
||||
</div>
|
||||
</span>
|
||||
<!-- 分页组件 -->
|
||||
<span class="normalcontenttext" style="width: 100%;"
|
||||
v-if="isActiveRoute('/Examples') && pagination && pagination.pageCount >= 1">
|
||||
<div class="d-flex justify-content-center align-items-center mt-3 mb-3">
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination">
|
||||
<!-- 当前页码输入框, /总页数, 转到按钮 -->
|
||||
<li class="page-item d-flex align-items-center px-2">
|
||||
<button class="btn btn-sm btn-primary"
|
||||
@click.prevent="goToFirstPage"
|
||||
:disabled="isFirstPage">«</button>
|
||||
<button class="btn btn-sm btn-primary"
|
||||
@click.prevent="goToPreviousPage"
|
||||
:disabled="isFirstPage">‹</button>
|
||||
<input type="number" class="form-control form-control-sm"
|
||||
v-model.number="currentPageInput"
|
||||
@keyup.enter="jumpToPage"
|
||||
style="width: 70px; text-align: center; margin-right: 5px;"
|
||||
min="1" :max="totalPages">
|
||||
<span style="margin-right: 10px; font-size: .875rem;">/ {{ totalPages }}</span>
|
||||
<button class="btn btn-sm btn-primary" @click="jumpToPage"
|
||||
:disabled="Number(currentPageInput) === _currentPage || Number(currentPageInput) < 1 || Number(currentPageInput) > totalPages || isNaN(Number(currentPageInput))">
|
||||
转到
|
||||
</button>
|
||||
<button class="btn btn-sm btn-primary"
|
||||
@click.prevent="goToNextPage"
|
||||
:disabled="isLastPage">›</button>
|
||||
<button class="btn btn-sm btn-primary"
|
||||
@click.prevent="goToLastPage"
|
||||
:disabled="isLastPage">»</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</span>
|
||||
<span class="normalcontenttext" style="width: 100%;"
|
||||
v-if="isActiveRoute('/Examples')">
|
||||
|
||||
</span>
|
||||
<span class="normalcontenttext" style="width: 100%;" v-else>
|
||||
v-else-if="!isActiveRoute('/Examples') || (pagination && pagination.pageCount <= 1 && titles.length > 0 && !isLoading)">
|
||||
<!--
|
||||
显示“查看更多案例”按钮的条件：
|
||||
1. 当前不在 /Examples 路径下。
|
||||
2. 或者，当前在 /Examples 路径下，但只有一页数据（pagination.pageCount <= 1），且有数据（titles.length > 0），且不在加载中。
|
||||
-->
|
||||
<button type="button" class="btn btn-primary"
|
||||
@click="toExamples" style="width: 100%;">
|
||||
查看更多
|
||||
查看更多案例
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
@ -104,4 +227,25 @@ export default defineComponent({
|
||||
<style scoped lang="scss">
|
||||
@import "../publicstyle.scss";
|
||||
|
||||
.pagination .form-control-sm {
|
||||
height: calc(1.5em + .5rem + 2px);
|
||||
padding: .25rem .5rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
.pagination .btn-sm {
|
||||
padding: .25rem .5rem;
|
||||
font-size: .875rem;
|
||||
height: calc(1.5em + .5rem + 2px); /* 确保按钮高度与输入框一致 */
|
||||
display: inline-flex; /* 用于帮助垂直居中符号 */
|
||||
align-items: center; /* 用于帮助垂直居中符号 */
|
||||
justify-content: center; /* 用于帮助水平居中符号 */
|
||||
}
|
||||
|
||||
.pagination .page-item button.btn {
|
||||
border-radius: .2rem; /* Bootstrap 默认的 .btn 圆角 */
|
||||
}
|
||||
|
||||
.btn{
|
||||
margin-right: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,7 +12,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
|
||||
|
||||
const app = createApp(App)
|
||||
axios.defaults.baseURL = 'https://cms2.yangprivate.site'
|
||||
axios.defaults.baseURL = 'https://cms.kaldorei.site'
|
||||
// 全局挂载 axios，所有组件都可以 this.$axios 访问
|
||||
app.config.globalProperties.$axios = axios
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user