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 相关文章推荐
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
Angular实现form自动布局
Jan 28 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
vue-axios使用详解
May 10 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
js实现简易计算器功能
Oct 18 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
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中的正规表达式(二)
2006/10/09 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
详解Python装饰器由浅入深
2016/12/09 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Python实现微信小程序支付功能
2019/07/25 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
python中get和post有什么区别
2020/06/19 Python
Pandas的Apply函数具体使用
2020/07/21 Python
求职自荐信格式
2013/12/04 职场文书
公司活动总结范文
2014/07/01 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
医学会议开幕词
2016/03/03 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang