用html数据库搭建信息管理系统,Node.js实现简单管理系统
一、简述
主要是面向初学者的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中。
书名作者出版社操作
{{ each books }}
{{ $value.name }}{{ $value.author }}{{ $value.press }}
编辑
删除
{{ /each }}
添加新书
六、数据库连接+模型创建
创建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也要一样哦。
书名
作者
出版社
Submit
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来索引。
编辑所以我们直接使用get方法把id值传过去,后台通过req.query.id就能拿到id的具体值。
修改的具体操作和新建类似,只是value赋了初始值而已。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
用html数据库搭建信息管理系统,Node.js实现简单管理系统相关推荐
- Node.js校园志愿者管理系统-计算机毕设 附源码78452
Node.js校园志愿者管理系统 摘 要 信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克 ...
- (附源码)node.js电商管理系统毕业设计251001
node.js电商管理系统 摘 要 随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,电商管理系统当然也不能排除在外.电商管理系统 是以实际运 ...
- (附源码)基于Node.js校园志愿者管理系统-计算机毕设 78452
Node.js校园志愿者管理系统 摘 要 图3-1 用户用例图 管理员用例图如下所示. 图3-2 管理员用例图 前台用户功能 前台用户可分为未注册用户需求和已注册用户需求. 未注册用户的功能如下: 注 ...
- 搭建自己的Node.js 服务器 (一)
搭建自己的Node.js 服务器 (一) 首先,为什么要自己搭建node服务器,node服务器的优点很多很多,不一一叙述,主要原因是个人测试需求,进而需要搭建一个服务器,完成后台功能(根本原因是不会J ...
- 如何使用async / await和Firebase数据库编写漂亮的Node.js API
by Paul Breslin 保罗·布雷斯林(Paul Breslin) 如何使用async / await和Firebase数据库编写漂亮的Node.js API (How to write ...
- (附源码)node.js学生钟点工管理系统 毕业设计 290011
学生钟点工管理系统 摘 要 随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,学生钟点工管理系统当然也不能排除在外.学生钟点工管理系统是以实际 ...
- 基于Node.js的图书管理系统
1.创建顶级目录,初始化包 npm init -y 2.下载项目所需的依赖 npm install 包名 --save 3.创建入口文件index.js(图书管理系统) // 引入所需的依赖包 con ...
- 计算机毕业设计Node.js+Vue酒店管理系统(程序+源码+LW+部署)
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流 项目运行 环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...
- 计算机毕业设计Node.js+Vue建筑工程管理系统(程序+源码+LW+部署)
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流 项目运行 环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...
最新文章
- ubuntu下安装nginx时依赖库zlib,pcre,openssl安装方法
- mysql vim_MySQL的安装配置
- 1257 背包问题 V3——分数规划
- 你......真的了解我吗?
- lucene 查询示例_高级Lucene查询示例
- 调整HashMap的大小:未来的危险
- mysql shell可视化_shell编程系列24--shell操作数据库实战之利用shell脚本将文本数据导入到mysql中...
- Android 实现图片画画板
- 每日英语:Do Bicycle Helmet Laws Really Make Riders Safer?
- 3.20计算机组成原理课堂笔记
- EXECUTE IMMEDIATE oracle介绍
- 181103每日一句
- Atitit.ide代码块折叠插件 eclipse
- 周长相等的正方形面积一定相等_周长和面积一直是三年级孩子的易失分点,家长要把好关!...
- Oracle数据库安装及配置
- 探索Android FrameWork底层开发视频全套
- java package 打包_java打包的两种方式整理
- office 2016 word文档另存为pdf之后文本内容显示不全
- 删不掉文件夹怎么办?
- X11VNC远程连接Ubuntu
热门文章
- python程序设计论文_【程序设计论文】程序设计论文范文(共40篇)
- LM324芯片介绍及其应用电路
- 小程序源码:最新wordpress黑金壁纸微信小程序 二开修复版源码下载支持流量主收益
- 如何支持github账号登录
- 如何制作红蓝3d电影(详细教程)
- Git标签(tag)的用法
- CTFshow刷题日记-MISC-图片篇(上)基础操作和信息附加
- 深度学习(一)多层感知器MLP/人工神经网络ANN
- wave6000可以c语言编程吗,WAVE6000使用教程初步.doc
- 基于五阶段流水线的RISC-V CPU模拟器实现