Node.js |（七）express案例实践：记账本 | 尚硅谷2023版Node.js零基础视频教程

news2024/11/26 19:51:40

文章目录

  • 📚基本结构搭建
  • 📚响应静态网页
  • 📚获取表单数据
  • 📚借助lowdb保存账单信息
  • 📚完善成功提醒
  • 📚账单列表
  • 📚删除账单
  • 📚final

学习视频：尚硅谷2023版Node.js零基础视频教程，nodejs新手到高手

在这里插入图片描述

Node.js |（六）express框架 | 尚硅谷2023版Node.js零基础视频教程

📚基本结构搭建

  • npm -e mymoney
    在这里插入图片描述

  • npm i安装依赖
    在这里插入图片描述

  • 改一改package.json，node改成nodemon
    在这里插入图片描述

  • npm start查看
    在这里插入图片描述

  • 先搭建添加和列表展示的两个路由规则。对应app.use('/', indexRouter);，修改index.js

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

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

//添加记录
router.get('/mymoney/create', function(req, res, next) {
  res.send('添加记录');
});
module.exports = router;

    在这里插入图片描述
    在这里插入图片描述

📚响应静态网页

  • 首先修改index.js（先以记账本列表为例）

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

  • 其次去views文件夹里创建list.ejs模板（render可以把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="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">
            <div class="panel panel-danger">
              <div class="panel-heading">2023-04-05</div>
              <div class="panel-body">
                <div class="col-xs-6">抽烟只抽煊赫门，一生只爱一个人</div>
                <div class="col-xs-2 text-center">
                  <span class="label label-warning">支出</span>
                </div>
                <div class="col-xs-2 text-right">25 元</div>
                <div class="col-xs-2 text-right">
                  <span
                    class="glyphicon glyphicon-remove"
                    aria-hidden="true"
                  ></span>
                </div>
              </div>
            </div>
            <div class="panel panel-success">
              <div class="panel-heading">2023-04-15</div>
              <div class="panel-body">
                <div class="col-xs-6">3 月份发工资</div>
                <div class="col-xs-2 text-center">
                  <span class="label label-success">收入</span>
                </div>
                <div class="col-xs-2 text-right">4396 元</div>
                <div class="col-xs-2 text-right">
                  <span
                    class="glyphicon glyphicon-remove"
                    aria-hidden="true"
                  ></span>
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

    在这里插入图片描述

  • 然后针对列表添加，也是先在index.js里修改，并创建create.ejs。重点关注：

    • 相关的css和js文件都放在public下
      在这里插入图片描述
    • ejs里涉及到的路径都不要加.，也就是说写成href="/css/bootstrap.css"，而不是href="./css/bootstrap.css"
    <!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>
            <div class="form-group">
              <label for="item">事项</label>
              <input
                type="text"
                class="form-control"
                id="item"
              />
            </div>
            <div class="form-group">
              <label for="time">发生时间</label>
              <input
                type="text"
                class="form-control"
                id="time"
              />
            </div>
            <div class="form-group">
              <label for="type">类型</label>
              <select class="form-control" id="type">
                <option value="">支出</option>
                <option value="">收入</option>
              </select>
            </div>
            <div class="form-group">
              <label for="account">金额</label>
              <input
                type="text"
                class="form-control"
                id="account"
              />
            </div>
            
            <div class="form-group">
              <label for="remarks">备注</label>
              <textarea 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>

    在这里插入图片描述

📚获取表单数据

  • 表单要写传递数据，每个表单项必须有name值，因此这里先补充起名字。例如：
    <div class="form-group">
 <label for="item">事项</label>
  <input
    name="title"
    type="text"
    class="form-control"
    id="item"
  />
</div>
  • 新增表单提交路由规则
    //新增记录
router.post('/mymoney', (req,res) => {
  console.log(req.body)
  res.send('添加记录')
});
  • 表单修改结果
    <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="/mymoney">
           <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>
    在这里插入图片描述 在这里插入图片描述
    在这里插入图片描述

📚借助lowdb保存账单信息

  • lowdb是借助JSON用数据库管理（但是之后基本也不咋用到了，简单数据可以用一下）

  • 不安装最新版本，就用1.0.0，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.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()

  • 首先新建一个data文件夹，并新建db.json

  • 这里手动初始化一下：

    {
	"accounts": []
}

  • 在index.js中添加以下代码

    //导入 lowdb
