項(xiàng)目目標(biāo)：

????1）熟練掌握ajax的使用 （*****）

????2）熟悉前后端數(shù)據(jù)交互（***）

????3）熟悉elementui 框架的使用（***）

????4）熟悉vue的簡(jiǎn)單使用（***）

????5）了解后端增刪改查的邏輯

????6）對(duì)整個(gè)項(xiàng)目的前后端結(jié)構(gòu)和邏輯都有一個(gè)認(rèn)識(shí)。

難點(diǎn)：分頁(yè)（后端）模糊查詢（后端）

DAY01需求：

????A 搭建項(xiàng)目環(huán)境

????????1 使用express搭建項(xiàng)目環(huán)境

????????????express smms -e

????????2 進(jìn)入項(xiàng)目根目錄 一次性安裝所有依賴

????????????cnpm i

????????3 監(jiān)聽端口 啟動(dòng)服務(wù)器

????????????a) 打開app.js文件 ?

????????????????app.listen(666, () => {

????????????????????console.log('服務(wù)器啟動(dòng)成功...端口：666')

????????????????})

????????????b） 啟動(dòng)服務(wù)器

????????????????nodemon app

????B 前端資源文件都放入public， 集成elementui和vue.js

????????1 搭建前端目錄結(jié)構(gòu),準(zhǔn)備資源文件

????????????images: 圖片

????????????js： 腳本

????????????styles： 樣式

????????????libs：第三方庫(kù)

????????????????elementui:

????????????????????css: 樣式文件

????????????????????fonts: 字體文件（css需要引用它,注意路徑！）

????????????????????js: ?js腳本（依賴vue.js）

????????????????vue: ?vue.min.js

????????????????jquery: jquery.min.js

????????2 新建一個(gè)測(cè)試頁(yè)面 測(cè)試環(huán)境是否搭建成功

注意：主要測(cè)試elementui是否可以使用。

????C 登錄頁(yè)面的布局實(shí)現(xiàn)

????????1 登錄頁(yè)面表單

????????2 水平和垂直居中

????????????1） 子絕父相

????????????2） left right top bottom ?都設(shè)置為0

????????????3） margin： auto

????D 表單的基本驗(yàn)證：

????????1 data里面有兩份數(shù)據(jù)

????????????1） 雙向數(shù)據(jù)綁定 主要用來取值

????????????????loginForm: { ?

????????????????????username: '', ?// 用戶名

????????????????????password: '', ?// 密碼

????????????????????confirmPassword: '' // 確認(rèn)密碼

????????????????}

????????????2） 驗(yàn)證規(guī)則的數(shù)據(jù)

??????????????????rules: {

????????????????????????// 驗(yàn)證用戶名

????????????????????????username: [

????????????????????????????{required: true, message: '請(qǐng)輸入用戶名', trigger: 'blur'}, // 非空驗(yàn)證

????????????????????????????{min: 5, max: 12, message: '用戶名長(zhǎng)度在 5 到 12 個(gè)字符', trigger: 'blur'} // 長(zhǎng)度驗(yàn)證

????????????????????????],

????????????????????????// 驗(yàn)證密碼

????????????????????????password: [

????????????????????????????{required: true, message: '請(qǐng)輸入密碼', trigger: 'blur'}, // 非空驗(yàn)證

????????????????????????????{min: 6, max: 12, message: '密碼長(zhǎng)度在 6 到 12 個(gè)字符', trigger: 'blur'} // 長(zhǎng)度驗(yàn)證

????????????????????????],

????????????????????????// 驗(yàn)證確認(rèn)密碼 (自定義驗(yàn)證規(guī)則)

????????????????????????confirmPassword: [

????????????????????????????{ validator: checkPass, trigger: 'blur' } ?// 自定義驗(yàn)證函數(shù)

????????????????????????],

????????????????????}

說明：

在return之前 自己寫的驗(yàn)證函數(shù)

