zoukankan      html  css  js  c++  java
  • Node.js 搭建Web

    Express

    Express 是整个 Node.js 之中最为常见的一个框架(开发包),可以帮助我们快速构建一个WEB项目。(http://expressjs.com

    1.在 F 盘新建 nodejsdemo,cd nodejsdemo ,执行

    npm install express

    F: odejsdemo,可想象为 Eclipse 的工作区,一个工作区可定义多个项目。

    2.创建express项目,在 F: odejsdemo 中有了 myprojuect 文件夹,目录详细如下

    F:
    odejsdemo>express -e myproject
    
       create : myproject
       create : myproject/package.json
       create : myproject/app.js
       create : myproject/public
       create : myproject/public/javascripts
       create : myproject/public/images
       create : myproject/public/stylesheets
       create : myproject/public/stylesheets/style.css
       create : myproject/routes
       create : myproject/routes/index.js
       create : myproject/routes/user.js
       create : myproject/views
       create : myproject/views/index.ejs
    
       install dependencies:
         $ cd myproject && npm install
    
       run the app:
         $ node app

    app.js 作为了整个程序运行的主文件,即:只需要执行它,就可以运行 HTTP Server

    app.set('port', process.env.PORT || 3000);
    
    http.createServer(app).listen(app.get('port'), function(){
      console.log('Express server listening on port ' + app.get('port'));
    });

    此时,Http服务将在 3000 端口监听用户请求。启动服务器方式如下

    F:
    odejsdemomyproject>node app.js
    Express server listening on port 3000

    打开浏览器输入:http://localhost:3000/,会发现 Http 服务报错缺少 ejs,ejs 在 app.js 有定义,下载 ejs

    F:
    odejsdemo>npm install ejs

    再次打开http://localhost:3000/,显示正常, 默认的页面保存在 myproject/views 中。

    node_modules   存放所有项目的依赖库

    package.json     项目依赖配置和开发者信息

    app.js               程序启动文件

    public                静态文件(css、js、img)

    routes               路由文件(MVC 中的C,controller)

    views                页面文件(ejs 模板)

    2.安装 supervisor

    为了方便开发,不用每次修改 app.js 之后都重新启动,安装 supervisor 执行 supervisor app.js ,会自动加载新的 app.js 。

    F:
    odejsdemo>npm install -g supervisor

    3.ejs

    ejs 是 web 的模板引擎之一,EJS 是一个Javascript模板库,用来从 Json 数据中生成 HTML 字符串。可方便的给用户明确、维护性良好的HTML结构。

    保存所有页面都保存在 views 中,此时的 index.ejs 是一个HTML页面,若要修改为 html 格式则需要配置模板

    1)在 app.js 定义加载的模块,并增加相关配置

    var ejs = require('ejs');
    app.engine('html',ejs.__express);
    app.set('view engine', 'html');    //修改 app.set('view engine', 'html');

    2)index.ejs 名改为 index.html

    建立登录功能 :login.html、welcome.html,注意:所有的文件格式必须为 UTF-8

    index.html

    <!DOCTYPE html>
    <html>
      <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
        <p><a href="login">用户登录</a></p>    
      </body>
    </html>

    login.html

    <!DOCTYPE html>
    <html>
      <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
       <h1><%= title %></h1>
    <form method="post">
        用 户:<input type="text" name="userid" id="userid"><br>
        密 码:<input type="password" name="password" id="password"><br>
        <input type="submit" value="登录">
        <input type="reset" value="重置">
    </form>
    </body>
    </html>

    welcome.html

    <!DOCTYPE html>
    <html>
      <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
        <h1>欢迎<%=user.userid%>光临!</h1>
        <h1><a href="logout">注销</a></h1>
      </body>
    </html>

    在每一个页面之中并没有定义直接的链接,因为 Node.js  依然属于 MVC 设计模式范畴,所以针对 MVC 的实现,此处所编写的全部都属于映射名称,所有的映射路径都需要通过 app.js 进行相应的路由配置。

    配置 app.js

    app.get('/', routes.index);            //进入首页
    app.get('/login', routes.login);    //此处还需配置 routes/index.js 
    app.post('/login', routes.doLogin);    //post请求,表单提交。
    app.get('/logout', routes.logout);    //注销  (通过logout找到routes/index.js中exports.logout,完成页面跳转。)
    app.get('/welcome', routes.welcome);//欢迎

    routes/index.js 配置相关的回调函数 

    exports.index = function(req, res){
      res.render('index', { title: '首页' });
    };
    exports.login = function(req, res){
      res.render('login', { title: '登录' });    //res.render--跳转至login页面
    };
    exports.doLogin = function(req, res){
        var user = {userid:'admin',password:'123456'};    // 定义用户密码
        if(req.body.userid==user.userid && req.body.password==user.password){
            res.redirect('welcome?uid='+user.userid);    // 重定向    res.redirect--app.js必须配置/welcome(app.get('/welcome', routes.welcome))
        }else{
            res.render('login', { title: '重新输入' });
        }
    };
    exports.logout = function(req, res){
      res.render('index', { title: '注销' });
    };
    exports.welcome = function(req, res){
      //如果是地址栏参数可 req.query.参数名称 接收
      var user = {userid:req.query.uid};
      res.render('welcome', { title: '欢迎', user: user });
    };

    在整个基础过程中,最为重要的步骤就配置 app.js 中的路由,路由的最终控制是通过 routes/index.js 配置,类似于 Servlet ,负责跳转。

  • 相关阅读:
    开发报表的先进工具
    强大的报表前端展现功能
    管理驾驶舱监控大屏展现
    换乘算法【转】
    提交中文数据乱码问题总结
    重定向
    容易遗漏的
    jsp基础语法【转】
    说说Java NIO【转】
    Java读取大文件的操作【转】
  • 原文地址:https://www.cnblogs.com/xuekyo/p/3469994.html
Copyright © 2011-2022 走看看