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 相关文章推荐
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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的FTP学习(二)
2006/10/09 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
php session安全问题分析
2011/06/24 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
php实现微信企业转账功能
2018/10/02 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
渡河少年教学反思
2014/02/12 职场文书
创先争优承诺书范文
2014/03/31 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
岗位聘任报告
2015/03/02 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers