作者: admin

  • nodejs表单请求和接受

    nodejs 表单 get post

     

    1,post

    要接受到表单post传过来的数据要先安装

    npm install --save body-parser

    安装完成之后就能以req.body.name方式接受数据

     

     

    HTML:

    //index.ejs
    
    <form action="/getpage?tijiao=ok" method="post">
      <input type="text" name="name" /> <br>
      <input type="text" name="pass" />
      <button type="submit">提交</button>
    </form>

     

    //getpage.ejs
    
    <h1><%= user %></h1>
    <h1><%= pass %></h1>

     

     

     

    index.js

    router.use(require('body-parser')());  //载入body-parser
    
    router.post('/getpage', function(req, res) {  //请求的页面要使用post
      res.render('getpage', { user: req.body.name,pass:req.body.pass });
    });
    

     

     

    2,get

    要接收表单get请求过来的数据

    router.get('/getpage', function(req, res) { //请求的页面要使用post
     res.render('getpage', { user: req.query.name,pass:req.query.pass });
    });

     

     

  • nodejs console.log 调试

    node.js 简单 调试 工具

    我们在写js的时候要查看一个对象或者方法可以把它们放在console.log()中,然后打开浏览器到控制台去查看结果。在nodejs中我们也想像在页面中查看服务器提供的对象里面包含了些什么,但是在nodejs中不能使用浏览器去直接查看服务器的js代码,我们只能通过DOS界面去查看,例如:

     

    // 1.js 里面写了mysql的连接
    
    
    var mysql = require('mysql');
    var conn = mysql.createConnection({
     host: 'localhost',
     user: 'root',
     password: '187',
     database:'liuyan',
     port: 3306
    });
    conn.connect();
    
    
    function query(select_sql,callback){
     conn.query(select_sql,callback );
    }
    
     
    //断开连接
    function disconnect(){
     conn.end();
    }
    
    exports.query = query;
    exports.disconnect = disconnect;
    exports.conn = conn;
    
    
    
    
    console.log(conn); //需要看什么就放里面

    可以看到mysql.js提供了很多对外的接口但是我们不知道怎么使用需要查看一些它提供了那些方法,这时候只需要在DOS界面输入:

    node 1.js

    就能查看到在1.js 中写到的console.log(conn);  中conn提供的方法了,图:

    mysqlconsole

     

  • nodejs连接mysql

    node.js nodejs mysql 连接

     

    本教程是在安装了nodejs和express框架的情况下

    1,安装mysql包

    npm install mysql

     

    2,创建一个简单mysql数据库《mysql创建数据库建表字段实例

     

    3,nodejs连接数据库

    在工作目录下创建一个文件夹models存放连接数据库的js文件如:

    // 1.js
    
    var mysql = require('mysql');
    var conn = mysql.createConnection({
      host: 'localhost',
      user: 'root',
      password: '187',
      database:'liuyan',
      port: 3306
    });
    
    //数据连接
    conn.connect();
    
    
    function query(select_sql,callback){
      conn.query(select_sql,callback );  //数据库的执行
    }
    
     
    //断开连接
    function disconnect(){
     conn.end();
    }
    
    exports.query = query; //对外提供接口,这样其他页面的js就能访问这个方法了
    exports.disconnect = disconnect;

     

    在路由目录 routes 的index.js中修改如下:

    var express = require('express');
    var router = express.Router();
    var data = require('../models/1'); //这里加载后,才能访问到此js对外提供的接口,返回的是对象
    
    /* GET home page. */
    router.get('/', function(req, res, next) {
     
      data.query("SELECT * FROM liuyan_user",function(err, rows, fields) {  //1.js提供的接口  注意:执行mysql shell最好使用双引号
        res.render("index",{title:rows[2].liuyan_username}); //rows就是返回来的一个json
      });
     
    });
    
    
    module.exports = router;

    在刷新下页面就能看到显示数据了

    参考文章:

    http://blog.fens.me/nodejs-mysql-intro/

    http://blog.fens.me/nodejs-async/

    http://zhouchenwen.sinaapp.com/?p=504

     

  • Express框架目录结构介绍

    nodejs 框架

    安装最新express框架

    npm install express

     

    Express框架就类似于php一样有自己的众多框架一样,都是把常用的组建封装好可以重复调用。

    目录结构

    接下来,我们详细看一下Express4项目的结构、配置和使用。

    • bin, 存放启动项目的脚本文件
    • node_modules, 存放所有的项目依赖库。
    • public,静态文件(css,js,img)
    • routes,路由文件(MVC中的C,controller)
    • views,页面文件(Ejs模板)
    • package.json,项目依赖配置及开发者信息
    • app.js,应用核心配置文件

    express_2

     

     

    package.json项目配置

    package.json用于项目依赖配置及开发者信息,scripts属性是用于定义操作命令的,可以非常方便的增加启动命令,比如默认的start,用npm start代表执行node ./bin/www命令。

    查看package.json文件。去看之前的《grunt入门教程》你就不会觉得陌生了不然学起来吃力

    {
     "name": "express4-demo",
     "version": "0.0.0",
     "private": true,
     "scripts": {
     "start": "node ./bin/www"
     },
     "dependencies": {
     "body-parser": "~1.10.2",
     "cookie-parser": "~1.3.3",
     "debug": "~2.1.1",
     "ejs": "~2.2.3",
     "express": "~4.11.1",
     "morgan": "~1.5.1",
     "serve-favicon": "~2.2.0"
     }
    }

     

    app.js核心文件

    从Express3.x升级到Express4.x,主要的变化就在app.js文件中。查看app.js文件,我已经增加注释说明。

    // 加载依赖库,原来这个类库都封装在connect中,现在需地注单独加载
    var express = require('express'); 
    var path = require('path');
    var favicon = require('serve-favicon');
    var logger = require('morgan');
    var cookieParser = require('cookie-parser');
    var bodyParser = require('body-parser');
    
    // 加载路由控制
    var routes = require('./routes/index');
    //var users = require('./routes/users');
    
    // 创建项目实例
    var app = express();
    
    // 定义EJS模板引擎和模板文件位置,也可以使用jade或其他模型引擎
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'ejs');
    
    // 定义icon图标
    app.use(favicon(__dirname + '/public/favicon.ico'));
    // 定义日志和输出级别
    app.use(logger('dev'));
    // 定义数据解析器
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    // 定义cookie解析器
    app.use(cookieParser());
    // 定义静态文件目录
    app.use(express.static(path.join(__dirname, 'public')));
    
    // 匹配路径和路由
    app.use('/', routes);
    //app.use('/users', users);
    
    // 404错误处理
    app.use(function(req, res, next) {
        var err = new Error('Not Found');
        err.status = 404;
        next(err);
    });
    
    // 开发环境,500错误处理和错误堆栈跟踪
    if (app.get('env') === 'development') {
        app.use(function(err, req, res, next) {
            res.status(err.status || 500);
            res.render('error', {
                message: err.message,
                error: err
            });
        });
    }
    
    // 生产环境,500错误处理
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: {}
        });
    });
    
    // 输出模型app
    module.exports = app;

     

     

    另外,原来用于项目启动代码也被移到./bin/www的文件,www文件也是一个node的脚本,用于分离配置和启动程序。

    查看./bin/www文件。

    #!/usr/bin/env node   
    
    /**
     * 依赖加载
     */
    var app = require('../app');
    var debug = require('debug')('nodejs-demo:server');
    var http = require('http');
    
    /**
     * 定义启动端口
     */
    var port = normalizePort(process.env.PORT || '3000');
    app.set('port', port);
    
    /**
     * 创建HTTP服务器实例
     */
    var server = http.createServer(app);
    
    /**
     * 启动网络服务监听端口
     */
    server.listen(port);
    server.on('error', onError);
    server.on('listening', onListening);
    
    /**
     * 端口标准化函数
     */
    function normalizePort(val) {
      var port = parseInt(val, 10);
      if (isNaN(port)) {
        return val;
      }
      if (port >= 0) {
        return port;
      }
      return false;
    }
    
    /**
     * HTTP异常事件处理函数
     */
    function onError(error) {
      if (error.syscall !== 'listen') {
        throw error;
      }
    
      var bind = typeof port === 'string'
        ? 'Pipe ' + port
        : 'Port ' + port
    
      // handle specific listen errors with friendly messages
      switch (error.code) {
        case 'EACCES':
          console.error(bind + ' requires elevated privileges');
          process.exit(1);
          break;
        case 'EADDRINUSE':
          console.error(bind + ' is already in use');
          process.exit(1);
          break;
        default:
          throw error;
      }
    }
    
    /**
     * 事件绑定函数
     */
    function onListening() {
      var addr = server.address();
      var bind = typeof addr === 'string'
        ? 'pipe ' + addr
        : 'port ' + addr.port;
      debug('Listening on ' + bind);
    }

     

    路由功能

    路由功能,是Express4以后全面改版的功能。在应用程序加载隐含路由中间件,不用担心在中间件被装载相对于路由器中间件的顺序。定义路由的方式是不变的,路由系统中增加2个新的功能。

    app.route()函数,创建可链接的途径处理程序的路由路径。
    express.Router类,创建模块化安装路径的处理程序。
    app.route方法会返回一个Route实例,它可以继续使用所有的HTTP方法,包括get,post,all,put,delete,head等。

    app.route('/users')
      .get(function(req, res, next) {})
      .post(function(req, res, next) {})

    express.Router类,则可以帮助我们更好的组织代码结构。在app.js文件中,定义了app.use(‘/’, routes); routes是指向了routes目录下的index.js文件,./routes/index.js文件中,express.Router被定义使用,路径/*处理都会由routes/index.js文件里的Router来处理。如果我们要管理不同的路径,那么可以直接配置为多个不同的Router。

    app.use('/user', require('./routes/user').user);
    app.use('/admin', require('./routes/admin').admin);
    app.use('/', require('./routes'));

    Express框架 APl:http://expressjs.jser.us/api

  • nodejs简单搭建网站(推荐)

    nodejs www 目录 express 安装

    要使用nodejs写我们第一个程序需要安装nodejs环境和npm,可以查看grunt入门教程里面就有介绍安装nodejs环境和npm以及grunt前端集成解决方案工具。此文章推荐看不然后面对nodejs了解可能吃力。其次也看下nodejs npm install全局安装和本地安装的区别。最后选择性看下简单说明Google研发的V8 JavaScript引擎。上面的都看了你也对nodejs有点初步印象了。

     

    现在我们来建立一个简单的www网站组合是nodejs+express+ejs+mysql

    nodejs 相当于 php

    express框架 相当于 thinkphp里面有自己封装好的属性和方法

    ejs模板 相当于 bootstrap   (Jade模板比较好但是介于学习使用传统类似html模板容易学习)

     

    1,安装express

    npm install -g express-generator
    接着执行
    npm install express -gd  //全局安装(npm install express局部安装)
    
    -g代表安装到NODE_PATH的lib里面,而-d代表把相依性套件也一起安装。如果沒有-g的话会安装目前所在的目录(会建立一个node_modules的文件夹)。
    
    

     

    查看版本号是否安装成功

     express -V # 检查express的版本

     

    2,建立工作目录

    建立一个目录作为自己的www工作目录

    cd D:\workspace\javascript # 进入工作目录
    
    
    接下来,我们使用express的命令,来创建项目了。
    D:\workspace\javascript>express -e nodejs-demo # 创建项目
    
    
    进入项目目录,下载依赖库,构建项目。
    D:\workspace\javascript>cd nodejs-demo && npm install

    以上步骤完成之后你进入到工作目录会看到nodejs-demo目录生成,里面有如下图:

    nodejswww

     

     

     

    3,开始启动项目

     D:\workspace\javascript\nodejs-demo>npm start

    wwwok

    看到此图启动项目就成功了,记住以后每次修改app.js配置时候都要ctrl+c结束在重新输入npm start来重新启动。

     

     

    4,项目启动成功,打开浏览器 http://localhost:3000,就可以看到显示的页面了。

    www1

    看到这里就感动了

     

     

    5,ejs安装

    为什么安装这个?如果你是写php或者asp在或者是见多html了,它可以帮你找回之前的感觉。

    去到之前创建好的工作(nodejs-demo)目录下安装

    npm install ejs

    一些ejs介绍:

    http://blog.csdn.net/zhangxin09/article/details/18409119

    http://sunnyhl.iteye.com/blog/1985539

    http://www.cnblogs.com/xuanhun/p/3922847.html

     

    6,安装成功之后修改app.js,修改成如下:

    // view engine setup
    app.set('port',process.env.PORT || 3000);
    app.set('views', path.join(__dirname, 'views'));
    app.engine('.html',require('ejs').__express);
    app.set('view engine','html');
    
    var ejs = require('ejs');
    ejs.delimiter = '?';
    app.engine('ejs',ejs.renderFile);

     

    7,创建一个html

    进入到views目录创建如下代码:

    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title><?= title ?></title>
    </head>
      <body>
         <?= title ?>
      </body>
    </html>

     

     

    8,添加内容

    进入到routes目录修改index.js

    res.render('index', { title: '代码测试' });

     

    9,重启

    你会发现我们在html里面插入的<?= title ?> 能解析成功了

     

    10,简单认识一下Express框架目录结构介绍

     

    11,安装supervisor

    我们在修改网站的时候都是边修改边刷新页面看看效果,由于nodejs自身原因每次要看修改的效果总要手动去结束进程在npm start一次太麻烦了所以supervisor也是必须要安装的

    npm install supervisor -g
    
    安装完之后再也不用每次npm start启动了以后就使用
    
    supervisor ./bin/www  (网上教程都是 在后面加上app.js那是express的老版本了,新版本把启动项独立到了bin目录下的www文件了)

     

    12,node.js与mysql数据库的交互《nodejs连接mysql

     

    13,页面拆分

    header.ejs, 为页面的头部区域
    index.ejs, 为内容显示区域
    footer.ejs,为页面底部区域

     

    编辑header.ejs。

    
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <title><%= title %></title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
    

    编辑footer.ejs。

    
        <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <div style="border:1px solid red">
          <%= foot %>  //额外插入了一个变量
        </div>
      </body>
    </html>
    

    编辑index.ejs。

    
    <% include header.ejs %>
    
    <div class="well jumbotron">
    <h1><%= title %></h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
    
    <% include footer.ejs %>

     

    在路由文件夹中修改index.js如

    res.render("index",{
         title:rows[2].liuyan_username,
         foot:'这里是底部'
    });

     

     

    14,调试工具console.log()查看nodejs提供的对象里面提供了哪些属性和方法

    nodejs console.log 调试

     

     

    15,post、get接受和请求

    nodejs表单请求和接受

    文章来自:http://blog.fens.me/nodejs-express4/