木辛老師帶您一起學習最基礎的PHP知識：HTML頁面中嵌入PHP代碼

累點滴，匯成江海。咱們從最最基礎的PHP知識開始學習，一步一個腳印的開啟PHP的學習旅途吧。

請點擊右上角“關注”按鈕關注我們喲：跟著木辛老師學習PHP編程知識，變身快樂的編程達人吧~

同學們好呀！木辛老師又來了。

咱們在開始PHP的學習之前，需要先準備一個可以提供PHP服務的Web服務器。我們就復用木辛老師專欄中的一個教程，使用Homestead本地開發環境進行學習唄。

傳送門：《Laravel第一課：搭建Laravel開發環境》

也可以關注木辛老師的Laravel專欄喲：

大家配置好本地開發環境以后，還需要稍微設置一下，針對這個項目，在Homestead配置文件中作如下設置，

添加指向當前項目根目錄的配置：

sites:
 - map: learning_php.test to: /Code/zyoo/learning_php
 to: /Code/zyoo/learning_php

另外還需要在本機hosts文件中添加一個域名指向：

sudo vim /etc/hosts

并添加如下記錄：

192.168.10.10 learning_php.test

最后，添加一個測試文件：

php代碼

然后，打開瀏覽器，訪問域名查看頁面結果

執行效果

大家可以看到，我們已經可以成功的訪問到測試用的PHP文件了。

好了，萬事俱備，只需要學習了。那么，咱們開始吧~

創建示例應用：木辛老師的圖書館

幾乎絕大部分服務器端的腳本語言最初設計的應用場景之一就是處理HTML表單。木辛老師要翻出家底，將自己最心愛的在線圖書商城，用來作為學習PHP基礎知識的場景吧。

創建訂購圖書用的訂單表單

通過這個表單頁面，我們可以知道顧客訂購的商品，訂單的金額以及其他一些附屬信息。HTML代碼請看下方：

<html>
 <head>
 <title>木辛老師的PHP基礎入門教程</title>
 </head>
 <body>
 <form action="processorder.php" method="POST">
 <table style="border: 0px;">
 <tr style="background: #cccccc">
 <td style="width: 150px;text-align:center;">圖書名稱</td>
 <td style="width: 50px;text-align:center;">數量</td>
 </tr>
 <tr>
 <td>PHP入門指南</td>
 <td><input type="text" name=“book_name_01" size="3" maxlength="3"/></td>
 </tr>
 <tr>
 <td>PHP和MySQL開發</td>
 <td><input type="text" name="book_name_02" size="3" maxlength="3"/></td>
 </tr>
 <tr>
 <td>Laravel入門</td>
 <td><input type="text" name="book_name_03" size="3" maxlength="3"/></td>
 </tr>
 <tr>
 <td colspan="2" style="text-align: center;">
 <input type="submit" value="提交訂單"/>
 </td>
 </tr>
 </table>
 </form>
 </body>
</html>

咱么直接通過瀏覽器訪問這個HTML頁面，看看效果：

頁面顯示

哈，簡單的頁面，我們已經開啟Web開發神秘旅程了。繼續加油！

大家可能注意到了一個細節：在html代碼的form表單部分，action屬性我們指向了一個php腳本：

<form action="processorder.php" method="POST”>

具體的PHP腳本的學習我們很快就能看到。這里只是稍微提一下，這個action屬性值就是用戶點擊“提交訂單”按鈕時將要請求的URL。

用戶在表單中輸入的數據，會以POST的方式，發送給URL指向的PHP文件進行處理。

表單處理

那如何處理這個表單呢？又如何讓PHP代碼起作用的？

要處理這個表單，我們需要創建一個php文件，它的名字需要和form中action屬性的值保持一致。

那么，我們就創建一個名字叫做processorder.php的文件吧。

代碼可以先這么寫，看看是否能起作用哈：

<html>
 <head>
 <title>訂單處理結果</title>
 </head>
 <body>
 <h1> 木辛老師的在線圖書館</h1>
 <h2> 訂單處理結果通知</h2>
 <?php echo '<p>訂單已處理完成</p>'; // 這里是PHP的代碼 ?>
 </body>
</html>

保持文件，并刷新頁面。這個時候我們點擊“提交訂單”按鈕，效果如下：

php執行結果

大家可以看到，紅框部分就是通過PHP代碼輸出的結果。這樣，我們就實現了通過Web方式執行了PHP代碼的需求，這么一看PHP還是非常簡單的吧。

我們順便在看看這個頁面的源代碼吧，看一下PHP代碼如何在HTML頁面中完成任務的吧：

源代碼

通過頁面源碼，我們發現剛才寫的PHP代碼已經不見了，取而代之的是

<p>訂單已處理完成</p>

這是怎么回事呢？

這是因為PHP解釋器在腳本運行的時候，將該腳本的輸出替代了腳本自身的代碼，通過這種方式，就可以生成可以在任何瀏覽器上運行的HTML頁面了。也就是說，瀏覽器是不需要學會PHP的。

通過這段代碼，我們可以學習一些PHP的基礎知識：

PHP標記
PHP語句
如何空格
添加注釋

PHP標記

第一種情況：在HTML中混寫PHP和HTML代碼，需要為php添加標記。PHP代碼會以“<?php”作為開始，以“?>”作為結束。這些符號就叫做PHP標記，它們主要用來告訴服務器PHP代碼的開始和截止，在這兩個起止符號之間的任何代碼，服務器都會以PHP語法來解析。

另一種情況：之后，我們寫純PHP的時候，每個文件也需要添加PHP標記。不過呢，結束標記可以省略，這也是很大一部分PHPer默認遵守的規則。

PHP語句

在PHP的開始和截止標記之間，就是PHP語句了，通過這些內容可以告訴PHP解釋器應該進行如何的操作，在我們這個例子里，通過：

echo '<p>訂單已處理完成</p>’;

使用echo語句完成了一個非常簡單的操作，僅是將echo后邊的字符串原樣打印到瀏覽器中。這里需要特別注意的一點就是每個PHP語句后邊都需要添加英文的分號作為語句的結束符，否則會出現錯誤，但是在這個html頁面中，因為只有一句代碼，忽略掉分號也是不會報錯的。

但是還是強烈建議大家養成習慣：每句PHP代碼結束都要以分號結尾喲！

空格

一般情況下，為了讓代碼更加清晰和整潔，在編碼的過程中會添加一些空格，這些空格包括：回車換行、空格、制表符等都被認為是空格。

當然了，瀏覽器并不會在意你是否輸入了空格，同樣的PHP服務器端解析器也會忽略這些，這些空格僅是給編寫代碼的人看的。

但是，木辛老師還是再次強烈建議，在代碼的適當位置添加空格或者空行，這樣做可以很有效的提升代碼的可閱讀性，方便后期的維護工作。

注釋

最后在講講注釋，理論上在編程中出現頻率非常高的一個知識點。

為什么說理論上呢，因為這么重要的一個要點，在實際開發中很容易被廣大開發者忽略呢！

由于種種原因吧，開發者很不習慣在開發過程中寫非常詳盡的注釋，而且有時候在Git提交時也是草草的一筆帶過。這樣做的后果就是，若干時間后，當你再次拿到這段代碼，可能會花費更多的時間梳理它。

所以，善于寫注釋，也是提高生產效率的一種有效手段。

PHP解釋器同樣會在執行的時候忽略掉注釋，也就是說就好比像空格一樣，PHP解析器會跳過注釋，它只負責執行PHP代碼！

PHP腳本中的注釋比較豐富，有很多類似C語言的風格，比如：

多行注釋：

/* 這是
 一個
 多行
 注釋
/*

可以看出來，多行注釋以 /*開始，以*/結束。同樣的和C語言是一樣的，多行注釋是不能嵌套的。

當然了，除了多行注釋之外，也支持單行注釋：

echo '<p>訂單已處理完成</p>'; // 這里是PHP的代碼

或者這種：

echo '<p>訂單已處理完成</p>’; #這里是PHP的代碼

不論采取哪種風格的注釋，在注釋符號之后的所有內容，PHP解釋器都會認識不需要處理的，這一點一定要注意呀！

好了，今天的課程咱就先講到這里。

小朋友們不要忘記關注我們喲，下期課程更精彩，請大家一起期待吧~

快樂編程，快樂成長，拜拜！

發博客地址

系列文章地址

引自《阿里規約》的開頭片段：

現代軟件架構的復雜性需要協同開發完成，如何高效地協同呢？無規矩不成方圓，無規范難以協同，比如，制訂交通法規表面上是要限制行車權，實際上是保障公眾的人身安全，試想如果沒有限速，沒有紅綠燈，誰還敢上路行駛。對軟件來說，適當的規范和標準絕不是消滅代碼內容的創造性、優雅性，而是限制過度個性化，以一種普遍認可的統一方式一起做事，提升協作效率，降低溝通成本。代碼的字里行間流淌的是軟件系統的血液，質量的提升是盡可能少踩坑，杜絕踩重復的坑，切實提升系統穩定性，碼出質量。

(一)命名規范

1.1.1 項目命名

全部采用小寫方式，以中劃線分隔。

正例：mall-management-system

反例：mall_management-system / mallManagementSystem

1.1.2 目錄命名

全部采用小寫方式，以中劃線分隔，有復數結構時，要采用復數命名法，縮寫不用復數。

正例：scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

反例：script / style / demo_scripts / demoStyles / imgs / docs

【特殊】VUE 的項目中的 components 中的組件目錄，使用 kebab-case 命名。

正例：head-search / page-loading / authorized / notice-icon

反例：HeadSearch / PageLoading

【特殊】VUE 的項目中的除 components 組件目錄外的所有目錄也使用 kebab-case 命名。

正例：page-one / shopping-car / user-management

反例：ShoppingCar / UserManagement

1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名

全部采用小寫方式，以中劃線分隔。

正例：render-dom.js / signup.css / index.html / company-logo.png

反例：renderDom.js / UserManagement.html

1.1.4 命名嚴謹性

代碼中的命名嚴禁使用拼音與英文混合的方式，更不允許直接使用中文的方式。說明：正確的英文拼寫和語法可以讓閱讀者易于理解，避免歧義。注意，即使純拼音命名方式也要避免采用。

正例：henan / luoyang / rmb 等國際通用的名稱，可視同英文。

反例：DaZhePromotion [打折] / getPingfenByName() [評分] / int 某變量 = 3

杜絕完全不規范的縮寫，避免望文不知義：

反例：AbstractClass“縮寫”命名成 AbsClass；condition“縮寫”命名成 condi，此類隨意縮寫嚴重降低了代碼的可閱讀性。

(二)HTML 規范（Vue Template 同樣適用）

1.2.1 HTML 類型

推薦使用 HTML5 的文檔類型聲明。建議使用 text/html 格式的 HTML，避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在瀏覽器中的應用支持與優化空間都十分有限。

規定字符編碼
IE 兼容模式
規定字符編碼
doctype 大寫

正例：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="UTF-8" />
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company" />
  </body>
</html>

1.2.2 縮進

縮進使用 2 個空格（一個 tab）。

嵌套的節點應該縮進。

1.2.3 分塊注釋

在每一個塊狀元素，列表元素和表格元素后，加上一對 HTML 注釋。注釋格式：

<!-- 英文 中文 start -->

<!-- 英文 中文 end -->

正例：

<body>
  
  <header>
    <div class="container">
      <a href="#">
        
        <img src="images/header.jpg" />
      </a>
    </div>
  </header>
  
</body>

1.2.4 語義化標簽

HTML5 中新增很多語義化標簽，所以優先使用語義化標簽，避免一個頁面都是 div 或者 p 標簽。

正例：

<header></header>
<footer></footer>

反例：

<div></div>

1.2.5 引號

使用雙引號(" ") 而不是單引號(' ')。

正例： <div class="news-div"></div>

反例： <div class='news-div'></div>

(三) CSS 規范

1.3.1 命名

類名使用小寫字母，以中劃線分隔。
id 采用駝峰式命名。
scss 中的變量、函數、混合、placeholder 采用駝峰式命名。

ID 和 class 的名稱總是使用可以反應元素目的和用途的名稱，或其他通用的名稱，代替表象和晦澀難懂的名稱。

不推薦：

.fw-800 {
  font-weight: 800;
}

.red {
  color: red;
}

推薦：

.heavy {
  font-weight: 800;
}

.important {
  color: red;
}

1.3.2 選擇器

1)css 選擇器中避免使用標簽名。從結構、表現、行為分離的原則來看，應該盡量避免 css 中出現 HTML 標簽，并且在 css 選擇器中出現標簽名會存在潛在的問題。

2)很多前端開發人員寫選擇器鏈的時候不使用直接子選擇器（注：直接子選擇器和后代選擇器的區別）。有時，這可能會導致疼痛的設計問題并且有時候可能會很耗性能。然而，在任何情況下，這是一個非常不好的做法。如果你不寫很通用的，需要匹配到 DOM 末端的選擇器，你應該總是考慮直接子選擇器。

不推薦：

.content .title {
  font-size: 2rem;
}

推薦：

.content > .title {
  font-size: 2rem;
}

1.3.3 盡量使用縮寫屬性

不推薦：

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推薦：

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

1.3.4 每個選擇器及屬性獨占一行

不推薦：

button{
  width:100px;height:50px;color:#fff;background:#00a0e9;
}

推薦：

button{
  width:100px;
  height:50px;
  color:#fff;
  background:#00a0e9;
}

1.3.5 省略 0 后面的單位

不推薦：

div{
  padding-bottom: 0px;
  margin: 0em;
}

推薦：

div{
  padding-bottom: 0;
  margin: 0;
}

1.3.6 避免使用 ID 選擇器及全局標簽選擇器防止污染全局樣式

不推薦：

#header{
  padding-bottom: 0px;
  margin: 0em;
}

推薦：

.header{
  padding-bottom: 0px;
  margin: 0em;
}

(四) LESS 規范

1.4.1 代碼組織

1)將公共 less 文件放置在 style/less/common 文件夾。