????????????????????let 驗(yàn)證函數(shù)的名字 = (rules, value, callback) => {

????????????????????????// 對(duì)value判斷

????????????????????????if (value === '') {

????????????????????????????// 給出提示信息 輸入框邊框變紅色 有一個(gè) x

????????????????????????????callback(new Error('不能為空'))

????????????????????????} else if (value.length < 6 || value.length > 18) {

?????????????????????????????// 給出提示信息 輸入框邊框變紅色 有一個(gè) x

????????????????????????????callback(new Error('長(zhǎng)度必須在6 - 18 位之間'))

????????????????????????} else {

????????????????????????????// 成功 輸入框邊框變綠色 有一個(gè)√

????????????????????????????callback()

????????????????????????}

????????????????????}

????????????????????rules: {

要驗(yàn)證的字段: [

????????????????????????????{required: true, message: '提示信息', trigger: '觸發(fā)方式'}, ??// 非空驗(yàn)證

????????????????????????????{min: 5, max: 12, message:'提示信息', trigger: '觸發(fā)方式'}, ??// 長(zhǎng)度驗(yàn)證

????????????????????????????{validator: 自己寫的驗(yàn)證函數(shù)的名字, trigger: '觸發(fā)方式'}

????????????????????????]

????????????????????}

????????2 提交表單方法

????????????submitForm(formName) {

????????????????// $refs能夠把用 ref屬性聲明的dom 都收集在一個(gè)對(duì)象里面

????????????????this.$refs[formName].validate((valid) => {

????????????????????// 如果valid是true 證明整個(gè)表單前端驗(yàn)證全部通過 允許發(fā)送給后端了

????????????????????if (valid) {

????????????????????????// 收集用戶輸入的用戶名和密碼

????????????????????????let username = this.loginForm.username;

????????????????????????let password = this.loginForm.password;

????????????????????????// 構(gòu)造ajax 把用戶名和密碼發(fā)送給后端（等待 后端去數(shù)據(jù)庫(kù)查詢存不存在）

????????????????????} else {

????????????????????????// valid是false 證明前端驗(yàn)證沒有通過 不允許提交表單 不允許發(fā)給后端

????????????????????????console.log('error submit')

????????????????????????return false;

????????????????????}

????????????????})

????????????}

????????3 重置表單：

????????????resetForm(formName) {

????????????????// 獲取整個(gè)表單 調(diào)用重置方法

????????????????this.$refs[formName].resetFields(); ?// this.$refs[formName] ==> this.$refs.loginForm

????????????}

????E 后臺(tái)首頁(yè)頁(yè)面的實(shí)現(xiàn)

????D 添加賬號(hào)頁(yè)面的實(shí)現(xiàn)

????F 用戶列表頁(yè)面的實(shí)現(xiàn)

DAY02:需求

準(zhǔn)備工作：

????????1 數(shù)據(jù)庫(kù)設(shè)計(jì)：

數(shù)據(jù)庫(kù)名字：admin

表的名字：users

創(chuàng)建用戶賬號(hào)表：

????????????????create table `users` (

????????????????????id int primary key auto_increment,

????????????????????username varchar(50),

????????????????????password varchar(32),

????????????????????groups varchar(50),

????????????????????ctime TIMESTAMP ?default CURRENT_TIMESTAMP

????????????????);

????????2 nodejs連接mysql數(shù)據(jù)庫(kù)?

????????????1）下載mysql模塊

????????????????cnpm i mysql --save

????????????2) 引入mysql模塊

????????????????const mysql = require('mysql');

????????????3) 創(chuàng)建連接

????????????????const connection = mysql.createConnection({

????????????????????host ????: 'localhost', ?// 主機(jī)名

????????????????????user ????: 'root', ??// 用戶名

????????????????????password : 'root', // 密碼

????????????????????database : 'admin' ?// 數(shù)據(jù)庫(kù)的名字

????????????????})

????????????4) 調(diào)用連接方法

????????????????connection.connect();

????????3 nodejs操作數(shù)據(jù)庫(kù)

????????????a) 定義sql語(yǔ)句

????????????????const sqlStr = 'sql語(yǔ)句';

????????????b) 執(zhí)行數(shù)據(jù)庫(kù)操作

