# Wordpress 前後分離
前端篇 <font size="3">*(不會有後端篇)*</font>
---
用戶生活+
----
簡訊插件
---
## 目錄
- 現況 (前端做了什麼)
- 工具 (Gulp, Vite)
- 目的 (工具的目的)
- 已知問題
---
## 現況
- Docker
- 處理畫面 - js & css & images & php
- API - 前後分離，依靠 api 溝通
- 資料夾結構
----
### 畫面
<font size="5">
跟原本的寫法沒有差別，php 寫 HTML，JS & CSS 來處理畫面與行為
</font>
----
### 畫面
CSS, JS, 都有經過 minify 或 uglify
<font size="3">PHP 引入 CSS & JS</font>
<font size="3">CSS</font>
<font size="3">JavaScirpt</font>
----
### API
<font size="5">
打 API 的同時需要帶上 cookie & nonce，PS 打 API 會自動夾帶 cookie，但 url 要注意
</font>
<font size="5">
生活+ 的 api
</font>
<br/>
<font size="5">
https://lab-edumall.udn.com/malllab/?rest_route=/udnwpsepuser/v1/auth/login
</font>
<br/>
<img src="https://i.imgur.com/BoOsF7k.png" width="600px" />
<br/>
----
### API (nonce)
```htmlmixed=
<!-- php -->
<script>
window._nonce = "<?php echo wp_create_nonce('wp_rest'); ?>";
</script>
```
```javascript=
// js
const url = `${window.location.pathname}?rest_route=/udnwpsepuser/v1/api/auth/my-profile`;
const response = await fetch(url, {
method: 'GET',
headers: {
"X-WP-Nonce": window?._nonce,
}
});
```
----
## 資料夾結構 (生活 + 為例)
<font size="4">
gulp - 開發時撰寫的檔案、gulp 的設定
<br/>
plugins - 插件本體 (php, 處理過的 css,js)
<br/>
wordpress - wordpress 本體
</font>
<br>
<!-- <img src="https://i.imgur.com/BQ9PKYZ.png" width="400" /> -->
---
## 工具
- Gulp
- 專案: 用戶生活+ 的會員系統插件
- 全部都需要自己寫，比較麻煩
- Vite
- 專案: 簡訊插件
- ps. 開發 Vue 時設定比較方便
----
### Gulp - tasks
<img src="https://i.imgur.com/bogDfbL.png" width="700" />
<font size="3">taskClean 清除編譯檔案 | taskCleanCopyFiles 清除複製的編譯檔案</font>
<font size="3">parallelTasks 編譯所有的檔案 | taskCopyAllFiles 複製所有的編譯檔案到 wordpress 裡面 (覆蓋舊檔案)</font>
----
### Gulp - script
<font size="4">
yarn dev - 監聽檔案改動並自動編譯
<br/>
yarn build - 編譯成 production 的檔案
<br/>
yarn clean - 刪除所有編譯出來的檔案
</font>
<a href="https://drive.google.com/file/d/1Q5I7kQ3cRwv4Z9K0UqiD38DPJZVobtIO/view?usp=share_link">
dev
</a>
<a href="https://drive.google.com/file/d/1ODeidmjS8m5k1M5iAzXiW7Y_Ezhrc1WM/view?usp=share_link">
build
</a>
----
### Vite
嘗試使用 Vue 開發
使用 [vite-php-setup](https://github.com/andrefelipe/vite-php-setup) 當作模板調整
(主要調整檔案輸出的路徑)
----
### Vite - manifest.json
<font size="3">透過此檔案可以知道所有資產的檔案名稱與路徑</font>
<img src="https://i.imgur.com/xnATjZD.png" width="750" />
----
### Vite - helper.php
<font size="5">用 manifest.json 組合出所有的 < script > 和 < link > </font>
<img src="https://i.imgur.com/7vWe4YG.png" width="750" />
----
### Vite - SPA
<font size="5">udn-sms-plugin-page.php 把所有 vite 產生的檔案引入</font>
<img src="https://i.imgur.com/tCKYA89.png" width="750" />
----
### Vite - SPA
<font size="5">全部相關的請求 (如下) 都用 udn-sms-plugin-page.php </font>
<font size="1">
https://lab-edumall.udn.com/malllab/wp-admin/admin.php?page=udn-sms-options
https://lab-edumall.udn.com/malllab/wp-admin/admin.php?page=udn-sms-record
</font>
<img src="https://i.imgur.com/4G6nXqz.png" width="750" />
---
## 達成目的
### 自動化
- 使用 Gulp 的專案就有寫複製功能，不需要手動處理
- 可以用比較新的功能，再透過工具處理相容性問題
- 用相關套件可以處理 CSS、JS 甚至圖片 (minify、uglify、tree shaking、.map 檔)
---
## 已知問題
目前沒有整合到 docker，並沒完全自動化
<font size="4">
所以開發時需要打 script ，或者開發時要手動改成開發時需要的設定，而且現在編譯完成的檔案都會進入 git
</font>
{"metaMigratedAt":"2023-06-17T19:02:44.206Z","metaMigratedFrom":"YAML","title":"wordpress 前後分離 (前端篇)","breaks":true,"slideOptions":"{\"spotlight\":{\"enabled\":false},\"touch\":false}","contributors":"[{\"id\":\"1db58682-ae66-4fa3-b482-aa32e54bc1d6\",\"add\":5745,\"del\":1972}]"}