const low = require('lowdb')
const FileSync = require('lowdb/adapters/FileSync')
const adapter = new FileSync(__dirname + '/../data/db.json');
//获取 db 对象
const db = low(adapter);

  • 设置写入

    //新增记录
router.post('/mymoney', (req,res) => {
  db.get('accounts').push(req.body).write();
  res.send('添加记录')
});

    在这里插入图片描述

  • 给数据加上id，方便后续删除，借助shortid：npm i shortid

    //导入shortid
const shortid = require('shortid');

    //新增记录
router.post('/mymoney', (req,res) => {
  // 生成id
  let id = shortid.generate();
  db.get('accounts').push({id:id, ...req.body}).write();
  res.send('添加记录')
});

    在这里插入图片描述

  • 考虑到查看账单都是先从最近的看起，修改路由

    //新增记录
router.post('/mymoney', (req,res) => {
  // 生成id
  let id = shortid.generate();
  db.get('accounts').unshift({id:id, ...req.body}).write();
  res.send('添加记录')
});

    在这里插入图片描述

📚完善成功提醒

  • 同样的套路，在views里新建success.ejs，在index.js对应路由修改

    <!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>:) 添加成功</h1>
      <p>点击跳转</p>
    </div>
  </div>
</body>
</html>

    在这里插入图片描述

  • 优化一：让提示不死板

    //新增记录
router.post('/mymoney', (req,res) => {
  // 生成id
  let id = shortid.generate();
  db.get('accounts').unshift({id:id, ...req.body}).write();
  //成功提醒
  res.render('success', {msg:'添加成功~'})
});

    <div class="container">
  <div class="h-50"></div>
  <div class="alert alert-success" role="alert">
    <h1>:) <%= msg %></h1>
    <p>点击跳转</p>
  </div>
</div>

  • 优化二：实现跳转

     res.render('success', {msg:'添加成功~', url:'/mymoney'})

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

📚账单列表

  • 修改路由，获取数据

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

  • 进行列表渲染和条件渲染（支出or收入）

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

    在这里插入图片描述

📚删除账单

  • 添加对应路由

    //删除记录
router.get('/mymoney/:id', (req, res) => {
  //获取id参数
  let id = req.params.id;
  //删除
  db.get('accounts').remove({id:id}).write();
  //提醒
  res.render('success', {msg:'删除成功~', url:'/mymoney'})
})

  • 页面叉叉那里的id获取

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

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

  • 删除成功，想用红色
    //新增记录
router.post('/mymoney', (req,res) => {
  // 生成id
  let id = shortid.generate();
  db.get('accounts').unshift({id:id, ...req.body}).write();
  //成功提醒
  res.render('success', {msg:'添加成功~', url:'/mymoney', flag:'1'})
});

//删除记录
router.get('/mymoney/:id', (req, res) => {
  //获取id参数
  let id = req.params.id;
  //删除
  db.get('accounts').remove({id:id}).write();
  //提醒
  res.render('success', {msg:'删除成功~', url:'/mymoney', flag:'-1'})
})

    <body>
  <div class="container">
    <div class="h-50"></div>
    <div class="alert <%= flag==='-1' ? 'alert-danger' : 'alert-success' %>" role="alert">
      <h1>:) <%= msg %></h1>
      <p><a href="<%= url %>">点击跳转</a></p>
    </div>
  </div>
</body>

📚final

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1186243.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

DAIR-V2X-V 3D检测数据集 转为Kitti格式 | 可视化

DAIR-V2X-V 3D检测数据集 转为Kitti格式 | 可视化

本文分享在DAIR-V2X-V数据集中&#xff0c;将标签转为Kitti格式&#xff0c;并可视化3D检测效果。 一、将标签转为Kitti格式 DAIR-V2X包括不同类型的数据集&#xff1a; DAIR-V2X-IDAIR-V2X-VDAIR-V2X-CV2X-Seq-SPDV2X-Seq-TFDDAIR-V2X-C-Example: google_drive_linkV2X-Seq-…
阅读更多...
关于最新版本Burp Suite可以在哪个基本类别中找到控制其更新行为的“更新”子类别

关于最新版本Burp Suite可以在哪个基本类别中找到控制其更新行为的“更新”子类别

关于最新版本Burp Suite可以在哪个基本类别中找到控制其更新行为的“更新”子类别&#xff1f; In which base category can you find the "Updates" sub-category, which controls the Burp Suite update behaviour? 是Suite而不是Misc If your answer to this q…
阅读更多...
IDEA重新choose source

