用JavaScript的后端运行环境——Nodejs来做一个记账本 | 青训营

106 阅读9分钟

记账本案例

  1. 众所周知,Nodejs是一个跨平台、后端、开源的JavaScript运行时环境,构建在Chrome的V8 JavaScript 引擎之上,并在Web浏览器之外执行JS代码。它是适合初学者的流行且轻量级的Web框架。

通过Nodejs,我们可以在任何浏览器上使用JavaScript——前端、中间件和后端,包括Linux、macOS 和 Windows。因此,Node.js 包含在许多主要的Web开发堆栈中,包括 MERN、MEVN 和 MEAN 堆栈。

所以在这我打算用nodejs来做一个案例,大概就是些简单的增删查改功能

1.导入依赖包

express -e accounts

2.右键终端安装依赖(然后去json文件中将node 改为 nodemon)

 npm i

3.去index.js文件中试着去建一个

image.png

4.响应静态网页

4.1 先修改,在添加一个list的列表页面在views中

image.png 4.2 在添加一个list的列表页面在views中

image.png 4.3 将静态网页中的index.html文件全部复制到list中去,然后启动程序可以得到如下页面

image.png

4.4 同样方法添加create页面到view文件中

image.png

4.5 然后发现没有样式显示,该问题是由于导入样式文件时是相对路径,应该去掉 . 改为绝对路径,并把静态资源文件放在public中

image.png

4.6 因为表单后期要进行数据的传递,所以必须要添加属性

image.png

image.png

image.png

image.png

image.png

4.7 给表单增添 post 属性和 action 值

image.png

4.8 同时在index文件中添加对应转跳页面(这里我运行了几次都有错误,建议重启vscode或者多刷新几次)

image.png 4.8.1 添加这个可获取请求体里的数据

image.png

5.保存账单信息

5.1 新建data文件,并在下面建db文件手动添加代码完成初始化

image.png

5.2 导入lowdb文件(注意:在导入之前应该现在npm官网找到lowdb的包,进行下载)

image.png

5.2.1 然后导入文件

注意:这里db.json的地址需要加 /../

image.png

5.3 然后添加写入数据的代码

image.png

5.4 然后提交就有对应的显示了

image.png 同理json文件中如图

image.png

5.5 然后可以发现文中并没有对应的id索引,这里我们可以用lowdb对应的id插件———shortid

image.png

5.5.1 先导入文件

image.png 在添加id

image.png

注意:generator()方法是一个可以生成id的方法,在下方用{}包裹文件,再将id写在前面完成id的添加,...是扩展运算符 因为 push 是往后添加数据,我们可以改为unshift将数据往前添加,便于查看

 db.get('accounts').push({id:id,...req.body}).write();
db.get('accounts').unshift({id:id,...req.body}).write();

6. 完善账单提醒

当账单添加之后往往只有几个枯燥的字,所以我们打算在添加成功页面添加一些样式

6.1 我们先在view中创一个ejs文件,然后将写好的success页面导入到该文件

image.png 然后将send改为render,往里面添加她的对应路径,在用ejs语法将success文件中的静态提醒改为动态同步

image.png

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

image.png 然后就成功啦!

7.账单列表

7.1 先获取账单的列表信息,然后用{}将accounts中的值解析到列表中

image.png 这里笔者犯了个错误,找了好久,就是accounts不应该加 / ,去掉之后就不报错了

7.2 在list列表中添加ejs语法,将列表中的内容进行遍历

image.png 7.3 这里将各种对应的属性全部用ejs语法代替,其中注意<%= %>中有个等号,这里我就错了导致没加载出来,支出那里由于是用的 1 和-1 代替的所以采用三元运算符

image.png 最后效果

image.png

7.4 对于各种需要判断支出收入的可以使用三目运算符加ejs语法来分别进行判断,即可渲染出不同的颜色

image.png

删除表单

在新增一个get方法,用来表示删除,其中通过 id 进行删除,所以我们可以通过 params 来获取其 id 参数

image.png

注意:这里笔者复制时候没注意请求,将这个get的文件弄成post了,导致又错了好久

image.png 7.5 然后找到对应的列表上 x 的代码处

image.png

7.6 然后添加 a 标签包裹文件,在上面添加删除后的链接,这里的/account/:id ,其中id可以用ejs语法代替 == /account/<%= item.id %>

image.png

这里笔者的account多加个s也是一直检查了好久才知道

8. 结合数据库

前言 读取数据库

由于前面的只是把json文件中的列表渲染到页面上,这里我们需要通过数据库,直接把信息同步到数据库中

*> 重要提醒: 在链接数据库时总会出现如下错误:

image.png

该报错是因为没有安装mongoose的依赖,只需要用npm包导入即可

npm i mongoose
在mongose模块化中,选中我们一开始准备的文件,直接导入到我们的案例中

image.png

8.1 插入数据库
8.1.1 导入时间转化包

由于存储在数据库中的time为 Data 应该将其转为日期对象( 2023-02-24 => new Data() ),故可以通过一个工具包将其转化————momont.js