????????????????connection.query(sqlStr, (err, data) => {

????????????????????if (err) {

????????????????????????throw err

????????????????????} else {

????????????????????????// 根據(jù)data的各種情況判斷

????????????????????}

????????????????})

????A 創(chuàng)建git共享倉(cāng)庫(kù)

????B ?公共導(dǎo)航的抽取

????????iframe 標(biāo)簽

????????<iframe name="iframe的名稱" src="引入的需要在這個(gè)標(biāo)簽里面顯示的頁(yè)面url" width="寬度" height="高度">

????????????// src引入的頁(yè)面 ?會(huì)在這里顯示

????????</iframe>

????C) 添加賬號(hào)功能實(shí)現(xiàn) (***)

????????1 前端-填寫表單，點(diǎn)擊添加按鈕 發(fā)送ajax給后端（把用戶賬號(hào)的數(shù)據(jù)發(fā)送給后端）

????????????a) 用戶填寫表單 通過所有的前端驗(yàn)證 收集表單的數(shù)據(jù)（雙向綁定）

????????????b) 把這些數(shù)據(jù) 通過ajax的post方式，發(fā)送給后端

????????2 后端-接收請(qǐng)求，接收數(shù)據(jù)

????????????a) get方式使用 req.query ?post方式使用req.body

????????3 后端-把數(shù)據(jù)的數(shù)據(jù) 存入數(shù)據(jù)庫(kù)

????????????a) 構(gòu)造sql語(yǔ)句（插入數(shù)據(jù)的sql）

????????????????const sqlStr "sql的增刪改查的語(yǔ)法"

????????????b) 執(zhí)行sql語(yǔ)句 ?

????????????????connection.query(sqlStr, (err, data) => { ??})

????????4 后端-根據(jù)存入數(shù)據(jù)庫(kù)的結(jié)果 返回給前端一些信息

成功：res.send({"errcode":1, "msg":"添加成功"})

失敗：res.send({"errcode":0, "msg":"添加失敗"})

????????5 前端-根據(jù)后端返回的信息 判斷

成功：》》彈出添加成功》》跳轉(zhuǎn)到賬號(hào)列表

失?。簭棾鎏砑邮?，呵呵！

????D) 用戶列表功能的實(shí)現(xiàn) (***)

????????1 前端-在生命周期 created 里面 發(fā)送ajax 去請(qǐng)求所有用戶列表的數(shù)據(jù)

????????2 后端-接收這個(gè)請(qǐng)求

????????3 后端-構(gòu)造sql語(yǔ)句 去數(shù)據(jù)庫(kù)查詢所有數(shù)據(jù)

????????4 后端-根據(jù)查詢結(jié)果判斷

如果有錯(cuò)拋出錯(cuò)誤

否則直接把查詢的所有數(shù)據(jù)響應(yīng)給前端

????????5 前端-接收到后端返回的所有數(shù)據(jù)，賦值給tableData, 觸發(fā)頁(yè)面表格渲染

????????????a）注意： 需要保留this的指向 ?ajax里面的this不指向vue實(shí)例了。

????E) 用戶刪除功能的實(shí)現(xiàn)（***）

????????1 前端-點(diǎn)擊刪除按鈕 觸發(fā)一個(gè)函數(shù) 把 id 傳入

????????2 前端-在這個(gè)函數(shù)里面 發(fā)送一個(gè)刪除的請(qǐng)求 把 id 傳給后端

????????3 后端-接收這個(gè)請(qǐng)求，接收id

????????4 后端-構(gòu)造sql，以id為條件 執(zhí)行刪除

????????????a）const sqlStr = 'delete from users where id=10'

????????5 后端-執(zhí)行sql語(yǔ)句（單條刪除操作） ?

????????????a）如果有錯(cuò) 拋出錯(cuò)誤

????????????b）如果沒有錯(cuò) 根據(jù)結(jié)果判斷

????????????????i) 如果受影響的行數(shù) > 0, 返回給前端一些信息（刪除成功的信息）

