發表文章

目前顯示的是 5月, 2023的文章

Laravel + Vue3 + Vuex 筆記

npm install 以下套件 "vue": "^3.2.37", "vue-loader": "^16.8.3", "vue-template-compiler": "^2.7.10", "vuex": "^4.0.2" resources/js/exampleStore.js 範例 export default { state () { return { count: 0 } }, mutations: { increment (state) { state.count++ } } }; 在 resources/js/app.js 加上 import { createApp } from 'vue'; import { createStore } from 'vuex'; import exampleStore from './exampleStore.js'; window.store = createStore({ modules: { example: exampleStore } }); window.app = createApp({ // }) .use(store) .mount('#app'); 執行 npm run prod

[Laravel 8.x] 分頁筆記及應用

圖片
一、筆記 1. 自訂分頁樣板 {{ $paginator->links('admin::pagination') }} 2. 每頁多個分頁 $teachers = Teacher::paginate(15, ['*'], 'teacher-page'); $students = Student::paginate(15, ['*'], 'student-page'); 3. Url 附加 hash $teachers = Teacher::paginate()->fragment('teacher-tab'); $students = Student::paginate()->fragment('student-tab'); 二、應用 1. Tab + 分頁 情境如下圖,要在同一個畫面顯示老師和學生的資料,老師和學生分別放在不同 Tab,有各自的表格和分頁。 如果程式只單純的寫↓,我們點學生的其他頁碼,老師也會同步顯示一樣的頁碼。 $teachers = Teacher::paginate(); $students = Student::paginate(); 要區別兩者 paginate 需設定第三個參數 pageName。 $teachers = Teacher::paginate(15, ['*'], 'tab1-page'); $students = Student::paginate(15, ['*'], 'tab2-page'); 再來是我們點的是學生的頁碼,所以畫面載入之後應該回到學生的 Tab,而不是顯示老師的,所以要在 Url 加上 hash,讓前端的 JavaScript 去判斷要顯示哪個 Tab,完整程式如下: $teachers = Teacher::paginate(15, ['*'], 'tab1-page')->fragment('tab-1'); $students = Student::paginate(1...