zoukankan      html  css  js  c++  java
  • windows 下安装nodejs及其配置环境

    相信对于很多关注javascript发展的同学来说,nodejs已经不是一个陌生的词眼。有关nodejs的相关资料网上已经铺天盖地。由于它的高并发特性,造就了其特殊的应用地位。

    国内目前关注最高,维护最好的一个关于nodejs的网站应该是http://www.cnodejs.org/

    这里不想谈太多的nodejs的相关信息。只说一下,windows系统下简单nodejs环境配置。

    第一步:下载安装文件

      下载地址:http://nodejs.cn/download/

    第二步:安装nodejs

    下载完成之后,双击 ,开始安装nodejs,默认是安装在C:Program Files odejs下面

    第三步:安装相关环境

    打开C:Program Files odejs目录你会发现里面自带了npm,直接用npm安装相环境既可

    在菜单中找到node.js command prompt,进入node.js command prompt 命令窗口

    进入nodejs 安装目录 C:Program Files odejs,键入命令:cd C:Program Files odejs 

    现在开始安装相关环境

    键入命令:npm install express 回车等待安装express........

    键入命令:npm install jade 回车等待安装jade........

    键入命令:npm install mysql回车等待安装mysql........

    ........安装什么组件,取决于环境搭建需求

    默认情况下上述组件都是安装在C:Program Files odejs ode_modules文件夹下 这也是nodejs相关组件的自动查找路径

    第四步:创建一个工程

     现在已经有express

    express命令安装在全局才起作用!

    所以express安装的时候要用 npm install express -g

    键入:express myapp (myapp是随意起的工程名称)

    到这里我遇到了一个问题:当我安装express之后发现居然提示express不是内部或外部命令

    解决方案:参考http://jingyan.baidu.com/article/922554468a3466851648f419.html

    当我在C:Program Files odejs键入express myapp创建却失败,

    但是回到主目录后却可以创建成功,我也不太懂,姑且这样先用着吧

    创建成功后发现多了几个文件

    然后我们复制nodejs目录下复制node_modules到myapp下面,环境搭建到此完工,下面做一个demo测试!

    在myapp下新建helloworld.js

    1 var http = require("http");
    2 http.createServer(function(request, response) {  
    3     response.writeHead(200, {"Content-Type": "text/plain"});  
    4     response.write("Hello World");  
    5     response.end();
    6 }).listen(8888);
    7 console.log("nodejs start listen 8888 port!");

    按快捷键Ctrl+R快速打开运行,进入到myapp目录下,键入 node helloworld.js 即可

     打开地址http://127.0.0.1:8888/

    发现输出 :

    Hello World

    工程结构

      

    我们回头看看生成的工程目录里面都有什么,打开我们的 myapp文件夹,里面如图所示:

    app.js:启动文件,或者说入口文件

    package.json:存储着工程的信息及模块依赖,当在 dependencies 中添加依赖的模块时,运行 npm install ,npm 会检查当前目录下的 package.json,并自动安装所有指定的模块

    node_modules:存放 package.json 中安装的模块,当你在 package.json 添加依赖的模块并安装后,存放在这个文件夹下

    public:存放 image、css、js 等文件

    routes:存放路由文件

    views:存放视图文件或者说模版文件

    bin:存放可执行文件

    打开app.js,让我们看看里面究竟有什么:

    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 index = require('./routes/index');
    var users = require('./routes/users');
    
    var app = express();
    
    // view engine setup
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'jade');
    
    // uncomment after placing your favicon in /public
    //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
    app.use(logger('dev'));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));
    
    app.use('/', index);
    app.use('/users', users);
    
    // catch 404 and forward to error handler
    app.use(function(req, res, next) {
      var err = new Error('Not Found');
      err.status = 404;
      next(err);
    });
    
    // error handler
    app.use(function(err, req, res, next) {
      // set locals, only providing error in development
      res.locals.message = err.message;
      res.locals.error = req.app.get('env') === 'development' ? err : {};
    
      // render the error page
      res.status(err.status || 500);
      res.render('error');
    });
    
    module.exports = app;

    这里我们通过require()加载了express、path 等模块,以及 routes 文件夹下的index. js和 users.js 路由文件。 下面来讲解每行代码的含义。

    (1) var app = express():生成一个express实例 app。

    (2)app.set('views', path.join(__dirname, 'views’)):设置 views 文件夹为存放视图文件的目录, 即存放模板文件的地方,__dirname 为全局变量,存储当前正在执行的脚本所在的目录。

    (3)app.set('view engine', 'ejs’):设置视图模板引擎为 ejs。

    (4)app.use(favicon(__dirname + '/public/favicon.ico’)):设置/public/favicon.ico为favicon图标。

    (5)app.use(logger('dev’)):加载日志中间件。

    (6)app.use(bodyParser.json()):加载解析json的中间件。

    (7)app.use(bodyParser.urlencoded({ extended: false })):加载解析urlencoded请求体的中间件。

    (8)app.use(cookieParser()):加载解析cookie的中间件。

    (9)app.use(express.static(path.join(__dirname, 'public'))):设置public文件夹为存放静态文件的目录。

    (10)app.use('/', routes);和app.use('/users', users):路由控制器。

    (11)

    1 app.use(function(req, res, next) {
    2   var err = new Error('Not Found');
    3   err.status = 404;
    4   next(err);
    5 });

    捕获404错误,并转发到错误处理器。

    (12)

    1 app.use(function(err, req, res, next) {
    2   // set locals, only providing error in development
    3   res.locals.message = err.message;
    4   res.locals.error = req.app.get('env') === 'development' ? err : {};
    5 
    6   // render the error page
    7   res.status(err.status || 500);
    8   res.render('error');
    9 });

    生产环境下的错误处理器,将错误信息渲染error模版并显示到浏览器中。

    (13)module.exports = app :导出app实例供其他模块调用。

    我们再看 bin/www 文件:

    #!/usr/bin/env node
    var debug = require('debug')('blog');
    var app = require('../app');
    
    app.set('port', process.env.PORT || 3000);
    
    var server = app.listen(app.get('port'), function() {
      debug('Express server listening on port ' + server.address().port);
    });
    

    (1)#!/usr/bin/env node:表明是 node 可执行文件。

    (2)var debug = require('debug')('blog’):引入debug模块,打印调试日志。

    (3)var app = require('../app’):引入我们上面导出的app实例。

    (4)app.set('port', process.env.PORT || 3000):设置端口号。

    (5)

    var server = app.listen(app.get('port'), function() {
      debug('Express server listening on port ' + server.address().port);
    });
    

    启动工程并监听3000端口,成功后打印 Express server listening on port 3000。

    我们再看 routes/index.js 文件:

    var express = require('express');
    var router = express.Router();
    
    /* GET home page. */
    router.get('/', function(req, res) {
      res.render('index', { title: 'Express' });
    });
    
    module.exports = router;
    

    生成一个路由实例用来捕获访问主页的GET请求,导出这个路由并在app.js中通过app.use('/', routes); 加载。这样,当访问主页时,就会调用res.render('index', { title: 'Express' });渲染views/index.ejs模版并显示到浏览器中。

    我们再看看 views/index.ejs 文件:

    <!DOCTYPE html>
    <html>
      <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
        <h1><%= title %></h1>
        <p>Welcome to <%= title %></p>
      </body>
    </html>
    

    在渲染模板时我们传入了一个变量 title 值为 express 字符串,模板引擎会将所有 <%= title %> 替换为 express ,然后将渲染后生成的html显示到浏览器中,如上图所示。

    在这一小节我们学习了如何创建一个工程并启动它,了解了工程的大体结构和运作流程,下一小节我们将学习 express 的基本使用及路由控制。

     

  • 相关阅读:
    fishredux 大体流程
    flutter Container组件和Text组件
    vue 页面跳转以及传参
    mySql 查询当天、本周、最近7天、本月、最近30天的语句
    Flutter编译时下载依赖报错的解决方案
    计算属性和方法
    计算属性传参
    原生js发送请求
    MySQL数据库连接
    flask 蓝图
  • 原文地址:https://www.cnblogs.com/PuShaobin/p/6062781.html
Copyright © 2011-2022 走看看