????????????????????res.send({"errcode":1, "msg":"刪除成功！"})

????????????????ii) 否則 返回給前端一些信息（刪除失敗的信息）

????????????????????res.send({"errcode":0, "msg":"刪除失敗！"})

????????6 前端-接收后端返回的數(shù)據(jù)，判斷

????????????a) 如果成功 ?》》彈 出刪除成功 ?》》刷 新頁(yè)面

????????????b) 如果失敗 ?彈出刪除失敗

DAY03:需求

????A 修改功能的實(shí)現(xiàn)

準(zhǔn)備: 先寫一個(gè)修改頁(yè)面

????????1 把原來的這一條數(shù)據(jù)回顯出來

????????????1） 前端-點(diǎn)擊修改按鈕 觸發(fā)一個(gè)函數(shù) 傳入id

????????????2） 前端-在這個(gè)函數(shù)里面，直接跳轉(zhuǎn)到修改頁(yè)面，把id傳過去

????????????3） 前端-在修改頁(yè)面的生命周期 created里面, 獲取id， 里面發(fā)送ajax，把這個(gè)id發(fā)送給后端

????????????4） 后端-接收請(qǐng)求，接收id

????????????5） 后端-根據(jù)id構(gòu)造sql，去數(shù)據(jù)庫(kù)把這條數(shù)據(jù)查詢出來

????????????????a）如果有錯(cuò) 拋出錯(cuò)誤

????????????????b）否則 直接把根據(jù)id查詢出來的這一條數(shù)據(jù)（也就是要修改的數(shù)據(jù)）發(fā)送給前端

????????????6） 前端-接收數(shù)據(jù)，一一對(duì)應(yīng)的，回填在修改頁(yè)面的表單里面。

????????2 把修改后的新數(shù)據(jù)，保存回去（根據(jù)原來的id）

????????????1） 前端-點(diǎn)擊修改按鈕，觸發(fā) submitForm

????????????2） 前端-如果前端所有驗(yàn)證通過，收集用戶填寫的新數(shù)據(jù) 和 一個(gè)原來的id

????????????3） 前端-發(fā)送ajax請(qǐng)求，這這些新數(shù)據(jù) 和 一個(gè)原來的id 一起發(fā)送給后端

????????????4） 后端-接收前端發(fā)送的修改后的新數(shù)據(jù) 和 一個(gè)原來的id

????????????5） 后端-以id為條件 構(gòu)造sql語(yǔ)句（修改操作）

????????????????a） update users set 字段名1=新的值1, 字段名2=新的值2 where id = 接收到的id

????????????6） 后端-執(zhí)行修改的sql語(yǔ)句，根據(jù)修改的結(jié)果 判斷 返回給前端一些信息

????????????????a）如果有錯(cuò) 拋出錯(cuò)誤

????????????????b）如果沒有錯(cuò) 根據(jù)修改的結(jié)果數(shù)據(jù)判斷

如果成功：返回成功的數(shù)據(jù)對(duì)象給前端

如果失?。悍祷厥〉臄?shù)據(jù)對(duì)象給前端

????????????7） 前端-接收后端返回的信息 判斷

????????????????a）成功： 》》彈 出對(duì)應(yīng)的提示信息 》》跳 轉(zhuǎn)到用戶列表頁(yè)面

????????????????b）失敗： 彈出對(duì)應(yīng)的提示信息

????B 批量刪除的實(shí)現(xiàn)

????????1 前端-給取消選中綁定事件 在事件里面實(shí)現(xiàn)取消選擇

????????2 前端-給整個(gè)table綁定選中就會(huì)改變的selection-change事件類型，

觸發(fā)一個(gè)函數(shù)handleSelectionChange,自定把選中的數(shù)據(jù)傳入函數(shù)里面

????????3 前端-在這個(gè)函數(shù)里面，接收到這個(gè)值，把他賦值給一個(gè)屬性（vue實(shí)例）

?????????????this.multipleSelection = val;

????????4 前端-給批量刪除上綁定事件，在事件里面，獲取 this.multipleSelection（里面保存了被勾選的數(shù)據(jù)）

