【Node.js练习】web服务器案例

简介: 【Node.js练习】web服务器案例

 核心思路

把文件的实际存放路径,作为每个资源的请求url地址。

image.gif编辑

实现步骤

    1. 导入需要的模块
    2. 创建基本的web服务器
    3. 将资源的请求url地址映射为文件的存放路径
    4. 读取文件内容并响应客户端
    5. 优化资源的请求路径

    实现代码

         创建web服务器

           

    //导入
    //导入http模块
    const http = require('http');
    //导入fs系统模块
    const fs = require('fs');
    //导入路径模块
    const path = require('path');
    //创建
    //创建web服务器
    const server = http.createServer();
    //request事件
    server.on('request', function (req, res) {
    })
    //监听
    server.listen(8080, () => {
        console.log('server running at http://127.0.0.1:8080');
    })

    image.gif

    image.gif编辑

    服务器搭建完成

      转换url地址

    //导入
    //导入http模块
    const http = require('http');
    //导入fs系统模块
    const fs = require('fs');
    //导入路径模块
    const path = require('path');
    //创建
    //创建web服务器
    const server = http.createServer();
    //request事件
    server.on('request', function (req, res) {
        const url = req.url;
        //将返回的路径进行修改拼接 再返回到客户端
        const newPath = path.join(__dirname, '/时钟案例/clock', url)
        fs.readFile(newPath, 'utf-8', function (err, data) {
            if (err) {
                return console.log(' 404' + err);
            }
            res.end(data);
        })
    })
    //监听
    server.listen(8080, () => {
        console.log('server running at http://127.0.0.1:8080');
    })

    image.gif

    直接再 端口号后面输入/index.html就可以访问到我们的时钟主页

    image.gif编辑

    这是我的文件路径image.gif编辑

    const newPath = path.join(__dirname, '/时钟案例/clock', url)

    image.gif

    我们输入/index.html url拿到了这个短地址  ,dirname拿到了当前文件的目录路径也就是online,我们将路径导向index.html的父级文件夹 ,三个拼接在一起 就能准确的定位到index.html文件,获取内容将其发送到客户端。

    目录
    相关文章
    |
    16天前
    |
    数据采集 JavaScript 搜索推荐
    服务器端渲染(SSR)(Nuxt+Next.js)
    服务器端渲染(SSR)技术在服务器上生成页面HTML,提升首屏加载速度和SEO效果。Nuxt.js和Next.js分别是基于Vue.js和React.js的流行SSR框架。Nuxt.js提供自动化路由管理、页面级数据获取和布局系统,支持SSR和静态站点生成。Next.js支持SSR、静态生成和文件系统路由,通过`getServerSideProps`和`getStaticProps`实现数据获取。SSR的优点包括首屏加载快、SEO友好和适合复杂页面,但也会增加服务器压力、开发限制和调试难度。选择框架时,可根据项目需求和技术栈决定使用Nuxt.js或Next.js。
    |
    1月前
    |
    XML JavaScript 前端开发
    JavaScript控制台:提升Web开发技能的秘密武器
    作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
    42 1
    JavaScript控制台:提升Web开发技能的秘密武器
    |
    21天前
    |
    缓存 负载均衡 监控
    性能优化:Node.js高效服务器开发技巧与最佳实践
    【10月更文挑战第29天】在Node.js服务器开发中,性能优化至关重要。本文介绍了几种高效开发的最佳实践,包括使用缓存策略、采用异步编程、实施负载均衡和性能监控。通过示例代码展示了如何实现这些技术,帮助开发者构建更快、更稳定的Node.js应用。
    34 2
    |
    28天前
    |
    JavaScript 前端开发 持续交付
    构建现代Web应用:Vue.js与Node.js的完美结合
    【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
    28 4
    |
    1月前
    |
    存储 JavaScript 前端开发
    深入探索 Vue.js:构建现代 Web 应用的利器
    【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
    21 1
    |
    1月前
    |
    JavaScript 前端开发 网络架构
    如何使用Vue.js构建响应式Web应用
    【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
    |
    1月前
    |
    JavaScript 前端开发
    如何使用Vue.js构建响应式Web应用程序
    【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
    |
    1月前
    |
    JSON JavaScript 前端开发
    使用JavaScript和Node.js构建简单的RESTful API服务器
    【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
    19 0
    |
    JavaScript 前端开发
    杨老师课堂之JavaScript案例全选、全不选、及反选
    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/79906084      JavaScript案例之全选、全不选、及反选 效果图: 思路:     1.
    1039 0
    |
    4月前
    |
    JavaScript Java 测试技术
    基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
    基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
    97 2
    下一篇
    无影云桌面