博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
NodeJS+Express+MongoDB 简单实现数据录入及回显展示【Study笔记】
阅读量:4316 次
发布时间:2019-06-06

本文共 5537 字,大约阅读时间需要 18 分钟。

近期在看NodeJS相关

不得不说NodeJS+Express 进行网站开发是很不错,对于喜欢玩JS的来说真是很好的一种Web开发组合

在接触NodeJS时受平时Java或者C#中API接口等开发的思维惯性,类比着去学习了解发现其实很多都是通性的

特别是NodeJS中一个JS文件中方法通过exports可以在其他文件中进行require这种机制,不就类似Java中import(导入架包/引用类)?不就类似C#中Using(DLL组件或者引用类)么?

MVC模式下Web开发,其中对应在NodeJS中的路由(Router)不就是Controller? 其它M/V中想想都是一样,这样去一类比其实上手就赶脚一通百通

接下来就是些特定语言有特定的实现方式语法及特色

个人觉得在复杂的工程:其实前后端分离后,不就是后端怎么CRUD数据?前端怎么去使用接口回显数据对其交互等等;

工程的复杂性主要体现在业务逻辑实现/数据安全/Web性能/体验等等等吧

----扯多了-----------------------------------------------------

//在接触学习中,首先尝试了怎么去搭建工程连接数据库

下面就练手Test 做一个简单的Demo总结一下

适合新手刚开始接触的人

在Demo中主要是实现了怎么连接MongoDB数据库以及从数据库回显数据/还有往数据库中写入数据

//算是入门级的Demo走通了数据录入及回显

如下图:左侧展示录入的数据//右侧填写数据后点击OK 按钮数据就写入数据库

测试的录入的数据

//------------------------------------------------------------------------------------------------------------------------------------------------------------

首先环境安装啥的在理就不在赘述哈

创建Express 【Ejs模板的】工程 及Npm MongoDB 后 搭建对应文件夹【图中我的工程里面就加了一个Models】

关于其他文件夹百度上有很多对应说明介绍

//工程中我就采用默认路由 Index 【另外一个Users 我在程序入口 App.js中注释掉了(没啥业务含量用不上)】

首先是Models目录中

创建了个连接MongoDB数据库及构建数据

【上图中 TestDB.js 内容】

1 /** 2  * Created by Yi on 2017/5/8. 3  */ 4  5 //testDB Model 6  7 //创建 mongodb数据库连接 8  9 var mongoose = require('mongoose');10 var DB = mongoose.connect('mongodb://localhost:27017/testAppDB');//红色为数据库名11 12 //13 mongoose.connection.on("open", function () {14     console.log("数据库连接成功");15 });16 17 //18 mongoose.connection.on("error", function (error) {19     console.log("数据库连接失败" + error);20 });21 //创建数据文档模板【在SQL数据库中 即一个表(列名字段等) NoSQL数据库中即数据文档(成员变量名)】22 var testSchema = new mongoose.Schema({23     SortID: {type: String},24     Name: {type: String},25     Sex: {type: String},26     Address: {type: String},27     timeDate: {type: Date, default: Date.now()}28 });29 30 module.exports = mongoose.model('TestModel', testSchema);

//下面在构造一个数据Model“类”

1 /** 2  * Created by Yi on 2017/5/8. 3  */ 4  5 // 上传/回显数据通用 数据Model 6 var tempModel = { 7     SortID: "", 8     Name: "", 9     Sex: "",10     Address: "",11     timeDate: ""12 };13 14 module.exports = tempModel;

Router【即 Controller 层】