例：// color.less,common.less

2)按以下順序組織：

1、@import;

2、變量聲明;

3、樣式聲明;

@import "mixins/size.less";

@default-text-color: #333;

.page {
  width: 960px;
  margin: 0 auto;
}

1.4.2 避免嵌套層級過多

將嵌套深度限制在 3 級。對于超過 4 級的嵌套，給予重新評估。這可以避免出現過于詳實的 CSS 選擇器。避免大量的嵌套規則。當可讀性受到影響時，將之打斷。推薦避免出現多于 20 行的嵌套規則出現。

不推薦：

.main{
  .title{
    .name{
       color:#fff
    }
  }
}

推薦：

.main-title{
   .name{
      color:#fff
   }
}

(五) JavaScript 規范

1.5.1 命名

1)采用小寫駝峰命名 lowerCamelCase，代碼中的命名均不能以下劃線，也不能以下劃線或美元符號結束。

反例： _name / name_ / name$

2)方法名、參數名、成員變量、局部變量都統一使用 lowerCamelCase 風格，必須遵從駝峰形式。

正例： localValue / getHttpMessage() / inputUserId

其中 method 方法命名必須是動詞或者動詞+名詞形式。

正例：saveShopCarData / openShopCarInfoDialog

反例：save / open / show / go

特此說明，增刪查改，詳情統一使用如下 5 個單詞，不得使用其他（目的是為了統一各個端）。

add / update / delete / detail / get

附：函數方法常用的動詞：

get 獲取/set 設置, add 增加/remove 刪除 create 創建/destory 移除 start 啟動/stop 停止 open 打開/close 關閉, read 讀取/write 寫入 load 載入/save 保存, create 創建/destroy 銷毀 begin 開始/end 結束, backup 備份/restore 恢復 import 導入/export 導出, split 分割/merge 合并 inject 注入/extract 提取, attach 附著/detach 脫離 bind 綁定/separate 分離, view 查看/browse 瀏覽 edit 編輯/modify 修改, select 選取/mark 標記 copy 復制/paste 粘貼, undo 撤銷/redo 重做 insert 插入/delete 移除, add 加入/append 添加 clean 清理/clear 清除, index 索引/sort 排序 find 查找/search 搜索, increase 增加/decrease 減少 play 播放/pause 暫停, launch 啟動/run 運行 compile 編譯/execute 執行, debug 調試/trace 跟蹤 observe 觀察/listen 監聽, build 構建/publish 發布 input 輸入/output 輸出, encode 編碼/decode 解碼 encrypt 加密/decrypt 解密, compress 壓縮/decompress 解壓縮 pack 打包/unpack 解包, parse 解析/emit 生成 connect 連接/disconnect 斷開, send 發送/receive 接收 download 下載/upload 上傳, refresh 刷新/synchronize 同步 update 更新/revert 復原, lock 鎖定/unlock 解鎖 check out 簽出/check in 簽入, submit 提交/commit 交付 push 推/pull 拉, expand 展開/collapse 折疊 begin 起始/end 結束, start 開始/finish 完成 enter 進入/exit 退出, abort 放棄/quit 離開 obsolete 廢棄/depreciate 廢舊, collect 收集/aggregate 聚集

1.5.2 代碼格式

1)使用 2 個空格進行縮進。

正例：

if (x < y) {
  x += 10;
} else {
  x += 1;
}

2)不同邏輯、不同語義、不同業務的代碼之間插入一個空行分隔開來以提升可讀性。

!! 說明：任何情形，沒有必要插入多個空行進行隔開。

1.5.3 字符串

統一使用單引號(')，不使用雙引號(")。這在創建 HTML 字符串非常有好處。

正例：

let str = 'foo';
let testDiv = '<div id="test"></div>';

1.5.4 對象聲明

1)使用字面值創建對象。

正例： let user = {};

反例： let user = new Object();

2)使用字面量來代替對象構造器。

正例：

var user = {
  age: 0,
  name: 1,
  city: 3
};

反例：

var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;

1.5.5 使用 ES6,7

必須優先使用 ES6,7 中新增的語法糖和函數。這將簡化你的程序，并讓你的代碼更加靈活和可復用。

!! 必須強制使用 ES6, ES7 的新語法，比如箭頭函數、await/async ，解構， let ， for...of 等等

1.5.6 括號

下列關鍵字后必須有大括號（即使代碼塊的內容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

正例：

if (condition) {
  doSomething();
}

反例：

if (condition) doSomething();

1.5.7 undefined 判斷

永遠不要直接使用 undefined 進行變量判斷；使用 typeof 和字符串 'undefined' 對變量進行判斷。

正例：

if (typeof person === 'undefined') {
    ...
}

反例：

if (person === undefined) {
    ...
}

1.5.8 條件判斷和循環最多三層