IDEA重新choose source

大概现状是这样&#xff1a;之前有个工程&#xff0c;依赖了别的模块基础包&#xff0c;但当时并没有依赖包的源码工程&#xff0c;因此&#xff0c;通过鼠标左键点进去&#xff0c;看到的是jar包里的class文件&#xff0c;注释什么的都去掉了的&#xff0c;不好看。后面有这个…
阅读更多...
qml添加滚动条

qml添加滚动条

import QtQuick.Controls 2.15ScrollBar.vertical: ScrollBar {visible: flick1.contentHeight > flick1.heightanchors.right: parent.rightanchors.rightMargin: 40width: 10active: truecontentItem: Rectangle {radius: 6opacity: 0.5color: "#7882A0"} }
阅读更多...
在字节跳动做了4年软件测试，9月无情被辞，细思极恐

在字节跳动做了4年软件测试，9月无情被辞，细思极恐

​【文章末尾个大家留下了大量的福利】 某不知名 985 的本科&#xff0c;18年毕业加入字节&#xff0c;以“缩减成本”的名义无情被裁员&#xff0c;之后跳槽到了华为&#xff0c;一直从事软件测试的工作。之前没有实习经历&#xff0c;算是4年的工作经验吧。 这4年之间完成了…
阅读更多...
大直径测径仪 一种高效且高精的大口径外径检测仪器

大直径测径仪 一种高效且高精的大口径外径检测仪器

摘要 大直径测径仪是一种高效高精的大口径产品外径检测仪器&#xff0c;可适用于连续轧制无缝管材、皮尔格轧制无缝管材、直缝焊管、螺旋焊管等的在线检测。还可根据不同的产品规格调节测量范围。 引言 一些大口径的管材、棒材并不罕见&#xff0c;深埋地下的排水管道、输送管道…
阅读更多...
企业级低代码开发，科技赋能让企业具备“驾驭软件的能力”

企业级低代码开发，科技赋能让企业具备“驾驭软件的能力”

科技作为第一生产力&#xff0c;其强大的影响力在各个领域中都有所体现。数字技术&#xff0c;作为科技领域中的一股重要力量&#xff0c;正在对传统的商业模式进行深度的变革&#xff0c;为各行业注入新的生命力。随着数字技术的不断发展和应用&#xff0c;企业数字化转型的趋…
阅读更多...
为什么电力公司很少用轨道式的电表？

为什么电力公司很少用轨道式的电表？

在日常生活中&#xff0c;电表作为电力系统的重要组成部分&#xff0c;承担着电能计量、结算等职能。然而&#xff0c;相较于其他类型的电表&#xff0c;电力公司为何很少采用轨道式的电表呢&#xff1f;本文将带您走进电表的世界&#xff0c;揭秘电表发展历程与技术优劣势&…
阅读更多...
【独家揭秘】跨境电商源码独立开发，软著认证，前后端全开源，无加密，交付源码，商用无忧！

【独家揭秘】跨境电商源码独立开发，软著认证，前后端全开源，无加密，交付源码，商用无忧！

在这个数字化快速发展的时代&#xff0c;跨境电商已成为全球商业的重要趋势。为了帮助您快速进入这个潜力巨大的市场&#xff0c;我们独家推出了一款经过全面验证的跨境电商源码解决方案!这款源码具有独立开发、软著认证、前后端全开源、无加密等特点&#xff0c;为您的商业运营…
阅读更多...
企业微信vs个人微信：对比对照一览表

企业微信vs个人微信：对比对照一览表

继微信后&#xff0c;腾讯推出了企业微信。企业微信可以添个人微信为好友&#xff0c;有群聊和朋友圈&#xff0c;粗看起来与个人微信十分相似&#xff0c;那么它们有什么区别呢&#xff1f; 企业微信和个人微信的区别是什么&#xff0c;咱今天两张图来对比看看~
阅读更多...
【会话技术】Cookie和Session的工作流程和区别

【会话技术】Cookie和Session的工作流程和区别

Cookie技术 web程序是通过HTTP协议传输的&#xff0c;而HTTP是无状态的&#xff0c;即后续如果还要使用前面已经传输的数据&#xff0c;就还需要重传。这样如果数据量很大的情况下&#xff0c;效率就会大打折扣。Cookie的出现就是为了解决这个问题。 Cookie的工作流程&#x…
阅读更多...
TDD、BDD、ATDD以及SBE的概念和区别

