在web开发中，用的最多的就是表单了，用户通过表单提交数据到系统后台，系统又可以通过表单传递的数据做业务分析。那么这章就学习在vert.x中怎么使用表单，获取表单的参数值。

编写一个表单模板代码resources/templates/user.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form action="/user" method="post">

        <label>姓名</label>

        <input type="text" name="name">

        <br>

        <label>性别</label>

        <input type="checkbox" name="sex" value="M">男

        <input type="checkbox" name="sex" value="F">女

        <br>

        <label>年龄</label>

        <select name="age">

            <option value="1">一岁</option>

            <option value="2">两岁</option>

            <option value="3">三岁</option>

            <option value="4">四岁</option>

        </select>

        <br>

        <input type="submit" value="保存">

    </form>

</body>

</html>

从form的action里面看到，我们将post请求提交给/user，下面编写过去表单参数值的代码Form.java

package com.javafm.vertx.helloworld;

import io.vertx.core.Vertx;

import io.vertx.core.http.HttpServer;

import io.vertx.ext.web.Router;

import io.vertx.ext.web.handler.BodyHandler;

import io.vertx.ext.web.templ.ThymeleafTemplateEngine;

import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;

/**

 * Created by lemontea <36634584@qq.com> on 16-12-21.

 */

public class Form {

    public static void main(String[] args) {

        Vertx vertx = Vertx.vertx();

        ThymeleafTemplateEngine engine = ThymeleafTemplateEngine.create();

        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();

        resolver.setPrefix("templates");

        resolver.setSuffix(".html");

        resolver.setTemplateMode("HTML5");

        engine.getThymeleafTemplateEngine().setTemplateResolver(resolver);

        Router router = Router.router(vertx);

        router.route().handler(BodyHandler.create());

        router.get("/user").handler(routingContext -> {

            engine.render(routingContext, "/user", res -> {

                if (res.succeeded()) {

                    routingContext.response().putHeader("Content-Type", "text/html").end(res.result());

                } else {

                    routingContext.fail(res.cause());

                }

            });

        });

        router.post("/user").handler(routingContext -> {

            String name = routingContext.request().getParam("name");

            String sex = routingContext.request().getParam("sex");

            String age = routingContext.request().getParam("age");

            routingContext.response().putHeader("Content-Type", "text/html").end("姓名：" + name + "，性别：" + sex + "，年龄：" + age);

        });

        HttpServer httpServer = vertx.createHttpServer();

        httpServer.requestHandler(router::accept).listen(8080);

    }

}

router.get("/user")的作用是当从浏览器访问/user路径时，就把上面的user.html模板渲染出来，也就是显示上面的user.html这个表单页面。

router.post("/user")的作用是当用户在表单页面点击保存按钮后，触发post请求，vert.x会将这个请求路由到router.post("/user").handler里面，在这里面就可以处理表单传递过来的数据了。

当然光凭router.post("/user")和routingContext.request().getParam还是无法拿到表单的值的，还需要配置router.route().handler(BodyHandler.create());

BodyHandler就是用来处理Request请求消息体的，有了它，你就可以通过routingContext.request().getParam来获取参数了。

写好上面代码后，运行http服务，就可以在浏览器中查看效果了

图一、在表单中录入数据

图二、获取表单提交的参数，并向浏览器中输出

原创文章，转载请注明出处。

vert.x学习（七），使用表单获取用户提交的数据的更多相关文章

  1. django 获取用户提交的数据 文件 表单

    templates: <div> <form action="/detail" method="post" enctype="mul ...

  2. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  3. node——将用户提交的数据写入data.json文件

    前续 当我们在进行将数据提交到某个网页时,需要将提交数据保存下来 1.提交数据 2.获得数据 3.保存数据 先看提交数据: <!DOCTYPE html> <html lang=&q ...

  4. WebAPI的AuthorizeAttribute扩展类中获取POST提交的数据

    在WEBAPI中,AuthorizeAttribute类重写时,如何获取post数据是个难题,网上找资料也不好使,只能自己研究,通过研究发现,WEBAPI给了我们获取POST数据的可能,下面介绍一下: ...

  5. Servlet中如何获取用户提交的查询参数或表单数据？

    ①HttpServletRequest的getParameter()方法. ②HttpServletRequest的getParameterValues()方法. ③HttpServletReques ...

  6. 吴裕雄--天生自然 PHP开发学习：表单和用户输入

    <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</t ...

  7. Apicloud学习第三天——获取云数据库的数据方法

    apicloud学习30天中的对用进行注册和登录以及数据的获取的代码,在apicloud中有单独的api对用户的增删查改进行操作,这里写下增加和查询. 增加用户数据 var model=api.req ...

  8. 微信小程序云开发-数据库-获取用户添加的数据到数据库

    一.列表页面新增[添加商品]按钮 在列表页增加[添加商品]按钮,按钮绑定事件toAdd(),用户点击该按钮跳转到添加商品页面. 在js文件中写toAdd()函数,作用是点击[添加商品]按钮,跳转到[添 ...

  9. FORM表单不刷新提交POST数据

    很多时候表单太多项,JQ懒的去处理了 使用这个提交吧.和她讨论出去旅游,去哪里好呢,此时还和以前一样吗? function testaction(){ var f = $("#publish ...

随机推荐

  1. grep 正则表达式

    本文转自:http://www.jb51.net/article/31207.htm 正则表达式只是一种表示法,只要工具支持这种表示法, 那么该工具就可以处理正则表达式的字符串.vim.grep.aw ...

  2. C/C++:C++中static，extern和extern "C"关键字

    1. extern 变量 extern 表明该变量在别的地方已经定义过了,在这里要使用那个变量. 当extern不与"C"在一起修饰变量或函数时,如在头文件中: extern in ...

  3. October 19th Week 43rd Wednesday, 2016

    I find that the harder I work, the more luck I seem to have. 越努力,越幸运. However, I find that the harde ...

  4. python备忘

    1.引用已经编写好的.py文件(Windows系统) >>>import sys >>>sys.path.append("C:/python") ...

  5. Linux网络管理2---（网络环境查看命令、网络测试命令）

    1.网络环境查看命令 ifconfig命令 查看或临时修改网络状态的命令 可以看到IP.子网掩码……信息 关闭和启动网卡 ifdown 网卡设备名(比如: ifdown eth0):禁用该网卡设备 i ...

  6. IL指令详细

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

  7. 开发常用之在webstorm中使用cmd

      而今前端开发经常与cmd打交道,如使用个npm什么的,如果老是在ide和cmd之间切换显得比较繁琐,众多前端利器中我最喜欢的就是webstorm,而webstorm中就可以直接使用cmd,如图1, ...

  8. 三言两语之微信小程序开发初体验(1)

    一.前情   直接切入主题,微信发布了小程序,前端开发者表示,如果不会微信小程序的开发感觉就跟不上时代了,先解答几个容易出现歧义的问题 小程序就叫小程序,不叫应用号,因为apple不准,哈哈 小程序是 ...

  9. tomcat 配置项目指定域名

    <Host name="www.xxx.com" appBase="D:/tomcat/webapps/web"> <alias>xxx ...

  10. Windows远程连接CentOS桌面

    VNC (Virtual Network Console)是虚拟网络控制台的缩写.它 是一款优秀的远程控制工具软件.VNC的基本运行原理和一些Windows下的远程控制软件很相像 VNC基本上是由两部 ...