主页图例：
查找图标：
增加与删除图标：
目录：
项目初始化：
npm i init
npm i express
npm i body-parser
"scripts": {
"start": "node index.js"
},
package.json
--->
{
"name": "layui-goods-json",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"art-template": "^4.13.2",
"body-parser": "^1.20.2",
"express": "^4.18.2",
"express-art-template": "^1.0.1"
}
}
后端代码：
index.js
var express = require('express');
var router = require('./router');
var bodyParser = require('body-parser');
var app = express();
app.use('/node_modules/',express.static('./node_modules/'));
app.use(express.static('./'));
app.engine('html',require('express-art-template'));
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use(router);
app.listen(3009,function () {
console.log('running http://localhost:3009/goods')
})router.js
var fs = require('fs');
var Good = require('./good');
var express = require('express');
var router = express.Router();
/*
渲染商品列表界面
*/
router.get('/goods', function (req, res) {
if (req.query.id != null && req.query.id!=undefined &&req.query.id!='' ){
Good.findById(req.query.id,function (err,good) {
if (err) {
return res.status(500).send('Server error');
}
if (good ==undefined){
res.render('index.html', {
count:0,
good: good
})
}else {
var tops = [ good[0]]
res.render('index.html', {
count:1,
good: good,
tops: tops
})
}
})
}else {
Good.find(function (err, goods) {
if (err) {
return res.status(500).send('Server error');
}
if (goods.length >= 3) {
var top = [
goods[0],
goods[1],
goods[2],
]
}
res.render('index.html', {
top: top,
goods: goods
})
})
}
})
/**
* 渲染添加商品的页面
*/
router.get('/goods/add', function (req, res) {
res.render('add.html');
});
/*
* 处理添加商品
*/
router.post('/goods/add', function (req, res) {
Good.save(req.body, function (err) {
if (err) {
return res.status(500).send('Server error');
}
res.redirect('/goods')
})
})
/*
* 渲染编辑商品页面
*/
router.get('/goods/edit', function (req, res) {
Good.findById(parseInt(req.query.id), function (err, good) {
if (err) {
return res.status(500).send('Server error.');
}
res.render('edit.html', {
good: good
})
})
})
/*
* 处理编辑商品
*/
router.post('/goods/edit', function (req, res) {
Good.updateById(req.body, function (err) {
if (err) {
return res.status(500).send('Server error.')
}
res.redirect('/goods')
})
})
/*
* 处理删除商品
*/
router.get('/goods/delete', function (req, res) {
Good.deleteById(req.query.id, function (err) {
if (err) {
return res.status(500).send('Server error.')
}
res.redirect('/goods')
})
})
module.exports = router;good.js
var fs = require('fs');
var dbPath = './db.json';
/**
* 获取商器列表
* @param callback
*/
exports.find = function (callback) {
fs.readFile(dbPath, 'utf8', function (err, data) {
if (err) {
return callback(err);
}
callback(null, JSON.parse(data).goods);
})
}
/**
* 根据id 获取商品信息对象
* @param id
* @param callback
*/
exports.findById = function (id, callback) {
fs.readFile(dbPath, 'utf8', function (err, data) {
if (err) {
return callback(err);
}
var goods = JSON.parse(data).goods;
var ret = goods.find(function (item) {
return item.id === parseInt(id);
})
callback(null, ret);
})
}
/**
* 添加保存商品
* @param {Object} good 商品对象
* @param {Function} callback 回调函数
*/
exports.save = function (good, callback) {
fs.readFile(dbPath, 'utf8', function (err, data) {
if (err) {
return callback(err);
}
var goods = JSON.parse(data).goods;
//添加id ，唯一不重复
good.id = goods[goods.length - 1].id + 1;
goods.push(good);
var fileData = JSON.stringify({
goods: goods
})
fs.writeFile(dbPath,fileData, function (err) {
if (err) {
return callback(err)
}
callback(null);
})
});
}
/**
* 更新商品
*/
exports.updateById = function (good, callback) {
fs.readFile(dbPath, 'utf8', function (err, data) {
if (err) {
return callback(err)
}
var goods = JSON.parse(data).goods;
good.id = parseInt(good.id);
var stu = goods.find(function (item) {
return item.id === student.id
})
for (var key in good) {
stu[key] = good[key];
}
var fileData = JSON.stringify({
goods: goods
})
fs.writeFile(dbPath,fileData, function (err) {
if (err) {
return callback(err)
}
callback(null)
})
})
}
/**
* 删除商品
*/
exports.deleteById = function (id, callback) {
fs.readFile(dbPath, 'utf8', function (err, data) {
if (err) {
return callback(err);
}
var goods = JSON.parse(data).goods
var deleteId = goods.findIndex(function (item) {
return item.id === parseInt(id)
})
goods.splice(deleteId, 1)
var fileData = JSON.stringify({
goods: goods
})
fs.writeFile(dbPath, fileData, function (err) {
if (err) {
return callback(err)
}
callback(null)
})
})
}db.json
{
"goods": [{
"name": "CPU",
"dw": "个",
"sl": "1",
"dj": "1360",
"img": "./img/01.png",
"id": 1
}, {
"name": "主板",
"dw": "块",
"sl": "1",
"dj": "550",
"img": "./img/02.png",
"id": 2
}, {
"name": "内存",
"dw": "条",
"sl": "1",
"dj": "210",
"img": "./img/03.png",
"id": 3
}, {
"name": "SSD",
"dw": "个",
"sl": "1",
"dj": "220",
"img": "./img/03.png",
"id": 4
}]
}前端代码：
下载layui 依赖包 Layui - 极简模块化前端 UI 组件库(官方文档)
放进如下路径：
前端代码放入views 目录里
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品管理 CURD 增删改查</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
</head>
<body class="layui-fluid" style="padding-top: 20px;">
<a href="/goods"><h1><i class="layui-icon layui-icon-home" style="font-size: 30px;color: coral;"></i> 商品管理 Node.js CURD 增删改查</h1></a>
<h3>Top 3</h3>
<div class="layui-row">
{
{ each top }}
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4" >
<div class="layui-panel" style="width: 200px;margin: auto;">
<img src="{
{ $value.img }}" width="200" height="200" >
<div style="padding: 20px;">
<h4>{
{ $value.name }}</h4>
价格：<span >{
{ $value.dj }}</span>
</div>
</div>
</div>
{
{ /each }}
{
{ each tops }}
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4" >
<div class="layui-panel" style="width: 200px;margin: auto;">
<img src="{
{ good.img }}" width="200" height="200" >
<div style="padding: 20px;">
<h4>{
{ good.name }}</h4>
价格：<span >{
{ good.dj }}</span>
</div>
</div>
</div>
{
{ /each }}
</div>
<h2 >商品列表</h2><br>
<form class="layui-form" action="/goods">
<div class="class="layui-inline">
<div class="layui-input-inline layui-input-wrap">
<label class="layui-form-label" for="id" style="margin:5px">搜索:</label>
<input type="text" style="margin:5px ;width: 400px" class="layui-input" name="id" id="id"
placeholder="请输入ID">
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn" style="width: 100px ;margin:5px">搜索</button>
<a class="layui-btn layui-bg-orange" href="/goods/add">添加商品</a>
</div>
</div>
</form>
<div class="table" style="margin-top: 20px">
<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>商品名称</th>
<th>单位</th>
<th>数量</th>
<th>单价</th>
<th>图片</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{
{if count == 0}}
<tr>
</tr>
<td>
未找到该ID,请重新查询!
</td>
</tbody>
{
{else if count == 1}}
<tr>
<td>{
{ good.id }}</td>
<td>{
{ good.name }}</td>
<td>{
{ good.dw }}</td>
<td> {
{ good.sl }}</td>
<td> {
{ good.dj }}</td>
<td>{
{ good.img }}<img src="{
{ good.img }}"/></td>
<td>
<a class="layui-btn layui-btn-xs" href="/goods/edit?id={
{ good.id }}">编辑</a>
<a class="layui-btn layui-btn-xs layui-bg-red" href="javascript:if(confirm('确实要删除?'))location='/goods/delete?id={
{ good.id }}'">删除</a>
</td>
</tr>
{
{else}}
{
{each goods}}
<tr>
<td>{
{ $value.id }}</td>
<td>{
{ $value.name }}</td>
<td> {
{ $value.dw }}</td>
<td> {
{ $value.sl }}</td>
<td> {
{ $value.dj }}</td>
<td>{
{ $value.img }}<img src="{
{ $value.img }}"/ style="height: 60px;"></td>
<td>
<a class="layui-btn layui-btn-xs" href="/goods/edit?id={
{ $value.id }}">编辑</a>
<a class="layui-btn layui-btn-xs layui-bg-red" href="javascript:if(confirm('确实要删除?'))location='/goods/delete?id={
{ $value.id }}'">删除</a>
</td>
</tr>
{
{ /each }}
{
{/if}}
</tbody>
</table>
</div>
</div>
</body>
</html>edit.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
</head>
<body class="layui-container" style="padding: 20px;">
<div class="layui-fluid" style="padding: 20px;">
<div class="header">
<h1><a class="navbar-brand" href="/goods">商品管理系统</a></h1>
</div>
</div>
<div class="layui-panel" style="padding: 30px;">
<div class="layui-row">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h2 >修改商品</h2><br>
<form action="/goods/edit" method="post" class="layui-form">
<input type="hidden" name="id" value="{
{ good.id }}">
<div class="layui-form-item">
<label for="" class="layui-form-label">商品名称</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="" name="name" required minlength="2" maxlength="10"
value="{
{ good.name }}">
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">单位</label>
<div class="layui-input-block">
<input class="layui-input" type="text" id="" name="dw" value="{
{ good.dw }}" >
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">数量</label>
<div class="layui-input-block">
<input class="layui-input" type="number" id="" name="sl" value="{
{ good.sl }}" >
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">单价</label>
<div class="layui-input-block">
<input class="layui-input" type="number" id="" name="dj" value="{
{ good.dj }}" >
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">图片</label>
<div class="layui-input-block">
<input class="layui-input" type="text" id="" name="img" value="{
{ good.img }}">
</div>
</div>
<div class="layui-form-item" style="padding: 20px 20px 20px 300px;">
<div class="class="layui-input-block"">
<button type="submit" class="layui-btn">提交</button>
<a href="/goods">
<button type="button" class="layui-btn">取消</button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>add.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>add</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
</head>
<body class="layui-container" style="padding: 20px;">
<div class="layui-fluid" style="padding: 20px;">
<div class="header">
<h1><a class="navbar-brand" href="/goods">商品管理系统</a></h1>
</div>
</div>
<div class="layui-panel" style="padding: 30px;">
<div class="layui-row">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h2 >添加商品</h2><br>
<form action="/goods/add" method="post" class="layui-form">
<input type="hidden" name="id" >
<div class="layui-form-item">
<label for="" class="layui-form-label">商品名称</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="" name="name" required minlength="2" maxlength="10">
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">单位</label>
<div class="layui-input-block">
<input class="layui-input" type="text" id="" name="dw" >
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">数量</label>
<div class="layui-input-block">
<input class="layui-input" type="number" id="" name="sl" >
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">单价</label>
<div class="layui-input-block">
<input class="layui-input" type="number" id="" name="dj" >
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">图片</label>
<div class="layui-input-block">
<input class="layui-input" type="text" id="" name="img" >
</div>
</div>
<div class="layui-form-item" style="padding: 20px 20px 20px 300px;">
<div class="class="layui-input-block"">
<button type="submit" class="layui-btn layui-bg-orange">提交</button>
<a href="/goods">
<button type="button" class="layui-btn">取消</button>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>运行：npm run start