TDD、BDD、ATDD以及SBE的概念和区别

在软件开发或是软件测试中会遇到以下这些词&#xff1a;TDD 、BDD 、ATDD以及SBE&#xff0c;这些词代表什么意思呢&#xff1f; 它们之间有什么关系吗&#xff1f; TDD 、BDD 、ATDD以及SBE的基本概念 TDD&#xff1a;&#xff08;Test Driven Development&#xff09;是一种…
阅读更多...
Linux中固定ip端口和修改ip地址

Linux中固定ip端口和修改ip地址

一&#xff0c;更改虚拟网络编辑器 1&#xff0c;首先启动VMware&#xff0c;选择自己要更改ip或固定ip的虚拟机&#xff0c;并找到虚拟网络配编辑器&#xff0c;点击进入 2&#xff0c;进入之后需要点击右下角获取管理员权限后才能修改&#xff0c;有管理员权限之后图片如下 …
阅读更多...
影响金融软件开发价格的因素有哪些?

影响金融软件开发价格的因素有哪些?

随着科技的发展&#xff0c;金融行业逐渐向数字化和信息化转型&#xff0c;在这个过程中&#xff0c;金融软件开发成为了重要的支撑&#xff0c;然而&#xff0c;金融软件开发的价格是一个复杂的问题&#xff0c;受到多种因素的影响&#xff0c;本文将详细解析影响金融软件开发…
阅读更多...
HiSilicon352 android9.0 适配红外遥控器

HiSilicon352 android9.0 适配红外遥控器

海思Android解决方案在原生Android基础上&#xff0c;基于传统电视用户使用习惯&#xff0c;增加了对红外遥控器和按键板的支持&#xff0c;使传统电视用户能更好适应智能电视方案。 一.功能描述&#xff1a; 在系统启动时&#xff0c;会先启动android_ir_user&#xff1b;vinp…
阅读更多...
程序员可以做哪些副业？我整理的千字副业指南。

程序员可以做哪些副业？我整理的千字副业指南。

都说不想做副业的程序员不是好程序员&#xff0c;尤其是在经济形势不好的现在&#xff0c;有一份靠谱和稳定的副业更是成为了程序员的不二之选。程序员的副业是细水长流型的&#xff0c;虽然收入未必能超过主业&#xff0c;但胜在每月稳定入账&#xff0c;可以作为小金库和备用…
阅读更多...
基于STC12C5A60S2系列1T 8051单片机SPI通信应用

基于STC12C5A60S2系列1T 8051单片机SPI通信应用

基于STC12C5A60S2系列1T 8051单片机SPI通信应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍STC12C5A60S2系列1T 8051单片机SPI通信介绍STC12C5A60S2系列1T 8051单片…
阅读更多...
java中post请求可以像get请求一样拼装参数吗？

java中post请求可以像get请求一样拼装参数吗？

可以的&#xff0c;代码实例如下所示&#xff1a; 控制器如下所示&#xff1a; PostMapping(value "/mkdirDirectory") public Object mkdirDirectory(RequestParam("path") String path) {log.info("本地生成文件夹路径:{}", path);Object i…
阅读更多...
C++(Qt)软件调试---自动注册AeDebug（17）

C++(Qt)软件调试---自动注册AeDebug（17）

C(Qt)软件调试—自动注册AeDebug&#xff08;17&#xff09; 文章目录 C(Qt)软件调试---自动注册AeDebug&#xff08;17&#xff09;1、什么是AeDebug2、使用调试工具3、WinDbg注册到AeDebug4、ProcDump注册到AeDebug5、Dr.MinGW注册到AeDebug6、Visual Studio 注册到AeDebug 1…
阅读更多...
【ARM Coresight OpenOCD 系列 1 -- OpenOCD 介绍】

【ARM Coresight OpenOCD 系列 1 -- OpenOCD 介绍】

请阅读【ARM Coresight SoC-400/SoC-600 专栏导读】 文章目录 1.1 OpenOCD 介绍1.1.1 OpenOCD 支持的JTAG 适配器1.1.2 OpenOCD 支持的调试设备1.1.3 OpenOCD 支持的 Flash 驱动 1.2 OpenOCD 安装与使用1.2.1 OpenOCD 代码获取及安装1.2.2 OpenOCD 使用1.2.3 OpenOCD 启用 GDB…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023