使用nodejs+express+mongodb开发web的例子

介绍:简单的介绍下nodejs+express+mongodb这三者。

nodejs:是运行在服务器端的程序语言,表面上看过去就是javascript一样的东西,实际是由c++开发是服务器语言。
express:是nodejs的一种web框架,node有很多的开源框架,express是一个大神开发的(这尊神已经移驾到go语言的开发去了)。express可以让你更方便的操作node(因为直接用nodejs写web比较麻烦,nodejs是事件驱动的,所以有很多异步回调,写多了就看着晕...)
mongodb:这是一种非关系数据库(nosql),缺点就是不适合数据一致性要求高的场景。但是优点就快。
总结:也就是说node和mongodb组合起来特别适合一个应用场景——速度快,处理量大的情况。

准备:下面先说说准备工作:(以windows8.1系统环境为例)

  1. node:先下载安装nodejs,下载地址http://www.nodejs.org/,安装好了之后检查是否在系统环境变量里自动配置好了path,如果没有,请把node的安装地址配置到path里去。然后在cmd里敲入node,如果可以,那么这一步ok了,很简单吧。
  2. express:这个安装分两种,一种是全局安装,一种是本地安装。网络上说的玄乎玄乎的,但是实际操作中你会发现不同的系统环境会出现问题,比如win8.1中文用户名情况下,你得改变npm的全局路径(npm是node模块包管理程序,在你安装好node的时候已经自带npm了),操作:

    prefix = 自定义模块目录
    cache = 自定义缓存目录

    接着安装express(新版本4.X以上要安装express-generator)

    npm i -g express(旧版本npm i -g express+版本号)
    npm i -g express-generator

    (如果想本地安装在和npm同一个目录下,先cd到node_modules目录,再使用npm i express-generator命令,然后再将node_modules目录下的./bin配置到环境变量path里去)测试:

    express -V 成功的话会显示版本号
  3. mongodb:这个数据库安装很简单,下载地址http://www.mongodb.org/。安装好了,就在cmd里cd到mongodb安装目录下的bin目录,然后敲命令:mongod --dbpath="mongodb安装目录\data" --logpath="mongodb安装目录\log\log.txt" --install --serviceName MongoDB --serviceDisplayName MongoDB
    操作完,你会发现,你的电脑的服务里多了一个MongoDB服务,没错,就是它,然后你运行这个服务就行了。

正题:搭建简单的node+express+mongodb项目

  1. 先在cmd控制台里cd到一个目录下面,记住这你的workspace,然后是用是用express创建一个app项目

    express hello-world -e #(-e表示支持ejs模板引擎,默认是jaden。)
  2. 然后我们再下载依赖包
    npm i #(这样就会自动将项目需要的依赖modules安装到项目的modules里去了)
  3. 我们cd到hello-world目录下,是用命令
    npm start #启动项目(也可以是node ./bin/www,旧版本直接node app.js,因为具体要看package.json里的启动配置了)
  4. 我们可以在浏览器地址栏里敲入 http://127.0.0.1:3000/ 这就是你的第一个express创建的node app。是不是很哈皮...

我们研究下express创建项目 你需要了解的项目主要目录为:routes和views,你最好再在项目里新建一个目录叫models(作用后面讲)
routes里index.js配置的都是get和post请求的路径映射关系,很简单的哦。
views里index.ejs就相当于一个html文件,里面就是一些html标签和<%%>标签,感觉和jsp差不多哦。 看起来不错的样子,标准的MVC框架
models里放模型,views里面放展示,routes里面放控制

上面我们已经生成好了app原型,接着我们设计数据库

cmd命令行里:

mongo #进入数据库
use hello-world #创建项目数据库
db.addUser("shuaige", "123456") #这个数据库创建了一个叫帅哥的账号,密码123456 (但是我觉得可能我理解的不到位,你也可以不做这个操作)
#然后,我们就为这个hello-world数据库创建collection(collection就相当于oracle和mysql里的table)
db.createCollection("users") #创建一个集合,也就是表
db.users.insert({userid: "admin", password: "123456"}) #给users里添加一个文档,也就是一条记录账号admin,密码123456
ok,现在检查一下:
db.users.find() #如果看到你刚刚添加的文档记录,就ok咯

