近期在看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: resData
  37.          });
  38.      });
  39.  });
  40.  
  41.  //1 可以直接用Form表单方式提交数据
  42.  //2 或者通过页面脚本绑定事件响应结合JQuery的Ajax
  43.  //  实现调用路由（controller）接口将数据写入数据库
    //一般开发中会在页面脚本中调用很多其他或者外部接口//【该方式比较常用 即就把路由方法当成一个对外的接口】
  1.  router.post('/insert', function (req, res) {
  2.      var params = req.body;
  3.     //MogoDB中可以用Create方法添加数据
  4.      TestModel.create(params, function (err) {
  5.          if (err) res.end('{result:-1}');
  6.          else {
  7.              TestModel.find({}, function (error, data) {
  8.                  if (error) res.end('{result:-1}');
  9.                  else {
  10.                      res.end('{result:1,data:' + data + '}');
  11.                  }
  12.              });
  13.          }
  14.      });
  15.  });
  16.  module.exports = router;

View

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

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title><%= title %></title>
  6.      <link rel="stylesheet" href="/css/style.css">
  7.  </head>
  8.  <body>
  9.  
  10.  <div id="ShowDataArea">
  11.      <h4>此处展示 录入的数据 （用Ejs模板方式）</h4>
  12.      <span>多条数据采用forEach处理</span>
  13.      <% testData.forEach(function(testModel){ %>
  14.      <ul>
  15.          <li><span>编号</span><span><%= testModel.SortID %></span></li>
  16.          <li><span>姓名</span><span><%= testModel.Name %></span></li>
  17.          <li><span>性别</span><span><%= testModel.Sex %></span></li>
  18.          <li><span>地址</span><span><%= testModel.Address %></span></li>
  19.      </ul>
  20.      <% }) %>
  21.  
  22.  </div>
  23.  <div id="ShowArea">
  24.      <h4>采用 <%= title %> 测试Node - MongoDB 数据 写入/修改/删除/回显等</h4>
  25.      <hr>
  26.      <div id="SortID"><span>编号</span><input type="text" placeholder="编号"/></div>
  27.      <div id="Name"><span>姓名</span><input type="text" placeholder="姓名"/></div>
  28.      <div id="Sex"><span>性别</span><input type="text" placeholder="性别"/></div>
  29.      <div id="Address"><span>地址</span><input type="text" placeholder="地址"/></div>
  30.      <button id="uploadData">OK</button>
  31.  </div>
  32.  
  33.  </body>
  34.  <script type="text/javascript" src="/plug-in/jquery-1.9.1.js"></script>
  35.  <script type="text/javascript" src="/js/testPage.js"></script>
  1. <!--页面JS如下-->
  1.   </html>

页面脚本：JS

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

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

//初版Demo

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

