【nodejs案例】记账本功能 -- 基本功能实现（一）

逆旅行天涯

已于 2024-08-08 11:22:05 修改

阅读量357

点赞数 8

分类专栏： # nodejs学习文章标签： node.js

于 2024-08-02 14:07:43 首次发布

本文链接：https://blog.csdn.net/aaaa_aaab/article/details/140863128

版权

nodejs学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

使用nodejs+express+lowdb制作一个简单地记账本功能，练习node数据的存入与读取。

一、创建项目

1.新建文件夹，在命令行输入express -e account（文件夹名称），即可创建项目。

2.为了项目启动后可以实时更新，可以安装nodemon，安装命令为npm i nodemon

3.可以在package.json查看安装的依赖和项目运行方法。将start中“node 文件名”改为“nodemon 文件名”实现项目的实时更新。

4.命令行输入 npm start 启动项目,浏览器输入http://127.0.0.1:3000/访问

二、功能实现

2.1响应静态网页

（1）在router文件夹下index.js文件中添加数据页和添加记录页

var express = require('express');
var router = express.Router();

/* GET home page. */

//记账本页面(当浏览器访问account时会在views文件下寻找account.ejs文件并渲染页面)
router.get('/account', function(req, res, next) {
  res.render('account', { title: 'Express' });
});

//添加记录
router.get('/account/create', function(req, res, next) {
  res.render('/create', { title: 'Express' });
});

module.exports = router;

（2）在view文件夹下新建account.ejs、create.ejs文件进行响应

account.ejs文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.list{
			margin-top:40px;
			border:1px soild #999;
		}
		.time{
			background:#0055ff;
			color:#ffffff;
			height:40px;
			line-height: 40px;
			padding-left:40px
		}
		.content{
			display:flex;
			align-items: center;
			justify-content: space-around;
			background-color: antiquewhite;
		}
		.content>button{
			height: 30px;
		}
		.pay{
			background-color: green;
			color:#ffffff;
		}
		.money{
			background-color: red;
			color:#ffffff;
		}
		</style>
	</head>
	<body>
	<div class="data">
		<h1>我是数据页</h1>
		<hr />
		<div class="list" >
		  <div class="time" >
		  2023-04-04
		  </div>
		  <div class="content">
		  <h3>hahha</h3>
		  <button class="pay">支出</button>
		  <h3>25元</h3>
		  <button>删除</button>
		  </div>
		</div>
		
	</div>
	</body>
</html>

create.ejs文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.content{
				margin: auto;
				width: 1200px;
				height: 800px;
				background-color: antiquewhite;
				text-align: center;
			}
			input,select{
				width: 400px;
				height: 20px;
				margin-bottom:20px;
			}
			
		</style>
	</head>
	<body>
		<div class="content">
			<h1>添加记录页</h1>
			<hr />
			<form action="/account" method="post">
				事项：<input type="text" name="title"/><br />
				时间：<input type="text" name="time"/><br />
				类型：<select name="type" id="">
			            <option value="-1">支出</option>
			            <option value="1">收入</option>
		             </select><br />
				金额：<input type="text" name="money"/><br />
				备注：<input type="text" name="remark"/><br />
				<input type="submit" />
			</form>
		</div>
		
	</body>
</html>

2.2获取表单数据

（1）安装lowdb---数据的持久化保存

安装方法 npm i lowdb@1.0.0

（2）新建data文件夹--新建db.json文件--手动初始化数据

{
	"accounts":[]
}

（3）index.js文件下--导入lowdb并实现数据传入db.json，获取数据后将数据传给account.ejs页面

var express = require('express');
var router = express.Router();
const low=require('lowdb')//导入lowdb
const FileSync=require('lowdb/adapters/FileSync')
const adapter=new FileSync(__dirname+'/../data/db.json')
const db=low(adapter)
const shortid=require('shortid')


/* GET home page. */



//记账本页面(当浏览器访问account时会在views文件下寻找account.ejs文件并渲染页面)
router.post('/account', function(req, res, next) {
	let id=shortid.generate() //生成随机id
	db.get('accounts').push({id:id,...req.body}).write();
	 let account=db.get('accounts').value();
  res.render('account', { account });
});

//添加记录
router.get('/create', function(req, res, next) {
  res.render('create', { title: 'Express' });
});

module.exports = router;

（4）账单页获取数据

account.ejs页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		
		</style>
	</head>
	<body>
	<div class="data">
		<h1>我是数据页</h1>
		<hr />
		<% account.forEach(item=>{ %>
		<div class="list" >
		  <div class="time" >
		  <%=item.name%>
		  </div>
		  <div class="content">
		  <h3><%=item.title%></h3>
		  <button class="<%=item.type==1?'pay':'money'%>"><%=item.type==1?'收入':'支出'%></button>
		  <h3><%=item.money%></h3>
		  <button>删除</button>
		  </div>
		</div>
		<% }) %>
		
	</div>
	</body>
</html>

（5）数据删除功能

index.js页面添加删除

//删除记录
router.get('/account/:id',(req, res, next)=>{
	//获取id参数
	let id=req.params.id
	db.get('accounts').remove({id:id}).write();
	let account=db.get('accounts').value();
	res.render('account', { account });
})

account.ejs修改

 <a href="/account/<%=item.id%>">删除</a>

至此功能实现。

逆旅行天涯

关注

8
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【nodejs案例】记账本功能 -- 基本功能实现（一）

使用nodejs+express+lowdb制作一个简单地记账本功能，练习node数据的存入与读取。
复制链接

扫一扫

专栏目录