Node.js实现简单管理系统


Posted in Javascript onSeptember 23, 2019

一、简述

  • 主要是面向初学者的node攻略,需要有node基础(了解一点npm和express)。
  • 使用express框架+mongodb数据库,前端使用的是原生html。
  • 实现了对图书的增删改查基本功能。
  • 源代码会上传到GitHub配合博客一起看。点击这里看源代码
  • 为了方面没有写css。

二、项目结构

虽然是一个很简单的后台吧,但是还是应该有一个清晰的结构:

1.index.js 入口文件

2.model.js 模型文件

3.router.js 路由文件

4.views 页面文件

? index.html 主页
? new.html 新建页
? edit.html 编辑页

5.node_modules 模块文件夹
6.db 数据库文件夹

三、初始化项目

因为我们使用的是express框架,先用npm下载好express后,创建index.js快速搭配一个后台

const express = require('express')
const app = express()
app.get('/',(req,res) => {
 res.send('hello world')
})
app.listen(3000,() => {
 console.log('server is running...')
})

打开终端使用node(推荐使用nodemon)运行后台,终端显示running而且localhost:3000渲染上了hello world证明express初始化成功了。

四、配置路由和渲染模块

1.使用npm下载art-template和express-art-template,并在index.js中加入

app.engine('html',require('express-art-template'))

2.使用原生html的话是后端配置路由,所以我们将一开始对‘/'的get请求删掉,转而新建一个router.js并添加如下代码:

const express = require('express')
//创建路由实例
const router = express.Router()

router.get('/',(req,res) => {
 res.render('index.html',{
 books: [{ //可以先传一个假数据测试下
 name: 'a',
 author: 'aa',
 press: 'aaa'
 }]
 })
})
module.exports = router //暴露router

上面这段代码就完成了后端加载主页并将数据渲染上去的功能。

当然要把router引入到入口文件中,在index.js中加入:

const router = require('./router')
app.use(router)

五、完成首页

首页没啥好说的,上一个表格就得啦。
像each这种形式在后端是比较常见的表达,和foreach非常像,读取数组按行渲染到html中。

<div>
 <table>
 <thead>
 <tr>
 <th>书名</th>
 <th>作者</th>
 <th>出版社</th>
 <th>操作</th>
 </tr>
 </thead>
 <tbody>
 {{ each books }}
 <tr>
 <td>{{ $value.name }}</td>
 <td>{{ $value.author }}</td>
 <td>{{ $value.press }}</td>
 <td> <!--这里路由后面再添加-->
 <a href="#" >编辑</a>
 <a href="#" >删除</a>
 </td>
 </tr>
 {{ /each }}
 </tbody>
 </table>
 <a href="/new" >添加新书</a> <!--跳转至添加页-->
</div>

六、数据库连接+模型创建

  • 创建model.js并npm安装mongoose
  • 接下来都是常规操纵了,连接数据库,创建Schema,导出Schema
  • 对于每一个属性这里为了方面只给一个type
const mongoose = require('mongoose')

mongoose.connect('mongodb://localhost/book',{ useNewUrlParser: true , useUnifiedTopology: true })

const Schema = mongoose.Schema

const BookSchema = new Schema({
 name: {
 type: String,
 },
 author: {
 type: String,
 },
 press: {
 type: String,
 }
})
module.exports = mongoose.model('Book',BookSchema)

七、路由导入数据库

在router.js中引入Book
const Book = require('./model')这样我们就可以在router中利用Book来进行数据库的增删改查了。
mongoose的方法都可以在文档中查到。
渲染主页就可以改成如下代码,在数据库中查找所有项然后传到前端。

router.get('/',(req,res) => {
 Book.find((err,book) => { //book就是查找的所有对象是一个数组
 res.render('index.html',{
 books: book
 })
 })
})

八、设计添加页的html和路由

首先来分析一个添加页的逻辑代码,html部分我们需要一个表单,填写书的具体信息后存到数据库里,所以嘞,我们就需要一个get路由加载这个页面,同时需要一个post请求接收前端发送过来的数据。
html部分很简单,form+input就可以搞定,记得action的路径要一致,name也要一样哦。

<form action="/new" method="post">
 <div >
 <label for="">书名</label>
 <input type="text" name="name" >
 </div>
 <div >
 <label for="">作者</label>
 <input type="text" name="author" >
 </div>
 <div >
 <label for="">出版社</label>
 <input type="text" name="press" >
 </div>
 <button type="submit">Submit</button>
</form>

get路由非常简单,直接渲染new.html即可。
但是post路由就有一个问题,如何拿到前台传过来的数据呢,这里就需要用到body-parser中间件了。它就可以获取请求体(req.body) ——包含了name、author和press三个属性的json对象
想要使用它先得npm安装并引入,同时还要加上两条语句(要放在use router的前面!很重要!

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

接下来就是保存新增数据的操作了,在mongoose文档中可以找到对应的save方法。

then是一个回调函数,是保存后的操作。

router.post('/new',(req,res) => {
 console.log(req.body);
 new Book(req.body).save().then(() => {
 res.redirect('/')
 }) 
})

九、删除和修改

  • 看mongoose文档可知不管是删除查找修改都可以通过id来索引。
  • <a href="/edit?id={{ $value.id }}">编辑</a>所以我们直接使用get方法把id值传过去,后台通过req.query.id就能拿到id的具体值。
  • 修改的具体操作和新建类似,只是value赋了初始值而已。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
js实现时钟定时器
Mar 26 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
webpack的pitching loader详解
Sep 23 #Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 #Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 #Javascript
小程序实现锚点滑动效果
Sep 23 #Javascript
React Native 混合开发多入口加载方式详解
Sep 23 #Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 #Javascript
node 文件上传接口的转发的实现
Sep 23 #Javascript
You might like
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP序列化操作方法分析
2016/09/28 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
jQuery中click事件的定义和用法
2014/12/20 Javascript
js如何打印object对象
2015/10/16 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
python 自动提交和抓取网页
2009/07/13 Python
全面解读Python Web开发框架Django
2014/06/30 Python
编程语言Python的发展史
2014/09/26 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
python3下载抖音视频的完整代码
2019/06/05 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
tensorflow自定义激活函数实例
2020/02/04 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
利用Python优雅的登录校园网
2020/10/21 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
销售会计工作职责
2013/12/02 职场文书
保护地球的标语
2014/06/17 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
工程承包协议书范本
2014/09/29 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
Nginx快速入门教程
2021/03/31 Servers