條件判斷能使用三目運算符和邏輯運算符解決的，就不要使用條件判斷，但是謹記不要寫太長的三目運算符。如果超過 3 層請抽成函數，并寫清楚注釋。

1.5.9 this 的轉換命名

對上下文 this 的引用只能使用 'self' 來命名。

1.5.10 慎用 console.log

因 console.log 大量使用會有性能問題，所以在非 webpack 項目中謹慎使用 log 功能。

(一) Vue 編碼基礎

vue 項目規范以 Vue 官方規范（https://cn.vuejs.org/v2/style-guide/）中的 A 規范為基礎，在其上面進行項目開發，故所有代碼均遵守該規范。

請仔細閱讀 Vue 官方規范，切記，此為第一步。

2.1.1 組件規范

1) 組件名為多個單詞。

組件名應該始終由多個單詞組成，且命名規范為KebabCase格式。這樣做可以避免與現有和未來的 HTML 元素沖突，因為所有 HTML 元素名稱都是由單個單詞組成的。

正例：

export default {
  name: 'TodoItem'
};

反例：

export default {
  name: 'Todo'
};

export default {
  name: 'todo-item'
};

2) 組件文件名為 PascalCase 格式

正例：

components/
|- MyComponent.vue

反例：

components/
|- myComponent.vue
|- MyComponent.vue

3) 基礎組件文件名以 base 開頭，使用完整單詞而不是縮寫。

正例：

components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue

反例：

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

4) 和父組件緊密耦合的子組件應該以父組件名作為前綴命名

正例：

components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整單詞）

反例：

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue （使用了縮寫）

5) 在 Template 模板中使用組件，應使用 PascalCase 格式，并使用自閉合組件。

正例：

<MyComponent />
<Row><table :column="data"/></Row>

反例：

<my-component /> <row><table :column="data"/></row>

6) 組件的 data 必須是一個函數

當在組件中使用 data 屬性時（除了 new Vue 外的任何地方），它的值必須是一個返回對象的函數。因為如果直接是一個對象，子組件之間的屬性值會相互影響。

正例：

export default {
  data () {
    return {
      name: 'jack'
    }
  }
}

反例：

export default {
  data: {
    name: 'jack'
  }
}

7) Prop 定義應該盡量詳細

必須使用 camelCase 駝峰命名
必須指定類型
必須加上注釋，表明其含義
必須加上 required 或者 default，兩者二選其一
如果有業務需要，必須加上 validator 驗證

正例：

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'succ',
        'info',
        'error'
      ].indexOf(value) !== -1
    }
  },
  userLevel: {
    type: String,
    required: true
  }
}

8) 為組件樣式設置作用域

正例：

<template>
  <button class="btn btn-close">X</button>
</template>

<style scoped>
  .btn-close {
    background-color: red;
  }
</style>

反例：

<template>
  <button class="btn btn-close">X</button>
</template>

<style>
  .btn-close {
    background-color: red;
  }
</style>

9) 如果特性元素較多，應主動換行。

正例：

<MyComponent foo="a" bar="b" baz="c"
    foo="a" bar="b" baz="c"
    foo="a" bar="b" baz="c"
/>

反例：

<MyComponent foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c"/>

2.1.2 模板中使用簡單的表達式

組件模板應該只包含簡單的表達式，復雜的表達式應重構為計算屬性或方法。復雜表達式會使你的模板變得不那么聲明式。我們應該盡量描述應該出現的是什么，而不是如何計算那個值。而且計算屬性和方法使得代碼可以重用。

正例：

<template>
  <p>{{ normalizedFullName }}</p>
</template>

computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

反例：

<template>
  <p>
    {{
      fullName.split(' ').map(function (word) {
        return word[0].toUpperCase() + word.slice(1)
      }).join(' ')
    }}
  </p>
</template>

2.1.3 指令都使用縮寫形式

指令推薦使用縮寫形式，用 : 表示 v-bind: ，用 @ 表示 v-on: ，用 # 表示 v-slot:

正例：

<input
  @input="onInput"
  @focus="onFocus"
>

反例：

<input
  v-on:input="onInput"
  @focus="onFocus"
>

2.1.4 標簽順序保持一致

單文件組件應該始終按照 <template>、<script>、<style> 的順序排列。

正例：

<template>...</template>
<script>...</script>
<style>...</style>

反例：

<template>...</template>
<style>...</style>
<script>...</script>

2.1.5 必須為 v-for 設置鍵值 key

2.1.6 v-show 與 v-if 選擇

如果需要頻繁切換元素的可見性，使用 v-show ；如果在運行時條件很少改變，使用 v-if。

2.1.7 script 標簽內部結構順序

components > props > data > computed > watch > filter > 鉤子函數（按執行順序排列） > methods

2.1.8 Vue Router 規范

1) 頁面跳轉數據傳遞使用路由參數

頁面跳轉，例如從 A 頁面跳轉到 B 頁面，需要將 A 頁面的數據傳遞到 B 頁面，推薦使用路由參數進行傳參，而不是將需要傳遞的數據保存在 vuex，然后在 B 頁面取出 vuex 中的數據，因為如果在 B 頁面刷新會導致 vuex 數據丟失，導致 B 頁面無法正常顯示數據。

正例：

let id = '123';
this.$router.push({ name: 'userCenter', query: { id: id } });

2) 使用路由懶加載（延遲加載）機制

{
  path: '/uploadAttachment',
  name: 'uploadAttachment',
  meta: {
    title: '上傳附件'
  },
  component: () => import('@/view/components/uploadAttachment/index.vue')
}

3) router 中的命名規范

path、childrenPoints 命名規范采用kebab-case命名規范（盡量保持 vue 文件的目錄結構一致，因為目錄和文件名都是kebab-case，這樣很方便找到對應的文件）

name 命名規范采用KebabCase命名規范且與 component 組件名保持一致！（要保持 keep-alive 特性，keep-alive 按照 component 的 name 進行緩存，所以兩者必須高度保持一致）

export const reload = [
  {
    path: '/reload',
    name: 'reload',
    component: Main,
    meta: {
      title: '動態加載',
      icon: 'icon iconfont'
    },
    children: [
      {
        path: '/reload/smart-reload-list',
        name: 'SmartReloadList',
        meta: {
          title: 'SmartReload',
          childrenPoints: [
            {
              title: '查詢',
              name: 'smart-reload-search'
            },
            {
              title: '執行reload',
              name: 'smart-reload-update'
            },
            {
              title: '查看執行結果',
              name: 'smart-reload-result'
            }
          ]
        },
        component: () =>
          import('@/views/reload/smart-reload/smart-reload-list.vue')
      }
    ]
  }
];

4) router 中的 path 命名規范

path 應采用kebab-case命名規范，并以 / 開頭，即使是 children 中的 path 也要以 / 開頭。例如：

目的：經常需要找到某個 vue 文件時，可以立即找到它。如果 path 不以 / 開頭，由 parent 和 children 組成，可能需要在 router 文件中多次搜索才能找到。而以 / 開頭，可以立即搜索到對應的組件。

{
  path: '/file',
  name: 'File',
  component: Main,
  meta: {
    title: '文件服務',
    icon: 'ios-cloud-upload'
  },
  children: [
    {
      path: '/file/file-list',
      name: 'FileList',
      component: () => import('@/views/file/file-list.vue')
    },
    {
      path: '/file/file-add',
      name: 'FileAdd',
      component: () => import('@/views/file/file-add.vue')
    },
    {
      path: '/file/file-update',
      name: 'FileUpdate',
      component: () => import('@/views/file/file-update.vue')
    }
  ]
}

(二) Vue 項目目錄規范

2.2.1 基礎

Vue 項目中的所有命名必須與后端命名保持一致。
比如權限：后端 privilege，前端無論是 router、store、api 等都必須使用 privilege 單詞！

2.2.2 使用 Vue CLI 腳手架

使用 Vue CLI 3 來初始化項目，項目名按照上述命名規范命名。

2.2.3 目錄說明

目錄名按照上述命名規范，其中 components 組件使用大寫駝峰命名，其余目錄（除 components 組件目錄外）使用 kebab-case 命名。

src                               源碼目錄
|-- api                              所有 API 接口
|-- assets                           靜態資源，包括 images、icons、styles 等
|-- components                       公共組件
|-- config                           配置信息
|-- constants                        常量信息，項目中的所有枚舉、全局常量等
|-- directives                       自定義指令
|-- filters                          過濾器，全局工具
|-- datas                            模擬數據，臨時存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模擬接口，臨時存放
|-- plugins                          插件，全局使用
|-- router                           路由，統一管理
|-- store                            Vuex，統一管理
|-- themes                           自定義樣式主題
|-- views                            視圖目錄
|   |-- role                             role 模塊
|   |-- |-- role-list.vue                    role 列表頁面
|   |-- |-- role-add.vue                     role 新建頁面
|   |-- |-- role-update.vue                  role 更新頁面
|   |-- |-- index.less                      role 模塊樣式
|   |-- |-- components                      role 模塊通用組件文件夾
|   |-- employee                         employee 模塊

1) api 目錄

文件和變量命名要與后端保持一致。
此目錄對應后端的 API 接口，按照每個 controller 一個 API JS 文件的方式組織。如果項目較大，可以根據業務進行子目錄劃分，但與后端保持一致。
API 文件中的方法名應與后端 API URL 盡量保持語義一致。
每個 API 方法都應添加注釋，注釋與后端的 Swagger 文檔保持一致。

