• 前端代码
<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="description" content="">

    <meta name="author" content="">

    <link rel="icon" href="../../../../favicon.ico">

    <title>Sticky Footer Navbar Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->

    <link href="../static/booststrap4/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="../static/mycss/sticky-footer-navbar.css" rel="stylesheet">

</head>

<body>

<header>

    <!-- Fixed navbar -->

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

        <a class="navbar-brand" href="#">Fixed navbar</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">

            <ul class="navbar-nav mr-auto">

                <li class="nav-item active">

                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">Link</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link disabled" href="#">Disabled</a>

                </li>

            </ul>

            <form class="form-inline mt-2 mt-md-0">

                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">

                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

            </form>

        </div>

    </nav>

</header>

<!-- Begin page content -->

<main role="main" class="container">

    <h1 class="mt-5">Sticky footer with fixed navbar</h1>

    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body &gt; .container</code>.</p>

    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>

    <form action="http://127.0.0.1:8090/?name=cpc&age=22" method="post">
#这里action属性如此构造纯粹是上机实验的需要，为的是能使用fs或者http模块解析查询参数

        <p>

        <textarea name="rec" cols="" rows="">

        </textarea>

        </p>

        <p>

            <button type="submit" class="btn btn-outline-primary">提交</button>

        </p>

    </form>

</main>

<footer class="footer">

    <div class="container">

        <span class="text-muted">Place sticky footer content here.</span>

    </div>

</footer>

<!-- Bootstrap core JavaScript

================================================== -->

<!-- Placed at the end of the document so the pages load faster -->

<script src="../static/booststrap4/js/jquery-3.3.1.min.js"></script>

</body>

</html>

效果:

点击提交以后，后端js脚本能够解析get和post请求参数和数据

  • node.js后端代const http = require('http');var myquerystring = require('querystring');var myurl = require('url');var myfs = require('fs');var str="";
http.createServer(function(req,res){

    var myreq = myurl.parse(req.url,true);

    console.log(myreq.query.name); #解析url中的参数name

    console.log(myreq.query.age); #解析url中的参数age    req.on('data',function (data) {

        str+=data;#由于提交过来的数据量是多次到达的，所以用了+=操作符

    });

    req.on('end',function () {
        #定义了提交完成后的动作

        const postdata = myquerystring.parse(str);#这里特地用querystring模块解析了提交的参数，也就是html里面name属性为rec的容器值

        console.log(postdata);

        myfs.writeFile('the pulp fiction.txt',postdata.rec,function(err){
　　　　　　　　#调用fs模块完成写入

            if (err) throw err;

            console.log('file saved');

        })

    });

    res.end();

}).listen();

输出结果:

cpc

[Object: null prototype] {

rec:

' rec= Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 \r\nNode.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 ' }

file saved

undefined

undefined

[Object: null prototype] {

rec:

' rec= Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 \r\nNode.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 ' }

file saved

