整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
累點滴，匯成江海。咱們從最最基礎(chǔ)的PHP知識開始學(xué)習(xí)，一步一個腳印的開啟PHP的學(xué)習(xí)旅途吧。
請點擊右上角“關(guān)注”按鈕關(guān)注我們喲：跟著木辛老師學(xué)習(xí)PHP編程知識，變身快樂的編程達(dá)人吧~
同學(xué)們好呀！木辛老師又來了。
咱們在開始PHP的學(xué)習(xí)之前，需要先準(zhǔn)備一個可以提供PHP服務(wù)的Web服務(wù)器。我們就復(fù)用木辛老師專欄中的一個教程，使用Homestead本地開發(fā)環(huán)境進(jìn)行學(xué)習(xí)唄。
傳送門：《Laravel第一課：搭建Laravel開發(fā)環(huán)境》
也可以關(guān)注木辛老師的Laravel專欄喲：
大家配置好本地開發(fā)環(huán)境以后，還需要稍微設(shè)置一下，針對這個項目，在Homestead配置文件中作如下設(shè)置，
添加指向當(dāng)前項目根目錄的配置：
sites: - map: learning_php.test to: /Code/zyoo/learning_php to: /Code/zyoo/learning_php
另外還需要在本機(jī)hosts文件中添加一個域名指向：
sudo vim /etc/hosts
并添加如下記錄：
192.168.10.10 learning_php.test
最后，添加一個測試文件：
php代碼
然后，打開瀏覽器，訪問域名查看頁面結(jié)果
執(zhí)行效果
大家可以看到，我們已經(jīng)可以成功的訪問到測試用的PHP文件了。
好了，萬事俱備，只需要學(xué)習(xí)了。那么，咱們開始吧~
幾乎絕大部分服務(wù)器端的腳本語言最初設(shè)計的應(yīng)用場景之一就是處理HTML表單。木辛老師要翻出家底，將自己最心愛的在線圖書商城，用來作為學(xué)習(xí)PHP基礎(chǔ)知識的場景吧。
通過這個表單頁面，我們可以知道顧客訂購的商品，訂單的金額以及其他一些附屬信息。HTML代碼請看下方：
<html> <head> <title>木辛老師的PHP基礎(chǔ)入門教程</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;">數(shù)量</td> </tr> <tr> <td>PHP入門指南</td> <td><input type="text" name=“book_name_01" size="3" maxlength="3"/></td> </tr> <tr> <td>PHP和MySQL開發(fā)</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頁面，看看效果：
頁面顯示
哈，簡單的頁面，我們已經(jīng)開啟Web開發(fā)神秘旅程了。繼續(xù)加油！
大家可能注意到了一個細(xì)節(jié)：在html代碼的form表單部分，action屬性我們指向了一個php腳本：
<form action="processorder.php" method="POST”>
具體的PHP腳本的學(xué)習(xí)我們很快就能看到。這里只是稍微提一下，這個action屬性值就是用戶點擊“提交訂單”按鈕時將要請求的URL。
用戶在表單中輸入的數(shù)據(jù)，會以POST的方式，發(fā)送給URL指向的PHP文件進(jìn)行處理。
那如何處理這個表單呢？又如何讓PHP代碼起作用的？
要處理這個表單，我們需要創(chuàng)建一個php文件，它的名字需要和form中action屬性的值保持一致。
那么，我們就創(chuàng)建一個名字叫做processorder.php的文件吧。
代碼可以先這么寫，看看是否能起作用哈：
<html> <head> <title>訂單處理結(jié)果</title> </head> <body> <h1> 木辛老師的在線圖書館</h1> <h2> 訂單處理結(jié)果通知</h2> <?php echo '<p>訂單已處理完成</p>'; // 這里是PHP的代碼 ?> </body> </html>
保持文件，并刷新頁面。這個時候我們點擊“提交訂單”按鈕，效果如下：
php執(zhí)行結(jié)果
大家可以看到，紅框部分就是通過PHP代碼輸出的結(jié)果。這樣，我們就實現(xiàn)了通過Web方式執(zhí)行了PHP代碼的需求，這么一看PHP還是非常簡單的吧。
我們順便在看看這個頁面的源代碼吧，看一下PHP代碼如何在HTML頁面中完成任務(wù)的吧：
源代碼
通過頁面源碼，我們發(fā)現(xiàn)剛才寫的PHP代碼已經(jīng)不見了，取而代之的是
<p>訂單已處理完成</p>
這是怎么回事呢？
這是因為PHP解釋器在腳本運行的時候，將該腳本的輸出替代了腳本自身的代碼，通過這種方式，就可以生成可以在任何瀏覽器上運行的HTML頁面了。也就是說，瀏覽器是不需要學(xué)會PHP的。
通過這段代碼，我們可以學(xué)習(xí)一些PHP的基礎(chǔ)知識：
第一種情況：在HTML中混寫PHP和HTML代碼，需要為php添加標(biāo)記。PHP代碼會以“<?php”作為開始，以“?>”作為結(jié)束。這些符號就叫做PHP標(biāo)記，它們主要用來告訴服務(wù)器PHP代碼的開始和截止，在這兩個起止符號之間的任何代碼，服務(wù)器都會以PHP語法來解析。
另一種情況：之后，我們寫純PHP的時候，每個文件也需要添加PHP標(biāo)記。不過呢，結(jié)束標(biāo)記可以省略，這也是很大一部分PHPer默認(rèn)遵守的規(guī)則。
在PHP的開始和截止標(biāo)記之間，就是PHP語句了，通過這些內(nèi)容可以告訴PHP解釋器應(yīng)該進(jìn)行如何的操作，在我們這個例子里，通過：
echo '<p>訂單已處理完成</p>’;
使用echo語句完成了一個非常簡單的操作，僅是將echo后邊的字符串原樣打印到瀏覽器中。這里需要特別注意的一點就是每個PHP語句后邊都需要添加英文的分號作為語句的結(jié)束符，否則會出現(xiàn)錯誤，但是在這個html頁面中，因為只有一句代碼，忽略掉分號也是不會報錯的。
但是還是強(qiáng)烈建議大家養(yǎng)成習(xí)慣：每句PHP代碼結(jié)束都要以分號結(jié)尾喲！
一般情況下，為了讓代碼更加清晰和整潔，在編碼的過程中會添加一些空格，這些空格包括：回車換行、空格、制表符等都被認(rèn)為是空格。
當(dāng)然了，瀏覽器并不會在意你是否輸入了空格，同樣的PHP服務(wù)器端解析器也會忽略這些，這些空格僅是給編寫代碼的人看的。
但是，木辛老師還是再次強(qiáng)烈建議，在代碼的適當(dāng)位置添加空格或者空行，這樣做可以很有效的提升代碼的可閱讀性，方便后期的維護(hù)工作。
最后在講講注釋，理論上在編程中出現(xiàn)頻率非常高的一個知識點。
為什么說理論上呢，因為這么重要的一個要點，在實際開發(fā)中很容易被廣大開發(fā)者忽略呢！
由于種種原因吧，開發(fā)者很不習(xí)慣在開發(fā)過程中寫非常詳盡的注釋，而且有時候在Git提交時也是草草的一筆帶過。這樣做的后果就是，若干時間后，當(dāng)你再次拿到這段代碼，可能會花費更多的時間梳理它。
所以，善于寫注釋，也是提高生產(chǎn)效率的一種有效手段。
PHP解釋器同樣會在執(zhí)行的時候忽略掉注釋，也就是說就好比像空格一樣，PHP解析器會跳過注釋，它只負(fù)責(zé)執(zhí)行PHP代碼！
PHP腳本中的注釋比較豐富，有很多類似C語言的風(fēng)格，比如：
多行注釋：
/* 這是 一個 多行 注釋 /*
可以看出來，多行注釋以 /*開始，以*/結(jié)束。同樣的和C語言是一樣的，多行注釋是不能嵌套的。
當(dāng)然了，除了多行注釋之外，也支持單行注釋：
echo '<p>訂單已處理完成</p>'; // 這里是PHP的代碼
或者這種：
echo '<p>訂單已處理完成</p>’; #這里是PHP的代碼
不論采取哪種風(fēng)格的注釋，在注釋符號之后的所有內(nèi)容，PHP解釋器都會認(rèn)識不需要處理的，這一點一定要注意呀！
好了，今天的課程咱就先講到這里。
小朋友們不要忘記關(guān)注我們喲 ，下期課程更精彩，請大家一起期待吧~
快樂編程，快樂成長，拜拜！
發(fā)博客地址
系列文章地址
引自《阿里規(guī)約》的開頭片段：
現(xiàn)代軟件架構(gòu)的復(fù)雜性需要協(xié)同開發(fā)完成，如何高效地協(xié)同呢？無規(guī)矩不成方圓，無規(guī)范難以協(xié)同，比如，制訂交通法規(guī)表面上是要限制行車權(quán)，實際上是保障公眾的人身安全，試想如果沒有限速，沒有紅綠燈，誰還敢上路行駛。對軟件來說，適當(dāng)?shù)囊?guī)范和標(biāo)準(zhǔn)絕不是消滅代碼內(nèi)容的創(chuàng)造性、優(yōu)雅性，而是限制過度個性化，以一種普遍認(rèn)可的統(tǒng)一方式一起做事，提升協(xié)作效率，降低溝通成本。代碼的字里行間流淌的是軟件系統(tǒng)的血液，質(zhì)量的提升是盡可能少踩坑，杜絕踩重復(fù)的坑，切實提升系統(tǒng)穩(wěn)定性，碼出質(zhì)量。
全部采用小寫方式，以中劃線分隔。
正例：mall-management-system
反例：mall_management-system / mallManagementSystem
全部采用小寫方式，以中劃線分隔，有復(fù)數(shù)結(jié)構(gòu)時，要采用復(fù)數(shù)命名法，縮寫不用復(fù)數(shù)。
正例：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
全部采用小寫方式，以中劃線分隔。
正例：render-dom.js / signup.css / index.html / company-logo.png
反例：renderDom.js / UserManagement.html
代碼中的命名嚴(yán)禁使用拼音與英文混合的方式，更不允許直接使用中文的方式。說明：正確的英文拼寫和語法可以讓閱讀者易于理解，避免歧義。注意，即使純拼音命名方式也要避免采用。
正例：henan / luoyang / rmb 等國際通用的名稱，可視同英文。
反例：DaZhePromotion [打折] / getPingfenByName() [評分] / int 某變量 = 3
杜絕完全不規(guī)范的縮寫，避免望文不知義：
反例：AbstractClass“縮寫”命名成 AbsClass；condition“縮寫”命名成 condi，此類隨意縮寫嚴(yán)重降低了代碼的可閱讀性。
推薦使用 HTML5 的文檔類型聲明。建議使用 text/html 格式的 HTML，避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在瀏覽器中的應(yīng)用支持與優(yōu)化空間都十分有限。
正例：
<!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>
縮進(jìn)使用 2 個空格（一個 tab）。
嵌套的節(jié)點應(yīng)該縮進(jìn)。
在每一個塊狀元素，列表元素和表格元素后，加上一對 HTML 注釋。注釋格式：
<!-- 英文 中文 start -->
<!-- 英文 中文 end -->
正例：
<body>
<header>
<div class="container">
<a href="#">
<img src="images/header.jpg" />
</a>
</div>
</header>
</body>
HTML5 中新增很多語義化標(biāo)簽，所以優(yōu)先使用語義化標(biāo)簽，避免一個頁面都是 div 或者 p 標(biāo)簽。
正例：
<header></header>
<footer></footer>
反例：
<div></div>
使用雙引號(" ") 而不是單引號(' ')。
正例： <div class="news-div"></div>
反例： <div class='news-div'></div>
ID 和 class 的名稱總是使用可以反應(yīng)元素目的和用途的名稱，或其他通用的名稱，代替表象和晦澀難懂的名稱。
不推薦：
.fw-800 {
font-weight: 800;
}
.red {
color: red;
}
推薦：
.heavy {
font-weight: 800;
}
.important {
color: red;
}
1)css 選擇器中避免使用標(biāo)簽名。從結(jié)構(gòu)、表現(xiàn)、行為分離的原則來看，應(yīng)該盡量避免 css 中出現(xiàn) HTML 標(biāo)簽，并且在 css 選擇器中出現(xiàn)標(biāo)簽名會存在潛在的問題。
2)很多前端開發(fā)人員寫選擇器鏈的時候不使用 直接子選擇器（注：直接子選擇器和后代選擇器的區(qū)別）。有時，這可能會導(dǎo)致疼痛的設(shè)計問題并且有時候可能會很耗性能。然而，在任何情況下，這是一個非常不好的做法。如果你不寫很通用的，需要匹配到 DOM 末端的選擇器，你應(yīng)該總是考慮直接子選擇器。
不推薦：
.content .title {
font-size: 2rem;
}
推薦：
.content > .title {
font-size: 2rem;
}
不推薦：
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;
不推薦：
button{
width:100px;height:50px;color:#fff;background:#00a0e9;
}
推薦：
button{
width:100px;
height:50px;
color:#fff;
background:#00a0e9;
}
不推薦：
div{
padding-bottom: 0px;
margin: 0em;
}
推薦：
div{
padding-bottom: 0;
margin: 0;
}
不推薦：
#header{
padding-bottom: 0px;
margin: 0em;
}
推薦：
.header{
padding-bottom: 0px;
margin: 0em;
}
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;
}
將嵌套深度限制在 3 級。對于超過 4 級的嵌套，給予重新評估。這可以避免出現(xiàn)過于詳實的 CSS 選擇器。避免大量的嵌套規(guī)則。當(dāng)可讀性受到影響時，將之打斷。推薦避免出現(xiàn)多于 20 行的嵌套規(guī)則出現(xiàn)。
不推薦：
.main{
.title{
.name{
color:#fff
}
}
}
推薦：
.main-title{
.name{
color:#fff
}
}
1)采用小寫駝峰命名 lowerCamelCase，代碼中的命名均不能以下劃線，也不能以下劃線或美元符號結(jié)束。
反例： _name / name_ / name$
2)方法名、參數(shù)名、成員變量、局部變量都統(tǒng)一使用 lowerCamelCase 風(fēng)格，必須遵從駝峰形式。
正例： localValue / getHttpMessage() / inputUserId
其中 method 方法命名必須是動詞或者動詞+名詞形式。
正例：saveShopCarData / openShopCarInfoDialog
反例：save / open / show / go
特此說明，增刪查改，詳情統(tǒng)一使用如下 5 個單詞，不得使用其他（目的是為了統(tǒng)一各個端）。
add / update / delete / detail / get
附：函數(shù)方法常用的動詞：
get 獲取/set 設(shè)置, add 增加/remove 刪除 create 創(chuàng)建/destory 移除 start 啟動/stop 停止 open 打開/close 關(guān)閉, read 讀取/write 寫入 load 載入/save 保存, create 創(chuàng)建/destroy 銷毀 begin 開始/end 結(jié)束, backup 備份/restore 恢復(fù) import 導(dǎo)入/export 導(dǎo)出, split 分割/merge 合并 inject 注入/extract 提取, attach 附著/detach 脫離 bind 綁定/separate 分離, view 查看/browse 瀏覽 edit 編輯/modify 修改, select 選取/mark 標(biāo)記 copy 復(fù)制/paste 粘貼, undo 撤銷/redo 重做 insert 插入/delete 移除, add 加入/append 添加 clean 清理/clear 清除, index 索引/sort 排序 find 查找/search 搜索, increase 增加/decrease 減少 play 播放/pause 暫停, launch 啟動/run 運行 compile 編譯/execute 執(zhí)行, debug 調(diào)試/trace 跟蹤 observe 觀察/listen 監(jiān)聽, build 構(gòu)建/publish 發(fā)布 input 輸入/output 輸出, encode 編碼/decode 解碼 encrypt 加密/decrypt 解密, compress 壓縮/decompress 解壓縮 pack 打包/unpack 解包, parse 解析/emit 生成 connect 連接/disconnect 斷開, send 發(fā)送/receive 接收 download 下載/upload 上傳, refresh 刷新/synchronize 同步 update 更新/revert 復(fù)原, lock 鎖定/unlock 解鎖 check out 簽出/check in 簽入, submit 提交/commit 交付 push 推/pull 拉, expand 展開/collapse 折疊 begin 起始/end 結(jié)束, start 開始/finish 完成 enter 進(jìn)入/exit 退出, abort 放棄/quit 離開 obsolete 廢棄/depreciate 廢舊, collect 收集/aggregate 聚集
1)使用 2 個空格進(jìn)行縮進(jìn)。
正例：
if (x < y) {
x += 10;
} else {
x += 1;
}
2)不同邏輯、不同語義、不同業(yè)務(wù)的代碼之間插入一個空行分隔開來以提升可讀性。
!! 說明：任何情形，沒有必要插入多個空行進(jìn)行隔開。
統(tǒng)一使用單引號(')，不使用雙引號(")。這在創(chuàng)建 HTML 字符串非常有好處。
正例：
let str = 'foo';
let testDiv = '<div id="test"></div>';
1)使用字面值創(chuàng)建對象。
正例： let user = {};
反例： let user = new Object();
2)使用字面量來代替對象構(gòu)造器。
正例：
var user = {
age: 0,
name: 1,
city: 3
};
反例：
var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;
必須優(yōu)先使用 ES6,7 中新增的語法糖和函數(shù)。這將簡化你的程序，并讓你的代碼更加靈活和可復(fù)用。
!! 必須強(qiáng)制使用 ES6, ES7 的新語法，比如箭頭函數(shù)、await/async ， 解構(gòu)， let ， for...of 等等
下列關(guān)鍵字后必須有大括號（即使代碼塊的內(nèi)容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。
正例：
if (condition) {
doSomething();
}
反例：
if (condition) doSomething();
永遠(yuǎn)不要直接使用 undefined 進(jìn)行變量判斷；使用 typeof 和字符串 'undefined' 對變量進(jìn)行判斷。
正例：
if (typeof person === 'undefined') {
...
}
反例：
if (person === undefined) {
...
}
條件判斷能使用三目運算符和邏輯運算符解決的，就不要使用條件判斷，但是謹(jǐn)記不要寫太長的三目運算符。如果超過 3 層請抽成函數(shù)，并寫清楚注釋。
對上下文 this 的引用只能使用 'self' 來命名。
因 console.log 大量使用會有性能問題，所以在非 webpack 項目中謹(jǐn)慎使用 log 功能。
vue 項目規(guī)范以 Vue 官方規(guī)范（https://cn.vuejs.org/v2/style-guide/） 中的 A 規(guī)范為基礎(chǔ)，在其上面進(jìn)行項目開發(fā)，故所有代碼均遵守該規(guī)范。
請仔細(xì)閱讀 Vue 官方規(guī)范，切記，此為第一步。
組件名應(yīng)該始終由多個單詞組成，且命名規(guī)范為KebabCase格式。這樣做可以避免與現(xiàn)有和未來的 HTML 元素沖突，因為所有 HTML 元素名稱都是由單個單詞組成的。
正例：
export default {
name: 'TodoItem'
};
反例：
export default {
name: 'Todo'
};
export default {
name: 'todo-item'
};
正例：
components/
|- MyComponent.vue
反例：
components/
|- myComponent.vue
|- MyComponent.vue
正例：
components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue
反例：
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
正例：
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 （使用了縮寫）
正例：
<MyComponent />
<Row><table :column="data"/></Row>
反例：
<my-component /> <row><table :column="data"/></row>
當(dāng)在組件中使用 data 屬性時（除了 new Vue 外的任何地方），它的值必須是一個返回對象的函數(shù)。因為如果直接是一個對象，子組件之間的屬性值會相互影響。
正例：
export default {
data () {
return {
name: 'jack'
}
}
}
反例：
export default {
data: {
name: 'jack'
}
}
正例：
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'succ',
'info',
'error'
].indexOf(value) !== -1
}
},
userLevel: {
type: String,
required: true
}
}
正例：
<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>
正例：
<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"/>
組件模板應(yīng)該只包含簡單的表達(dá)式，復(fù)雜的表達(dá)式應(yīng)重構(gòu)為計算屬性或方法。復(fù)雜表達(dá)式會使你的模板變得不那么聲明式。我們應(yīng)該盡量描述應(yīng)該出現(xiàn)的是什么，而不是如何計算那個值。而且計算屬性和方法使得代碼可以重用。
正例：
<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>
指令推薦使用縮寫形式，用 : 表示 v-bind: ，用 @ 表示 v-on: ，用 # 表示 v-slot:
正例：
<input
@input="onInput"
@focus="onFocus"
>
反例：
<input
v-on:input="onInput"
@focus="onFocus"
>
單文件組件應(yīng)該始終按照 <template>、<script>、<style> 的順序排列。
正例：
<template>...</template>
<script>...</script>
<style>...</style>
反例：
<template>...</template>
<style>...</style>
<script>...</script>
如果需要頻繁切換元素的可見性，使用 v-show ；如果在運行時條件很少改變，使用 v-if。
components > props > data > computed > watch > filter > 鉤子函數(shù)（按執(zhí)行順序排列） > methods
頁面跳轉(zhuǎn)，例如從 A 頁面跳轉(zhuǎn)到 B 頁面，需要將 A 頁面的數(shù)據(jù)傳遞到 B 頁面，推薦使用路由參數(shù)進(jìn)行傳參，而不是將需要傳遞的數(shù)據(jù)保存在 vuex，然后在 B 頁面取出 vuex 中的數(shù)據(jù)，因為如果在 B 頁面刷新會導(dǎo)致 vuex 數(shù)據(jù)丟失，導(dǎo)致 B 頁面無法正常顯示數(shù)據(jù)。
正例：
let id = '123';
this.$router.push({ name: 'userCenter', query: { id: id } });
{
path: '/uploadAttachment',
name: 'uploadAttachment',
meta: {
title: '上傳附件'
},
component: () => import('@/view/components/uploadAttachment/index.vue')
}
path、childrenPoints 命名規(guī)范采用kebab-case命名規(guī)范（盡量保持 vue 文件的目錄結(jié)構(gòu)一致，因為目錄和文件名都是kebab-case，這樣很方便找到對應(yīng)的文件）
name 命名規(guī)范采用KebabCase命名規(guī)范且與 component 組件名保持一致！（要保持 keep-alive 特性，keep-alive 按照 component 的 name 進(jìn)行緩存，所以兩者必須高度保持一致）
export const reload = [
{
path: '/reload',
name: 'reload',
component: Main,
meta: {
title: '動態(tài)加載',
icon: 'icon iconfont'
},
children: [
{
path: '/reload/smart-reload-list',
name: 'SmartReloadList',
meta: {
title: 'SmartReload',
childrenPoints: [
{
title: '查詢',
name: 'smart-reload-search'
},
{
title: '執(zhí)行reload',
name: 'smart-reload-update'
},
{
title: '查看執(zhí)行結(jié)果',
name: 'smart-reload-result'
}
]
},
component: () =>
import('@/views/reload/smart-reload/smart-reload-list.vue')
}
]
}
];
path 應(yīng)采用kebab-case命名規(guī)范，并以 / 開頭，即使是 children 中的 path 也要以 / 開頭。例如：
{
path: '/file',
name: 'File',
component: Main,
meta: {
title: '文件服務(wù)',
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')
}
]
}
src 源碼目錄
|-- api 所有 API 接口
|-- assets 靜態(tài)資源，包括 images、icons、styles 等
|-- components 公共組件
|-- config 配置信息
|-- constants 常量信息，項目中的所有枚舉、全局常量等
|-- directives 自定義指令
|-- filters 過濾器，全局工具
|-- datas 模擬數(shù)據(jù)，臨時存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模擬接口，臨時存放
|-- plugins 插件，全局使用
|-- router 路由，統(tǒng)一管理
|-- store Vuex，統(tǒng)一管理
|-- themes 自定義樣式主題
|-- views 視圖目錄
| |-- role role 模塊
| |-- |-- role-list.vue role 列表頁面
| |-- |-- role-add.vue role 新建頁面
| |-- |-- role-update.vue role 更新頁面
| |-- |-- index.less role 模塊樣式
| |-- |-- components role 模塊通用組件文件夾
| |-- employee employee 模塊
正例：
后端 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)
},
|assets
|-- icons
|-- images
| |-- background-color.png
| |-- upload-header.png
|-- styles
|components
|-- error-log
| |-- index.vue
| |-- index.less
|-- markdown-editor
| |-- index.vue
| |-- index.js
|-- kebab-case
目錄結(jié)構(gòu)：
|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: '釘釘?shù)卿?#39;
},
USERNAME: {
value: 4,
desc: '用戶名密碼登錄'
}
};
export default {
EMPLOYEE_STATUS,
EMPLOYEE_ACCOUNT_TYPE
};
|-- 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 代碼生成器模塊
由于使用了 Vue 框架，所以在項目開發(fā)中盡量使用 Vue 的數(shù)據(jù)驅(qū)動更新 DOM，避免（除非萬不得已）手動操作 DOM，包括增刪改 DOM 元素、更改樣式、添加事件等。
由于使用了 Git/SVN 等版本控制工具，必須及時刪除無用代碼，例如調(diào)試時的 console 語句、廢棄的功能代碼等。
規(guī)范的目的是為了編寫高質(zhì)量的代碼，讓團(tuán)隊成員每天都有愉悅的心情，讓大家在一起感到快樂。
!! 參考：https://xie.infoq.cn/article/2048f2116f8df30115fca44c1。
自:Office之家鏈接:http://www.icanzc.com/word/6854.html
一篇文章段落太多，如果想要找到自然段，那怎么給word中一段文檔添加段落編號呢？為了更好地查看文檔，會對文檔內(nèi)容添加行號，本期小編與大家分享一下有關(guān)行號的用法，對行號不了解的朋友可以惡補(bǔ)一下知識哦。 1、行號的添加和刪除方式 選中要添加的行號的內(nèi)容，這一步是必須的，要操作先選擇，之后點擊布局——頁面設(shè)置——行號——連續(xù)即可，（其他選項大家可以嘗試）。若不想要行號，以同樣的方式設(shè)置為“無”即可，如下圖所示。
2、行號的格式設(shè)置 1）中間段不設(shè)置行號，對排版要求個性點的朋友可以了解下的 若想讓文檔中間某段不設(shè)置行號，可以先選中某段，點擊行號下拉菜單中的“禁止用于當(dāng)前段落”選項，便會看到不一樣的效果。
2）每頁重新設(shè)置編號，這個的意思是每頁的編號都是從1，2，3開始的 點擊文檔內(nèi)容，選擇行號下拉菜單中的“每頁重編行號”選項，看看效果。
3、行號選項的設(shè)置
1）每5行編號一次，想更個性的朋友，這是你的菜 選中文檔，點擊行號——行號選項——行號，打開相應(yīng)的界面，然后在“行號間距”中輸入5，點擊確定即可，其他選項，大家可以嘗試操作。
2）調(diào)整行號與正文間距，對美極致追求的朋友可以練練手 打開行號設(shè)置界面，在“距正文”中輸入想要的間距即可，Word就是這么6，總能想你所想。
注意：如果文檔沒有添加行號，在行號界面中需要勾選“添加行號編號”，這點很重要，一定要記住哦
4、在每段的末尾添加編號 如何給每個段落添加相應(yīng)的編號呢？這里推薦大家使用查找和替換功能。 首先在空白文檔中先插入一個編號域，點擊插入——文檔——文檔部件——域，選擇“編號”內(nèi)容，之后選擇一個格式，然后將編號復(fù)制，按Ctrl+H打開查找和替換，在查找內(nèi)容文本框中輸入^13，在替換為中輸入^c ^p，點擊全部替換即可。
PS：若不想添加空行，在替換時，后面就不用添加段落標(biāo)記 以上便是為大家介紹的行號的添加和刪除方式，行號的格式設(shè)置，行號選項的設(shè)置，如何在每段的末尾添加編號，對此感興趣的各位同學(xué)，可以趁機(jī)學(xué)習(xí)一下哦
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