正例：

后端 URL：EmployeeController.java

/employee/add
/employee/delete/{id}
/employee/update

前端：employee.js

addEmployee: (data) => {
  return postAxios('/employee/add', data)
},

updateEmployee: (data) => {
  return postAxios('/employee/update', data)
},

deleteEmployee: (employeeId) => {
  return postAxios('/employee/delete/' + employeeId)
},

2) assets 目錄

assets 目錄存放靜態資源，包括 images、styles、icons 等靜態資源，靜態資源命名格式為 kebab-case。

|assets
|-- icons
|-- images
|   |-- background-color.png
|   |-- upload-header.png
|-- styles

3) components 目錄

此目錄按組件進行目錄劃分，目錄命名為 KebabCase，組件命名規則也為 KebabCase。

|components
|-- error-log
|   |-- index.vue
|   |-- index.less
|-- markdown-editor
|   |-- index.vue
|   |-- index.js
|-- kebab-case

4) constants 目錄

此目錄存放項目中的所有常量。如果常量在 Vue 中使用，請使用 Vue-enum 插件（https://www.npmjs.com/package/vue-enum）。

目錄結構：

|constants
|-- index.js
|-- role.js
|-- employee.js

示例：employee.js

export const EMPLOYEE_STATUS = {
  NORMAL: {
    value: 1,
    desc: '正常'
  },
  DISABLED: {
    value: 1,
    desc: '禁用'
  },
  DELETED: {
    value: 2,
    desc: '已刪除'
  }
};

export const EMPLOYEE_ACCOUNT_TYPE = {
  QQ: {
    value: 1,
    desc: 'QQ登錄'
  },
  WECHAT: {
    value: 2,
    desc: '微信登錄'
  },
  DINGDING: {
    value: 3,
    desc: '釘釘登錄'
  },
  USERNAME: {
    value: 4,
    desc: '用戶名密碼登錄'
  }
};

export default {
  EMPLOYEE_STATUS,
  EMPLOYEE_ACCOUNT_TYPE
};

5) router 與 store 目錄

這兩個目錄必須根據業務進行拆分，不能放在一個 JS 文件中。
router 應與 views 目錄的結構保持一致。
store 按業務進行拆分為不同的 JS 文件。

6) views 目錄

命名要與后端、router、api 等保持一致。
components 中的組件應使用 PascalCase 規則。

|-- views                            視圖目錄
|   |-- role                             role 模塊
|   |   |-- role-list.vue                    role 列表頁面
|   |   |-- role-add.vue                     role 新建頁面
|   |   |-- role-update.vue                  role 更新頁面
|   |   |-- index.less                      role 模塊樣式
|   |   |-- components                      role 模塊通用組件文件夾
|   |   |   |-- role-header.vue                        role 頭部組件
|   |   |   |-- role-modal.vue                         role 彈出框組件
|   |-- employee                         employee 模塊
|   |-- behavior-log                      行為日志 log 模塊
|   |-- code-generator                    代碼生成器模塊

2.2.4 注釋說明

需要添加注釋的地方包括：
公共組件的使用說明
api 目錄中的接口 JS 文件必須添加注釋
store 中的 state、mutation、action 等必須添加注釋
Vue 文件中的 template 必須添加注釋，如果文件較大，可以添加 start 和 end 注釋
Vue 文件的 methods，每個 method 必須添加注釋
Vue 文件的 data，非常見單詞必須添加注釋

2.2.5 其他

1) 盡量避免手動操作 DOM

由于使用了 Vue 框架，所以在項目開發中盡量使用 Vue 的數據驅動更新 DOM，避免（除非萬不得已）手動操作 DOM，包括增刪改 DOM 元素、更改樣式、添加事件等。

2) 刪除無用代碼

由于使用了 Git/SVN 等版本控制工具，必須及時刪除無用代碼，例如調試時的 console 語句、廢棄的功能代碼等。

規范的目的是為了編寫高質量的代碼，讓團隊成員每天都有愉悅的心情，讓大家在一起感到快樂。

!! 參考：https://xie.infoq.cn/article/2048f2116f8df30115fca44c1。

自:Office之家鏈接:http://www.icanzc.com/word/6854.html

一篇文章段落太多，如果想要找到自然段，那怎么給word中一段文檔添加段落編號呢？為了更好地查看文檔，會對文檔內容添加行號，本期小編與大家分享一下有關行號的用法，對行號不了解的朋友可以惡補一下知識哦。 1、行號的添加和刪除方式選中要添加的行號的內容，這一步是必須的，要操作先選擇，之后點擊布局——頁面設置——行號——連續即可，（其他選項大家可以嘗試）。若不想要行號，以同樣的方式設置為“無”即可，如下圖所示。

