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

文章目录

  • 📚基本结构搭建
  • 📚响应静态网页
  • 📚获取表单数据
  • 📚借助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.mfbz.cn/a/120469.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

git上传项目至github(Linux)

git上传项目至github(Linux)

01 git版本创建 git init 创建版本库 创建一个版本 git add test1.cpp git commit -m 说明信息 git log 查看版本记录 02 版本回退 git reset --hard HEAD^ 版本回退一个 git reset --hard HEAD^^ 版本回退二个 git reset --hard 版本号 版本回退到指定版本&#xff0…
阅读更多...
学习c++的第十三天

学习c++的第十三天

目录 文件和流 打开文件 关闭文件 写入文件 读取文件 读取 & 写入实例 文件位置指针 异常处理 扩展知识 抛出异常 标准的异常 定义新的异常 文件和流 到目前为止&#xff0c;我们已经使用了 iostream 标准库&#xff0c;它提供了 cin 和 cout 方法分别用于从标…
阅读更多...
微服务之初始微服务

微服务之初始微服务

文章目录 一、服务架构演变1.单体架构2.分布式架构 二、认识微服务三、总结四、微服务技术对比五、SpringCloud注意 一、服务架构演变 1.单体架构 单体架构&#xff1a;将业务的所有功能集中在一个项目中开发&#xff0c;打成一个包部署。 优点&#xff1a; 架构简单部署成本…
阅读更多...
【程序员怎样才能学好算法】《算法秘籍》给出答案

【程序员怎样才能学好算法】《算法秘籍》给出答案

【文末送书】今天推荐一本优质算法书籍《算法秘籍》&#xff0c;这是一本关于数据结构和算法的书&#xff0c;以Java为描述语言&#xff0c;介绍了计算机编程中常用的数据结构和算法。全书共13章&#xff0c;讲述了常见的数据结构、排序算法、位运算、树、递归、回溯算法、贪心…
阅读更多...
挑战100天 AI In LeetCode Day03（热题+面试经典150题）

挑战100天 AI In LeetCode Day03（热题+面试经典150题）

挑战100天 AI In LeetCode Day03&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-52.1 题目2.2 题解 三、面试经典 150 题-53.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&am…
阅读更多...
软件测试面试怎样介绍自己的测试项目？会问到什么程度？

软件测试面试怎样介绍自己的测试项目？会问到什么程度？

【文章末尾给大家留下了大量的福利】 前准备不足而导致面试失败那可就亏大了&#xff01;为了提高面试成功率&#xff0c;帮助大家尽快拿到高薪offer&#xff0c;我们盘点了面试环节必问的三类问题&#xff0c;希望对即将参加软件测试面试的小伙伴们有所帮助。 01 如何自我介…
阅读更多...
ai实景直播矩阵式引流---技术开发搭建（剪辑、矩阵、直播）

ai实景直播矩阵式引流---技术开发搭建（剪辑、矩阵、直播）

目前我们的短视频矩阵剪辑分发系统更新&#xff1a; 无人直播更新&#xff1a; 1、新增文案引流&#xff1a;已接入混元数据大模型&#xff0c;千帆数据大模型&#xff0c;星火数据大模型&#xff0c;盘古数据大模型&#xff0c;通义数据大模型&#xff0c;ChatGPT数据大模型…
阅读更多...
怎样选择文件外发控制系统，让数据实现高效安全交换？

怎样选择文件外发控制系统，让数据实现高效安全交换？

制造型企业都非常重视其知识产权&#xff08;IP&#xff09;的安全性&#xff0c;尤其是其最有价值的产品设计数据的安全问题。基于复杂的供应链生态&#xff0c;每天可能要与几十家甚至上百家供应商及合作伙伴进行数据交换。不管是一级还是二级供应商&#xff0c;合作伙伴还是…
阅读更多...
【AI编程】ai编程插件汇总iFlyCode、codegeex

【AI编程】ai编程插件汇总iFlyCode、codegeex

1、iFlyCode 开发公司&#xff1a;讯飞 支持IDE: VS Code、IntelliJ IDEA、CLion、PyCharm、WebStorm 支持语言: Python、JavaScript、C、Java 下载地址&#xff1a;https://iflycode.xfyun.cn/ iFlyCode 快捷键列表&#xff1a;  Tab 采纳建议  Esc 拒绝建议  Alt\ 主动…
阅读更多...
Flutter：安装依赖报错doesn‘t support null safety

Flutter：安装依赖报错doesn‘t support null safety

项目中需要引用http依赖&#xff0c;在pubspec.yaml文件中添加如下信息&#xff1a; 当同步时&#xff0c;报错信息如下&#xff1a; [myflutter] flutter pub upgrade Resolving dependencies... The current Dart SDK version is 3.1.3. Because myflutter depends on http &…
阅读更多...
钓鱼识别视频AI算法，让智慧水务更上一层楼

