java web 生产者消费者问题(JavaWeb25-2案例-品牌列表的添加功能)

#创作挑战赛#

6.3 添加品牌功能

java web 生产者消费者问题(JavaWeb25-2案例-品牌列表的添加功能)(1)

如上所示,当我们点击 新增 按钮,会跳转到 addBrand.html 页面。在 addBrand.html 页面输入数据后点击 提交 按钮,就会将数据提交到后端,而后端将数据保存到数据库中。

具体的前后端交互的流程如下:

java web 生产者消费者问题(JavaWeb25-2案例-品牌列表的添加功能)(2)

说明:

前端需要将用户输入的数据提交到后端,这部分数据需要以 json 格式进行提交,数据格式如下:

java web 生产者消费者问题(JavaWeb25-2案例-品牌列表的添加功能)(3)

6.3.1 后端实现

在 com.itheima.web 包下创建名为 AddServlet 的 servlet,具体的逻辑如下:

  • 获取请求参数
  • 由于前端提交的是 json 格式的数据,所以我们不能使用 request.getParameter() 方法获取请求参数
    • 如果提交的数据格式是 username=zhangsan&age=23 ,后端就可以使用 request.getParameter() 方法获取
    • 如果提交的数据格式是 json,后端就需要通过 request 对象获取输入流,再通过输入流读取数据
  • 将获取到的请求参数(json格式的数据)转换为 Brand 对象
  • 调用 service 的 add() 方法进行添加数据的逻辑处理
  • 将 json 数据响应回给浏览器。

AddServlet 代码如下:

@WebServlet("/addServlet") public class AddServlet extends HttpServlet { private BrandService brandService = new BrandService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1. 接收数据,request.getParameter 不能接收json的数据 /* String brandName = request.getParameter("brandName"); System.out.println(brandName);*/ // 获取请求体数据 BufferedReader br = request.getReader(); String params = br.readLine(); // 将JSON字符串转为Java对象 Brand brand = JSON.parseObject(params, Brand.class); //2. 调用service 添加 brandService.add(brand); //3. 响应成功标识 response.getWriter().write("success"); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }

6.3.2 前端实现

在 addBrand.html 页面给 提交 按钮绑定点击事件,并在绑定的匿名函数中发送异步请求,代码如下:

//1. 给按钮绑定单击事件 document.getElementById("btn").onclick = function () { //2. 发送ajax请求 axios({ method:"post", url:"http://localhost:8080/brand-demo/addServlet", data:??? }).then(function (resp) { // 判断响应数据是否为 success if(resp.data == "success"){ location.href = "http://localhost:8080/brand-demo/brand.html"; } }) }

现在我们只需要考虑如何获取页面上用户输入的数据即可。

首先我们先定义如下的一个 js 对象,该对象是用来封装页面上输入的数据,并将该对象作为上面发送异步请求时 data 属性的值。

// 将表单数据转为json var formData = { brandName:"", companyName:"", ordered:"", description:"", status:"", };

接下来获取输入框输入的数据,并将获取到的数据赋值给 formData 对象指定的属性。比如获取用户名的输入框数据,并把该数据赋值给 formData 对象的 brandName 属性

// 获取表单数据 let brandName = document.getElementById("brandName").value; // 设置数据 formData.brandName = brandName;

说明:其他的输入框都用同样的方式获取并赋值。但是有一个比较特殊,就是状态数据,如下图是页面内容

java web 生产者消费者问题(JavaWeb25-2案例-品牌列表的添加功能)(4)

我们需要判断哪儿个被选中,再将选中的单选框数据赋值给 formData 对象的 status 属性,代码实现如下:

let status = document.getElementsByName("status"); for (let i = 0; i < status.length; i ) { if(status[i].checked){ // formData.status = status[i].value ; } }

整体页面代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加品牌</title> </head> <body> <h3>添加品牌</h3> <form action="" method="post"> 品牌名称:<input id="brandName" name="brandName"><br> 企业名称:<input id="companyName" name="companyName"><br> 排序:<input id="ordered" name="ordered"><br> 描述信息:<textarea rows="5" cols="20" id="description" name="description"></textarea><br> 状态: <input type="radio" name="status" value="0">禁用 <input type="radio" name="status" value="1">启用<br> <input type="button" id="btn" value="提交"> </form> <script src="js/axios-0.18.0.js"></script> <script> //1. 给按钮绑定单击事件 document.getElementById("btn").onclick = function () { // 将表单数据转为json var formData = { brandName:"", companyName:"", ordered:"", description:"", status:"", }; // 获取表单数据 let brandName = document.getElementById("brandName").value; // 设置数据 formData.brandName = brandName; // 获取表单数据 let companyName = document.getElementById("companyName").value; // 设置数据 formData.companyName = companyName; // 获取表单数据 let ordered = document.getElementById("ordered").value; // 设置数据 formData.ordered = ordered; // 获取表单数据 let description = document.getElementById("description").value; // 设置数据 formData.description = description; let status = document.getElementsByName("status"); for (let i = 0; i < status.length; i ) { if(status[i].checked){ // formData.status = status[i].value ; } } //console.log(formData); //2. 发送ajax请求 axios({ method:"post", url:"http://localhost:8080/brand-demo/addServlet", data:formData }).then(function (resp) { // 判断响应数据是否为 success if(resp.data == "success"){ location.href = "http://localhost:8080/brand-demo/brand.html"; } }) } </script> </body> </html>

说明:

查询所有 功能和 添加品牌 功能就全部实现,大家肯定会感觉前端的代码很复杂;而这只是暂时的,后面学习了 vue 前端框架后,这部分前端代码就可以进行很大程度的简化。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页