NodeJs 创建web服务端

2022-07-31 21:32:00

1.创建一个简单静态web服务器

用http模块+URI模块+Path模块+Fs模块创建一个静态web服务器。

./module/common

const fs =require(‘fs‘)
exports.getFileMime = function (extname) {
    return new Promise((resolve, reject)=> {
        // 读取文件 mime里面有常用类型
        // 这里也可以通过readFileSync 同步方法读取
        fs.readFile(‘./mime.json‘, (err, data)=>{
            if (err) {
                reject(err)
                return
            }
            // json解析对象
            let mime = JSON.parse(data.toString())
            // 返回content-type类型
            resolve(mime[extname])
        })
    })
}

app.js

const http = require(‘http‘);
const fs = require(‘fs‘);
// 获取后缀名
const path = require(‘path‘);
const common = require(‘./module/common‘);
const url = require(‘url‘)

http.createServer(function (request, response){
    // 打印 请求url
    console.log(request.url);
    // 获取地址
    let pathName = url.parse(request.url).pathname;
    pathName = pathName === ‘/‘ ? ‘/index.html‘: pathName;
    // 通过path模块获取后缀名
    let extname = path.extname(pathName)
    // 通过fs模块读取文件
    if (pathName !== ‘favicon.ico‘) {
        fs.readFile(‘./static‘ + pathName, async (err, data)=>{
            if (err) {
                console.log(‘404‘)
                response.writeHead(404, {‘Content-Type‘: ‘text/html;charset="utf-8"‘})
                response.end(‘这个页面不存在‘);
            }
            let mime = await common.getFileMime(extname)
            response.writeHead(200, {‘Content-Type‘: `${mime};charset="utf-8"`})
            response.end(data);
        })
    }

    // // 设置响应头
    // response.writeHead(200, {‘Content-Type‘: ‘text/plain;charset="utf-8"‘});
    // // 设置响应内容
    // response.end(‘Hello world‘);
}).listen(8081);
console.log(‘server run at http://127.0.0.1:8081/‘)

2.NodeJs封装静态web服务，路由，EJS模版引擎，GET，POST

路由
是由一个URI和一个特定HTTP方法（GET，POST）组成，涉及到应用如何响应客户端对某个网站节点的访问。
EJS引擎
- 可以把我们数据库和文件读取的数据显示到HTML页面上，它是一个第三方模块，需要通过npm安装。
- 安装
```
npm install ejs --save
```
- nodejs使用
```
ejs.renderFile(filename, data, options, function(err, str){
  
})
```

3.模块化方式封装

目录结构

project
	|__module
	|		|__router.js
  |__node_modules
  |__static
  | 	  |__img
  |     |   |__timg.jpeg
  |     |__js
  |     |   |___htmljs.js
  |     |__index.html
  |     |__login.html
  |__views
  |   |__form.ejs
  |   |__login.ejs
  |__app.js
  |__mime.json

app.js

const http = require(‘http‘);
const routes = require(‘./module/router‘)
const url = require(‘url‘);


http.createServer(function (request, response){
    // 创建静态web服务
    routes.static(request,response,‘static‘)
    // 路由
    let pathname = url.parse(request.url).pathname.replace("/","");
    // 获取请求方式
    console.log(pathname)
    try {
        routes[pathname](request,response);
    } catch (error) {
        routes[‘error‘](request,response);
    }

}).listen(8081);
console.log(‘server run at http://127.0.0.1:8081/‘)

Route.js

const fs = require(‘fs‘);
// 获取后缀名
const path = require(‘path‘);
const url = require(‘url‘);
const ejs = require(‘ejs‘);

// 同步方法
let getFileNameSync = function (extname) {
    var data = fs.readFileSync(‘./mime.json‘);
    let mimeObj = JSON.parse(data.toString());
    return mimeObj[extname]
}



let app = {
    static: (request,response, staticpath)=> {
        // 获取地址
        let pathName = url.parse(request.url).pathname;
        pathName = pathName === ‘/‘ ? ‘/index.html‘: pathName;
        // 通过path模块获取后缀名
        let extname = path.extname(pathName)
        // 通过fs模块读取文件
        if (pathName !== ‘favicon.ico‘) {
            try {
                let data = fs.readFileSync(‘./‘ + staticpath + pathName);
                if (data) {
                    let mime = getFileNameSync(extname);
                    response.writeHead(200, {‘Content-Type‘: `${mime};charset="utf-8"`})
                    response.end(data)
                }
            } catch (error) {
            }
        }
    },
    login: (req,res)=> {
        ejs.renderFile(‘./views/form.ejs‘,{},(err,data)=>{
            res.writeHead(200, {‘Content-Type‘: ‘text/html;charset="utf-8"‘});
            res.end(data)
        })
    },
    news: (req,res)=> {
        res.end(‘news‘)
    },
    doLogin:(req,res)=> {
        // post请求获取数据
        var postData = ‘‘;
        req.on(‘data‘,(chunk => {
            // 将post请求数据拼接
            postData += chunk;
        }))
        req.on(‘end‘,()=>{
            console.log(postData);
            res.end(postData)
        })
    }, error: (req, res)=> {
        res.end(‘error‘)
    }
}
// 对外暴漏app
module.exports = app

4.原生NodeJs封装类似express框架

项目目录

express-demo
	|__modules
	|    |__routers.js
	|__node_modules
	|__static
	|    |__css
	|        |__mycss.css
	|__views
	|    |__form.ejs
	|__express_router.js
	|__mime.json
	|__package.json

module/routers.js

const path = require(‘path‘);
const url = require(‘url‘);
const fs = require(‘fs‘);


// response封装
function changeRes(response){
    response.send=(data)=>{
        response.writeHead(200, {‘Content-Type‘: ‘text/html;charset="utf-8"‘})
        response.end(data)
    }
}
// 根据后缀名获取文件类型
function getFileNameSync (extname) {
    var data = fs.readFileSync(‘./mime.json‘);
    let mimeObj = JSON.parse(data.toString());
    return mimeObj[extname]
}
// 静态web服务的方法
function initstatic(request,response, staticpath){
    // 获取地址
    let pathName = url.parse(request.url).pathname;
    console.log(pathName)
    pathName = pathName === ‘/‘ ? ‘/index.html‘: pathName;
    // 通过path模块获取后缀名
    let extname = path.extname(pathName)
    // 通过fs模块读取文件
    try {
        let data = fs.readFileSync(‘./‘ + staticpath + pathName);
        if (data) {
            let mime = getFileNameSync(extname);
            response.writeHead(200, {‘Content-Type‘: `${mime};charset="utf-8"`})
            response.end(data)
        }
    } catch (error) {
    }
}


// 内部封装
let server = () => {
    let G={
        _get: {},
        _post: {},
        // 静态web目录
        staticPath:‘static‘
    };
    // // 把get与post分开
    // G._get = {};
    // G._post = {};
    let app = function (req,res) {
        console.log(‘调用app方法‘)
        // 将response的方法扩展
        changeRes(res)
        // 配置静态web服务
        initstatic(req,res,G.staticPath)
        // 获取路径
        let pathname = url.parse(req.url).pathname;
        // 获取请求方法
        let method = req.method.toLowerCase()
        // 执行方法
        if(G[‘_‘ + method][pathname]) {
            if (method === ‘get‘){
                G._get[pathname](req,res);
            }else{
                // post方法， 获取post数据，把它绑定req.body
                let postData = ‘‘;
                req.on(‘data‘,(chunk)=>{
                    postData += chunk;
                })
                req.on("end",()=>{
                    req.body = postData;
                    G._post[pathname](req,res);
                })
            }
        } else {
            res.writeHead(404, {‘Content-Type‘: ‘text/html;charset="utf-8"‘})
            res.end("页面不存在")
        }
    }
    // 配置get
    app.get=function (str,callback) {
        console.log(‘get方法‘)
        // 注册方法
        G._get[str] = callback;
    }
    // 配置post
    app.post=function (str,callback) {
        G._post[str] = callback;
    }

    // 配置静态web服务目录
    app.static=function (staticPath){
        G.staticPath = staticPath;
    }
    return app
}

module.exports = server();

express_rouuter.js

const http = require("http");
const app = require(‘./module/routers‘)
const ejs = require(‘ejs‘)
// 注册web服务
http.createServer(app).listen(8888)
// 修改默认静态web目录
app.static(‘static‘)

console.log("Server running at http://127.0.0.1:8888/")

// 配置路由
app.get(‘/login‘,function (request,response){
    ejs.renderFile(‘./views/form.ejs‘,{},(err,data)=>{
        response.send(data)
    })
})


app.get(‘/news‘,function (request,response){
    response.send("hello world, news")
})

app.get(‘/‘,function (request,response){
    response.send("hello world, 首页")
})

app.post(‘/login‘,function (request,response){
    // 获取表单数据
    response.send(request.body)
})

form.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post login</title>
    <link rel="stylesheet" href="/css/mycss.css">
</head>
<body>
<h2>登陆页面</h2>
<div>
    <form action="/login" method="post">
        用户名:<input type="text" name="username">
        密码:<input type="password" name="password">
        <br>
        <input type="submit" value="提交">
    </form>
</div>
</body>
</html>

NodeJs 创建web服务端

码农公寓

1.创建一个简单静态web服务器

2.NodeJs封装静态web服务，路由，EJS模版引擎，GET，POST

3.模块化方式封装

4.原生NodeJs封装类似express框架

相关文章