Node.js Express 框架学习笔记(一)入门篇
初心:开始学习Node.js Express框架主要是为了能自己学会去搭建一个完整的网站,其次是由于个人的技术比较杂,从最初的前端HTML、CSS、JS、React、Vue到改学后台用C#、.net开发,直到慢慢的接触到数据库设计、服务器部署等方面的知识,也希望自己能慢慢的走上全栈的路,不管技术怎么样,一直学总是会有提高的总是会达到心中的标准的,于是,开始自己一人学习独立开发一款APP,想要把自己
初心:
开始学习Node.js Express框架主要是为了能自己学会去搭建一个完整的网站,其次是由于个人的技术比较杂,从最初的前端HTML、CSS、JS、React、Vue到改学后台用C#、.net开发,直到慢慢的接触到数据库设计、服务器部署等方面的知识,也希望自己能慢慢的走上全栈的路,不管技术怎么样,一直学总是会有提高的总是会达到心中的标准的,于是,开始自己一人学习独立开发一款APP,想要把自己已经掌握的和想要学的全用上,一步一步的完善;就先从后台框架开始,选用对前端来说好理解的Express框架。
Express 入门:
Express 官网地址:http://www.expressjs.com.cn/
一、安装
首先得安装 Node.js ,如果没有可以参照 菜鸟教程(http://www.runoob.com/nodejs/nodejs-install-setup.html),当然也得装上淘宝镜像。
1、创建一个工作目录,这里取名 myexpress ,通过命令行进入当前目录下
2、通过 npm init
命令为你的应用创建一个 package.json
文件,代码如下
{
"name": "myexpress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
如果你想详细了解其中配置项的含义,建议参考https://docs.npmjs.com/files/package.json,有人给出了译文
https://www.cnblogs.com/nullcc/p/5829218.html
3、接下来安装 Express 并将其保存到依赖列表中,这里使用了淘宝镜像
cnpm install express --save
这里所说的添加到依赖列表中指的是将信息添加到 package.json 文件中
{
"name": "myexpress",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.3"
}
}
到此,安装过程完成,主要分为两步 npm init 和 cnpm install express --save。
二、简单应用
1、进入 myapp
目录,创建一个名为 app.js
的文件并添加如下代码
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
2、通过命令启动
> node app.js
3、在浏览器中打开 http://localhost:3000
三、Express 应用生成器
通过应用生成器工具 express
可以快速创建一个应用的骨架。
1、通过如下命令安装:
> cnpm install express-generator -g
2、在当前工作目录 myexpress 下创建一个命名为 myapp 的应用
> express myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views
create : myapp/views/index.jade
create : myapp/views/layout.jade
create : myapp/views/error.jade
create : myapp/bin
create : myapp/bin/www
3、然后安装所有依赖包
> cd myapp
> cnpm install
4、启动应用
MacOS 或 Linux 平台
$ DEBUG=myapp npm start
Windows 平台
> set DEBUG=myapp & npm start
5、应用目录一般如下
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
7 directories, 9 files
浏览器中打开 http://localhost:3000/ 和 http://localhost:3000/users
6、添加 favicon.ico
在 myapp 下的 public/images 添加文件 favicon.ico
打开 myapp 下的 app.js 在其中添加
var favicon = require('serve-favicon');
app.use(favicon(__dirname+'/public/images/favicon.ico'));
然后通过命令行安装 serve-favicon
> cnpm install serve-favicon --save
重新启动项目
> set DEBUG=myapp & npm start
注意要清除缓存,这样我们就可以在新开的 http://localhost:3000/ 中看到图标了四、基本路由
路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET、POST 等)组成的,涉及到应用如何响应客户端对某个网站节点的访问。
每一个路由都可以有一个或者多个处理器函数,当匹配到路由时,这个/些函数将被执行。
路由的定义由如下结构组成:app.METHOD(PATH, HANDLER)。其中,app 是一个 express 实例;METHOD 是某个 HTTP 请求方式中的一个;PATH 是服务器端的路径;HANDLER 是当路由匹配到时需要执行的函数。
我们可以从之前创建的 myapp 应用中看到,在 app.js 中
app.use('/', indexRouter);
app.use('/users', usersRouter);
在 routes 下的 index.js 和 user.js 中
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
五、静态文件
通过 Express 内置的 express.static 可以方便地托管静态文件,例如图片、CSS、JavaScript文件等。
将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如,假设在 public 目录放置了图片、CSS 和 JavaScript 文件,你就可以:
app.use(express.static('public'));
现在,public
目录下面的文件就可以访问了。
http://localhost:3000/images/favicon.ico
如果你的静态资源存放在多个目录下面,你可以多次调用 express.static
中间件:
app.use(express.static('public'));
app.use(express.static('images'));
访问静态资源文件时,express.static
中间件会根据目录添加的顺序查找所需的文件。
http://localhost:3000/favicon.ico
如果你希望所有通过 express.static
访问的文件都存放在一个“虚拟(virtual)”目录(即目录根本不存在)下面,可以通过为静态资源目录指定一个挂载路径的方式来实现,如下所示:
app.use('/virtual', express.static('public'));
现在,你就爱可以通过带有 “/virtual” 前缀的地址来访问 public
目录下面的文件了。
http://localhost:3000/virtual/images/favicon.ico
更多推荐
所有评论(0)