Maven 進階與前端實戰
前言
二輪考核的內容下來了，由整體項目構建轉為實現特定模塊的功能。對細節的要求更高了，而且有手搓線程池、手搓依賴注入等進階要求，又有得學力。嘻嘻，太簡單了，只要我手搓 Spring Boot 框架…又幻想了家人們。
我決定先自閉幾天，把現在該學的學學了，不然滿腦子都是項目 😰
--------4.23-------
做夢夢到我把依賴注入一步步手搓出來了 😋，然后就被肚子痛醒了。
來遲到地說說這幾天的安排，因為 blog 越做越多，所以要弄一個目錄來方便我找需要的知識；這幾天把前端學完，大概 2 - 3 天吧，然后 2 天左右學習項目的部署，就可以開始看看二輪項目要怎么入手了。
日程
最絕望的一集，因為之前移動了硬盤導致 VMware 卸也卸不干凈，安裝又安裝不了，弄到 9 點多才弄完，今天可能學不了什么新東西了。
如果沒有內容的話，大概會放在明天做成合訂版。
--------4.23-------
現在下午 1 點，上課偷偷把 Maven 進階部分學了，寫了 blog 就去睡覺。
6 點 40，摸了一會🐟，先來復習一下前端內容，提醒自己別忘記看完計算機網絡剩下的一點點內容。
歐 shift，差點忘記要統計獎項了。
發現前端有部分筆記沒寫，今天補補吧。
做完筆記應該快 10 點，要處理些瑣事了，結果弄了半天也沒把學校郵箱弄出來。
學習記錄
記錄一下今天學的知識，方便復習。
操作系統
- 程序鏈接的三種方式，裝入內存的三種方式
- 內存保護，越界檢查
- 連續內存分配管理方式
- 動態分區分配算法
- 分頁儲存，地址變換的計算
- 基本地址變換機構，快表優化速度
- 多級頁表的結構，注意點
--------4.23-------
計算機網絡
- 網絡層的功能
- IP 數據報的結構
- TTL
- IPv4 協議
學習內容
省流
- Maven 進階
- 請求 js 封裝
- ElementPlus 表單驗證
- ElMessageBox 消息彈框
1. Maven 進階
1）分模塊設計
在實際項目開發中，一個人往往只負責某個模塊的開發。將模塊按功能/層進行拆分，再通過 Maven 進行導入。
2）繼承，聚合
類似 Java 的繼承，Maven 子工程可以繼承父工程的配置信息以及依賴。設計一個僅帶 Maven 配置的模塊作為父工程：
<parent> <groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.4.4</version><relativePath/>
</parent><groupId>com.itheima</groupId>
<artifactId>tlias-parent</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>pom</packaging><!-- 設置打包方式為 pom -->
在子工程中引入繼承：
<parent><groupId>com.itheima</groupId><artifactId>tlias-parent</artifactId><version>1.0-SNAPSHOT</version><relativePath>../tlias-parent/pom.xml</relativePath> <!-- 父工程相對路徑 -->
</parent>
依賴管理
通過 <dependencyManagement> 來控制子工程的依賴版本：
<dependencyManagement><dependencies><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.36</version><optional>true</optional></dependency></dependencies>
</dependencyManagement>
注意：
- 此時子工程的依賴可以不需要指定版本，如果指定，以子工程的版本為準。
- 依賴管理必須指定版本，而不能默認繼承父工程的版本，這只在
<dependencies>中生效。
聚合
當父類構建 Maven 工程時，會將 <modules> 作為它的子工程自動構建：
<modules><module>../tlias-utils</module><module>../tlias-pojo</module><module>../tlias-web-management</module>
</modules>
2. 請求 js 封裝
解耦實現基本的前端發送請求路徑功能。
1）在 vite.config.js 配置 api 路徑信息
server: {proxy: {'/api': {target: 'http://localhost:8080',secure: false,changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),}}
}
2）實現異步發送 api 請求的工具類
import axios from 'axios'// 創建 axios 實例對象
const request = axios.create({baseURL: '/api',timeout: 600000
})// axios 的響應 response 攔截器
request.interceptors.response.use((response) => { // 成功回調return response.data},(error) => { // 失敗回調return Promise.reject(error)}
)
export default request
3）在對應模塊 .js 實現 api 請求方法
import request from "@/utils/request";// 查詢全部部門數據
export const queryAllApi = () => request.get('/depts');// 新增
export const addApi = (dept) => request.post('/depts', dept);// 根據 ID 查詢
export const queryByIdApi = (id) => request.get(`/depts/${id}`);// 修改
export const updateApi = (dept) => request.put('/depts', dept);// 刪除
export const deleteByIdApi = (id) => request.delete(`/depts?id=${id}`);
4）在對應 Vue 組件中調用 api 方法
// 查詢
const deptList = ref([])
const search = async () => {const result = await queryAllApi();if(result.code){deptList.value = result.data;}
}
3. ElementPlus 表單驗證
1）表單驗證 ref 數據
const rules = ref({name:[{required: true,message:'必填項',trigger:'blur'}, // trigger 事件監聽{min:2,max:10,message:'長度在 2 - 10 之間',trigger:'blur'}]
})
2）設置校驗參數
const deptFormRef = ref();if(!deptFormRef.value) return;deptFormRef.value.validate(async (valid) => {if(valid){ // 表單驗證是否通過// 通過}else{// 不通過}})
3）綁定校驗規則 rules 和數據名稱 prop
<el-form :model="dept" :rules="rules" ref="deptFormRef"> <!-- 綁定校驗規則和校驗參數 --><el-form-item label="部門名稱" label-width="80px" prop="name"> <!-- 綁定數據名稱 --><el-input v-model="dept.name"/></el-form-item>
</el-form>
4）重置規則
if(deptFormRef.value){deptFormRef.value.resetFields();
}
4. ElMessageBox 消息彈框
const delById = async(id)=>{ElMessageBox.confirm("確認刪除？","提示",{ confirmButtonText:'確認',cancelButtonText:'取消',type:'warning'}).then(async ()=>{const result = await deleteByIdApi(id);if(result.code){ElMessage.success("刪除成功");search();}else{ElMessage.error(result.msg);}}).catch(()=>{ElMessage.info("取消刪除");})
}
結語
我竟無言以對。
)
