后台系统四：【新增】功能；（FileUpload组件）

最新推荐文章于 2023-09-18 21:30:00 发布

小懒羊爱吃草

最新推荐文章于 2023-09-18 21:30:00 发布

阅读量800

点赞数

分类专栏：（6）企业门户网站案例，项目开发知识点；

本文链接：https://blog.csdn.net/csucsgoat/article/details/114994214

版权

0.新增功能需要完成的功能概述：

1.将新增页create.html添加到项目中

2.在ManagementController类中，添加访问create.jsp的入口

3.编写create.jsp：为文件上传做好准备

4.在ManagementController类中，添加接收create.jsp表单提交的方法；

（1）不借助第三方组件，“在服务器端”采用传统的策略处理【设计文件上传的请求】时：是不行的；

（1.1）演示1：如果不设置form表单的编码方式：enctype="multipart/form-data"；

（1.2）演示2：设置form表单的编码方式：enctype="multipart/form-data"；

结论：通过上面的演示可以知道：不借助第三方组件，“在服务器端”采用传统的策略处理【设计文件上传的请求】时：是不行的；

（2）利用FileUpload组件实现文件上传（非常重要）

（2.1）FileUpload简介，下载：

（2.2）利用FileUpload组件实现文件上传

（2.3）文件上传后，接下来的任务，就是将这个form表单提交过来的数据，新增到存储数据的xml文件中！！！

（3）向xml中添加数据

（3.1）在XmlDataSource工具类中，编写添加的方法

（3.2）在Dao中编写create()方法，向xml中添加数据；

（3.3）在Service中编写：create()方法；

（3.4）编写Controller部分：

（3.5）最后补充一点：属性中有id(自增，唯一标识对象)属性的时候，javaBean一般不添加有参构造；

5.启动程序：（附加一点说明：Tomcat发布目录）

（1）启动应用，观察效果

（2）再一点说明

0.新增功能需要完成的功能概述：

实现思路：

1.将新增页create.html添加到项目中

create.html外部文件引入： create.html是新增油画的表单页：打开create.html：可以看到这个效果：

将create.html添加到工程中：

<%@page contentType="text/html;charset=utf-8"%>
<!-- 新增油画页面 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新增油画</title>
<link rel="stylesheet" type="text/css" href="css\create.css">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div class="container">
		<fieldset>
			<legend>新增油画</legend>
			<form action="" method="post"
				autocomplete="off">
				<ul class="ulform">
					<li>
						<span>油画名称</span>
						<span id="errPname"></span>
						<input id="pname" name="pname" />
					</li>
					<li>
						<span>油画类型</span>
						<span id="errCategory"></span>
						<select id="category" name="category">
							<option value="-1">请选择油画类型</option>
							<option value="1">现实主义</option>
							<option value="2">抽象主义</option>
						</select>
					</li>
					<li>
						<span>油画价格</span>
						<span id="errPrice"></span>
						<input id="price" name="price"/>
					</li>
					<li>
						<span>作品预览</span>
						<span id="errPainting"></span>
						<input id="painting" name="painting" type="file" 
							style="padding-left: 0px;" accept="image/*" />
					</li>

					<li>
						<span>详细描述</span>
						<span id="errDescription"></span>
						<textarea
							id="description" name="description"></textarea>
					</li>
					<li style="text-align: center;">
						<button type="submit" class="btn-button">提交表单</button>
					</li>
				</ul>
			</form>
		</fieldset>
	</div>

</body>
</html>

可以看到，create.jsp里面就是一个form表单；

2.在ManagementController类中，添加访问create.jsp的入口

因为，在工程中，所有JSP对外是不可见的，所以需要在Controller这只一个跳转，作为访问create.jsp的入口；

而在https://blog.csdn.net/csucsgoat/article/details/114897829这篇博客中创建的ManagementController类，ManagementController类需要完成，【增】，【删】，【改】，【查】的操作的；自然新增文件这条业务的Controller部分也是在ManagementController这个类中写的：

package com.imooc.mgallery.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.imooc.mgallery.service.PaintingService;
import com.imooc.mgallery.utils.PageModel;

/**
 * 后台管理功能Controller；
 * 后台系统，所需要的增，删，改，查的操作，都在这一个Controller类中完成；
 * Servlet implementation class ManagementController
 */
@WebServlet("/management")
public class ManagementController extends HttpServlet {
	private static final long serialVersionUID = 1L;
	// 创建PaintingService对象；；
	// 即无论是前台系统的PaintingController，还是后台系统的ManagementController都调用PaintingService中提供的方法；
	private PaintingService paintingService = new PaintingService();
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ManagementController() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 设置请求体中的字符集编码方式；；；
		// get请求没有请求体，所以，这个语句是为doPost()方法中执行doGet(request,response)后，跳转过来的post请求来设置的；
		// 即这条代码是为doPost()来进行服务的；
		request.setCharacterEncoding("UTF-8");
		// 设置响应的字符集编码方式
		response.setContentType("text/html;charset=utf-8");
		
