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

    图一、在表单中录入数据

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

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

  • 相关阅读:
    Ext.Net学习笔记12:Ext.Net GridPanel Filter用法
    Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法
    Ext.Net学习笔记14:Ext.Net GridPanel Grouping用法
    Ext.Net学习笔记11:Ext.Net GridPanel的用法
    Ext.Net学习笔记09:Ext.Net Store的用法
    Ext.Net学习笔记10:Ext.Net ComboBox用法
    Ext.Net学习笔记08:Ext.Net中使用数据
    Ext.Net学习笔记07:Ext.Net DirectMethods用法详解
    Ext.Net学习笔记06:Ext.Net DirectEvents用方补充
    Ext.Net学习笔记04:Ext.Net布局
  • 原文地址:https://www.cnblogs.com/tangjizhong/p/6206702.html
Copyright © 2020-2023  润新知