|
[目錄] 一,、效果展示
1.1目錄結構2.初始化項目3.安裝插件安裝 4.創(chuàng)建服務插件配置在項目目錄根創(chuàng)建主入口文件
5.路由模塊將路由分一個文件做處理 渲染模板必須把渲染模板
5.1引入路由模塊在主入口引入創(chuàng)建好的宣傳文件
配置好后可以輸入 5.2 目標html模板
此處
搜索頁面模板
6.渲染首頁數(shù)據(jù)渲染首頁數(shù)據(jù)前先創(chuàng)建一個 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
復制代碼在模板中用模板語法把數(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賦值方便再點擊操作時取得每行得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}}
復制代碼文件：router.js
這里接收表單數(shù)據(jù)結構{"name":"完犢子","gender":1,"age":22,"interest":{"like[xiezuo]":"寫作","like[yuedu]":"閱讀","like[fadai]":"發(fā)呆"},"EnterDate":"2021-01-21"}
讀取db.json中的數(shù)據(jù)
將前端發(fā)來的數(shù)據(jù)進行轉換成對象
在為這條數(shù)據(jù)分配一個ID,，這里直接拿到表中最后一條數(shù)據(jù)的id然后再+1
分配完ID后將數(shù)據(jù)push進入上面讀取的到數(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);
})
復制代碼這里先創(chuàng)建用戶的按鈕編輯添加變量，用于記錄addEdit當前點擊的是公用編輯的,，或者是記錄當前刪除時刪除保存的IDuserID
文件：index.html
ajax傳值設置,，否則節(jié)點那里必須traditional: true不能得到正常的數(shù)據(jù),，還有一個問題必須把內層的數(shù)據(jù)轉成json字符串，否則節(jié)點也不能得到正常的數(shù)據(jù)
let addEdit = 1 //用來判斷當前點擊的時編輯還是新增 [1:表示新增,，2表示編輯]
let userID = 0 //點擊編輯和刪除時用來保存當前ID
layui.use(['layer', 'jquery', 'form', 'laydate'], function () {
const $ = layui.$
const form = layui.form;
const laydate = layui.laydate;
//點擊添加按鈕彈出新增表單
$('#add').click(function () {
addEdit = 1
layer.open({
type: 1,
content: $('#form') //這個表單再html文件中做隱藏不直接顯示
});
//重置表單
document.getElementById('form').reset();
});
//監(jiān)聽提交
form.on('submit(formDemo)', function (data) {
//拿到表單的數(shù)據(jù)進行賦值給dataItem
var dataItem = {
"name": data.field.name,
"gender": parseInt(data.field.gender),
"age": parseInt(data.field.age),
"interest": {},
"EnterDate": data.field.EnterDate
};
//這里特殊處理多選框成為我們想要的數(shù)據(jù)結構 {"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傳值必須設置traditional: true,否則node那邊無法拿到正常的數(shù)據(jù),，再一個就是必須把內層的數(shù)據(jù)轉成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 {
//實現(xiàn)修改操作
}
return false;
});
})
復制代碼ES6方法findIndex檢索ID 如果返回當前ID所在的下標splice對當前數(shù)據(jù)刪除| 請求地址 | 類型 | 參數(shù) | 說明 |
|---|---|---|---|
| /刪除 | 得到了 | ID | 要刪除某條數(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);
})
復制代碼 //刪除
$('.delete').click(function () {
//獲取當前點擊得節(jié)點上得ID
userID = $(this).attr('data-id');
//使用layui確認彈窗
layer.confirm('確定要刪除嗎,？', {
btn: ['確認', '取消'], btn1: function (index, layero) {
layer.close(index);
//用戶點擊確認時發(fā)送刪除請求/delete 傳遞ID
$.ajax({
url: '/delete',
type: 'GET',
data: { id: userID },
traditional: true,
success: (res) => {
layer.msg("刪除成功,！");
setTimeout(() => {
window.location.reload();
}, 500)
}
})
}
});
})
復制代碼| 請求地址 | 類型 | 參數(shù) | 說明 |
|---|---|---|---|
| /獲取信息 | 得到了 | ID | 返回用戶要修改的信息 |
| /編輯 | 郵政 | ID | 修改用戶信息 |
文件：router.js
//讀取用戶信息
router.get('/getInfo', (req, res) => {
let data = control.Read();
// 用戶find 方法查找對應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);
})
復制代碼//點擊編輯按鈕
$(".edit").click(function (e) {
//將全局變量設置為2標識為修改
addEdit = 2
//拿到當前要修改的數(shù)據(jù)ID
userID = $(this).attr('data-id');
//獲取要修改的數(shù)據(jù)信息，給表單進行賦值操作
$.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
}
//給復選框賦值
$('.checkbox-item input').each((index, item) => {
if (data.interest[item.name]) {
fromData[item.name] = true
}
});
//表單賦值
form.val("from", fromData);
},
error: (err) => {
console.log(err, '錯誤了')
}
})
layer.open({
type: 1,
content: $('#form') //這里content是一個DOM,，注意：最好該元素要存放在body最外層,，否則可能被其它的相對元素所影響
});
})
復制代碼2.點擊提交按鈕
//監(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 {
//--------------------------------------確認修改表單---------------------------------//
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;
});
復制代碼| 請求地址 | 類型 | 參數(shù) | 說明 |
|---|---|---|---|
| /搜索 |
indexOf方法,，對name領域中的檢索關鍵字如果有就進行push到臨時對象中//搜索
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
});
})
復制代碼文件：search.html
<div class="layui-container layui-layout-admin">
<!----------------------面包屑導航--------------------------->
<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="關鍵字" class="layui-input input-search " value="{{search}}">
<button class="layui-btn search-butt" type="submit">搜索</button>
</div>
</form>
</div>
<!----------------------搜索關鍵字--------------------------->
<div class="text">
關鍵詞：{{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">入學日期</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>
復制代碼這里沒有用 Ajax 的判斷，這做了一個讓用戶不能提交的表單
//搜索
$('.search-butt').click(function () {
let text = $('.input-search').val();
if(text==''){
layer.msg("請輸入關鍵字");
return false
}
})
復制代碼|
|
來自： wenxuefeng360 > 《待分類1》
