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 相关文章推荐
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
Node与Python 双向通信的实现代码
Jul 16 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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
模仿OSO的论坛(四)
2006/10/09 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python基础之getpass模块详细介绍
2017/08/10 Python
Python温度转换实例分析
2018/01/17 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
Python进程池Pool应用实例分析
2019/11/27 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
文化与传播毕业生求职信
2014/03/09 职场文书
爱国演讲稿400字
2014/05/07 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
幼师辞职信范文
2015/02/27 职场文书
小学同学聚会感言
2015/07/30 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers