整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候，可以看到頁(yè)面上有導(dǎo)航欄，逛商城的時(shí)候會(huì)看到商品的詳情頁(yè)里有商品的簡(jiǎn)介，以及在注冊(cè)或者申請(qǐng)一個(gè)網(wǎng)站會(huì)員的時(shí)候會(huì)讓我們填寫(xiě)各種各樣的信息，這些分別由列表、表格、表單來(lái)完成的，今天我學(xué)習(xí)了這些知識(shí)，下面我把我學(xué)到的知識(shí)梳理一下，以及在學(xué)習(xí)中遇到的坑總結(jié)一下，希望能給其他初學(xué)者一些幫助，同時(shí)，如有不足之處，也請(qǐng)各位大神指出來(lái)，我也好學(xué)習(xí)學(xué)習(xí)，提升自我。
網(wǎng)站導(dǎo)航欄
HTML列表在網(wǎng)站頁(yè)面中使用的是相當(dāng)廣泛。如上圖的網(wǎng)站導(dǎo)航欄，就是使用了列表實(shí)現(xiàn)的，再比如說(shuō)，一個(gè)欄目的文章列表等等，都是使用了列表功能，根據(jù)我今天學(xué)到的內(nèi)容，我總結(jié)了一下，總共三大知識(shí)點(diǎn)：
1.無(wú)序列表：
可以在<ul>標(biāo)簽中使用type屬性來(lái)控制每一項(xiàng)前面的圓點(diǎn)的樣式:
<h3>商品列表</h3>
<ul start="2">
<li>iPhone 12</li>
<li>MacBook Air</li>
<li>AirPods Pro</li>
</ul>2.有序列表：
<h3>商品列表</h3>
<ol>
<li>iPhone 12</li>
<li>MacBook Air</li>
<li>AirPods Pro</li>
</ol>有序列表
可以在<ol>標(biāo)簽中使用start屬性來(lái)控制第一項(xiàng)數(shù)字起始值：
<h3>商品列表</h3>
<ol start="2">
<li>iPhone 12</li>
<li>MacBook Air</li>
<li>AirPods Pro</li>
</ol>效果如圖：
start=2
可以使用type規(guī)定在列表中使用的標(biāo)記類(lèi)型，type值有五種：
不過(guò)我個(gè)人感覺(jué)，這個(gè)type屬性的作用貌似不多大，基本上都是以默認(rèn)值，就是數(shù)字來(lái)作為每一項(xiàng)的標(biāo)記了吧。
3.自定義列表：
<dl>
<dt>名稱(chēng)：</dt>
<dd>小白學(xué)編程</dd>
<dt>地址：</dt>
<dd>河南省鄭州市二七區(qū)</dd>
<dt>聯(lián)系</dt>
<dd>電話(huà)：<a href="tel:189****1122">189****1122</a></dd>
<dd>郵箱：<a href="mailto:admin@admin.com">admin@admin.com</a></dd>
</dl>自定義列表
備注：根據(jù)本小白查的文檔，a標(biāo)簽的href屬性，不僅可以填寫(xiě)鏈接，還可以用：
【tel:電話(huà)號(hào)碼】的格式點(diǎn)擊進(jìn)行撥號(hào)，只不過(guò)是在電腦上需要有能撥號(hào)的軟件；
撥號(hào)
【mailto:郵箱地址】的格式可以快速拉起發(fā)送郵件的軟件。
發(fā)送郵件
不過(guò)我不知道這個(gè)的兼容性怎么樣，如果有知道的大佬，可以在評(píng)論區(qū)指導(dǎo)一下，跪謝！
一個(gè)表格的基本結(jié)構(gòu)：
<table class="table">
<!-- caption：表格標(biāo)題 -->
<caption>
商品信息表
</caption>
<!-- 表頭 -->
<thead>
<!-- 添加表格數(shù)據(jù)的時(shí)候必須先添加一行 -->
<tr>
<td>ID</td>
<td>商品名稱(chēng)</td>
<td>單價(jià)</td>
<td>單位</td>
<td>數(shù)量</td>
<td>金額</td>
</tr>
</thead>
<!-- 一個(gè)表格可以有多個(gè)tbody，但是只能有一個(gè)thead -->
<tbody>
<tr>
<td>1</td>
<td>iPhone 12 mini</td>
<td>5499</td>
<td>部</td>
<td>100</td>
<td>549900</td>
</tr>
</tbody>
</table>Excel里的表格可以進(jìn)行行與列的合并，單元格直接也能合并，那么HTML表格也是可以的，可以使用colspan進(jìn)行列合并，rowspan進(jìn)行行的合并。利用這兩個(gè)屬性，我們可以使用<table>標(biāo)簽寫(xiě)一個(gè)課程表。
HTML表單是用于搜集用戶(hù)輸入的不同類(lèi)型數(shù)據(jù)的，它包含了不同類(lèi)型的<input>元素，如:文本框、單選框、復(fù)選框、提交按鈕等等。因此可以看出，<input>元素是表單中最重要的元素。
表單的基本格式：
<form action="" method="POST" class="register">
<!-- 這里面可以放input元素 -->
</form>根據(jù)我學(xué)習(xí)的成果，我總結(jié)出了input元素的七種type類(lèi)型并一一做了記錄：
1.type="text" 單行文本框
<label for="username">賬號(hào)：</label>
<input type="text" name="username" id="username" value="admin" required>單行文本框
2.type="email" 郵箱型文本框
<label for="email">郵箱：</label>
<input type="email" name="email" id="email" value="html@html.cn" required>郵箱型文本框還會(huì)對(duì)輸入的內(nèi)容進(jìn)行校驗(yàn)，如果不符合郵件地址的格式會(huì)彈出如上圖提示。
3.type="password" 密碼型文本框/非明文
<label for="password">密碼：</label>
<input type="password" name="password" id="password" value="" placeholder="密碼不少于6位" required>密碼型文本框
輸入內(nèi)容
值得注意的是，密碼型文本框在輸入密碼的時(shí)候都是以小黑點(diǎn)進(jìn)行替換的，并不會(huì)顯示我們輸入的內(nèi)容。
4.type="radio" 單選框
<label for="">性別：</label>
<div>
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="male" id="male">
<label for="female">女</label>
<input type="radio" name="gender" value="male" id="male" checked>
<label for="secret">保密</label>
</div>單選框
單選框（radio）的name值必須都相同才能保證值的唯一性，默認(rèn)選中使用checked屬性。
5.type="checkbox" 復(fù)選框
<label for="#">興趣：</label>
<div>
<input type="checkbox" name="hobby[]" value="basketball" id="basketball">
<label for="basketball">籃球</label>
<input type="checkbox" name="hobby[]" value="game" id="game">
<label for="game">游戲</label>
<input type="checkbox" name="hobby[]" value="travel" id="travel">
<label for="travel">旅游</label>
<input type="checkbox" name="hobby[]" value="program" id="program">
<label for="program">編程</label>
</div>復(fù)選框
復(fù)選框的name值一定要用數(shù)組表示，否則，服務(wù)器在接收數(shù)據(jù)的時(shí)候不能獲取所有選中的值。
6.type="file" 文件域
<label for="user-pic">頭像：</label>
<input type="file" name="user_pic" id="user-pic" />上傳文件
7.type="hidden" 隱藏域
<input type="hidden" name="MAX_FILE_ZIE" value="80000" />隱藏域在頁(yè)面是看不到的，是服務(wù)器端進(jìn)行處理的一項(xiàng)數(shù)據(jù)。
通過(guò)上述的七種<input>元素類(lèi)型，我得出一個(gè)結(jié)論就是一個(gè)<input>元素至少包含有三個(gè)屬性：
除了上述的<input>元素的7種標(biāo)簽類(lèi)型，還有下拉列表、文本域這些常用的控件。
<label for="">學(xué)歷：</label>
<select name="edu" id="eud">
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected>本科</option>
<option value="4">研究生</option>
<option value="5" label="老司機(jī)">博士</option>
</select下拉列表/下拉框
<label for="">學(xué)歷：</label>
<select name="edu" id="eud">
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected>本科</option>
<option value="4">研究生</option>
<option value="5" label="老司機(jī)">博士</option>
</select>multiple、size用法
<label for="comment">備注：</label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>上傳文件需要注意兩點(diǎn)：
<form action="" method="POST" class="register" enctype="multipart/form-data">
<label for="user-pic">頭像：</label>
<!-- 隱藏域在頁(yè)面是看不到的，是服務(wù)器端進(jìn)行處理的一項(xiàng)數(shù)據(jù)。 -->
<input type="hidden" name="MAX_FILE_ZIE" value="80000" />
<input type="file" name="user_pic" id="user-pic" />
<div class="user-pic" style="grid-column: 2;"></div>
<button>提交</button>
</form>enctype有3個(gè)值：
<form action="check.php" method="get" id="register">
<div class="box">
<label for="email">郵箱:</label>
<input type="email" form="register" name="email" id="email" placeholder="demo@email.com" />
<label for="password">密碼:</label>
<input type="password" form="register" name="password" id="password" placeholder="至少8位" />
<button form="register">提交</button>
</div>
</form>
<label for="username">帳號(hào):</label>
<input type="text" name="username" id="username" placeholder="不能為空" />注冊(cè)表單
例如：以下情況就是沒(méi)有在空間中寫(xiě)form屬性的情況，我們可以看到，在瀏覽器里沒(méi)有獲取到密碼password的值，只獲取到了username和email的值：
沒(méi)有獲取到password的值
我個(gè)人的理解是：如果不把表單控件寫(xiě)到form內(nèi)部，這樣會(huì)方便js獲取表單元素的值，但是這樣寫(xiě)會(huì)容易影響布局，造成布局混亂，建議還是按照標(biāo)準(zhǔn)的寫(xiě)法，把所有的控件都寫(xiě)到form表單內(nèi)部。
至于什么時(shí)候使用GET方法，什么時(shí)候使用POST方法呢？通過(guò)今天的學(xué)習(xí)，我做了如下總結(jié)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/table.css">
<title>表格：行與列的合并</title>
</head>
<body>
<table class="lesson">
<caption>
xxxx小學(xué)課程表
</caption>
<thead>
<tr>
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">上午</td>
<td>1</td>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>音樂(lè)</td>
<td>社會(huì)</td>
<td>科學(xué)</td>
</tr>
<tr>
<td>2</td>
<td>數(shù)學(xué)</td>
<td>語(yǔ)文</td>
<td>音樂(lè)</td>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
</tr>
<tr>
<td>3</td>
<td>美術(shù)</td>
<td>音樂(lè)</td>
<td>音樂(lè)</td>
<td>數(shù)學(xué)</td>
<td>音樂(lè)</td>
</tr>
<tr>
<td>4</td>
<td>社會(huì)</td>
<td>體育</td>
<td>音樂(lè)</td>
<td>體育</td>
<td>語(yǔ)文</td>
</tr>
<tr class="rest">
<td colspan="7">中午休息</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>5</td>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
<td>音樂(lè)</td>
<td>社會(huì)</td>
<td>科學(xué)</td>
</tr>
<tr>
<td>6</td>
<td>數(shù)學(xué)</td>
<td>語(yǔ)文</td>
<td>音樂(lè)</td>
<td>語(yǔ)文</td>
<td>數(shù)學(xué)</td>
</tr>
<tr>
<td>7</td>
<td>課外活動(dòng)：</td>
<td colspan="4">各班自行組織，自愿參加</td>
<td>數(shù)學(xué)</td>
<td>音樂(lè)</td> -->
</tr>
</tbody>
</table>
</body>
</html>效果：
用HTML表格寫(xiě)一個(gè)課程表
個(gè)人總結(jié)：為了學(xué)習(xí)這些表單知識(shí)，真真的是看了一天，頭都懵了，還有不少內(nèi)容沒(méi)有記住，還是需要多寫(xiě)多練，其中我認(rèn)為比較坑的幾個(gè)地方是：
在看視頻教程的過(guò)程中，我看到好多大佬在用VS Code的時(shí)候都是使用了快捷鍵，后來(lái)網(wǎng)上搜了一下，原來(lái)官方給的就有一個(gè)PDF文檔，從VS里就可以進(jìn)去，在工具的頂部導(dǎo)航欄幫助里，如下圖：
快捷鍵
為了方便大家快速找到，我把官方地址貼出來(lái)吧，VS Code快捷鍵PDF文檔：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
VS Code快捷鍵
續(xù)一周沒(méi)怎么更新了，今天我們繼續(xù)HTML的學(xué)習(xí)，表格標(biāo)簽。表格是實(shí)際開(kāi)發(fā)中常用的一種標(biāo)簽類(lèi)型，會(huì)說(shuō)到表格標(biāo)簽的主要作用和基本語(yǔ)法。
主要作用: 表格主要用于顯示、展示數(shù)據(jù)，因?yàn)樗梢宰寯?shù)據(jù)展示的非常規(guī)整，可讀性非常好，特別是后臺(tái)展示數(shù)據(jù)的時(shí)候，能夠熟練運(yùn)用表格非常重要。一個(gè)清爽簡(jiǎn)約的表格可以把復(fù)雜的數(shù)據(jù)表現(xiàn)的很簡(jiǎn)單。表格不是用來(lái)布局頁(yè)面的，而是用來(lái)展示數(shù)據(jù)的。
表格的基本語(yǔ)法: <table><tr><td></td></tr></table>
<table></table>用來(lái)定義表格標(biāo)簽
<tr></tr>用于定義表格中的行，嵌套在<table>標(biāo)簽中使用
<td></td>用于定義表格中的單元格，嵌套在<tr>標(biāo)簽中使用，字母td指表格數(shù)據(jù)(table data),即數(shù)據(jù)單元格的內(nèi)容。
我們來(lái)展示一個(gè)例子，比如 數(shù)據(jù)庫(kù)中有三個(gè)字段，分別為 姓名 性別和年齡，如果想用前端將這三個(gè)字段的數(shù)據(jù)展示出來(lái)，應(yīng)該怎么操作呢？
先看效果:
然后我們看下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210829---</title>
</head>
<body>
<table>
<tr> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr>
</table>
</body>
</html>
這次開(kāi)始使用vs code來(lái)編輯代碼了，感覺(jué)比sublime line高級(jí)一些，但是相對(duì)的也麻煩點(diǎn)。可以看到，在前端頁(yè)面展示了 姓名、性別和年齡。然后我們添加一行數(shù)據(jù)，看效果:
民族英雄黃飛鴻如果還活著，應(yīng)該也是一位非常高壽的宗師了。多加幾個(gè)數(shù)據(jù)
讓我們看看代碼有什么不同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210829---</title>
</head>
<body>
<table>
<tr> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr>
<tr> <td>黃飛鴻</td> <td>男</td> <td>188</td> </tr>
<!--再多創(chuàng)建幾個(gè)數(shù)據(jù)-->>
<tr><td>鬼腳七</td> <td>男</td> <td>186</td> </tr>
<tr><td>梁寬</td> <td>男</td> <td>33</td> </tr>
</table>
</body>
</html>
可以看到，就是將之前的數(shù)據(jù)進(jìn)行了復(fù)制而已。
接著我們說(shuō)下表頭單元格標(biāo)簽，一般表頭單元格位于表頭的第一行或第一列，表頭單元格里面的文本內(nèi)容，加粗居中表示。
<th>標(biāo)簽表示HTML表格的表頭部分，table head的縮寫(xiě)
我們先來(lái)看下效果:
再看下對(duì)應(yīng)的代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210829---</title>
</head>
<body>
<table>
<!--HTML表格的表頭標(biāo)簽，內(nèi)容加粗居中展示-->>
<tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr>
<tr> <td>黃飛鴻</td> <td>男</td> <td>188</td> </tr>
<!--再多創(chuàng)建幾個(gè)數(shù)據(jù)-->>
<tr><td>鬼腳七</td> <td>男</td> <td>186</td> </tr>
<tr><td>梁寬</td> <td>男</td> <td>33</td> </tr>
</table>
</body>
</html>
就是將表格表頭那一行的<td>都換成了<th>，可以看到表頭每個(gè)字段都已經(jīng)居中并且加粗了。
最后我們說(shuō)下表格的屬性，其實(shí)表格標(biāo)簽屬性這部分用的不多，一般都是用css樣式來(lái)設(shè)置。例如表格的邊框、大小等。我們需要關(guān)注的表格屬性目的，有2點(diǎn):
align 屬性值: left right center 對(duì)應(yīng)表格相對(duì)周?chē)氐膶?duì)齊方式
border 屬性值 1或"" (空) 規(guī)定表格單元是否有邊框，默認(rèn)為空，表示沒(méi)有邊框
cellpadding 像素值 規(guī)定單元邊沿與其內(nèi)容之間的空白，默認(rèn)1像素
cellspacing 像素值 規(guī)定單元格之間的空白，默認(rèn)1像素
width 像素值或百分比 規(guī)定表格的寬度
我們來(lái)看下效果:
來(lái)看下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210829---</title>
</head>
<body>
<table align="center" border=1 cellpadding=1 cellspacing=1 width=500>
<!--HTML表格的表頭標(biāo)簽，內(nèi)容加粗居中展示-->>
<tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr>
<tr> <td>黃飛鴻</td> <td>男</td> <td>188</td> </tr>
<!--再多創(chuàng)建幾個(gè)數(shù)據(jù)-->>
<tr><td>鬼腳七</td> <td>男</td> <td>186</td> </tr>
<tr><td>梁寬</td> <td>男</td> <td>33</td> </tr>
</table>
</body>
</html>
記住，屬性都是在table處添加和修改的，因?yàn)槲覀兪菍?duì)整個(gè)table的設(shè)置值。
好的，今天就先到這里了，大家周末愉快
一篇文章我給大家說(shuō)明了如何從零開(kāi)始搭建一個(gè)node的服務(wù)端框架，我們用到了Egg框架。Egg框架我不再過(guò)多介紹，如果有小伙伴想了解，可以回去看我以前寫(xiě)的文章，會(huì)有相關(guān)的介紹。這次我將在上次搭建的框架上進(jìn)行延伸，講一下如果用Egg框架連接數(shù)據(jù)庫(kù)，并且實(shí)現(xiàn)對(duì)數(shù)據(jù)的增刪查改。接下來(lái)我們直接進(jìn)入主題。
我本次選用的數(shù)據(jù)庫(kù)是MySQL。所以我們安裝Egg官方的數(shù)據(jù)庫(kù)插件即可，首先我們安裝插件 egg-mysql 。我們?cè)陧?xiàng)目根目錄打開(kāi)命令提示符，輸入命令行：npm i --save egg-mysql 。回車(chē)等待插件下載安裝完成。
npm i --save egg-mysql命令行下載安裝插件完成后，我們下一步的工作就是在項(xiàng)目中開(kāi)啟并配置egg-mysql插件。具體操作如下：
首先我們要在項(xiàng)目中開(kāi)啟數(shù)據(jù)庫(kù)。找到項(xiàng)目中的/config/plugin.js文件我們需要在里面添加幾行代碼，如下所示。
//開(kāi)啟數(shù)據(jù)庫(kù)插件
mysql : {
enable: true,
package: 'egg-mysql',
}然后我們還要在 config/config.default.js 中配置各個(gè)環(huán)境的數(shù)據(jù)庫(kù)連接信息。具體配置如下。
//添加數(shù)據(jù)庫(kù)連接信息
config.mysql={
// 單數(shù)據(jù)庫(kù)信息配置
client: {
// host
host: 'localhost',
// 端口號(hào)
port: '3306',
// 用戶(hù)名
user: 'root',
// 密碼
password: '123456',
// 數(shù)據(jù)庫(kù)名
database: 'testdb',
},
// 是否加載到 app 上，默認(rèn)開(kāi)啟
app: true,
// 是否加載到 agent 上，默認(rèn)關(guān)閉
agent: false,
};到此步驟我們的數(shù)據(jù)庫(kù)插件已經(jīng)安裝完成并且配置好了。那我們?cè)趺磳?shí)現(xiàn)數(shù)據(jù)的增刪查改呢？大家請(qǐng)繼續(xù)往下看。
首先我們看一下怎么新增數(shù)據(jù)。我們?cè)趍ysql的testdb實(shí)例中新建一個(gè)user空表。如下圖所示。
我們的egg框架也遵循MVC的架構(gòu)所以我們一般會(huì)在service層里面寫(xiě)我們邏輯處理的代碼，而controller層則是獲取前端數(shù)據(jù)，回傳數(shù)據(jù)的控制層。所以我們操作數(shù)據(jù)庫(kù)的代碼是寫(xiě)在service文件夾里面的。
我們?cè)赼pp/service文件夾里面新建一個(gè)user.js文件。在里面寫(xiě)個(gè)新增用戶(hù)的方法，該方法就是把數(shù)據(jù)存到數(shù)據(jù)庫(kù)中。具體代碼如下。
const Service=require('egg').Service;
class UserService extends Service {
//新增用戶(hù)data是有controller層傳遞過(guò)來(lái)的數(shù)據(jù)記錄。
async addUser(data) {
const {ctx, app}=this;
let result={};
try {
data.id=0;//定義id=0，因?yàn)閿?shù)據(jù)庫(kù)已經(jīng)設(shè)置id為主鍵，并且自增。所以只需要賦值0即可。
// 在 user 表中，插入前端提交上來(lái)的數(shù)據(jù)記錄
const info=await app.mysql.insert('user', data);
//插入成功后。
if(info.affectedRows===1){
//給前端返回一個(gè)Json的對(duì)象
result={
state: 0, //自定義的狀態(tài)碼
msg: "添加成功", //返回的消息
data: info.insertId, //新增的記錄的id
}
}
} catch (err) {
//插入數(shù)據(jù)失敗的返回結(jié)果
result={
state: 1,
msg: err,
data: null,
}
}
return result
}
};
module.exports=UserService;然后我們?cè)赼pp/controller文件夾里新建一個(gè)user.js文件。在這里我們需要獲取前端提交上來(lái)的數(shù)據(jù)，并且將數(shù)據(jù)處理的結(jié)果返回給前端。具體代碼如下。
'use strict';
const Controller=require('egg').Controller;
/**
* @Controller 用戶(hù)管理
*/
class UserController extends Controller {
/**
* @summary 新增用戶(hù)
* @router post /user/add
* @request body userAddRequest
* @response 200
*/
async addUser() {
const { ctx }=this;
//通過(guò)ctx.request.body的方式，可以獲取到前端post方式提交上來(lái)的數(shù)據(jù)
const data=ctx.request.body;
//調(diào)用service層的addUser方法。并且返回相應(yīng)的結(jié)果
const userInfo=await ctx.service.user.addUser(data);
//向前端接口響應(yīng)數(shù)據(jù)。
ctx.body=userInfo;
}
}
module.exports=UserController;最后我們定義一個(gè)路由，讓前端請(qǐng)求訪問(wèn)此路由。框架會(huì)監(jiān)聽(tīng)路由是否被訪問(wèn)，如果被訪問(wèn)了則會(huì)調(diào)用我們定義在controller層的新增用戶(hù)的方法。我們?cè)赼pp/router.js文件中添加如下代碼，即可完成路由的定義。
//新增用戶(hù)路由
router.post('/user/add', controller.user.addUser);完成這步驟后，我們一個(gè)新增用戶(hù)的功能就已經(jīng)完成了。接下里我們就測(cè)試一下它的實(shí)際效果。我們運(yùn)行命令：npm run dev。啟動(dòng)項(xiàng)目，然后打開(kāi)網(wǎng)頁(yè)http://127.0.0.1:7001，可以直接在swagger-ui.html頁(yè)面中進(jìn)行測(cè)試。結(jié)果如下圖所示。
經(jīng)過(guò)測(cè)試，數(shù)據(jù)已經(jīng)添加完成。所以數(shù)據(jù)庫(kù)連接也是正常的。
本次分享暫時(shí)先告一段落。請(qǐng)各位小伙伴抬起你們發(fā)財(cái)?shù)男∈郑c(diǎn)個(gè)贊唄。下次我將會(huì)進(jìn)行和大家分享對(duì)數(shù)據(jù)查改刪的方法。關(guān)注我！！！更多精彩分享不迷路。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