1 var express = require('express'); 2 var router = express.Router(); 3  4 //引用连接数据库Model 5 var TestModel = require('../models/testDB'); 6  7 // test 数据 8  9 // var resData = [];10 // resData.push(11 //     {
12 // SortID: "1",13 // Name: "A",14 // Sex: "女",15 // Address: "SSS",16 // timeDate: "05-08"17 // }18 // );19 // resData.push(20 // {
21 // SortID: "2",22 // Name: "B",23 // Sex: "男",24 // Address: "XXX",25 // timeDate: "05-08"26 // }27 // );28 29 // 初始化回显 数据库已录入数据30 router.get('/', function (req, res, next) {31 // res.render('testDB', {title: 'Express'});32 TestModel.find({}, function (err, resData) {33 if (err) return next(err);34 res.render('index', {35 title: "TestDB",36 testData: resData37 });38 });39 });40 41 //1 可以直接用Form表单方式提交数据42 //2 或者通过页面脚本绑定事件响应结合JQuery的Ajax43 // 实现调用路由(controller)接口将数据写入数据库 //一般开发中会在页面脚本中调用很多其他或者外部接口//【该方式比较常用 即就把路由方法当成一个对外的接口】
45 router.post('/insert', function (req, res) {46     var params = req.body;47    //MogoDB中可以用Create方法添加数据48     TestModel.create(params, function (err) {49         if (err) res.end('{result:-1}');50         else {51             TestModel.find({}, function (error, data) {52                 if (error) res.end('{result:-1}');53                 else {54                     res.end('{result:1,data:' + data + '}');55                 }56             });57         }58     });59 });60 module.exports = router;

View

我这直接在Index中修改页面【创建Express时采用的Ejs模板】当然用Html的也可以都是一样的

1  2  3  4     
5 <%= title %> 6
7 8 9 10
11

此处展示 录入的数据 (用Ejs模板方式)

12
多条数据采用forEach处理13 <% testData.forEach(function(testModel){ %>14
    15
  • 编号<%= testModel.SortID %>
  • 16
  • 姓名<%= testModel.Name %>
  • 17
  • 性别<%= testModel.Sex %>
  • 18
  • 地址<%= testModel.Address %>
  • 19
20 <% }) %>21 22
23
24

采用 <%= title %> 测试Node - MongoDB 数据 写入/修改/删除/回显等

25

26
编号
27
姓名
28
性别
29
地址
30
31
32 33 34 35 36
37 

页面脚本:JS

10 var tempModel = {11     SortID: "",12     Name: "",13     Sex: "",14     Address: "",15     timeDate: ""16 };17 18 $(function () {19     $("#uploadData").on("click", function () {20         alert("上传数据到MongoDB中");21         //构造数据类22         tempModel.SortID = $("#SortID").find("input").val();23         tempModel.Name = $("#Name").find("input").val();24         tempModel.Sex = $("#Sex").find("input").val();25         tempModel.Address = $("#Address").find("input").val();26         tempModel.timeDate = Date.now();27 28         //通过Ajax更新数据29         $.ajax({30             type: 'post',31             // url: "http://localhost:3000/insert",32             url: "/insert",33             dataType: "json",34             data: tempModel,35             success: function (resData) {36                 if (resData.result == 1) {37                     //更新页面列表38                     alert('resData');39                 }40             },41             error: function (error) {42                 alert('error:' + error);43             }44         });45     });46 });

//现在在回过来想想,结合常规MVC模式的Web开发去类比,这不就是一回事哈~~

//初版Demo

//后期NodeJS学习了解中会根据掌握,继续添加相应模块

 

转载于:https://www.cnblogs.com/Hizy/p/6832723.html

你可能感兴趣的文章
代码示例_进程
查看>>
Java中关键词之this,super的使用
查看>>
学习进度
查看>>
“此人不存在”
查看>>
github.com加速节点
查看>>
解密zend-PHP凤凰源码程序
查看>>
python3 序列分片记录
查看>>
Atitit.git的存储结构and 追踪
查看>>
atitit 读书与获取知识资料的attilax的总结.docx
查看>>
B站 React教程笔记day2(3)React-Redux
查看>>
找了一个api管理工具
查看>>
Part 2 - Fundamentals(4-10)
查看>>
使用Postmark测试后端存储性能
查看>>
NSTextView 文字链接的定制化
查看>>
第五天站立会议内容
查看>>
CentOs7安装rabbitmq
查看>>
(转))iOS App上架AppStore 会遇到的坑
查看>>
解决vmware与主机无法连通的问题
查看>>
做好产品
查看>>
项目管理经验
查看>>