image.png

image.png

然后找到bin目录下的入口文件www

image.png

导入db函数,然后再调用db函数,将整个页面全部包裹

image.png

准备模型文件,在models中添加 AccountModel 然后对照 json 文件的属性进行添加

image.png

image.png

将AccountModule插入数据库

image.png 最后在输入对应的判断成功和失败的提醒即可

image.png


//  插入数据库
 AccountModel.create({
      ...req.body,
      // 修改事件
      time:moment(req.body.time).Date()
 },(err,data) =>{
    if(err){
      res.status(500).send('插入失败~')
      return;
    } 
    // 成功提醒
     res.render('success',{msg:'添加成功哦~',url:'/account'})
 })

注意:这里我一直都报错,后面发现是mongoose版本的问题,将版本改为6点几的版本就行了

image.png 解决方法如下:

image.png

image.png 然后数据库里面也有对应的操作了

image.png

8.2 读取数据库信息

读取数据库采用和增添差不多的操作,不过要换成 find 代码如下:

image.png 然后可以得到如下所示画面

image.png

然后发现基本上数值全是有关于支出的,这里是由于 type应该是数字,而不是字符串,把他改正就行了

image.png 然后将 item.time 改为对应的 moment 就行

image.png

8.3 删除数据库信息

我们按照之前的id 来进行删除 这里采取下划线id 也可以直接用 id 进行删除

image.png 具体代码如下,也和上面原理类似 w

image.png 剩下的就是些将代码美化,例如在删除的时候做个弹窗提醒之类的

image.png 添加账单功能

          <h2 class="col-xs-6 text-right"><a href="/account/create" class="btn btn-primary">添加账单</a></h2>          
9. 结合API
1.先删除多余的文件

这里我提前先导入了npm的依赖,可能对后续有帮助

npm i

比如:user.js ,在创建web文件将index.js导入其中,修改有对应导入此地址的链接

image.png 然后删除index中导入的对应的文件

image.png

2.在routes中创建爱你api文件,然后将index的文件导入

image.png

3.然后在app.js文件中将对应的数据导入

image.png 在进行调用

image.png

注意:如果文件一直报错的话把那个导入的部分重新输入,或是重新启动服务试试 最后就可以得到和以前一样的页面了

image.png

10. 记账本接口

10.1 获取列表

在api下的account中,先修改列表的api响应

image.png 注意:这里的json响应并没有添加到对应的代码中去,应该添加到下面的括号包裹的范围内

image.png 然后打开 apipost 接口测试工具,先新建一个文件夹

image.png 再新建文件

image.png 最后在发送响应即可

image.png

10.2 增加数据

先删除刚开始的将数据添加的http响应

image.png

2.修改json响应

image.png 3.然后打开apipost工具添加对应的接口,对应数据仿照AccountModule文件

image.png

10.3.删除表单

先将post方法改为 delete

image.png

image.png

10.4 获取单条账单

获取用get方法来实现 image.png

10.5 更新账单信息

更新用patch方法 其中updataOne后设置三个参数: id 请求体 回调函数 image.png 然后设置账单接口,按id来进行查询,发现他只反映的是一个整体的情况,不能反映到单体的情况

image.png 接着我们对她进行改进,我们在添加一个查询模块,再次对她进行二次查询,最后效果如下

image.png

11 响应注册页面设置

其方法和之前设置的大差不差,但是要注意在设置新的页面时别忘了再往app.js文件中,添加对应路由的对应地址 具体方法如下: 1.首先在router文件夹中导入对应的文件(我设置的是login)

image.png 2.然后再view文件中导入注册页面的静态文件,并且将对应的样式参数给配置到public文件中去

image.png 3.在login.js文件中配置对应的内容

image.png 然后再往app.js文件中导入对应的路由和地址

image.png 最后启动服务器,输入对应链接即可查询对应内容

image.png 然后将对应的文件放在文件夹去,并且修改对应地址

image.png

12 登录页面

由于这里登录的数据库保存视频缺了一段,我开始一直找不到方法解决,后面直接用现有的代码自己注册了一个用户,所以我才有数据的

1.先导入UserModule模板

image.png

2. 写入对应代码,先把注册的写了

image.png

3. 然后把登录的添在上面

image.png

这里注意修改login.js中 username 和 password 的值添加到 name 上

image.png

然后重启服务器就可以完成对应的响应了!

13.写入session

1.安装 对应的session包

image.png

npm i express-session  connect-mongo

2.将session的中间件拿过来,放到app.js文件中

image.png

3.修改配置项

image.png 将 mongoUrl 中的值 换为我们在配置文件中的,用¥{}逐步替换即可

image.png 然后可设置过期时间,这里我们设置为 7 天

14. 登录保护

当我们登录网页时,发现不管在何处只要你输入了对应的网址都可以随便查看,这里我们需要有一个判断你的网页中有没有 session 如果没有,则你需要重新进行登录

我们可以先在列表页进行一个最基础的判断

image.png

然后把他声明成一个全局的中间件

image.png