在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服务,就可以在浏览器中查看效果了
图一、在表单中录入数据
图二、获取表单提交的参数,并向浏览器中输出
原创文章,转载请注明出处。