????????5 前端-遍歷數(shù)據(jù) ?this.multipleSelection 把里面的id 獲取出來，放入一個(gè)數(shù)組 （被選中的數(shù)據(jù)的id）

????????6 前端-構(gòu)造ajax 把這些被選中的id們（數(shù)組）發(fā)送給后端

????????7 后端-接收請(qǐng)求 接收這個(gè)包含id們 的數(shù)組

????????8 后端-構(gòu)造sql語(yǔ)句（in 子句），執(zhí)行sql語(yǔ)句刪除

????????????1） 如果有錯(cuò) 拋出錯(cuò)誤

????????????2）否則 根據(jù)刪除的結(jié)果數(shù)據(jù) data 判斷

????????????????a） 如果 成功（受影響行數(shù) > 0） 返回成功的數(shù)據(jù)對(duì)象給前端

????????????????b） 否則 返回失敗的數(shù)據(jù)對(duì)象給前端

????????9 前端-接收后端響應(yīng)回來的數(shù)據(jù) ?判斷

????????????1）如果成功 》》彈 出對(duì)應(yīng)的提示信息 ??》》刷 新頁(yè)面

????????????2）如果失敗 彈出對(duì)應(yīng)的提示信息

????C 登錄功能實(shí)現(xiàn)

????????1 檢查用戶身份（用戶名和密碼是否正確，是否在數(shù)據(jù)庫(kù)里面存在）

????????????1）前端-前端驗(yàn)證通過，發(fā)送ajax請(qǐng)求給后端，把用戶名和密碼發(fā)送給后端

????????????2）后端-接收請(qǐng)求，接收用戶名和密碼

????????????3）后端-以用戶名和密碼 且 的關(guān)系，構(gòu)造sql語(yǔ)句 執(zhí)行sql語(yǔ)句查詢數(shù)據(jù)庫(kù)，判斷

????????????????a）如果有錯(cuò) 拋出錯(cuò)誤

????????????????b）否則 看數(shù)據(jù)是否存在 判斷

如果存在返回成功（存在）的數(shù)據(jù)對(duì)象

否則返回失?。ú淮嬖冢┑臄?shù)據(jù)對(duì)象

????????????4）前端-根據(jù)后端響應(yīng)的數(shù)據(jù)，判斷

????????????????a）如果存在 》》彈 登錄成功 》》跳 轉(zhuǎn)到后臺(tái)系統(tǒng)首頁(yè)

????????????????b）如果不存在 彈 出請(qǐng)檢查用戶名或密碼

????????2 檢查用戶是否已經(jīng)登錄（cookie）

????????????cookie： 儲(chǔ)存在用戶本地終端（瀏覽器）上的數(shù)據(jù)

說明：就是由服務(wù)器端（后端）創(chuàng)建存儲(chǔ)在瀏覽器（客戶端、前端）上的一種追蹤用戶的技術(shù)。

????????????????nodejs操作cookie

增：設(shè)置：res.cookie(key, value); ?// res.cookie('username', 'admin')

刪：清除cookie： res.clearCookie(key) // res.clearCookie('username')

改：修改cookie： res.cookie(key, newValue) // res.cookie('username', 'guest');

查：獲取cookie： req.cookies.key ?// req.cookies.username;

具體步驟：

????????????????1）后端-如果登錄成功 設(shè)置cookie （在登錄成功的路由里面設(shè)置）

????????????????2）前端-每一個(gè)頁(yè)面 都發(fā)送一個(gè)請(qǐng)求 （為了檢測(cè)cookie是否存在）

????????????????????<script src="/users/checkIsLogin"></script>

????????????????3）后端-接收這個(gè)請(qǐng)求 獲取cookie（從瀏覽器），檢測(cè)是否存在

如果存在不作出任何操作(需要返回一些信息)

如果不存在返回彈窗請(qǐng)登錄以后再操作跳轉(zhuǎn)到登錄頁(yè)面

????????3 退出登錄功能

