案例实践

更新时间: 2024-11-11 11:47:03

# 基本结构搭建

先安装 npm i -g express-generator
然后创建模板
express -e accounts
安装依赖
npm i
在package.json中
"start": "nodemon ./bin/www"
启动 npm start

修改路由

// routes/index.js
var express = require('express');
var router = express.Router();

// 记账本的列表
router.get('/account', function(req, res, next) {
  res.send('账本列表')
});

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

module.exports = router;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 响应静态网页

在view中添加模板 list.ejs,create.ejs

然后使用模板

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

// 记账本的列表
router.get('/account', function(req, res, next) {
  res.render('list')
});

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

module.exports = router;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 获取表单数据

添加表单的action属性，以及表单项的name属性

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// 新增记录
router.post('/account', (req, res) => {
  // 获取请求体的数据
  console.log(req.body)
  res.send('添加记录')
})

1
2
3
4
5
6

# lowdb的介绍与演示

安装lowdb
npm i lowdb@1.0.0
使用lowdb

// 导入 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: 2}).value()
console.log(res)

// 获取数据
console.log(db.get('posts').value())  

let res1 = db.get('posts').remove({id: 3}).write()  
console.log(res1)

// 更新数据
db.get('posts').find({id:2}).assign({title:'今天下雨啦！！！'}).write()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 保存账单信息

手动创建数据文件

// data/db.json 
{
    "accounts": []
}

1
2
3
4

安装shortid
npm i shortid

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.post('/account', (req, res) => {
  // 生成id 
  let id = shortid.generate()  
  // 写入文件
  db.get('accounts').unshift({id:id, ...req.body}).write()
  res.send('添加记录')
})

module.exports = router;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 完善成功提醒

新增成功提醒模板

<!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="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
      rel="stylesheet"
    />
  <style>
    .h-50{
      height: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="h-50"></div>
    <div class="alert alert-success" role="alert">
      <h1>:) <%= msg %></h1>
      <p><a href="<%= url %>">点击跳转</a></p>
    </div>
  </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

然后添加账单之后返回这个模板


// 新增记录
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'})
})

1
2
3
4
5
6
7
8
9
10

# 账单列表

修改模板

<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">
        <span
        class="glyphicon glyphicon-remove"
        aria-hidden="true"
        ></span>
    </div>
    </div>
</div>
<% }) %>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

给模板传参

// 记账本的列表
router.get('/account', function(req, res, next) {
  // 获取所有的账单信息
  let accounts = db.get('accounts').value()
  res.render('list',{accounts: accounts})
});

1
2
3
4
5
6
7

# 删除账单

创建删除的路由规则

// 删除记录
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'})
})

1
2
3
4
5
6
7
8
9

修改模板

//...
<div class="col-xs-2 text-right">
    <a href="/account/<%= item.id %>">
    <span
        class="glyphicon glyphicon-remove"
        aria-hidden="true"
    ></span>
    </a>
</div>
//...

1
2
3
4
5
6
7
8
9
10

← express框架 Mongodb →