β

Node.js开发框架Express

rainweb前端开发 61 阅读

Express的安装

npm install express  或者 npm install -g express

讲下这两种安装模式的区别

记得有人问我过 -g表示什么,我脱口而出global全局的意思,艹,立马就被BS了,原来是gcc。

简单的说用了 -g,那么直接可以在控制台使用对应命令,因为安装的时候已经帮你配置好了系统的环境变量。

经确认我之前的理解是对的-g 是global,更正一下

https://npmjs.org/doc/install.html

那什么是gcc?

GCC(GNU Compiler Collection,GNU编译器集合)是一个编译器大多Unix操作系统的标准编译器,同样也适应Windows操作系统。

安装后的区别:

npm install express:在你当前目录的node_modules文件夹多了一个express文件夹

npm install -g express: C:Users
ainwebAppDataRoaming
pm
ode_modulesexpress

安装完成后,运行

node app.js

显示:

D:workspaceproject
odejs-demo>node app.js
Express server listening on port 3000

浏览器访问 http://127.0.0.1:3000,这样就安装成功了。

express创建的网站架构是这样的:

1

但是这是别人帮你写好的框架,假如说你自己想做一个网站,但是又不想基于它原来的框架,这时候你该怎么办?

慢慢道来:首先新建一个目录

e:>mkdir helloexpress
e:>cd helloexpress

新建一个package.json文件

代码
  • {  
  •   “name”: “helloexpress”,  
  •   “description”: “hello express!”,  
  •   “version”: “0.0.1”,  
  •   “private”: true,  
  •   “dependencies”: {  
  •     “express”: “3.x”  
  •   }  
  • }  
  • 然后执行 npm install命令,express就安装到 ./node_modules 目录里了,接下来同样按照上面的新建一个app.js,要输出hello express

    代码
  • var express = require(‘express’);  
  • var app = express();  
  •    
  • app.get(‘/’, function(req, res){  
  •   res.send(‘hello express’);  
  • });  
  •    
  • app.listen(3000);

    执行node app或者node app.js,此时浏览器输入http://127.0.0.1:3000/我们就可以看到了hell express.

    但是光输出hell express没用啊,其他HTML代码呢,怎么加进去?

    继续新建一个html文件——index.html,然后我们只要修改一下app.js的第五行代码,修改成:

    res.sendfile(‘index.html’);

    再运行app.js,此时浏览器显示index.html的内容了。

    这里说明一个问题:

    当你运行了app.js的时候,修改app.js源码后保存直接刷新浏览器是没有效果的,这是因为Node.js 只有在第一次引用到某部份时才会去解析脚本文件,以后都会直接访问内存,避免重复载入,必须要重新运行下app.js。

    但是可以安装supervisor,运行supervisor app.js这样免去重复重启的步骤了,它会监视你对代码的改动,并自动重启Node.js。

    那怎么引入静态资源呢,第一反应很简单,index.html直接按路径引入,于是

    我新建了一个static文件夹,里面放了一个style.css,然后index.html的head之间放了<link rel=”stylesheet” type=”text/css” href="http://www.rainweb.cn/article/”static/style.css”>,很天真的以为可以预览出效果,结果我想多了。。。是我想太多,很傻很天真,这是我居然想到了这个

    2

    再次查看了安装包里面的app.js,里面有关于静态资源的配置,代码如下:

    app.js添加代码
  • app.use(express.static(__dirname + ‘/static’));  
  • 此时index.html中的代码是这样的

    index.html代码
  • <!DOCTYPE html>  
  • <html>  
  •     <head>  
  •         <title>index</title>  
  •         <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>  
  •         <link rel=“stylesheet” type=“text/css” href="http://www.rainweb.cn/article/“style.css” />       </head>      <body>  
  •         <h1>hello</h1>  
  •         <p>Express</p>  
  •     </body>  
  • </html>

    分析下整个HTTP请求静态资源的过程:

    浏览器在接收到内容以后,经过分析发现要获取style.css,因此会再次向服务器发起请求。app.js 中并没有一个路由规则指派到style.css,但 app 通过app.use(express.static(__dirname + ‘/static’)) 配置了静态文件服务器,因此style.css 会定向到app.js 所在目录的子目录中的文件static/style.css。

    加进去再运行,果然能预览到效果了,看来写代码不能太天真。

    Node.js开发框架Express ,首发于 rainweb前端开发

    作者:rainweb前端开发
    专注于web前端开发,专注于用户体验
    原文地址:Node.js开发框架Express, 感谢原作者分享。

    发表评论