|
[目錄] 一、效果展示
1.1目錄結(jié)構(gòu)2.初始化項(xiàng)目3.安裝插件安裝 4.創(chuàng)建服務(wù)插件配置在項(xiàng)目目錄根創(chuàng)建主入口文件
5.路由模塊將路由分一個(gè)文件做處理 渲染模板必須把渲染模板
5.1引入路由模塊在主入口引入創(chuàng)建好的宣傳文件
配置好后可以輸入 5.2 目標(biāo)html模板
此處
搜索頁面模板
6.渲染首頁數(shù)據(jù)渲染首頁數(shù)據(jù)前先創(chuàng)建一個(gè) 6.1創(chuàng)建db.json文件
6.2 包裝文件整理操作
6.2在
|
| 請求地址 | 類型 | 參數(shù) | 說明 |
|---|---|---|---|
| / | GET | 無 | 渲染首頁模板和數(shù)據(jù) |
const express = require('express');
//引入讀寫文件
const control = require('../control/control.js')
const router = express.Router();
//首頁渲染數(shù)據(jù)
router.get('/', (req, res) => {
//讀文件
let data = control.Read();
res.render('index.html', {
listData: data.list //將拿到的數(shù)據(jù)掛載到模板上
});
})
module.exports = router
復(fù)制代碼在模板中用模板語法把數(shù)據(jù)渲染出來
art-template官網(wǎng)aui./art-templat…
文件：index.html
{{each listData}}
<tr>
<td>{{$value.id}}</td>
<td>{{$value.name}}</td>
<td>{{$value.gender==1?'男':'女'}}</td>
<td>{{$value.age}}</td>
<td>
{{each $value.interest}}
<span>{{$value}}</span>、
{{/each}}
</td>
<td>{{$value.EnterDate}}</td>
<td>
<div class="layui-btn-group">
<!--使用data-id自定義屬性將ID賦值方便再點(diǎn)擊操作時(shí)取得每行得ID-->
<button type="button" class="layui-btn layui-btn-sm edit" data-id="{{$value.id}}">
<i class="layui-icon"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm delete" data-id="{{$value.id}}">
<i class="layui-icon"></i>
</button>
</div>
</td>
</tr>
{{/each}}
復(fù)制代碼文件：router.js
這里接收表單數(shù)據(jù)結(jié)構(gòu){"name":"完?duì)僮?,"gender":1,"age":22,"interest":{"like[xiezuo]":"寫作","like[yuedu]":"閱讀","like[fadai]":"發(fā)呆"},"EnterDate":"2021-01-21"}
讀取db.json中的數(shù)據(jù)
將前端發(fā)來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換成對象
在為這條數(shù)據(jù)分配一個(gè)ID，這里直接拿到表中最后一條數(shù)據(jù)的id然后再+1
分配完ID后將數(shù)據(jù)push進(jìn)入上面讀取的到數(shù)據(jù)中
數(shù)據(jù)寫入文件中
| 請求地址 | 類型 | 參數(shù) | 說明 |
|---|---|---|---|
| /add | POST | 表單數(shù)據(jù) | 向列表中新增一條數(shù)據(jù) |
//添加
router.post('/add', (req, res) => {
//讀文件
let data = control.Read();
//獲取前端傳來的數(shù)據(jù)
let getData =JSON.parse(req.body.data);
//分配ID
getData.id = data.list[data.list.length-1].id + 1
//新增一條數(shù)據(jù)
data.list.push(getData)
//寫入文件
control.Write(data);
//返回給前端
res.json(getData);
})
復(fù)制代碼這里先創(chuàng)建用戶的按鈕編輯添加變量，用于記錄addEdit當(dāng)前點(diǎn)擊的是公用編輯的，或者是記錄當(dāng)前刪除時(shí)刪除保存的IDuserID
文件：index.html
ajax傳值設(shè)置，否則節(jié)點(diǎn)那里必須traditional: true不能得到正常的數(shù)據(jù)，還有一個(gè)問題必須把內(nèi)層的數(shù)據(jù)轉(zhuǎn)成json字符串，否則節(jié)點(diǎn)也不能得到正常的數(shù)據(jù)
let addEdit = 1 //用來判斷當(dāng)前點(diǎn)擊的時(shí)編輯還是新增 [1:表示新增，2表示編輯]
let userID = 0 //點(diǎn)擊編輯和刪除時(shí)用來保存當(dāng)前ID
layui.use(['layer', 'jquery', 'form', 'laydate'], function () {
const $ = layui.$
const form = layui.form;
const laydate = layui.laydate;
//點(diǎn)擊添加按鈕彈出新增表單
$('#add').click(function () {
addEdit = 1
layer.open({
type: 1,
content: $('#form') //這個(gè)表單再html文件中做隱藏不直接顯示
});
//重置表單
document.getElementById('form').reset();
});
//監(jiān)聽提交
form.on('submit(formDemo)', function (data) {
//拿到表單的數(shù)據(jù)進(jìn)行賦值給dataItem
var dataItem = {
"name": data.field.name,
"gender": parseInt(data.field.gender),
"age": parseInt(data.field.age),
"interest": {},
"EnterDate": data.field.EnterDate
};
//這里特殊處理多選框成為我們想要的數(shù)據(jù)結(jié)構(gòu) {"like[xiezuo]":"寫作","like[yuedu]":"閱讀","like[fadai]":"發(fā)呆"}
$('.checkbox-item input').each((index, item) => {
if (item.checked) {
dataItem.interest[item.name] = item.value
}
});
//addEdit=1則為新增
if (addEdit == 1) {
//ajax傳值必須設(shè)置traditional: true,否則node那邊無法拿到正常的數(shù)據(jù)，再一個(gè)就是必須把內(nèi)層的數(shù)據(jù)轉(zhuǎn)成json字符串否則node也無法拿到正常的數(shù)據(jù)
$.ajax({
url: '/add',
type: 'POST',
data: { data: JSON.stringify(dataItem) },
traditional: true,
success: (msg) => {
layer.msg("添加成功！");
//添加成功后刷新頁面
setTimeout(() => {
window.location.reload();
}, 500)
}
})
} else {
//實(shí)現(xiàn)修改操作
}
return false;
});
})
復(fù)制代碼ES6方法findIndex檢索ID 如果返回當(dāng)前ID所在的下標(biāo)splice對當(dāng)前數(shù)據(jù)刪除| 請求地址 | 類型 | 參數(shù) | 說明 |
|---|---|---|---|
| /刪除 | 得到了 | ID | 要?jiǎng)h除某條數(shù)據(jù) |
//刪除
router.get('/delete', (req, res) => {
//讀文件
let data = control.Read();
//檢索用戶返回index
let userIndex = data.list.findIndex(item => item.id == req.query.id);
// 刪除
data.list.splice(userIndex, 1);
//寫入文件
control.Write(data);
res.json(data);
})
復(fù)制代碼 //刪除
$('.delete').click(function () {
//獲取當(dāng)前點(diǎn)擊得節(jié)點(diǎn)上得ID
userID = $(this).attr('data-id');
//使用layui確認(rèn)彈窗
layer.confirm('確定要?jiǎng)h除嗎？', {
btn: ['確認(rèn)', '取消'], btn1: function (index, layero) {
layer.close(index);
//用戶點(diǎn)擊確認(rèn)時(shí)發(fā)送刪除請求/delete 傳遞ID
$.ajax({
url: '/delete',
type: 'GET',
data: { id: userID },
traditional: true,
success: (res) => {
layer.msg("刪除成功！");
setTimeout(() => {
window.location.reload();
}, 500)
}
})
}
});
})
復(fù)制代碼| 請求地址 | 類型 | 參數(shù) | 說明 |
|---|---|---|---|
| /獲取信息 | 得到了 | ID | 返回用戶要修改的信息 |
| /編輯 | 郵政 | ID | 修改用戶信息 |
文件：router.js
//讀取用戶信息
router.get('/getInfo', (req, res) => {
let data = control.Read();
// 用戶find 方法查找對應(yīng)ID 的數(shù)據(jù)返回給前端
let userInfo = data.list.find(item => item.id == req.query.id);
res.json(userInfo);
})
//修改用戶信息
router.post('/edit', (req, res) => {
//拿數(shù)據(jù)
let getData =JSON.parse(req.body.data);
//讀文件
let data = control.Read();
//檢索用戶返回index
let userIndex = data.list.findIndex(item => item.id == getData.id);
// 更新用戶信息
data.list[userIndex] = getData
//寫入文件
control.Write(data);
res.json(getData);
})
復(fù)制代碼//點(diǎn)擊編輯按鈕
$(".edit").click(function (e) {
//將全局變量設(shè)置為2標(biāo)識為修改
addEdit = 2
//拿到當(dāng)前要修改的數(shù)據(jù)ID
userID = $(this).attr('data-id');
//獲取要修改的數(shù)據(jù)信息，給表單進(jìn)行賦值操作
$.ajax({
url: '/getInfo',
type: 'get',
data: { id: userID },
traditional: true,
success: (data) => {
let fromData = {
"name": data.name,
"gender": data.gender,
"age": data.age,
"like[xiezuo]": false,
"like[yuedu]": false,
"like[fadai]": false,
"EnterDate": data.EnterDate
}
//給復(fù)選框賦值
$('.checkbox-item input').each((index, item) => {
if (data.interest[item.name]) {
fromData[item.name] = true
}
});
//表單賦值
form.val("from", fromData);
},
error: (err) => {
console.log(err, '錯(cuò)誤了')
}
})
layer.open({
type: 1,
content: $('#form') //這里content是一個(gè)DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響
});
})
復(fù)制代碼2.點(diǎn)擊提交按鈕
//監(jiān)聽提交
form.on('submit(formDemo)', function (data) {
var dataItem = {
"name": data.field.name,
"gender": parseInt(data.field.gender),
"age": parseInt(data.field.age),
"interest": {},
"EnterDate": data.field.EnterDate
};
$('.checkbox-item input').each((index, item) => {
if (item.checked) {
dataItem.interest[item.name] = item.value
}
});
if (addEdit == 1) {
//新增一條數(shù)據(jù)
} else {
//--------------------------------------確認(rèn)修改表單---------------------------------//
dataItem.id = parseInt(userID);
$.ajax({
url: '/edit',
type: 'POST',
data: { data: JSON.stringify(dataItem) },
traditional: true,
success: (msg) => {
layer.msg("修改成功！");
setTimeout(() => {
window.location.reload();
}, 500);
}
})
}
return false;
});
復(fù)制代碼| 請求地址 | 類型 | 參數(shù) | 說明 |
|---|---|---|---|
| /搜索 |
indexOf方法，對name領(lǐng)域中的檢索關(guān)鍵字如果有就進(jìn)行push到臨時(shí)對象中//搜索
router.get('/search', (req, res) => {
let list = []
//讀文件
let data = control.Read();
//檢索用戶返回index
data.list.forEach((item, index, array)=>{
if(item.name.indexOf(req.query.text)!=-1){
list.push(item)
}
})
//寫入文件
// control.Write(data);
res.render('search.html', {
listData: list,
search:req.query.text
});
})
復(fù)制代碼文件：search.html
<div class="layui-container layui-layout-admin">
<!----------------------面包屑導(dǎo)航--------------------------->
<div>
<span class="layui-breadcrumb">
<a href="/">首頁</a>
<a><cite>搜索</cite></a>
<a><cite>{{search}}</cite></a>
</span>
</div>
<!----------------------搜索表單--------------------------->
<div class=" flex justify-center top-nav">
<form action="/search">
<div class="search flex ">
<input type="text" name="text" placeholder="關(guān)鍵字" class="layui-input input-search " value="{{search}}">
<button class="layui-btn search-butt" type="submit">搜索</button>
</div>
</form>
</div>
<!----------------------搜索關(guān)鍵字--------------------------->
<div class="text">
關(guān)鍵詞：{{search}}
</div>
<!----------------------完--------------------------->
<div class="layui-row">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th class="layui-center">ID</th>
<th class="layui-center">名稱</th>
<th class="layui-center">性別</th>
<th class="layui-center">年齡</th>
<th class="layui-center">興趣</th>
<th class="layui-center">入學(xué)日期</th>
<th class="layui-center">操作</th>
</tr>
</thead>
<tbody>
{{each listData}}
<tr>
<td>{{$value.id}}</td>
<td>{{$value.name}}</td>
<td>{{$value.gender==1?'男':'女'}}</td>
<td>{{$value.age}}</td>
<td>
{{each $value.interest}}
<span>{{$value}}</span>、
{{/each}}
</td>
<td>{{$value.EnterDate}}</td>
<td>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm edit" data-id="{{$value.id}}">
<i class="layui-icon"></i>
</button>
<button data-id="{{$value.id}}" type="button" class="layui-btn layui-btn-sm delete">
<i class="layui-icon"></i>
</button>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
復(fù)制代碼這里沒有用 Ajax 的判斷，這做了一個(gè)讓用戶不能提交的表單
//搜索
$('.search-butt').click(function () {
let text = $('.input-search').val();
if(text==''){
layer.msg("請輸入關(guān)鍵字");
return false
}
})
復(fù)制代碼|
|
