Node Express 初探

一如既往，先上一张图

Express 基于 Node.js 平台，快速、开放、极简的 web 开发框架。

关于Express更多相关知识请链接至官网http://www.expressjs.com.cn/

1、访问本地服务

在指定的目录中创建app.js

 1 //express 
 2 var express = require('express');
 3 //app核心
 4 var app = express();
 5 //get
 6 app.get('/', function (req, res) {
 7   res.send('Node express 初试探....!');
 8 });
 9 //访问端口
10 var server = app.listen(1314, function (req,res,next) {
11   var host = server.address().address;
12   var port = server.address().port;
13   console.log(host);

node 启动app.js文件，浏览器端输入localhost:1314 即可访问响应内容 Node Express 初探.....

2.实现浏览器端url参数路由跳转

 1 //express
 2 var express = require('express');
 3 var app = express();
 4 
 5 //express.static 设置静态资源（images/js/css等）文件目录
 6 app.use(express.static('public'));
 7 
 8 //get请求 根据url实现路由跳转 
 9 app.get('/index.html', function (req, res) {
10     res.sendFile(__dirname + '/' + 'index.html');
11 });
12 
13 //get请求 根据url实现路由跳转 c
14 app.get('/login.html', function (req, res) {
15     res.sendFile(__dirname + '/' + 'login.html');
16 });
17 //端口
18 var server = app.listen(1314, function () {
19     var host = server.address().address;
20     var port = server.address().port;
21     console.log("实例应用，访问地址为 http://%s:%s", host, port);
22 })

inde.html 主页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Node Express路由跳转</title>
</head>
<body>
    <p>实现Express路由跳转......</p>
</body>
</html>

View Code

login登录页面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Node Express路由跳转</title>
 8 </head>
 9 <body>
10    <form action="" method="GET">
11         姓名：<input type="text" name="username"><br/>
12         密码：<input type="password" name="pass"></br>
13         <input type='submit' value='提交'/>
14     </form>
15 </body>
16 </html>

View Code

3、get提交

//提交表单数据
app.get('/app_get', function (req, res) {
    // 输出json格式
    // 将接收的数据转换为json格式输出
    response = {
        username : req.query.username,
        pass : req.query.pass,
    };
    console.log(response);
    res.end(JSON.stringify(response));
});

设置form属性 <form action="http:///localhost:1314/app_get" method="GET"></form> 即可，响应数据是字符串对象

4、post提交

 1 var express = require('express');
 2 var app = express();
 3 var bodyParser = require('body-parser');
 4 // 创建 application/x-www-form-urlencoded 编码解析
 5 var urlencodedParser = bodyParser.urlencoded({
 6     extended : false
 7 });
 8 app.use(express.static('public'));
 9 app.get('/post.html', function (req, res) {
10     res.sendFile(__dirname + '/' + 'post.html');
11 });
12 app.post('/app_post', urlencodedParser, function (req, res) {
13     // JSON 格式
14     response = {
15         username : req.body.username,
16         pass : req.body.pass,
17     };
18 
19     console.log(response);
20     res.end(JSON.stringify(response));
21 });
22 var server = app.listen(1314, function () {
23     var host = server.address().address;
24     var port = server.address().port;
25     console.log("应用实例，访问地址为 http://%s:%s", host, port);
26 })

设置form属性 <form action="http:///localhost:1314/app_post" method="post"></form> 即可