脚本宝典收集整理的这篇文章主要介绍了

亲手撸一个node项目

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

node + express + es6 + mongoose + mongodb 实现一个增删查的项目

项目截图:
1.录入页:

clipboard.png

2.详情页:

clipboard.png

3.列表页:

clipboard.png

项目目录如下:

├─ app.js
├─ bin
│    └─ www
├─ index.html
├─ js
│    └─ jquery.js
├─ models
│    └─ movies.js
├─ package.json
├─ public
│    ├─ javascripts
│    │    └─ jquery.min.js
│    └─ stylesheets
│           ├─ bootstrap
│           └─ style.css
├─ routes
│    ├─ admin.js
│    ├─ detail.js
│    ├─ index.js
│    ├─ list.js
│    └─ users.js
├─ schemas
│    └─ movies.js
└─ views
       ├─ admin.ejs
       ├─ delete.ejs
       ├─ detail.ejs
       ├─ error.ejs
       ├─ includes
       │    └─ header.ejs
       ├─ index.ejs
       └─ list.ejs

public: 存放静态资源文件
views: 存放视图文件(ejs) 用于存放各个页面
routes: 存放路由文件 不过我最终为了方便 都写到了app.js下 也可以说是偷了个懒
schemas models: 存放mongoose模型文件 并对外暴露接口 后面用于mongodb的存储 这个就有点像vuex 功能差不多 都是存储数据嘛 大家可以自行百度 以后我也会出点mongodb的基础教程

基本代码:

录入页
clipboard.png

点击录入后执行这里
clipboard.png

post请求相当于拿到了form表单的内容
然后跳转到详情页

clipboard.png

req.query.id是请求体中的id字段

save这个方法是mongoose的方法 用于存储到mongodb中
clipboard.png

列表页

clipboard.png

/admin/list进入列表页

clipboard.png

fetch为我在建模里面写的静态方法

clipboard.png

在列表页中点击删除按钮 要做到删除效果
我这里用的是jq

clipboard.png

对应的后端代码为

clipboard.png

相当于点击了按钮 请求了admin/list这个接口 把对应的_id这条数据在mongodb中删除如果返回码为1说明请求成功 同时remove()dom节点
当没有条数的时候 就意味着没数据了 需要从新添加 就要跳转录入页了 这里用的是window.open()这个方法实现

基本功能就是这些 这个项目难点在于express框架路由 视图 和mongoose的结合 有些童鞋单独写一些路由没问题 但是以结合起来 问题就来了 经常总结会有很好的效果 源码后续我会传到github上 有问题欢迎交流

总结

以上是脚本宝典为你收集整理的

亲手撸一个node项目

全部内容,希望文章能够帮你解决

亲手撸一个node项目

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过