2、行號的格式設置 1）中間段不設置行號，對排版要求個性點的朋友可以了解下的若想讓文檔中間某段不設置行號，可以先選中某段，點擊行號下拉菜單中的“禁止用于當前段落”選項，便會看到不一樣的效果。

2）每頁重新設置編號，這個的意思是每頁的編號都是從1，2，3開始的點擊文檔內容，選擇行號下拉菜單中的“每頁重編行號”選項，看看效果。

3、行號選項的設置

1）每5行編號一次，想更個性的朋友，這是你的菜選中文檔，點擊行號——行號選項——行號，打開相應的界面，然后在“行號間距”中輸入5，點擊確定即可，其他選項，大家可以嘗試操作。

2）調整行號與正文間距，對美極致追求的朋友可以練練手打開行號設置界面，在“距正文”中輸入想要的間距即可，Word就是這么6，總能想你所想。

注意：如果文檔沒有添加行號，在行號界面中需要勾選“添加行號編號”，這點很重要，一定要記住哦

4、在每段的末尾添加編號如何給每個段落添加相應的編號呢？這里推薦大家使用查找和替換功能。首先在空白文檔中先插入一個編號域，點擊插入——文檔——文檔部件——域，選擇“編號”內容，之后選擇一個格式，然后將編號復制，按Ctrl+H打開查找和替換，在查找內容文本框中輸入^13，在替換為中輸入^c ^p，點擊全部替換即可。

PS：若不想添加空行，在替換時，后面就不用添加段落標記以上便是為大家介紹的行號的添加和刪除方式，行號的格式設置，行號選項的設置，如何在每段的末尾添加編號，對此感興趣的各位同學，可以趁機學習一下哦

在線咨詢

上一篇：高亮顯示系統日志應該用什么命令
下一篇：在網頁開發中，我們需要掌握的常用HTML標簽有哪些？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

木辛老師帶您一起學習最基礎的PHP知識：HTML頁面中嵌入PHP代碼

創建示例應用：木辛老師的圖書館

創建訂購圖書用的訂單表單

表單處理

PHP標記

PHP語句

空格

注釋

(一)命名規范

1.1.1 項目命名

1.1.2 目錄命名

1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名

1.1.4 命名嚴謹性

(二)HTML 規范 （Vue Template 同樣適用）

1.2.1 HTML 類型

1.2.2 縮進

1.2.3 分塊注釋

1.2.4 語義化標簽

1.2.5 引號

(三) CSS 規范

1.3.1 命名

1.3.2 選擇器

1.3.3 盡量使用縮寫屬性

1.3.4 每個選擇器及屬性獨占一行

1.3.5 省略 0 后面的單位

1.3.6 避免使用 ID 選擇器及全局標簽選擇器防止污染全局樣式

(四) LESS 規范

1.4.1 代碼組織

1.4.2 避免嵌套層級過多

(五) JavaScript 規范

1.5.1 命名

1.5.2 代碼格式

1.5.3 字符串

1.5.4 對象聲明

1.5.5 使用 ES6,7

1.5.6 括號

1.5.7 undefined 判斷

1.5.8 條件判斷和循環最多三層

1.5.9 this 的轉換命名

1.5.10 慎用 console.log

(一) Vue 編碼基礎

2.1.1 組件規范

1) 組件名為多個單詞。

2) 組件文件名為 PascalCase 格式

3) 基礎組件文件名以 base 開頭，使用完整單詞而不是縮寫。

4) 和父組件緊密耦合的子組件應該以父組件名作為前綴命名

5) 在 Template 模板中使用組件，應使用 PascalCase 格式，并使用自閉合組件。

6) 組件的 data 必須是一個函數

7) Prop 定義應該盡量詳細

8) 為組件樣式設置作用域

9) 如果特性元素較多，應主動換行。

2.1.2 模板中使用簡單的表達式

2.1.3 指令都使用縮寫形式

2.1.4 標簽順序保持一致

2.1.5 必須為 v-for 設置鍵值 key

2.1.6 v-show 與 v-if 選擇

2.1.7 script 標簽內部結構順序

2.1.8 Vue Router 規范

1) 頁面跳轉數據傳遞使用路由參數

2) 使用路由懶加載（延遲加載）機制

3) router 中的命名規范

4) router 中的 path 命名規范

(二) Vue 項目目錄規范

2.2.1 基礎

2.2.2 使用 Vue CLI 腳手架

2.2.3 目錄說明

1) api 目錄

2) assets 目錄

3) components 目錄

4) constants 目錄

5) router 與 store 目錄

6) views 目錄

2.2.4 注釋說明

2.2.5 其他

1) 盡量避免手動操作 DOM

2) 刪除無用代碼

您的項目需求

(二)HTML 規范（Vue Template 同樣適用）