????????????1） 前端-點(diǎn)擊退出系統(tǒng)，通過a標(biāo)簽發(fā)送一個(gè)get方式的請(qǐng)求

????????????2） 后端-接收請(qǐng)求，清除cookie, 彈出對(duì)應(yīng)提示, 跳轉(zhuǎn)到登錄頁(yè)面

DAY04需求：

????A 修改密碼功能實(shí)現(xiàn)

????????1 驗(yàn)證舊密碼

????????????1）前端-寫一個(gè)修改密碼頁(yè)面，實(shí)現(xiàn)前端的表單驗(yàn)證

????????????2）前端-自定義舊密碼的驗(yàn)證規(guī)則（舊密碼正不正確 前端是不知道的 需要發(fā)送ajax去驗(yàn)證）

????????????3）前端-在自定義的函數(shù)里面 直接發(fā)送ajax 把輸入的舊密碼的值 發(fā)送給后端

????????????4）后端-接收舊密碼，從cookies獲取當(dāng)前登錄用戶的id。

????????????5）后端-根據(jù)id為條件，把當(dāng)前用戶數(shù)據(jù)查詢出來，用查詢出來的密碼 和 接收到的舊密碼比較

????????????????a）如果有錯(cuò) 拋出錯(cuò)誤

????????????????b） 否則 判斷

如果成功：返回成功的數(shù)據(jù)對(duì)象給前端

如果失?。悍祷厥〉臄?shù)據(jù)對(duì)象給前端

????????????6）前端-根據(jù)后端響應(yīng)結(jié)果判斷

如果錯(cuò)誤

使用callback(new Error('錯(cuò)誤信息'))

如果正確

????????????????????callback()

????????2 保存新密碼（執(zhí)行修改）

????????????1) 前端-點(diǎn)擊保存按鈕 發(fā)送ajax 把新密碼發(fā)送給后端

????????????2）后端-接收新密碼 從cookie獲取 id

????????????3）后端-以id為條件 構(gòu)造sql語(yǔ)句（修改密碼）

????????????4）后端-執(zhí)行sql語(yǔ)句，根據(jù)結(jié)果判斷

如果成功：

清除cookie

返回成功的數(shù)據(jù)對(duì)象給前端

????????????5）前端-根據(jù)后端響應(yīng)的數(shù)據(jù)，判斷

如果成功：》》填充修改密碼成功》》跳轉(zhuǎn)到登錄頁(yè)面

????B 分頁(yè)功能實(shí)現(xiàn)

分頁(yè)思路分析：（后端分頁(yè)）

后端分頁(yè)需要什么條件呢？

????????????????1) 每頁(yè)顯示多少條 pageSize ？ 從前端傳過來，用戶選擇了以后就傳過來

????????????????2）當(dāng)前在第幾頁(yè)呢 currentPage ？ 從前端傳過來 ?用戶點(diǎn)了哪個(gè)頁(yè)碼 就傳給后端

????????????????3）后端查詢所有數(shù)據(jù) 計(jì)算數(shù)據(jù)的總條數(shù) 發(fā)送給前端

????????????????4) 把當(dāng)前用戶想要的 對(duì)應(yīng)頁(yè)面的 數(shù)據(jù) 查詢出來 發(fā)送給前端

????????????????????sql查詢條件：

????????????????????n = (currentPage - 1)*pageSize

????????????????????select * from users limit(n, pageSize)

結(jié)論：(*****)

前端需要給后臺(tái)發(fā)送什么？

????????????????????a） 頁(yè)面尺寸pageSize

????????????????????b） 當(dāng)前頁(yè)面 currentPage

后端需要給前端返回什么？

????????????????????a）數(shù)據(jù)總條數(shù)據(jù) （前端需要用來計(jì)算頁(yè)碼有多少）

????????????????????b）對(duì)應(yīng)頁(yè)面的數(shù)據(jù)（點(diǎn)擊第1頁(yè) 就只返回第 1 頁(yè)的數(shù)據(jù) ）

工作中：（常見分頁(yè)）

前端：只需要給后端發(fā)送當(dāng)前頁(yè)碼

