亲手撸一个node项目

crossoverJie 发布于2019-06-26 17:14 / 1621人阅读

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

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上有问题欢迎交流

云服务器 GPU云服务器怎么部署node项目 java第一个小项目 java中第一个项目免费撸域名

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

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

亲手撸一个node项目

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

oujie 2019-08-21 15:39 评论0 收藏0
亲手撸一个React（一）：JSX与虚拟DOM

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

aaron 2019-08-22 17:08 评论0 收藏0
手摸手，带你用vue撸后台系列一(基础篇)

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

xiaotianyi 2019-08-22 11:03 评论0 收藏0