nodejs-web服务器(实例)

1.server.js

const http = require('http');
const controller =require('./controller')
const hostname = '127.0.0.1';
const port = 3000;//端口

const server = http.createServer();

server.listen(port,hostname,()=>{
    console.log(`Server running at http://${hostname}:${port}/`);
})
server.on('request',(req,res)=>{
    if (req.url.startsWith('/css')) {
        controller.getCss(req,res)
    }else if(req.url.startsWith('/images')){
        controller.getImage(req,res)
    }else if(req.url.startsWith('/js')){
        controller.getJs(req,res)
    }else if(req.url === '/index.html'){
        controller.getIndex(req,res)
    }else if(req.url.startsWith('/getALLData') && (req.method === 'POST'||'GET')){
        controller.getALLData(req,res)
    }
})

2.controller.js

const fs = require('fs');
const model =require('./model')
const querystring = require('querystring');
module.exports ={
    getCss(req,res){
        res.writeHead(200,{
            "Content-Type":"text/css;charset=utf-8"
        })
        fs.readFile(__dirname +req.url,(err,data)=>{
            res.end(data)
        })
    },
    getImage(req,res){
        fs.readFile(__dirname +req.url,(err,data)=>{
            res.end(data)
        })
    },
    getJs(req,res){
        fs.readFile(__dirname +req.url,(err,data)=>{
            res.end(data)
        })
    },
    getIndex(req,res){
        fs.readFile(__dirname +'/views/index.html',(err,data)=>{
            res.end(data)
        })
    },
    getALLData(req,res){
    	//post请求获取参数
        let data = '';
        req.on('data',(chunk)=>{
          data += chunk;
        });
        req.on('end', function () {
            data = decodeURI(data);
            console.log(data);
            var dataObject = querystring.parse(data);
            console.log(dataObject);
            model.getALLData((err,data)=>{
                    if(err) console.error(err);
                    res.end(data)
            })
        });
        //get请求获取参数
        let params = req.url.split('?')
        if(params.length>1){
        	params= querystring.parse(params[1])
        }
        console.log(params)
        model.getALLData((err,data)=>{
        	if(err) console.error(err);
	    	res.end(data)
	    })
    }
}

3.model.js

const fs = require('fs')
module.exports = {
    getALLData(callback){
        fs.readFile(__dirname+'/data/hero.json','utf-8',(err,data)=>{
            callback(err,data)
        })
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Node.js 本身是用于服务器端编程的,它并不具备前端渲染的能力。但是可以通过一些工具和框架,使 Node.js 可以渲染 Web Components。 其中,最常用的工具是 Puppeteer,它是一个基于 Chrome Headless 的 Node.js 库,可以模拟用户在浏览器中的操作,包括渲染和操作 Web Components。 使用 Puppeteer 可以通过以下步骤实现 Web Components 的渲染: 1. 安装 Puppeteer 库 可以通过 npm 安装 Puppeteer: ``` npm install puppeteer ``` 2. 启动浏览器 使用 Puppeteer 启动一个浏览器实例: ```javascript const puppeteer = require('puppeteer'); const browser = await puppeteer.launch(); const page = await browser.newPage(); ``` 3. 导航到 Web Components 页面 使用 `page.goto` 方法导航到包含 Web Components 的页面: ```javascript await page.goto('http://example.com/my-web-component'); ``` 4. 等待 Web Components 加载完成 使用 `page.waitForSelector` 等待 Web Components 加载完成: ```javascript await page.waitForSelector('my-web-component'); ``` 5. 获取 Web Components 元素 使用 `page.$` 方法获取 Web Components 元素: ```javascript const webComponent = await page.$('my-web-component'); ``` 6. 获取 Web Components 的 Shadow DOM 使用 `elementHandle.contentFrame` 方法获取 Web Components 的 Shadow DOM: ```javascript const shadowRoot = await webComponent.contentFrame(); ``` 7. 操作 Web Components 使用 `shadowRoot.$` 方法获取 Shadow DOM 中的元素,并通过 `elementHandle.type` 等方法进行操作: ```javascript const inputElement = await shadowRoot.$('input'); await inputElement.type('hello world'); ``` 8. 关闭浏览器实例 最后,使用 `browser.close` 方法关闭浏览器实例: ```javascript await browser.close(); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值