阿里百秀後臺管理專案筆記 ---- Day01
阿新 • • 發佈：2020-10-15
### 摘要
在此記錄一下阿里百秀專案的教學視訊的學習筆記，部分頁面被我修改了，某些頁面效果會不一樣，基本操作是一致的，好記性不如爛筆頭，加油叭！！！
### step 1 : 整合全部靜態頁面
1. 將靜態頁面全部拷貝到 admin 目錄中。
2. 將副檔名由 .html 改為 .php ，頁面中的 a 連結也需要調整。
3. 調整頁面檔案中的靜態資源路徑，將原本的相對路徑調整為絕對路徑。
在 sublime 工具中選中資料夾 admin 右擊 --> 查詢&&替換
### step 2 : 抽離公共部分
由於每一個頁面中都有一部分程式碼（側邊欄和頭部）是相同的，分散到各個檔案中，不便於維護，所以應該分別抽象到一個公共的檔案中。
1. 在 admin 目錄中建立一個 com （common 的簡稱）的資料夾
2. 在這個目錄裡建立一個 sidebar.php 和 nav.php 文 件
3. 隨便在一個檔案中（eg: index.php）找到側邊欄和頭部的程式碼片段將程式碼抽離出來
*com / sidebar.php*
```html
>
>
文章管理
>寫文章
>分類目錄
```
*sliderbar.php*
```php
//php部分
$current_page = isset($current_page) ? $current_page : '';
```
```php
//html部分
>
評論管理
>
使用者管理
>
系統設定
>圖片輪播
>網站設定
```
*comments.php*
```php
```
*users.php*
```php
```
*settings.php*
```php
```
.....
所有需要跳轉頁面顯示高亮狀態的頁面以此類推都加上 $current_pag 變數
### step 4 : 處理登入頁面
#### 調整HTML頁面
1. 將 login.php 中的登入連線換成 button 按鈕
```html
登 錄
```
```html
```
2. 往表單元素中新增相應的屬性 method 與 action
```html
```
```php
" >
```
3. 給郵箱和密碼框新增 name 屬性
```html
```
```html
```
#### 處理執行PHP指令碼
1. 專案配置檔案
由於在接下來的開發過程中，肯定有一部分公共的成員，例如資料庫名稱，資料庫主機，資料庫使用者名稱密碼等，這些資料應該放到公共的地方，抽象成一個配置檔案 config.php 放到專案根目錄下。
這個配置檔案採用定義常量的方式定義配置成員：
*config.php*
```php
```
### step 5 : 錯誤訊息的呈現
當驗證郵箱與密碼不匹配時，頁面彈出錯誤資訊
1. 引入 bootstarp 樣式檔案
```html
```
2. 判斷資訊是否呈現
*login.php*
```php
錯誤！
```
### step 6 : 錯誤資訊呈現的動畫效果
1. 官網下載動畫樣式檔案 [https://animate.style/#migration](https://animate.style/#migration)
2. 引入 animate.css 檔案
```javascript
```
3. 選擇錯誤資訊呈現的動畫效果
```html
布頭兒
``` *com/nav.php* ```html ``` 4. 在每一個需要這個模組的頁面中通過 include 載入 sidebar.php ```php ``` 5. 在每一個需要這個模組的頁面中通過 include 載入 nav.php ，載入到 main 中 ```php ``` ### step 3 : 實現側邊欄對應到相應頁面顯示高亮 由於側邊欄在不同頁面時， active class name 出現的位置不盡相同，所以我們需要區分當前 sidebar.php 檔案是 在哪個頁面中載入的，從而明確焦點狀態。 每一個選單項 li <元素： ```php