整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線:

          小白學(xué)編程遇到的列表、表格以及form表單里的各種坑

          小白學(xué)編程遇到的列表、表格以及form表單里的各種坑

          們?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):

          一、HTML列表分為三種:

          1.無(wú)序列表:

          1. 無(wú)序列表是由標(biāo)簽<ul>和<li>組成的;
          2. <ul>標(biāo)簽是聲明無(wú)序列表的,<li>標(biāo)簽作為列表中每一項(xiàng)的起始項(xiàng)。

          可以在<ul>標(biāo)簽中使用type屬性來(lái)控制每一項(xiàng)前面的圓點(diǎn)的樣式:

          • 1.disc 默認(rèn)值,每一項(xiàng)前面的圓點(diǎn)為黑色實(shí)心圓。
          • 2.square 每一項(xiàng)前面的圓點(diǎn)為實(shí)體方心。
          • 3.circle 每一項(xiàng)前面的圓點(diǎn)為空心圓。
          <h3>商品列表</h3>
          <ul start="2">
              <li>iPhone 12</li>
              <li>MacBook Air</li>
              <li>AirPods Pro</li>
          </ul>
          • 效果如圖:

          2.有序列表:

          1. 與無(wú)序列表有區(qū)別的是有序列表,他的每一項(xiàng)都是由它是有先后順序進(jìn)行排列的,并且會(huì)用數(shù)字依次進(jìn)行標(biāo)記;
          2. 有序列表由標(biāo)簽<ol>和<li>組成。
          <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值有五種:

          • 1 默認(rèn)值,以數(shù)字樣式標(biāo)記;
          • A 以大寫(xiě)字母作為每一項(xiàng)前面的標(biāo)記;
          • a 以小寫(xiě)字母作為每一項(xiàng)前面的標(biāo)記;
          • I 以大寫(xiě)的羅馬數(shù)字作為標(biāo)記;
          • i 以小寫(xiě)的羅馬數(shù)字作為標(biāo)記。

          不過(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)一下,跪謝!

          二、HTML表格:

          • <table>標(biāo)簽定義一個(gè)HTML表格;
          • 一個(gè)HTML表格由table以及一個(gè)或多個(gè)tr、th或者td組成
          • tr元素定義表格行,th元素定義表頭,td元素定義表格單元格。

          一個(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>
          • 總結(jié):
            1.一個(gè)表格允許有多個(gè)<tbody>,但是有且只能有一個(gè)<thead>;
            2.添加表格數(shù)據(jù)的時(shí)候必須先添加一行;
            3.所有的數(shù)據(jù)必須填充到<td>或者<th>標(biāo)簽中;
            4.th是td元素的一個(gè)加強(qiáng)版,<th>比<td>多了個(gè)加粗和居中的效果。

          Excel里的表格可以進(jìn)行行與列的合并,單元格直接也能合并,那么HTML表格也是可以的,可以使用colspan進(jìn)行列合并,rowspan進(jìn)行行的合并。利用這兩個(gè)屬性,我們可以使用<table>標(biāo)簽寫(xiě)一個(gè)課程表。

          三、HTML表單與常用控件

          HTML表單是用于搜集用戶(hù)輸入的不同類(lèi)型數(shù)據(jù)的,它包含了不同類(lèi)型的<input>元素,如:文本框、單選框、復(fù)選框、提交按鈕等等。因此可以看出,<input>元素是表單中最重要的元素。

          表單的基本格式

          <form action="" method="POST" class="register">
              <!-- 這里面可以放input元素 -->
          </form>
          • action:處理表單的程序,通知表單往何處發(fā)送數(shù)據(jù);
          • method:表單數(shù)據(jù)提交類(lèi)型,有兩個(gè)值:
            - GET:數(shù)據(jù)直接顯示在url地址中;
            - POST:表單數(shù)據(jù)在請(qǐng)求頭體中。

          根據(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è)屬性:

          1. type 控件的類(lèi)型;
          2. name 相當(dāng)于變量名稱(chēng),用于后端服務(wù)器接收時(shí)使用;
          3. value 控件的值。

          除了上述的<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

          下拉列表/下拉框

          • 注意:
            如果option里有l(wèi)abel值,label屬性的優(yōu)先級(jí)于option里的內(nèi)容。因此,上述列表第5項(xiàng)應(yīng)該顯示“老司機(jī)”。
          • HTML5中新屬性:
            multiple multiple可以選擇多個(gè)選項(xiàng)
            size 數(shù)值,如:3,下拉框里可見(jiàn)的選項(xiàng)數(shù)量
          <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)

          1. 請(qǐng)求類(lèi)型必須為POST類(lèi)型;
          2. form表單必須有enctype屬性,并且數(shù)據(jù)編碼設(shè)置為:enctype=”multipart/form-data”;
          <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è)值:

          1. application/x-www-form-urlencoded 默認(rèn)值,在發(fā)送前對(duì)所有字符進(jìn)行編碼;
          2. multipart/form-data 使用上傳文件空間時(shí)必須用該值;
          3. text/plain 將空格轉(zhuǎn)換為“+”,但不對(duì)特殊字符編碼。

          四、表單的form屬性

          <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è)表單

          • 如果某個(gè)控件寫(xiě)在form表單的外部,則該控件需要使用form屬性:form=”表單的id值”,才可以在表單提交時(shí)傳該控件的值,否則無(wú)法進(jìn)行傳值。

          例如:以下情況就是沒(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é):

          1. GET方法傳輸?shù)臄?shù)據(jù)相對(duì)于POST要小的很多,并且是明文傳輸?shù)模侵苯訉?shù)放在應(yīng)用程序的URL中傳輸?shù)模谎劬湍芸匆?jiàn),因此對(duì)于小一些的表單,對(duì)安全性要求不高的,可以使用GET方法。
          2. POST方法可以發(fā)送大文件,并且在請(qǐng)求的URL中看不到發(fā)送的數(shù)據(jù),安全性高,因此建議使用POST方法。當(dāng)然這個(gè)安全性也是相對(duì)來(lái)說(shuō)的,對(duì)于一些網(wǎng)絡(luò)黑客高手,還是有辦法獲取這些傳輸內(nèi)容,至于怎么獲取的,我也不清楚,畢竟咱還是小白。
          3. 還有一點(diǎn)就是在上傳文件的時(shí)候必須使用POST方法,因?yàn)槲募话愣急容^大,GET方法最大大概只能發(fā)送32K的數(shù)據(jù),POST方法可以達(dá)到1G。

          作業(yè):用表格寫(xiě)一個(gè)課程表

          <!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è)地方是:

          1. 表格的行與列的合并,colspan、rowspan,如果能熟練的用好這兩個(gè)屬性,相信寫(xiě)出上面課程表實(shí)例也不難;
          2. 表單的屬性太多了,一時(shí)半會(huì)真的是記不住;
          3. 上傳文件需要注意的兩點(diǎn):請(qǐng)求類(lèi)型必須為POST;form表單加上enctype=”multipart/form-data”;
          4. 表單控件的form屬性,這個(gè)可能是因?yàn)槲疫€是個(gè)小白,才接觸這些東西,不知道這些知識(shí)點(diǎ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):

          1. 記住英文顯示名稱(chēng),之后使用css樣式會(huì)用到
          2. 直觀感受表格的外觀狀態(tài)

          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ù)插件

          我本次選用的數(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ù)操作-新增用戶(hù)

          首先我們看一下怎么新增數(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)注我!!!更多精彩分享不迷路。


          主站蜘蛛池模板: 日韩人妻无码免费视频一区二区三区| 一区二区视频在线免费观看| 国产一区中文字幕| 免费无码毛片一区二区APP| 波多野结衣一区二区三区高清av | 一区二区中文字幕在线观看| AA区一区二区三无码精片| 精品福利一区二区三| 波霸影院一区二区| 欧洲精品免费一区二区三区| 精品视频一区二区三区四区| 久久久一区二区三区| 国产AV国片精品一区二区| 国精产品一区一区三区有限在线| 日本一区二区在线| 国产成人精品久久一区二区三区av| 久久久久人妻精品一区三寸| 无码人妻久久一区二区三区免费 | 亚洲毛片不卡av在线播放一区| 日韩精品电影一区| 色婷婷亚洲一区二区三区| 天堂一区二区三区精品| 亚洲AV成人精品日韩一区| 怡红院一区二区三区| 国产在线观看精品一区二区三区91| 欧美av色香蕉一区二区蜜桃小说| 中文字幕日韩一区二区不卡| 精品国产一区二区三区四区| 91在线视频一区| 亚洲变态另类一区二区三区| 国内精品一区二区三区最新| 精品国产一区二区三区在线 | 少妇无码一区二区三区免费| 无码人妻视频一区二区三区| 无码人妻精品一区二区三区99性 | 国产精品日本一区二区不卡视频 | 三上悠亚精品一区二区久久| 日本高清成本人视频一区| 亚洲国产国产综合一区首页| 中文字幕av一区| 麻豆精品一区二区综合av|