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中。
<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="#" rel="external nofollow" rel="external nofollow" >编辑</a> <a href="#" rel="external nofollow" rel="external nofollow" >删除</a> </td> </tr> {{ /each }} </tbody> </table> <a href="/new" rel="external nofollow" >添加新书</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 }}" rel="external nofollow" >编辑</a>所以我们直接使用get方法把id值传过去,后台通过req.query.id就能拿到id的具体值。
- 修改的具体操作和新建类似,只是value赋了初始值而已。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- [svn: E155004]svn update报database is locked错误的解决办法
- WordPress高亮插件:Crayon Syntax Highlighter加载优化
- 深入理解 ButterKnife,让你的程序学会写代码
- JS+CSS让网站嗨起来,博客要被玩坏了!
- Linux系统zip压缩命令详细参数,附文件排除选项的正确用法
- 浅谈Android自定义锁屏页的发车姿势
- 移动App入侵与逆向破解技术-iOS篇
- 启用WP Super Cache纯代码版本之后的一些优化措施
- WP Super Cache静态缓存插件纯代码版(兼容多域名网站)
- 【Dev Club分享】React Native项目实战总结。
- HTML 5 视频直播一站式扫盲
- Golang之chan/goroutine
- 原创插件:WordPress博客友好对话框+文章随机推荐滚动条插件(附代码版)
- php平滑重启nginx,彻底清除WordPress的静态缓存
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux echo文本处理命令的使用及示例
- redis妙用-string类型
- redis妙用-hash类型
- redis妙用-list类型
- redis妙用-set类型
- JVM调优实战:解决CMS concurrent-abortable-preclean LongGC的问题
- redis妙用-zset类型
- 【线上排查实战】AOP切面执行顺序你真的了解吗
- 使用markdown,knitr和pandoc在R语言中编写可重现的报告
- R语言广义线性模型(GLMs)算法和零膨胀模型分析
- R语言中广义线性模型(GLM)中的分布和连接函数分析
- R语言自适应平滑样条回归分析
- R语言区间数据回归分析
- R语言ggsurvplot绘制生存曲线报错 : object of type ‘symbol‘ is not subsettable
- R软件SIR模型网络结构扩散过程模拟