		String method = request.getParameter("method");
		if(method.equals("list")) {  // 当前台传入的method参数值为“list”的时候，代表是分页请求，调用定义的list方法；
			this.list(request,response);  // 然后，将分页处理的代码写在list方法中就可以了；
		}else if(method.equals("delete")) {  // 当method参数值为“delete”时，表示是删除请求，调用定义的delete方法；
			this.delete(request, response);
		}else if(method.equals("show_create")) {
			// method参数为“show_create”，表示是新增；调用新增的方法，跳转到create.jsp
			this.showCreatePage(request, response);
		}
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response); // doPost调用了doGet()方法，所以，把逻辑代码都写在doGet方法中就可以了；
	}
	
	/**
	 * 
	 * @param request
	 * @param response
	 * @throws IOException 
	 * @throws ServletException 
	 */
	private void list(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String p = request.getParameter("p");
		String r = request.getParameter("r");
		if(p==null) {
			p = "1";
		}
		if(r==null) {
			r = "6";
		}
		PageModel pageModel = paintingService.pagination(Integer.parseInt(p), Integer.parseInt(r));
		request.setAttribute("pageModel", pageModel);
		request.getRequestDispatcher("/WEB-INF/jsp/list.jsp").forward(request, response);
	}
	private void delete(HttpServletRequest request, HttpServletResponse response) {
		
	}
	
	/**
	 * 这个方法，是一个纯粹的入口；
	 * @param request
	 * @param response
	 * @throws ServletException
	 * @throws IOException
	 */
	private void showCreatePage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getRequestDispatcher("/WEB-INF/jsp/create.jsp").forward(request, response);
	}

}

ManagementController类的几点说明：

（1）首先，如果请求中method参数值为“show_create”时，就调用showCreatePage()方法；

else if(method.equals("show_create")) {
			// method参数为“show_create”，表示是新增；调用新增的方法，跳转到create.jsp
			this.showCreatePage(request, response);
		}

（2）showCreatePage()方法就是将请求转发到create.jsp上去；再次说明，这个方法仅仅为create.jsp提供一个访问入口！！！

private void showCreatePage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.getRequestDispatcher("/WEB-INF/jsp/create.jsp").forward(request, response);
	}

自此：在浏览器中访问： localhost:8080/management?method=show_create时候，就会访问ManagementController类，然后ManagementController再请求重定向到create.jsp；即还是那句话，jsp需要在Controller中提供访问入口。

3.编写create.jsp：为文件上传做好准备

文件上传：前提条件

下面，根据文件上传的前提条件，对create.jsp进行编写：

<%@page contentType="text/html;charset=utf-8"%>
<!-- 新增油画页面 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新增油画</title>
<link rel="stylesheet" type="text/css" href="css\create.css">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div class="container">
		<fieldset>
			<legend>新增油画</legend>
			<!-- enctype="multipart/form-data"只有这样设置，我们选择的文件才能以二进制的形式上传至服务器 -->
			<form action="/management?method=create" method="post"
				autocomplete="off" enctype="multipart/form-data">
				<ul class="ulform">
					<li>
						<span>油画名称</span>
						<span id="errPname"></span>
						<input id="pname" name="pname" />
					</li>
					<li>
						<span>油画类型</span>
						<span id="errCategory"></span>
						<select id="category" name="category">
							<option value="-1">请选择油画类型</option>
							<option value="1">现实主义</option>
							<option value="2">抽象主义</option>
						</select>
					</li>
					<li>
						<span>油画价格</span>
						<span id="errPrice"></span>
						<input id="price" name="price"/>
					</li>
					<li>
						<span>作品预览</span>
						<span id="errPainting"></span>
						<!-- accept="image/*"：表示在文件选择框中默认保留所有图片格式的文件，这相当于是一个文件的筛选条件，
						但是这个条件并不靠谱；在后面涉及表单校验的时候，就会明白。 -->
						<input id="painting" name="painting" type="file" 
							style="padding-left: 0px;" accept="image/*" />
					</li>

					<li>
						<span>详细描述</span>
						<span id="errDescription"></span>
						<textarea
							id="description" name="description"></textarea>
					</li>
					<li style="text-align: center;">
						<button type="submit" class="btn-button">提交表单</button>
					</li>
				</ul>
			</form>
		</fieldset>
	</div>

</body>
</html>

create.jsp的几点说明：

（1）form表单提交方式设为post；enctype="multipart/form-data"：设置表单编码类型；

<form action="/management?method=create" method="post"
				autocomplete="off" enctype="multipart/form-data">

（2）添加type="file"的input标签；

<input id="painting" name="painting" type="file" 
							style="padding-left: 0px;" accept="image/*" />

（3）action="/management?method=create" ：form表单提交后，设置提交的地址；

<form action="/management?method=create" method="post"
				autocomplete="off" enctype="multipart/form-data">

4.在ManagementController类中，添加接收create.jsp表单提交的方法；

可以发现，create.jsp表单提交的地址是ManagementController类：

<form action="/management?method=create" method="post"
				autocomplete="off" enctype="multipart/form-data">

（1）不借助第三方组件，“在服务器端”采用传统的策略处理【设计文件上传的请求】时：是不行的；

这个表单提交涉及到了文件上传，如果不借助第三方组件，采用以前的方式，在Controller中通过诸如【request.getParameter("pname");】的方式，获取请求中的数据的时候：

package com.imoo

最低0.47元/天解锁文章

小懒羊爱吃草

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
后台系统四：【新增】功能；（FileUpload组件）

目录0.新增功能需要完成的功能概述：1.将新增页create.html添加到项目中2.在ManagementController类中，添加访问create.jsp的入口3.编写create.jsp：为文件上传做好准备4.在ManagementController类中，添加接收create.jsp表单提交的方法；（1）不借助第三方组件，采用传统的策略处理【设计文件上传的请求】时：是不行的；（1）演示1：如果不设置form表单的编码方式：enctype="multipart/form
复制链接

扫一扫

专栏目录