用Express的搭建简单路由——李帅醒博客
2017-02-06 14:24
288 查看
Express为我们提供了很f方便的路由功能,今天就为大家讲解一下如何用express搭建路由。
1.(可选)(全局安装) 安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
由于npm网站在国外,国内访问速度慢,可使用上面的命令,安装淘宝提供的的完整镜像
安装成功后 即可使用 cnpm 替代 npm ,以下:npm === cnpm
2. (可选)(全局安装)安装express脚手架
npm install -g express-generator
express-generator为express框架的脚手架,不安装脚手架,不影响express的使用
脚手架的作用为:快速为你生成一个标准的express架构
3.(必选)安装express
在控制台,使用cd或其它手段,切换到你的项目目录
切换到项目目录后,在控制台输入 cnpm install express --save-dev 并回车
安装完成后,express即可在当前目录下使用
脚手架构建express过程:
1. 切换到你工程将要存放的目录
2. 在控制台输入 express 你的工程名
3. 在控制台输入 cd 你的工程名
4. 在控制输入 cnpm install
这是我的目录结构
server.js中我是这样配置的
html内路径格式:
然后在 DOS 命令窗口下输入 node server.js 启动服务
这个时候进入浏览器输入你设置的地址,你会发现已经成功了!
(我吃酸萝卜 新浪微博http://www.weibo.com/wcslb ---李帅醒著)
1.(可选)(全局安装) 安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
由于npm网站在国外,国内访问速度慢,可使用上面的命令,安装淘宝提供的的完整镜像
安装成功后 即可使用 cnpm 替代 npm ,以下:npm === cnpm
2. (可选)(全局安装)安装express脚手架
npm install -g express-generator
express-generator为express框架的脚手架,不安装脚手架,不影响express的使用
脚手架的作用为:快速为你生成一个标准的express架构
3.(必选)安装express
在控制台,使用cd或其它手段,切换到你的项目目录
切换到项目目录后,在控制台输入 cnpm install express --save-dev 并回车
安装完成后,express即可在当前目录下使用
脚手架构建express过程:
1. 切换到你工程将要存放的目录
2. 在控制台输入 express 你的工程名
3. 在控制台输入 cd 你的工程名
4. 在控制输入 cnpm install
这是我的目录结构
server.js中我是这样配置的
//请求express模块 var express=require("express"); var app=express(); // 通过 Express 内置的 express.static 可以方便地托管静态文件,例如图片、CSS、JavaScript 文件等。 // 将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如,假设在 public 目录放置了图片、CSS 和 app.use(express.static("public")); app.use(express.static("data")); // 上面代码使用app.use方法,注册了两个中间件。收到HTTP请求后,先调用第一个中间件,在控制台输出一行信息,然后通过next方法,将执行权传给第二个中间件,输出HTTP回应。由于第二个中间件没有调用next方法,所以request对象就不再向后传递了。 //所有请求都必须通过该中间件,参数中的“*”表示对所有路径有效。get方法则是只有GET动词的HTTP请求通过该中间件,它的第一个参数是请求的路径。由于get方法的回调函数没有调用next方法,所以只要有一个中间件被调用了,后面的中间件就不会再被调用了。 // 除了get方法以外,Express还提供post、put、delete方法,即HTTP动词都是Express的方法。 // 这些方法的第一个参数,都是请求的路径。除了绝对匹配以外,Express允许模式匹配。 app.get("/",function(req,res){ res.set("Content-Type","text/html"); console.log(__dirname) //__dirname获得当前文件所在目录的完整目录 res.sendFile(__dirname+"/public/views/index.html"); }); app.get("/footer",function(req,res){ res.set("Content-Type","text/html"); console.log(__dirname) res.sendFile(__dirname+"/public/views/footer.html"); }); app.get("/cityWalk",function(req,res){ res.set("Content-Type","text/html"); res.sendFile(__dirname+"/public/views/cityWalk.html"); }); var server=app.listen(8080,function(){ // 设置一个端口号 console.log("服务启动"); })pubilc里面的目录结构:
html内路径格式:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cityWalk</title> <link rel="stylesheet" href="../css/cityWalk.css"> <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script> </head> <body> </body> <script type="text/javascript" src="../js/cityWalk.js"></script> </html>
然后在 DOS 命令窗口下输入 node server.js 启动服务
这个时候进入浏览器输入你设置的地址,你会发现已经成功了!
(我吃酸萝卜 新浪微博http://www.weibo.com/wcslb ---李帅醒著)
相关文章推荐
- 使用Node.js的express框架搭建一个简单项目并且添加了一个路由
- 使用express+mongoDB搭建多人博客 学习(2)路由与模板
- 用express搭建一个简单的博客系统
- Nodejs实战双色(by赵坤等...)第一章Express+MongoDB搭建博客的一些错误
- 使用nodejs、mongodb、express、linux搭建社区网站(3)-页面与路由
- 使用express+mongoDB搭建多人博客 学习(1) 安装blog工程
- node+express+ejs搭建一个简单的"页面"
- 搭建Hexo博客的简单步骤
- 简单得不得了的教程-一步一步用 NODE.JS, EXPRESS, JADE, MONGODB 搭建一个网站
- wordpress简单搭建个人博客
- 使用 Express + MongoDB 搭建多人博客
- 简单几步搭建个人博客(WordPress)
- 2015年12月12 Node.js实战(一)使用Express+MongoDB搭建多人博客
- (原创)node.js入门之一:express简单服务器搭建-Mac环境开发
- Django使用-Django搭建简单博客
- Python学习笔记23:Django搭建简单的博客网站(一)
- django简单博客搭建
- Castle ActiveRecord框架学习(二):快速搭建简单博客网站
- 使用express+mongoDB搭建多人博客 学习(3)connect-flash和mongodb,表单注册