钓鱼识别视频AI算法，让智慧水务更上一层楼

智慧水务已经成为现代水务行业的发展趋势&#xff0c;通过一系列的技术升级&#xff0c;实现智能化、高效化的水资源管理。其中&#xff0c;钓鱼识别视频AI算法的应用&#xff0c;更是为安全防线提供了强大的技术支持。本文将围绕智慧水务技术升级和钓鱼识别视频AI算法展开讨论…
阅读更多...
Redis系列-Redis集群模式【8】

Redis系列-Redis集群模式【8】

目录 Redis系列-Redis集群模式【8】特性Redis的数据分区虚拟槽分区Redis虚拟槽分区的特点客户端如何定位目标节点&#xff1f; 故障转移故障检测故障转移 Redis一致性保证Redis集群的功能限制部署命令REF 个人主页: 【⭐️个人主页】 需要您的【&#x1f496; 点赞关注】支持 &…
阅读更多...
直线和平面的法向量

直线和平面的法向量

阅读更多...
Redis Java 开发简单示例

Redis Java 开发简单示例

文章目录 一、概述二、Jedis 开发示例2.1 导入 maven 依赖2.2 使用连接池读写2.3 使用集群读写2.4 完整示例代码2.5 测试集群的搭建 三、Lettuce 开发示例3.1 导入 maven 依赖3.2 读写数据 四、Spring Boot Redis 开发示例4.1 导入 maven 依赖4.2 配置Redis服务地址4.3 基于 Re…
阅读更多...
数据结构（超详细讲解！！）第二十一节 特殊矩阵的压缩存储

数据结构（超详细讲解！！）第二十一节 特殊矩阵的压缩存储

1.压缩存储的目标 值相同的元素只存储一次 压缩掉对零元的存储&#xff0c;只存储非零元 特殊形状矩阵&#xff1a; 是指非零元&#xff08;如值相同的元素&#xff09;或零元素分布具有一定规律性的矩阵。 如&#xff1a; 对称矩阵 上三角矩阵 下三角矩阵 对角矩阵 准…
阅读更多...
YOLOv5论文作图教程（2）— 软件界面布局和基础功能介绍

YOLOv5论文作图教程（2）— 软件界面布局和基础功能介绍

前言：Hello大家好，我是小哥谈。通过上一节课的学习，相信大家都已成功安装好软件了，本节课就给大家详细介绍一下Axure RP9软件的界面布局及相关基础功能，希望大家学习之后能够有所收获！🌈 前期回顾： YOLOv5论文作图教程（1）— 软件介绍及下载安装（包括软件包+下载安…
阅读更多...
Java之SpringCloud Alibaba【八】【Spring Cloud微服务Gateway整合sentinel限流】

Java之SpringCloud Alibaba【八】【Spring Cloud微服务Gateway整合sentinel限流】

一、Gateway整合sentinel限流 网关作为内部系统外的一层屏障,对内起到-定的保护作用&#xff0c;限流便是其中之- - .网关层的限流可以简单地针对不同路由进行限流,也可针对业务的接口进行限流,或者根据接口的特征分组限流。 1、添加依赖 <dependency><groupId>c…
阅读更多...
Docker-consul容器服务更新与发现

Docker-consul容器服务更新与发现

目录 一、服务注册与发现 二、什么是consul 三、consul的关键特性 四、consul部署 环境准备 部署consul服务器 1&#xff09;建立 Consul 服务 &#xff08;30.14&#xff09; 2&#xff09;设置代理&#xff0c;在后台启动 consul 服务端 3&#xff09;查看集群信息 …
阅读更多...
[RCTF 2019]nextphp

[RCTF 2019]nextphp

文章目录 考点前置知识PHP RFC&#xff1a;预加载FFI基本用法PHP RFC&#xff1a;新的自定义对象序列化机制 解题过程 考点 PHP伪协议、反序列化、FFI 前置知识 PHP RFC&#xff1a;预加载 官方文档 通过查看该文档&#xff0c;在最下面找到预加载结合FFI的危害 FFI基本用法 …
阅读更多...
时序预测 | MATLAB实现基于SVM-Adaboost支持向量机结合AdaBoost时间序列预测

时序预测 | MATLAB实现基于SVM-Adaboost支持向量机结合AdaBoost时间序列预测

时序预测 | MATLAB实现基于SVM-Adaboost支持向量机结合AdaBoost时间序列预测 目录 时序预测 | MATLAB实现基于SVM-Adaboost支持向量机结合AdaBoost时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.Matlab实现SVM-Adaboost时间序列预测&#xff08;风…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站