• 前端代码
<!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. 1-2-K Game

    题目链接:https://vjudge.net/contest/330119#problem/E 题目大意可以理解为: 1.给出n个物品以及k,Alice与Bob轮流拿1个,或2个,或k个物品,Ali ...

  2. CentOS7下使用Sonatype Nexus3搭建Docker私有仓库

    相关资料: Sonatype Nexus3官方网站:https://www.sonatype.com/download-oss-sonatype Sonatype Nexus3 Docker Hub地 ...

  3. HeidiSQL 导入Excel数据

    一 前言 原文出处:http://blog.csdn.net/qq_27727681/article/details/53944744 二 效果演示: 2000多条数据,顺利导入成功. 三  实现方法 ...

  4. Oracle笔记2

    24.复杂查询的三道题 # 案例一:列出与SCOTT从事相同工作的所有员工及部门名称.人数.平均工资 GROUP BY使用限制: 查询语句中没有GROUP BY,则SELECT子句中只能出现统计函数; ...

  5. C#UDP异步通信

    using SetingDemo.LogHelp;using SetingDemo.SingleRowDeclare;using System;using System.Collections.Gen ...

  6. Graphics与Canvas

    Graphics: 1. java.awt.Graphics;2.android.graphics Canvas:1.java.awt.Canvas;2.android.graphics.Canvas ...

  7. 小程序page中生命周期

    onLoad -- 页面被加载出来 onShow -- 页面显示出来后  退出后两小时进来,只会执行这个生命周期 onRady -- (逻辑层传给渲染层后才会执行)监听页面初次渲染完成 onHide ...

  8. vue项目js实现图片放大镜功能

    效果图:   我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnif ...

  9. 不显示Zetero导出的文献库中的部分内容

    不显示Zetero导出的文献库中的部分内容 Zetero作为文献管理软件,收集到的参考文献的相关信息(域fields)比较齐全.文章或书籍的引用中仅仅只用到了其中的一部分,如作者.发表年.题名.期刊( ...

  10. C#面向对象（五大基本原则 ）

    五大原则 单一职责原则(SRP)开放封闭原则(OCP) 里氏替换原则(LSP) 依赖倒置原则(DIP) 接口隔离原则(ISP)  一.单一职责原则SRP(Single Responsibility P ...