【前端】NodeJS：记账本案例优化（MongoDB数据库）

文章目录

[1 字符串转为时间对象------Moment](#1 字符串转为时间对象——Moment)
[2 记账本实例优化](#2 记账本实例优化)

1 字符串转为时间对象------Moment

Moment.js中文网：https://momentjs.cn/docs/#/parsing/。

javascript 复制代码

npm install moment // 安装moment
var moment = require('moment'); // require
moment().format();

2 记账本实例优化

bin文件夹下www文件：导入MongoDB数据库。

javascript 复制代码

#!/usr/bin/env node
//导入 db 函数
const db = require('../db/db');

//调用 db 函数
db(() => {
  /**
 * Module dependencies.
   */

  var app = require('../app');
  var debug = require('debug')('accounts:server');
  var http = require('http');
  ...
})

AccountModel.js：

javascript 复制代码

//导入 mongoose
const mongoose = require('mongoose');
//创建文档的结构对象
//设置集合中文档的属性以及属性值的类型
let AccountSchema = new mongoose.Schema({
  	//标题
  	title: {
	    type: String,
	    required: true
  	},
  	//时间
  	time: Date,
  	//类型
  	type: {
	    type: Number,
	    default: -1
  	},
  	//金额
  	account: {
	    type: Number,
	    required: true
  	},
  	//备注
  	remarks: {
    	type: String 
  	}
});

//创建模型对象  对文档操作的封装对象
let AccountModel = mongoose.model('accounts', AccountSchema);

//暴露模型对象
module.exports = AccountModel;

Index.js

javascript 复制代码

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');
//导入 moment
const moment = require('moment');
const AccountModel = require('../models/AccountModel');

//测试
// console.log(moment('2023-02-24').toDate())
//格式化日期对象
// console.log(moment(new Date()).format('YYYY-MM-DD'));

//记账本的列表
router.get('/account', function(req, res, next) {
  	//获取所有的账单信息
  	// let accounts = db.get('accounts').value();
  	//读取集合信息
  	AccountModel.find().sort({time: -1}).exec((err, data) => {
    	if(err){
      		res.status(500).send('读取失败~~~');
      		return;
    	}
    	//响应成功的提示
    	res.render('list', {accounts: data, moment: moment});
  	})
});

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

//新增记录
router.post('/account', (req, res) => {
  	//查看表单数据  2024-06-06  =>  new Date()
  	//2024-06-06  =>  moment  =>  new Date()
  	//console.log(req.body);
  	//修改 req.body.time 的值
  	//req.body.time = moment(req.body.time).toDate();
  	//插入数据库
  	AccountModel.create({
    	...req.body, // ES6语法，所有属性的值
    	//修改 time 属性的值
    	time: moment(req.body.time).toDate()
  	}, (err, data) => {
    	if(err){
      		res.status(500).send('插入失败~~');
      		return
    	}
    	//成功提醒
    	res.render('success', {msg: '添加成功哦~~~', url: '/account'});
  	})
});

//删除记录
router.get('/account/:id', (req, res) => {
  	//获取 params 的 id 参数
  	let id = req.params.id;
  	//删除
  	AccountModel.deleteOne({_id: id}, (err, data) => {
    	if(err) {
      		res.status(500).send('删除失败~');
      		return;
    	}
    	//提醒
    	res.render('success', {msg: '删除成功~~~', url: '/account'});
  	})
});

module.exports = router;

Index.html

html 复制代码

<!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">
        <div class="row">
          <h2 class="col-xs-6">记账本</h2>
          <h2 class="col-xs-6 text-right"><a href="/account/create" class="btn btn-primary">添加账单</a></h2>
        </div>
        <hr />
        <div class="accounts">
          <% accounts.forEach(item=> { %>
            <div class="panel <%= item.type=== -1 ? 'panel-danger' : 'panel-success'  %>">
              <div class="panel-heading">
                <%= moment(item.time).format('YYYY-MM-DD') %>
              </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 class="delBtn" href="/account/<%= item._id %>">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                  </a>
                </div>
              </div>
            </div>
            <% }) %>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  //获取所有的 delBtn
  let delBtns = document.querySelectorAll('.delBtn');

  //绑定事件
  delBtns.forEach(item => {
    item.addEventListener('click', function (e) {
      if (confirm('您确定要删除该文档么??')) {
        return true;
      } else {
        //阻止默认行为
        e.preventDefault();
      }
    });
  })
</script>
</html>