简单的数据库集合以及文档设置好,我们就回到express创建的node项目里,我们需要:

  • 在models下创建一个user.js,作为实体类映射数据库的users集合
  • 在views下做几个页面(可以用ejs也可以用html,我就用ejs吧)
  • 在routes下的index.js配置路由,也就是请求映射处理
  1. 在models下创建一个user.js,作为实体类映射数据库的users集合
    user.js

    1 var mongoose = require("mongoose");  //  顶会议用户组件
    2 var Schema = mongoose.Schema;    //  创建模型
    3 var userScheMa = new Schema({
    4     userid: String,
    5     password: String
    6 }); //  定义了一个新的模型,但是此模式还未和users集合有关联
    7 exports.user = mongoose.model(‘users‘, userScheMa); //  与users集合关联
  2. 在views下面建index.ejs, errors.ejs, login.ejs, logout.ejs, homepage.ejs。 (index是自带的,不用建)
    index.ejs
     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <title><%= title %></title>
     5     <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
     6   </head>
     7   <body>
     8     <h1>Hello World</h1>
     9     <p>Welcome to <%= title %></p>
    10     <p><a href="login">登陆</a></p>
    11   </body>
    12 </html>

    login.ejs

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <title><%= title %></title>
     5     <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
     6   </head>
     7   <body>
     8     <h1>Hello World</h1>
     9     <p>Welcome to <%= title %></p>
    10     <form action="homepage" method="post">
    11         <p>
    12             <span>userId:</span>
    13             <br>
    14             <input id="userid" name="userid" type="text">
    15         </p>
    16         <p>
    17             <span>password:</span>
    18             <br>
    19             <input id="password" name="password" type="password">
    20         </p>
    21         <p><input type="submit" value="submit"></p>
    22     </form>
    23   </body>
    24 </html>

    logout.ejs

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <title><%= title %></title>
     5     <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
     6   </head>
     7   <body>
     8     <h1>Hello World</h1>
     9     <p>Welcome to <%= title %></p>
    10     <p>正在登出...</p>
    11     <script type="text/javascript">
    12         setTimeout(function(){
    13             window.location.href = "/";
    14         }, 500);
    15     </script>
    16   </body>
    17 </html>

    homepage.ejs

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <title><%= title %></title>
     5     <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
     6   </head>
     7   <body>
     8     <h1>Hello World</h1>
     9     <p>Welcome to <%= title %></p>
    10     <p><a href="logout">登出</a></p>
    11   </body>
    12 </html>

    error.ejs 出错页面,我没做,你有兴趣可以自己试试玩玩。

  3. 在routes下的index.js配置路由,也就是请求映射处理
    index.js

     1 var express = require(‘express‘);
     2 var router = express.Router();
     3 var mongoose = require(‘mongoose‘);
     4 var user = require(‘../models/user‘).user;
     5 mongoose.connect(‘mongodb://localhost/hello-world‘);
     6
     7 /* GET home page. */
     8 router.get(‘/‘, function(req, res) {
     9       res.render(‘index‘, { title: ‘index‘ });
    10 });
    11
    12 /*login*/
    13 router.get(‘/login‘, function(req, res) {
    14     res.render(‘login‘, { title: ‘login‘ });
    15 });
    16
    17 /*logout*/
    18 router.get(‘/logout‘, function(req, res) {
    19       res.render(‘logout‘, { title: ‘logout‘ });
    20 });
    21
    22 /*hompage*/
    23 router.post(‘/homepage‘, function(req, res) {
    24     var query_doc = {userid: req.body.userid, password: req.body.password};
    25     (function(){
    26         user.count(query_doc, function(err, doc){
    27             if(doc == 1){
    28                 console.log(query_doc.userid + ": login success in " + new Date());
    29                 res.render(‘homepage‘, { title: ‘homepage‘ });
    30             }else{
    31                 console.log(query_doc.userid + ": login failed in " + new Date());
    32                 res.redirect(‘/‘);
    33             }
    34         });
    35     })(query_doc);
    36 });
    37
    38 module.exports = router;

    ok,基本上大功告成,可以试试咯。

下面讲讲如何调试服务器端的代码:

我们最好借助一个叫node-inspector的工具包

npm i -g node-inspector #安装node-inspector

然后在cmd里运行

node-inspector

再新打开一个cmd,cd到项目hello-world目录下

node --debug ./bin/www (或者 node --debug-brk ./bin/www , 旧版本express创建的node程序请使用 node --debug app.js)

在浏览器里打开http://127.0.0.1:8080/debug?port=5858
再新建窗口打开http://127.0.0.1:3000/
就在浏览器可以调试服务器端代码。

时间: 2024-12-26 21:23:03

使用nodejs+express+mongodb开发web的例子的相关文章

Express+mongodb开发web后台接口

摘要: express开发web接口 非关系型数据库mongodb 使用nodejs和mongoose模块链接和操作mongodb 一.express express基于nodejs,快速.开发.极简的web开发框架 安装express: npm install express --save server.js文件如下: const express=require('express'); //新建app const app=express(); //客户端访问/时返回一段文本 app.get('

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

前言:最近学习vue和react的高阶项目,都需要和Nodejs+Express+MongoDB结合实现全栈开发.这里结合实例Demo和所学项目集中总结一下这部分服务端的基础知识. 一.Express+mongodb开发web后台接口Demo Express开发web接口 Express:基于nodejs,快速.开放.极简的web开发框架  [官网] 安装express npm install express --save 新建server目录:server.js编写后端代码 const exp

node.js+Express.js+Jade+MongoDB开发Web即时聊天系统视频教程下载

ode.js+Express.js+Jade+MongoDB开发Web即时聊天系统视频教程下载  联系QQ:1026270010  一.课程背景 1.什么是Node.js ? Node.js 是一个可以快速构建网络服务及应用的平台 .该平台的构建是基于Chrome's JavaScript runtime,也就是说,实际上它是对Google V8引擎(应用于Google Chrome浏览器)进行了封装. V8引擎执行Javascript的速度非常快,性能非常好.Node对一些特殊用例进行了优化,

webstorm创建nodejs + express + jade 的web 项目

webstorm创建nodejs + express + jade 的web 项目 前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛? 最近看到使用jade模板来开发,觉得挺新奇的,于是试了一把,也了解了一些特性,算是个新的开始吧. 1.首先下载webstorm,百度一下,有绿色版. 2.下载express模块和jade模块,就不详细说了.然后新建一个项目,选择nodejs express app 然后点击创建即可,一个可以运行的小栗子

nodeJS+Express+MongoDB

目录 一.MongoDB 1.1.安装MongoDB 1.1.1.配置运行环境 1.1.2.运行MongoDB 1.2.数据库操作 1.2.1.创建数据库与查看数据库 1.2.2.删除数据库 1.2.3.插入数据 1.2.4.查询数据 1.2.5.修改 1.2.6.删除 二.NodeJS访问MongoDB 2.1.安装MongoDB访问驱动 2.2.添加数据 2.3.修改数据 2.4.查询数据 2.5.删除数据 三.NodeJS+Express+MongoDB示例 四.示例下载 一.MongoD

NodeJS+Express+MySQL开发小记(2):服务器部署

http://borninsummer.com/2015/06/17/notes-on-developing-nodejs-webapp/ NodeJS+Express+MySQL开发小记(1)里讲过在本地搭建 NodeJS 网站的若干细节.本人最近在阿里云服务器上面按最低配租了4个月的云服务器,所以想试着把这个项目部署到云上.云服务器操作系统是Ubuntu 14.04 LTS.之前一直在Windows下做开发,对于Linux下的环境搭建.配置还不是很熟悉,搭建的过程中学到很多东西. 本文简单记

【转】nodejs+express+mongodb简单的例子

简单的介绍下node+express+mongodb这三个东西.node:是运行在服务器端的程序语言,表面上看过去就是javascript一样的东西,但是呢,确实就是服务器语言,个人觉得在一定层次上比c灵活,java就不提了.反正你只要认为node可以干很多事就行了,绝对不只是web开发.express:这货呢,就是node的一种框架,node有很多的开源框架,express是一个大神开发的(这尊神已经移驾到go语言的开发去了).express可以让你更方便的操作node(因为原生的node写起

nodejs+express+mongodb简单的例子

简单的介绍下node+express+mongodb这三个东西.node:是运行在服务器端的程序语言,表面上看过去就是javascript一样的东西,但是呢,确实就是服务器语言,个人觉得在一定层次上比c灵活,java就不提了.反正你只要认为node可以干很多事就行了,绝对不只是web开发.express:这货呢,就是node的一种框架,node有很多的开源框架,express是一个大神开发的(这尊神已经移驾到go语言的开发去了).express可以让你更方便的操作node(因为原生的node写起

基于NodeJS+Express+mongoDB+Bootstrap的全栈式工程化开发前后端分离博客系统实战

课程目标本课程通过一个完整的项目,让学员了解如何使用Jade+Node.js+Express+mongoDB+Bower+Gulp+Yeoman的组合开发Web应用.可以让学员更深入地掌握Node.js和Express技术. 适用人群node.js程序员,express程序员,JAVAscript程序员 课程简介本系统是一款博客系统,拥有博客必要的功能,如用户注册.用户登录.用户退出.文章列表,文章查看.添加文章,删除文章,修改文章.文章搜索.后台权限控制等. -----------------