记账本案例
- 众所周知,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文件中试着去建一个
4.响应静态网页
4.1 先修改,在添加一个list的列表页面在views中
4.2 在添加一个list的列表页面在views中
4.3 将静态网页中的index.html文件全部复制到list中去,然后启动程序可以得到如下页面
4.4 同样方法添加create页面到view文件中
4.5 然后发现没有样式显示,该问题是由于导入样式文件时是相对路径,应该去掉 . 改为绝对路径,并把静态资源文件放在public中
4.6 因为表单后期要进行数据的传递,所以必须要添加属性
4.7 给表单增添 post 属性和 action 值
4.8 同时在index文件中添加对应转跳页面(这里我运行了几次都有错误,建议重启vscode或者多刷新几次)
4.8.1 添加这个可获取请求体里的数据
5.保存账单信息
5.1 新建data文件,并在下面建db文件手动添加代码完成初始化
5.2 导入lowdb文件(注意:在导入之前应该现在npm官网找到lowdb的包,进行下载)
5.2.1 然后导入文件
注意:这里db.json的地址需要加 /../
5.3 然后添加写入数据的代码
5.4 然后提交就有对应的显示了
同理json文件中如图
5.5 然后可以发现文中并没有对应的id索引,这里我们可以用lowdb对应的id插件———shortid
5.5.1 先导入文件
在添加id
注意: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页面导入到该文件
然后将send改为render,往里面添加她的对应路径,在用ejs语法将success文件中的静态提醒改为动态同步
res.render('success',{msg:'添加成功哦~',url:'/account'})
然后就成功啦!
7.账单列表
7.1 先获取账单的列表信息,然后用{}将accounts中的值解析到列表中
这里笔者犯了个错误,找了好久,就是accounts不应该加 / ,去掉之后就不报错了
7.2 在list列表中添加ejs语法,将列表中的内容进行遍历
7.3 这里将各种对应的属性全部用ejs语法代替,其中注意<%= %>中有个等号,这里我就错了导致没加载出来,支出那里由于是用的 1 和-1 代替的所以采用三元运算符
最后效果
7.4 对于各种需要判断支出收入的可以使用三目运算符加ejs语法来分别进行判断,即可渲染出不同的颜色
删除表单
在新增一个get方法,用来表示删除,其中通过 id 进行删除,所以我们可以通过 params 来获取其 id 参数
注意:这里笔者复制时候没注意请求,将这个get的文件弄成post了,导致又错了好久
7.5 然后找到对应的列表上 x 的代码处
7.6 然后添加 a 标签包裹文件,在上面添加删除后的链接,这里的/account/:id ,其中id可以用ejs语法代替 == /account/<%= item.id %>
这里笔者的account多加个s也是一直检查了好久才知道
8. 结合数据库
前言 读取数据库
由于前面的只是把json文件中的列表渲染到页面上,这里我们需要通过数据库,直接把信息同步到数据库中
*> 重要提醒: 在链接数据库时总会出现如下错误:
该报错是因为没有安装mongoose的依赖,只需要用npm包导入即可
npm i mongoose
在mongose模块化中,选中我们一开始准备的文件,直接导入到我们的案例中
8.1 插入数据库
8.1.1 导入时间转化包
由于存储在数据库中的time为 Data 应该将其转为日期对象( 2023-02-24 => new Data() ),故可以通过一个工具包将其转化————momont.js
然后找到bin目录下的入口文件www
导入db函数,然后再调用db函数,将整个页面全部包裹
准备模型文件,在models中添加 AccountModel 然后对照 json 文件的属性进行添加
将AccountModule插入数据库
最后在输入对应的判断成功和失败的提醒即可
// 插入数据库
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点几的版本就行了
解决方法如下:
然后数据库里面也有对应的操作了
8.2 读取数据库信息
读取数据库采用和增添差不多的操作,不过要换成 find 代码如下:
然后可以得到如下所示画面
然后发现基本上数值全是有关于支出的,这里是由于 type应该是数字,而不是字符串,把他改正就行了
然后将 item.time 改为对应的 moment 就行
8.3 删除数据库信息
我们按照之前的id 来进行删除 这里采取下划线id 也可以直接用 id 进行删除
具体代码如下,也和上面原理类似
w
剩下的就是些将代码美化,例如在删除的时候做个弹窗提醒之类的
添加账单功能
<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导入其中,修改有对应导入此地址的链接
然后删除index中导入的对应的文件
2.在routes中创建爱你api文件,然后将index的文件导入
3.然后在app.js文件中将对应的数据导入
在进行调用
注意:如果文件一直报错的话把那个导入的部分重新输入,或是重新启动服务试试 最后就可以得到和以前一样的页面了
10. 记账本接口
10.1 获取列表
在api下的account中,先修改列表的api响应
注意:这里的json响应并没有添加到对应的代码中去,应该添加到下面的括号包裹的范围内
然后打开 apipost 接口测试工具,先新建一个文件夹
再新建文件
最后在发送响应即可
10.2 增加数据
先删除刚开始的将数据添加的http响应
2.修改json响应
3.然后打开apipost工具添加对应的接口,对应数据仿照AccountModule文件
10.3.删除表单
先将post方法改为 delete
10.4 获取单条账单
获取用get方法来实现
10.5 更新账单信息
更新用patch方法
其中updataOne后设置三个参数: id 请求体 回调函数
然后设置账单接口,按id来进行查询,发现他只反映的是一个整体的情况,不能反映到单体的情况
接着我们对她进行改进,我们在添加一个查询模块,再次对她进行二次查询,最后效果如下
11 响应注册页面设置
其方法和之前设置的大差不差,但是要注意在设置新的页面时别忘了再往app.js文件中,添加对应路由的对应地址 具体方法如下: 1.首先在router文件夹中导入对应的文件(我设置的是login)
2.然后再view文件中导入注册页面的静态文件,并且将对应的样式参数给配置到public文件中去
3.在login.js文件中配置对应的内容
然后再往app.js文件中导入对应的路由和地址
最后启动服务器,输入对应链接即可查询对应内容
然后将对应的文件放在文件夹去,并且修改对应地址
12 登录页面
由于这里登录的数据库保存视频缺了一段,我开始一直找不到方法解决,后面直接用现有的代码自己注册了一个用户,所以我才有数据的
1.先导入UserModule模板
2. 写入对应代码,先把注册的写了
3. 然后把登录的添在上面
这里注意修改login.js中 username 和 password 的值添加到 name 上
然后重启服务器就可以完成对应的响应了!
13.写入session
1.安装 对应的session包
npm i express-session connect-mongo
2.将session的中间件拿过来,放到app.js文件中
3.修改配置项
将 mongoUrl 中的值 换为我们在配置文件中的,用¥{}逐步替换即可
然后可设置过期时间,这里我们设置为 7 天
14. 登录保护
当我们登录网页时,发现不管在何处只要你输入了对应的网址都可以随便查看,这里我们需要有一个判断你的网页中有没有 session 如果没有,则你需要重新进行登录
我们可以先在列表页进行一个最基础的判断
然后把他声明成一个全局的中间件