【前端】NodeJS：实战案例——记账本

莫张周刘王 · 2024-8-16 05:55:38

1 lowdb数据库

安装lowdb版本：“^1.0.0”：npm install lowdb@1.0.0。
根本用法：

//导入 lowdb
const low = require('lowdb')
const FileSync = require('lowdb/adapters/FileSync')
const adapter = new FileSync('db.json');
//获取 db 对象
const db = low(adapter);
//初始化数据
db.defaults({ posts: [], user: {} }).write()
//写入数据
db.get('posts').push({id: 2, title: '今天天气还不错~~'}).write();
db.get('posts').unshift({id: 3, title: '今天天气还不错~~'}).write();
//获取单条数据
let res = db.get('posts').find({id: 1}).value();
console.log(res);
//获取数据
console.log(db.get('posts').value());
//删除数据
let res = db.get('posts').remove({id: 2}).write();
console.log(res);
//更新数据
db.get('posts').find({id: 1}).assign({title: '今天下雨啦!!!'}).write();

复制代码

/*
db.json
*/
{
"posts": [
{
"id": 1,
"title": "今天下雨啦!!!"
}
],
"user": {}
}

复制代码

2 记账本案例

index.js

var express = require('express');
var router = express.Router();
//导入 lowdb
const low = require('lowdb')
const FileSync = require('lowdb/adapters/FileSync')
const adapter = new FileSync(__dirname + '/../data/db.json');
//获取 db 对象
const db = low(adapter);
//导入 shortid
const shortid = require('shortid');
//记账本的列表
router.get('/account', function(req, res, next) {
//获取所有的账单信息
let accounts = db.get('accounts').value();
res.render('list', {accounts: accounts});
});
//添加记录
router.get('/account/create', function(req, res, next) {
res.render('create'); //render可将.ejs文件的内容响应给浏览器
});
//新增记录
router.post('/account', (req, res) => {
//生成 id
let id = shortid.generate();
//写入文件
db.get('accounts').unshift({id:id, ...req.body}).write();
//成功提醒
res.render('success', {msg: '添加成功~~~', url: '/account'});
});
//删除记录
router.get('/account/:id', (req, res) => {
//获取 params 的 id 参数
let id = req.params.id;
//删除
db.get('accounts').remove({id:id}).write();
//提醒
res.render('success', {msg: '删除成功~~~', url: '/account'});
});
module.exports = router;

复制代码

create.ejs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>添加记录</title>
<link
href="/css/bootstrap.css"
rel="stylesheet"
/>
<link href="/css/bootstrap-datepicker.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-8 col-lg-offset-2">
<h2>添加记录</h2>
<hr />
<form method="post" action="/account">
<div class="form-group">
<label for="item">事项</label>
<input
name="title"
type="text"
class="form-control"
id="item"
/>
</div>
<div class="form-group">
<label for="time">时间</label>
<input
name="time"
type="text"
class="form-control"
id="time"
/>
</div>
<div class="form-group">
<label for="type">类型</label>
<select name="type" class="form-control" id="type">
<option value="-1">支出</option>
<option value="1">收入</option>
</select>
</div>
<div class="form-group">
<label for="account">金额</label>
<input
name="account"
type="text"
class="form-control"
id="account"
/>
</div>
<div class="form-group">
<label for="remarks">备注</label>
<textarea name="remarks" class="form-control" id="remarks"></textarea>
</div>
<hr>
<button type="submit" class="btn btn-primary btn-block">添加</button>
</form>
</div>
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>

复制代码

list.ejs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
rel="stylesheet"
/>
<style>
label {
font-weight: normal;
}
.panel-body .glyphicon-remove{
display: none;
}
.panel-body:hover .glyphicon-remove{
display: inline-block
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-8 col-lg-offset-2">
<h2>记账本</h2>
<hr />
<div class="accounts">
<% accounts.forEach(item => { %>
<div class="panel <%= item.type==='-1' ? 'panel-danger' : 'panel-success' %>">
<div class="panel-heading"><%= item.time %></div>
<div class="panel-body">
<div class="col-xs-6"><%= item.title %></div>
<div class="col-xs-2 text-center">
<span class="label <%= item.type==='-1' ? 'label-warning' : 'label-success' %>"><%= item.type==='-1' ? '支出' : '收入' %></span>
</div>
<div class="col-xs-2 text-right"><%= item.account %> 元</div>
<div class="col-xs-2 text-right">
<a href="/account/<%= item.id %>">
<span
class="glyphicon glyphicon-remove"
aria-hidden="true"
></span>
</a>
</div>
</div>
</div>
<% }) %>
</div>
</div>
</div>
</div>
</body>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

【前端】NodeJS：实战案例——记账本

0 个回复

快速回复

楼主热帖

标签云