• 前端代码
<!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. Vue.directive()的用法和实例

    官网实例: https://cn.vuejs.org/v2/api/#Vue-directive https://cn.vuejs.org/v2/guide/custom-directive.html ...

  2. Docker daemon.json 的配置项目合集

    这几天看了一点docker相关的东西, 在学习中: 看了下园友的blog 感觉很好 这里 学习一下. https://www.cnblogs.com/pzk7788/p/10180197.html 其 ...

  3. Nginx04---编译安装

    原文:https://www.cnblogs.com/zhang-shijie/p/5294162.html 一:基介绍 官网地址www.nginx.org,nginx是由1994年毕业于俄罗斯国立莫 ...

  4. 【AtCoder】AGC007

    AGC007 A - Shik and Stone 如果i + j走过的格子只有一个,那么就是可以走到 #include <bits/stdc++.h> #define fi first ...

  5. Java静态代理与动态代理实现

    一.什么是代理 代理是一种设计模式,它提供了一种通过代理访问目标对象的方式.在应用代理之前,我们调用对象的过程如下: 客户端直接调用对象并获取返回值.而应用了代理之后,我们调用对象的过程变成如下: 客 ...

  6. Web Server 分布式服务: Nginx负载均衡

    Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大型的入口网站及搜索引擎Rambler使用.其 ...

  7. ecshop二次开发笔记

    1. robots.txt 爬虫协议 网站通过Robots协议告诉搜索引擎哪些页面可以抓取,哪些页面不能抓取. 2. 入口文件 index.php 3. 目录结构分析 admin 后台 api 接口 ...

  8. easyui-combobox多选时的小问题

    easyui-combobox可支持多选,仅需将multiple值设为true即可 $('#combobox').combobox({ url:url, multiple:true, separato ...

  9. 将数组转化为List集合

    字符串转换为数组.将数组转换为List集合 public void testStringToList(){ String s="123-abc-456"; System.out.p ...

  10. SMTP实现发送邮箱2（封装版）

    SMTP.h #ifndef __SMTP_H__ //避免重复包含 #define __SMTP_H__ #include <iostream> #include <list> ...