node.js----一个httpserver提交和解析get参数的例子的更多相关文章

  1. 前端使用node.js的http-server开启一个本地服务器

    前端使用node.js的http-server开启一个本地服务器 在写前端页面中,经常会在浏览器运行HTML页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在http或https的链接时 ...

  2. body-parser Node.js(Express) HTTP请求体解析中间件

    body-parser Node.js(Express) HTTP请求体解析中间件 2016年06月08日     781     声明 在HTTP请求中,POST.PUT和PATCH三种请求方法中包 ...

  3. Node.js中http-server的使用

    Node.js中http-server的使用 使用阿里的npm镜像 国外的npm太慢了.查看一下自己使用的源: npm config get registry 应该显示https://registry ...

  4. 创建node.js一个简单的应用实例

    在node.exe所在目录下,创建一个叫 server.js 的文件,并写入以下代码: //使用 require 指令来载入 http 模块 var http = require("http ...

  5. 使用node.js的http-server开启一个本地服务器

    用html写了一个网页,想要在手机上查看适配效果,但是苦于手机上没有直接查看HTML的.想到手机和电脑都在一个局域网内,能不能搭建一个局域网内的网页服务器呢? 1.下载 http-server 显然, ...

  6. node.js之http-server

    我们有时候会遇到这种情况,一个html文件在本地打开时,测试平常的功能还行,但是,一涉及到ajax请求,就算你是请求本地的json文件,他都会涉及到跨域的问题,浏览器本身就限制了本地打开时,不允许跨域 ...

  7. Node.js小Httpserver

    须要说明两点: 1 程序文件hello.js需用记事本另存为utf-8格式的hello.js watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamVhcGVk ...

  8. Node.js中的express框架获取http参数

    最近本人在学习开发NodeJs,使用到express框架,对于网上的学习资料甚少,因此本人会经常在开发中做一些总结. express获取参数有三种方法:官网介绍如下 Checks route para ...

  9. [转]Node.JS package.json 字段全解析

    Name 必须字段. 小提示: 不要在name中包含js, node字样: 这个名字最终会是URL的一部分,命令行的参数,目录名,所以不能以点号或下划线开头: 这个名字可能在require()方法中被 ...

随机推荐

  1. Linux 中文man手册安装

    首先需要确认的是有没有安装中文支持,如果没有请安装:#yum groupinstall -y "Chinese Support" 现在下载安装包: wget http://manp ...

  2. SQLSERVER 查看服务器IP地址的命令

    今天进行负载均衡的测试的时候 想查询一下数据库相关信息 百度了下 找到解决方案为: SELECT SERVERNAME = CONVERT(NVARCHAR(),SERVERPROPERTY('SER ...

  3. Redis提供的持久化机制

    Redis是一种面向“key-value”类型数据的分布式NoSQL数据库系统,具有高性能.持久存储.适应高并发应用场景等优势.它虽然起步较晚,但发展却十分迅速. 近日,Redis的作者在博客中写到, ...

  4. （二十五）JDBC多表查询

    java易错点 一对多 VS 多对一 VS 多对多 级联 多表增删改 多对多表设计语句(学生老师) java易错点 数组初始化的时候,可以用 {} 赋值,初始化以后,只能用 new Object[] ...

  5. 一个MySQL JDBC驱动bug引起的血案

    1.1      问题背景 公司是做电商系统的,整个系统搭建在华为云上.系统设计的时候,考虑到后续的用户和订单数量比较大,需要使用一些大数据库的组件.关系型数据库这块,考虑到后续数据量的快速增长,不是 ...

  6. 空间变换网络(STN)原理+2D图像空间变换+齐次坐标系讲解

    空间变换网络(STN)原理+2D图像空间变换+齐次坐标系讲解 2018年11月14日 17:05:41 Rosemary_tu 阅读数 1295更多 分类专栏: 计算机视觉   版权声明:本文为博主原 ...

  7. centos7 firewall指定IP与端口、端段访问（常用）

    https://blog.csdn.net/yipianfuyunsm/article/details/99998332 https://www.cnblogs.com/co10rway/p/8268 ...

  8. CSS 实现居中 + 清除浮动

    一.水平居中 1.行内元素:text-align:center; 2.块级元素:margin:0 auto; 3.绝对定位和移动:absolute + transform 4.绝对定位和负边距:abs ...

  9. 逗渣的学习笔记-关于webpack从头撸一遍

    刚开始接触webpack,完全是工作需求.那是去年年末的事情了,当时被迫换到另一个项目组,也是一个新的项目,做手机上面的应用,客户要求用react做应用,所以完全属于赶鸭子上架,当时说真的蛮懵逼的,也 ...

  10. 服务框架 Pigeon 的设计与实现

    1.服务框架Pigeon架构 监控系统 - CAT,负责调用链路分析.异常监控告警 配置中心 - Lion,负责一些开关配置读取 服务治理 - Governor 一个interface定义为一个服务, ...