资讯专栏INFORMATION COLUMN

亲手撸一个node项目

crossoverJie / 1522人阅读

摘要:实现一个增删查的项目项目截图录入页详情页列表页项目目录如下存放静态资源文件存放视图文件用于存放各个页面存放路由文件不过我最终为了方便都写到了下也可以说是偷了个懒存放模型文件并对外暴露接口后面用于的存储这个就有点像功能差不多都是存储数据嘛大家

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

项目截图:
1.录入页:

2.详情页:

3.列表页:

项目目录如下:

├─ 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的基础教程

基本代码:

录入页

点击录入后执行这里

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

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

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

列表页

/admin/list进入列表页

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

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

对应的后端代码为

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/18990.html

相关文章

  • 亲手一个node项目

    摘要:实现一个增删查的项目项目截图录入页详情页列表页项目目录如下存放静态资源文件存放视图文件用于存放各个页面存放路由文件不过我最终为了方便都写到了下也可以说是偷了个懒存放模型文件并对外暴露接口后面用于的存储这个就有点像功能差不多都是存储数据嘛大家 node + express + es6 + mongoose + mongodb 实现一个增删查的项目 项目截图: 1.录入页: showI...

    oujie 评论0 收藏0
  • 亲手一个React(一):JSX与虚拟DOM

    摘要:前言的火热程度已经达到了个,本系列文章主要用简单的代码来实现一个,来了解虚拟算法以及和的设计。要想将虚拟转成真实并渲染到页面上,就需要调用,比如这段代码转换后的样子这时,会将挂载到为的下,从而在页面上显示出来。 前言 react的火热程度已经达到了94.5k个start,本系列文章主要用简单的代码来实现一个react,来了解JSX、虚拟DOM、diff算法以及state和setStat...

    aaron 评论0 收藏0
  • 手摸手,带你用vue后台 系列一(基础篇)

    摘要:详细具体的使用可以见文章手摸手,带你优雅的使用。为了加速线上镜像构建的速度,我们利用源进行加速并且将一些常见的依赖打入了基础镜像,避免每次都需要重新下载。 完整项目地址:vue-element-admin系类文章二:手摸手,带你用vue撸后台 系列二(登录权限篇)系类文章三:手摸手,带你用vue撸后台 系列三(实战篇)系类文章四:手摸手,带你用vue撸后台 系列四(vueAdmin 一...

    xiaotianyi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<