NodeJS+Express+MongoDB 简单实现数据录入及回显展示【适合新人刚接触学习】的更多相关文章

  1. nodejs+express+mongodb简单的例子

    简单的介绍下node+express+mongodb这三个东西.node:是运行在服务器端的程序语言,表面上看过去就是javascript一样的东西,但是呢,确实就是服务器语言,个人觉得在一定层次上比 ...

  2. NodeJS+Express+MongoDB 简单个人博客系统【Study笔记】

    Blog 个人博客系统 iBlog是在学习NodeJs时候一个练手项目Demo 系统支持用户注册/登录,内容文章查看,评论,后台管理(定制显示的分类版块,进行文章内容添加)超级管理员还可进行用户管理等 ...

  3. NodeJS+Express+MongoDB

    一.MongoDB MongoDB是开源,高性能的NoSQL数据库:支持索引.集群.复制和故障转移.各种语言的驱动程序丰富:高伸缩性:MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言 ...

  4. 【重点突破】—— Nodejs+Express+MongoDB的使用基础

    前言:最近学习vue和react的高阶项目,都需要和Nodejs+Express+MongoDB结合实现全栈开发.这里结合实例Demo和所学项目集中总结一下这部分服务端的基础知识. 一.Express ...

  5. nodejs+express+mongodb实现登录注册

    nodejs+express+mongodb实现登录注册 1 简介 登录注册功能使用nodejs+express+mongodb完成,其中对mongodb的操作使用mongoose完成,对mongod ...

  6. 从无到有，用Nodejs+express+mongodb搭建简易登陆系统

    前端处理server表示很蛋疼,初学Node,虽然感觉异常强大,但是学起来还是有些吃力的,Node是工具,它不是万能的,搭建一个系统还是需要借助其他一些工具,对于我这个没怎么接触server的前端来说 ...

  7. NodeJs+Express实现简单的Web增删改查

    前一段时间,公司组织了一次NodeJs的技术分享,自己有幸去听了听,第一次接触NodeJs,后来经过自己学习和探索,完成了一个很简单的Web演示项目,在这里和初学者做以分享,开发工具:WebStorm ...

  8. Nodejs&express+mongodb完成简单用户登录(即Nodejs入门)

    刚了解nodejs,发现nodejs配置起来不复杂,但也有很多需要注意的地方,今天就记录一下,以后也可拿出来看看. 要完成这个简单的示例,从零开始,走三步就行了. 一.搭建开发环境 二.创建项目(ex ...

  9. nodejs+express+mongodb写api接口的简单尝试

    1:启动mongodb服务 我的mongoDB的安装目录:E:\mongoDB\bin,版本:3.4.9 打开cmd  -> e:(进入e盘) -> cd mongoDB/bin(进入mo ...

随机推荐

  1. 解决ubuntu更新中断后报错问题

    今天在更新ubuntu的时候,更新了一半被我强制关闭了,就报错了 当再使用sudo apt-get update命令时出现了dpkg was interrupted,you must manually ...

  2. spring-AOP-ProxyFactoryBean代理的实例

    1.一个代理模式的实例 通过 Proxy类进行代理 wait.java //定义一个接口 public interface wait { void say(); } //目标对象实现接口并重写方法 p ...

  3. Linux shell-tail

    使用tail --help查看命令用于备忘 tail [  -f ] [  -c Number |  -n Number |  -m Number |  -b Number |  -k Number ...

  4. zabbix_agent-linux下的安装

    scp 10.25.133.184:/usr/local/zabbix-2.4.1.tar.gz /usr/local 1.为了安全考虑zabbix只使用普通用户运行,假如你当前用户叫ttlsa,那么 ...

  5. 基于ThinkPHP 5.0与Vue.JS 2.x的前后端开源开发框架VueThink

    VueThink 项目介绍 VueThink是一套基于Vue全家桶(Vue2.x + Vue-router2.x + Vuex)+ Thinkphp的前后端分离框架. 脚手架构建也可以通过vue官方的 ...

  6. 老李案例分享：Weblogic性能优化案例

    老李案例分享:Weblogic性能优化案例 POPTEST的测试技术交流qq群:450192312 网站应用首页大小在130K左右,在之前的测试过程中,其百用户并发的平均响应能力在6.5秒,性能优化后 ...

  7. SpringMVC基础学习(三)—参数绑定

    一.基本数据类型的绑定 页面 <form action="${pageContext.request.contextPath}/test.do" method="p ...

  8. 02 Learning to Answer Yes/No

    Perceptron Learning Algorithm 感知器算法, 本质是二元线性分类算法,即用一条线/一个面/一个超平面将1,2维/3维/4维及以上数据集根据标签的不同一分为二. 算法确定后, ...

  9. Kubernetes环境下的各种调试方法

    作者:Jack47 转载请保留作者和原文出处 欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 本文介绍在Kubernetes环境下的调试方法,希望对读者有用.如果关 ...

  10. hdoj_2546饭卡(强忍悲痛，好好写题解)

    Problem Description 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负) ...