Jsp+Servlet 处理图片数据库显示
最近在做一个小demo，类似个性头像上传至后台数据库，采用base64存储，然后点击详情，显示上传的个性头像。再此处做个记录，当然也借鉴了一些大佬。
Thanks♪(･ω･)ﾉ
，如果对小伙伴们有帮助，麻烦点个赞好不，废话不多说进入正题。
1、点击修改 跳转修改页面 点击明细 跳转明细页面 当前登录账号用户名为 1
2、修改页面 上传头像 点击修改返回 分页面
3、明细页面 展示头像
4、新鲜代码出炉了 modify.jsp
实现文件上传的表单标签必须加上enctype="multipart/form-data"这个属性，但是加上这个属性后，在servlet中就无法使用request.getParameter,because 获取到的参数为null
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<title>Title</title>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
window.location.href="${pageContext.request.contextPath}/userservlet?method=page";
</script>
</head>
<form action="${pageContext.request.contextPath}/pictureservlet" method="post" enctype="multipart/form-data">
<table border="1">
<tr><td>编号:</td><td><input name="id" value="${profile.id}"/></td></tr>
<tr><td>姓名:</td><td><input name="name" value="${profile.name}"></td></tr>
<tr><td>生日:</td><td><input name="birthday" value="${profile.birthday}"></td></tr>
<tr><td>性别:</td><td><input name="gender" value="${profile.gender}"></td></tr>
<tr><td>职业:</td><td><input name="career" value="${profile.career}"></td></tr>
<tr><td>住所:</td><td><input name="address" value="${profile.address}"></td></tr>
<tr><td>电话:</td><td><input name="mobile" value="${profile.mobile}"></td></tr>
<tr><td>头像</td><td><input type="file" name="picture" value="选择文件"/></td></tr>
</table>
<input type="submit" value="修改"/>
<input type="button" id="btn1" value="返回"/>
</form>
</body>
</html>
5、新鲜代码出炉了 pictureservlet
@WebServlet(name = "PictureServlet",value="/pictureservlet")
public class PictureServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
UserService service=new UserServiceImpl();
Profile profile = new Profile();
DiskFileItemFactory factory=new DiskFileItemFactory();
ServletFileUpload upload=new ServletFileUpload(factory);
if(!ServletFileUpload.isMultipartContent(request)) {
//传统方式获取表单
return;
try {
List<FileItem> list=upload.parseRequest(request);
if(list!=null) {
for(FileItem item:list) {
//如果fileitem中封装的是普通输入项的数据
if(item.isFormField()) {
String fieldname=item.getFieldName();
String fieldvalue=item.getString("utf-8");
//普通文本
// System.out.println(fieldname+"...."+fieldvalue);
//封装成对象
if(fieldname.equals("id")){
profile.setId(Integer.parseInt(fieldvalue));
continue;
}else {
//将上传的文件存储于upload位置
//创建目录保存上传文件
//将上传的文件存放于WEB-INF目录下，不允许外界直接访问，保证上传文件的安全
String savePath=this.getServletContext().getRealPath("/WEB-INF/upload/"+profile.getId());
File file=new File(savePath);
//判断上传文件是否存在
if(!file.exists()) {
file.mkdirs();
//item中封装的是上传文件
File fileImg = new File(savePath+"/"+profile.getId()+".jpg");
//将FileItem转换为File
item.write(fileImg);
//在后台将数据转换，存储到数据库的过程
byte[] buf=FileTobyte.convert(fileImg);
BASE64Encoder encoder=new BASE64Encoder();
//通过base64来转化图片
String img=encoder.encode(buf);
profile.setPicture(img);
profile.setName(("hhaa"+profile.getId()));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
//保存至数据库
service.save(profile);
request.getRequestDispatcher("/userservlet?method=page").forward(request,response);
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
6、新鲜代码出炉了 detail.jsp
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<title>Title</title>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
window.location.href="${pageContext.request.contextPath}/userservlet?method=page";
<%--$("#img1").load("${pageContext.request.contextPath}/userservlet?method=show",{"url":"${profile.picture}"});--%>
</script>
</head>
<table border="1">
<tr><td>编号:</td><td>${profile.id}</td></tr>
<tr><td>姓名:</td><td>${profile.name}</td></tr>
<tr><td>生日:</td><td>${profile.birthday}</td></tr>
<tr><td>性别:</td><td>${profile.gender}</td></tr>
<tr><td>职业:</td><td>${profile.career}</td></tr>
<tr><td>住所:</td><td>${profile.address}</td></tr>
<tr><td>电话:</td><td>${profile.mobile}</td></tr>
<td colspan="2">
<img src="${pageContext.request.contextPath}/showservlet?id=${profile.id}" style="width:100px;height:50px;"/>
</table>
<%--<img src="${profile.picture}"/><br/>--%>
<div id="img1">
<input type="button" id="btn1" value="返回"/>
</body>
</html>
6、新鲜代码出炉了 showservlet
@WebServlet(name = "ShowServlet",value="/showservlet")
public class ShowServlet extends HttpServlet {
private UserService service=new UserServiceImpl();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String _id = request.getParameter("id");
int id=1;
if(TextUtils.empty(_id)){
id=1;
}else{
id = Integer.parseInt(_id);
//注意 通过id查询，此时profile里的picture是byte[]类型
Profile profile=service.fingById(id);
byte[] byteArr = (byte[]) profile.getPicture();
String data=new String(byteArr,"utf-8");
BASE64Decoder decoder = new BASE64Decoder();
//base64解码成byte[],这样才能生成图片
byte[] bytes = decoder.decodeBuffer(data);
for(int i=0;i<bytes.length;++i){
//byte是有符号的，它表示的范围是-127~127，
// 如果要映射到无符号0~255，那么0~127不用改变，而-128~-1对应128~255
if(bytes[i] <0){
bytes[i]+=256;
//设置返回的文件属性
response.setContentType("image/jpeg");
//流操作，使得可以在jsp页面上接受图片
ServletOutputStream out=response.getOutputStream();
out.write(bytes);
out.flush();
out.close();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
大工搞成。。。。。。。Happy happy happy
Jsp+Servlet 处理图片数据库显示最近在做一个小demo，类似个性头像上传至后台数据库，采用base64存储，然后点击详情，显示上传的个性头像。再此处做个记录，当然也借鉴了一些大佬。Thanks♪(･ω･)ﾉ，如果对小伙伴们有帮助，麻烦点个赞好不，废话不多说进入正题。1、点击修改 跳转修改页面 点击明细 跳转明细页面 当前登录账号用户名为 12、修改页面 上传头像 点击修改返回 分页面3、明细页面 展示头像4、新鲜代码出炉了 modify.jsp实现文
@RequestMapping(value="/xxxxx", method = {RequestMethod.POST})
public Map<String, String> SAVEBANNER(HttpServletRequest request){
Map<String, String> map = new HashMap<Stri...
JAVA语言是目前Internet上大型的WEB应用程序开发时使用得最热门的编程语言，本文描述了JAVA和JSP技术的特点以及在互联网上的使用情况，介绍这两种技术的重要编程方法和两者之关的联系，并完成一个基于这种技术的网上书店系统。
【关键字】JAVA, JavaBeans, Servlet, JSP, 网络编程, 电子商务, 网上书店
Abstract
At present JAVA is the hottest programming language for WEB development, This text described the characteristics of JAVA and JSP technology and the state of operating on Internet, It introduced the relationship between them and the important programming method of the double technology, And work out an online bookstore system base on this kind of technology.
Keywords: JAVA, JavaBeans, Servlet, JSP, web program, internet, bookshop
1、JAVA的网络功能与编程
1-1 JAVA语言简介
1-2 JAVA语言在网络上的应用
1-3 JSP的基础——Servlet 技术
1-4 JavaBeans技术
2、JSP技术简介
2-1在Windows平台下配置JSP运行环境
2-2 JSP、ASP和PHP技术之比较
2-3 JSP语法基础
2-3-1嵌入了JAVA语言的HTML文件
2-3-2 request、out & response——与访问者的交互
2-3-3 session——保持访问者的会话状态
2-3-4 JSP其它基本内置对象
2-4 用JSP开发Web应用的几种主要方式
2-4-1 直接使用JSP
2-4-2 JSP + JavaBeans
2-4-3 JSP + JavaBeans + Servlet
2-5 JSP + JavaBeans实现的高级功能
2-5-1 用JSP访问数据库
2-5-2 用JSP + JavaBeans 实现文件上传
2-6 JSP的MVC开发模型
3、网上书店系统设计项目需求分析
3-1 网上书店系统的模型
3-2 网上书店系统数据库的建立
4、网上书店系统的开发
4-1 后台管理
4-1-1 管理员登录
4-1-2 图书类别管理
4-1-3 图书产品管理
4-1-4 注册会员管理
4-1-5 图书订购管理
4-2 网上书店界面
4-2-1 图书搜索
4-2-2 查看图书详细
4-3 网上购物程序
4-3-1 用户注册
4-3-2 购物篮的实现
用JSP从数据库中读取图片并显示在网页上 环境mysql+tomcat:
<1>先在mysql下建立如下的table. 并insert图像. mysql.sql文件如下:
CREATE TABLE photo ( photo_no int(6) unsigned NOT NULL auto_increment, image blob, PRIMARY KEY (`photo_...
html-》jsp：后缀名+page头部声明
jsp中的资源引用:
绝对路径： ①${pageContext.request.contextPath }/css/style.css
②<%=request.getContextPath()%> ③<c:set var="path" value="${pageContext.request.contextPath }"/>
可以使用${path}来获取
相对路径时相对于url（不建议）
/admin/user/*
/admin/provider/*
<filter-mapping>
<url-pattern>/admin/*</url-pattern>
如何处理登录问题？
①方式1 login.jsp放在WEB-INF
/admin/user/toLogin->login.jsp
/admin/user/login->点击登录时的处理
在过滤器中，if(url.indexOf("/toLogin") != -1 ||...){
chain.doFilter(request,response);
return;
单独放置登录页面
login.html
login.jsp
4.项目周期
项目答辩时间：
5.项目分析:
（1）登录功能:
①根据用户名查询数据库,
将用户输入的密码加密, 与数据库查询出的密码进行比对.
加密方法: String p2 = Base64.encode(p.getBytes() );//Base64方式加密
或者 String password = DigestUtils.md5Hex(value);//MD5方式加密
public User login(String us,String ps){}
public String login(String username){
//根据username查询密码p1
根据p1和输入的密码p1比较
-------------------
|后台 |
相等，登录 否则，登录失败
（2）控制器使用Servlet分发请求控制，实现一个Servlet处理多个请求
（3）根据用户角色id，来判断是否显示哪些管理模块，
或者是否显示删除、增加和修改图标
（4）页面提取: 首页等页面的头部,左侧导航,底部 等都可以单独的提取到JSP中. 在源页面上进行引用.
<%@include file=""%> <jsp:include page="">等
（百度搜索iframe的使用）
（5）账单,供应商,用户查询列表带分页。
该分页查询还需带条件。
条件查询: 支持模糊查询。
条件在查询之后, 要继续回显到页面上。
（6）供应商下拉列表: 1.在准备跳转目标页面的servlet中,查询所有供应商信息. 传到页面上
2.在JSP页面上, 拿到传递来的供应商信息.动态展示在下拉列表中.
（7）账单,供应商,用户新增修改时: 1.页面必须有JS客户端验证.
2.Servlet服务端获取页面参数时,必须要有服务端验证.
3.新增的成功失败给出提示.
4.用户新增时,注意界面使用的日期控件.和新增前,密码加密存储.
（8）用户查询: 管理员可以查看所有用户列表.
经理与普通用户只能查看自身信息，没有权限查看所有用户，无需显示用户列表，值显示自己信息即可。
（9）账单,供应商,用户修改功能: 主键编号等不让改.修改页面依然需要JS验证. 服务端验证.
修改成功,失败给出提示.
用户修改: 权限修改. 只提供给管理员,用来修改普通用户与经理.
（10）账单,供应商,用户删除功能: 需要弹窗提示.也可以自己编写界面
确认删除之后,成功失败给出提示.
供应商删除: 检查当有所属未支付账单时,给出提示,不允许删除.如果没有，则删除该供应商的所有账单
用户删除: 不允许删除自身.
（11）密码修改功能:
1.修改密码页面,必须有JS验证.服务端验证.
2.旧密码必须与当前登录账号的密码相同.
3.新密码修改时,加密存储.
4.修改密码失败,在当前页面给出提示.修改成功,提示请重新登录,自动退出并跳往登录页，保证session失效
（12）访问权限控制:
1.增加过滤器. 登录页面可直接访问. 如果访问不是登录地址,则根据session判断是否登录.
如果已经登录，核心页面直接显示；
如果没有登录，跳转到登录页面；
如果已经登录，访问登录页面，跳转到核心页面
对于图片在JSP中显示的问题很常见，用户上传图片，最简单的办法放到数据库中，如何显示？
用户需要把图片以BASE64编码的方式放到XML中，然后上传XML，我们需要显示该图片，
1、把图片编码存储到数据库中，然后利用Servlet来显示图片
base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求Data URI scheme。
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。
Data URI sche...
1.编写JavaBean类，定义数据库表中的字段和相应的get/set方法。
2.编写DAO（数据访问对象）类，实现对数据库的增删改查操作。可以采用JDBC或者ORM框架（如MyBatis、Hibernate）。
3.编写Servlet类，接收用户请求并调用DAO类进行数据库操作。
4.编写JSP页面，展示数据和接收用户操作。
下面是一个简单的例子：
1.定义JavaBean类
假设我们有一个用户表，包含id、name、age三个字段。我们可以定义一个User类来映射表中的数据：
public class User {
private int id;
private String name;
private int age;
public User() {
public User(int id, String name, int age) {
this.id = id;
this.name = name;
this.age = age;
// getters and setters
2.实现DAO类
我们可以定义一个UserDAO类来实现对用户表的增删改查操作。假设我们使用JDBC来访问数据库：
public class UserDAO {
private Connection conn;
public UserDAO() {
// 初始化数据库连接
public void addUser(User user) {
// 添加用户到数据库
public void deleteUser(int id) {
// 根据id删除用户
public void updateUser(User user) {
// 更新用户信息
public User getUserById(int id) {
// 根据id查询用户信息
return null;
public List<User> getAllUsers() {
// 查询所有用户信息
return null;
// 关闭数据库连接等资源
3.编写Servlet类
我们可以编写一个UserServlet类来接收用户请求并调用DAO类进行数据库操作：
public class UserServlet extends HttpServlet {
private UserDAO userDAO;
public void init() {
// 初始化UserDAO
public void doGet(HttpServletRequest request, HttpServletResponse response) {
// 根据请求参数调用DAO类进行相应的数据库操作
// 将结果保存到request中，转发到JSP页面进行展示
4.编写JSP页面
最后，我们可以编写一个JSP页面来展示数据和接收用户操作：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<title>User Management</title>
</head>
<h1>User Management</h1>
<table>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
<c:forEach var="user" items="${users}">
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
<a href="editUser?id=${user.id}">Edit</a>
<a href="deleteUser?id=${user.id}">Delete</a>
</c:forEach>
</table>
<form action="addUser" method="post">
<label>Name:</label>
<input type="text" name="name"/><br/>
<label>Age:</label>
<input type="text" name="age"/><br/>
<input type="submit" value="Add"/>
</form>
</body>
</html>
以上就是一个简单的JSP+Servlet+JavaBean实现数据库的增删改查的例子。当然，实际项目中可能会更加复杂，需要根据具体情况进行调整和扩展。
Vue--Props with type Object/Array must use a factory function to return the default value.
30948
