zoukankan      html  css  js  c++  java
  • 使用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安装目录loglog.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/
    就在浏览器可以调试服务器端代码。

  • 相关阅读:
    131. Palindrome Partitioning
    130. Surrounded Regions
    129. Sum Root to Leaf Numbers
    128. Longest Consecutive Sequence
    125. Valid Palindrome
    124. Binary Tree Maximum Path Sum
    122. Best Time to Buy and Sell Stock II
    121. Best Time to Buy and Sell Stock
    120. Triangle
    119. Pascal's Triangle II
  • 原文地址:https://www.cnblogs.com/chenhao1990/p/4628626.html
Copyright © 2011-2022 走看看