vert.x学习(七),使用表单获取用户提交的数据

在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服务,就可以在浏览器中查看效果了

图一、在表单中录入数据

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

 

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

 

posted on 2016-12-21 10:36  唐际忠  阅读(1295)  评论(0编辑  收藏  举报