后端：自己構(gòu)造sql 把對(duì)應(yīng)當(dāng)前頁(yè)碼的數(shù)據(jù)返回。

分頁(yè)步驟：

????????????1 前端-使用分頁(yè)組件 在對(duì)應(yīng)的位置寫上（賬號(hào)列表頁(yè)面）

????????????2 前端-獲取需要發(fā)送給后端的參數(shù)： pageSize(頁(yè)面尺寸) ?currentPage(當(dāng)前頁(yè))

????????????3 前端-改造頁(yè)面里面請(qǐng)求數(shù)據(jù)的函數(shù) getAllUsers

需要把前端的參數(shù)傳入這個(gè)函數(shù)一起發(fā)送給后端(改成按照分頁(yè)請(qǐng)求數(shù)據(jù) 而不是一次請(qǐng)求所有數(shù)據(jù))

????????????4 后端-接收請(qǐng)請(qǐng)求，接收參數(shù) pageSize 和 currentPage

????????????5 后端-構(gòu)造sql 查詢?nèi)謹(jǐn)?shù)據(jù)，計(jì)算出數(shù)據(jù)總條數(shù)

????????????????????const sqlStr = 'select * from users';

????????????????????connection.query(sqlStr, (err, data) => {

????????????????????????if (err) {

????????????????????????????throw err

????????????????????????} else {

???????????????????????????// 計(jì)算數(shù)據(jù)總條數(shù)

???????????????????????????let ?totalcount = data.length;

????????????????????????}

????????????????????})

????????????6 后端-構(gòu)造sql 排序然后 按照分頁(yè)的條件查詢 查詢出對(duì)應(yīng)頁(yè)碼的數(shù)據(jù)

????????????????let n = (currentPage - 1)*pageSize

????????????????sqlStr += ` order by ctime desc limit ${n}, ${pageSize}`

????????????????connection.query(sqlStr, (err, data) => {

????????????????????if (err) {

????????????????????????throw err

????????????????????} else {

????????????????????????// 按照分頁(yè)查詢的數(shù)據(jù)的結(jié)果（前端傳過來哪一頁(yè)就是對(duì)應(yīng)頁(yè)碼的數(shù)據(jù)）

????????????????????????let pageData = data;

????????????????????????// 把數(shù)據(jù)總條數(shù) 和 對(duì)應(yīng)頁(yè)碼的數(shù)據(jù) 一起發(fā)送給前端

????????????????????????res.send({"totalcount": totalcount, "pageData": pageData})

????????????????????}

????????????????})

????????????7 前端-接收數(shù)據(jù)（數(shù)據(jù)是一個(gè)對(duì)象： {"totalcount":數(shù)據(jù)總條數(shù), "pageData":對(duì)應(yīng)當(dāng)前頁(yè)碼的數(shù)據(jù)}）

把數(shù)據(jù)賦值給data里面 對(duì)應(yīng)的字段

DAY05需求：

????A 分頁(yè)功能完善

????B 登錄顯示當(dāng)前登錄用戶功能完善

????C 商品列表模塊商品添加實(shí)現(xiàn)

????D 商品管理模塊實(shí)現(xiàn)

????E 高級(jí)查詢

????????1 前端-點(diǎn)擊查詢按鈕，觸發(fā)一個(gè)函數(shù)， 在這個(gè)函數(shù)里面，

收集查詢的兩個(gè)參數(shù)(分類名稱 和 關(guān)鍵字（商品名稱 或 條形碼）) 發(fā)送給后端

????????2 前端-發(fā)送ajax 把 分類名稱 和 關(guān)鍵字 發(fā)送給后端

????????3 后端-接收請(qǐng)求，接收參數(shù)（分類名稱 和 關(guān)鍵字）

????????4 后端-根據(jù)參數(shù) 構(gòu)造sql語(yǔ)句 按照條件查詢 ？ 怎么寫sql？ (****)

????????5 后端-執(zhí)行sql，把查詢的結(jié)果返回給前端

????????6 前端接收返回結(jié)果 賦值給 tableData, 渲染表格