Chinaunix首页 | 论坛 | 博客

iYiwen

首页　| 　博文目录　| 　关于我

imisskiss

  • 博客访问： 16319
  • 博文数量： 3
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 32
  • 用 户 组： 普通用户
  • 注册时间： 2013-05-30 09:01
个人简介

技术创造财富

文章分类

全部博文（3）

文章存档

2013年（3）

我的朋友
最近访客
推荐博文
ExtJs+spring mvc显示数据库中Blob格式图片

分类： JavaScript

2013-10-24 16:11:44

    最近没事自己在用ExtJs4.2+Spring mvc做一个CRM的系统，在其中的管理用户的时候需要显示数据库中的Blob的头像。但是在网上找了很久有没有找到完整的例子，只是一些零零碎碎的知识(也许是我没有找到,嘿嘿)。后来自己整理好了完整的代码，在此给需要的朋友一些帮助！一下是测试后的效果：



以下是ExtJs的代码：


点击(此处)折叠或打开

  1. Ext.onReady(function(){
  2.         //初始化提示信息
  3.         Ext.QuickTips.init();
  4.         //启动加载器
  5.         Ext.Loader.setConfig({
  6.             enabled:true
  7.         });
  8.         //1 建立数据模型
  9.         Ext.define('UserModel' , {
  10.             extend:'Ext.data.Model' ,
  11.             fields:[        //uuid
  12.                 {name:'id' , type:'string'},
  13.                 {name:'username' , type:'string'},
  14.                 {name:'password' , type:'string'}
  15.             ]
  16.         });
  17.         //2 建立数据集合
  18.         Ext.define('UserStore' , {
  19.             extend:'Ext.data.Store' ,
  20.             model:'UserModel' ,
  21.             currentPage:1 ,
  22.             pageSize:5 ,
  23.             proxy:{
  24.                 type:'ajax' ,
  25.                 url:'/Ext/ext/user/findAll.json' ,    //后台的springmvc访问地址 返回json格式的数据
  26.                 reader:{
  27.                     type:'json' ,    //指定返回的数据格式
  28.                     root: 'object',     //真正的数据节点 如：{A:'a',B:'b':C:'c',root:[{A1:'a1'},{B1:'b1'}],count:10} 其中root就为数据区 其他的为自定义或是ExtJS需要的信息
  29.                     totalProperty:'count'    //计数的标志
  30.                 }
  31.             } ,
  32.             autoLoad: true        //自动加载
  33.         });
  34.         
  35.         //3:表格组件 Ext.grid.Panel
  36.         Ext.define('UserGrid',{
  37.             id:'usergrid' ,
  38.             extend:'Ext.grid.Panel' ,
  39.             title:'用户列表' ,
  40.             width:'100%' ,
  41.             height:'100%' ,
  42.             //icon:'js/icons/table/table.png' ,
  43.             renderTo:Ext.getBody() ,
  44.             forceFit:true ,
  45.             selType:'checkboxmodel' ,         //复选框的模式
  46.             multiSelect:true ,                //多选模式
  47.             //columns store
  48.             columns:[
  49.                 {text:'序号' , width:50 , xtype:'rownumberer' ,align:'center'},
  50.                 {text:'用户名' ,dataIndex:'username' , align:'center' , width:80 , sortable:true },
  51.                 {text:'密码' ,dataIndex:'password' , align:'center' , width:80 , sortable:true },
  52.                 {text:'头像' , align:'center' , width:80 ,
  53.                 renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){        //要显示blob数据的图像 这里是重点
  54.                        var disp = "";                                                                //有关renderer更详细的使用请查看相关文档
  55.                        disp = "+record.get('id')+" width=15 height=15 />";    //其中的src后的地址为后台获取图片的地址
  56.                     return disp;
  57.      }}
  58.                 
  59.             ] ,
  60.          dockedItems: [{
  61.          xtype: 'pagingtoolbar',
  62.          dock: 'bottom',
  63.          displayInfo: true
  64.          }],
  65.          //初始化组件的方法
  66.          initComponent:function(){
  67.              var me = this ;
  68.              var UserStore = Ext.create('UserStore');
  69.              //UserStore.load();            //手动加载
  70.              me.store = UserStore;
  71.              me.dockedItems[0].store = UserStore;
  72.              me.callParent(arguments);
  73.          }
  74.         });
  75.         var d = Ext.create('UserGrid');
  76. });


在使用的时候只需引入该文件和ExtJs的必要文件就可以了。

需要引入的文件有：ext-all.css，ext-all.js，ext-lang-zh_CN.js，和以上的js代码文件

以下是后台的JAVA代码：UserController


点击(此处)折叠或打开

  1. package com.yiwen.ext.controller;

  3. import java.io.InputStream;
  4. import java.io.OutputStream;
  5. import java.sql.Blob;

  7. import javax.annotation.Resource;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;

  11. import org.hibernate.Hibernate;
  12. import org.springframework.stereotype.Controller;
  13. import org.springframework.web.bind.annotation.RequestMapping;
  14. import org.springframework.web.bind.annotation.ResponseBody;

  16. import com.yiwen.ext.dto.DataTransful;
  17. import com.yiwen.ext.service.UserService;
  18. import com.yiwen.ext.util.HibUtil;
  19. import com.yiwen.ext.vo.User;

  21. @Controller
  22. @RequestMapping("/ext/user")
  23. public class UserController {

  25.     private UserService userService;
  26.     
  27.     public UserService getUserService() {
  28.         return userService;
  29.     }

  31.     @Resource
  32.     public void setUserService(UserService userService) {
  33.         this.userService = userService;
  34.     }
  35.     @RequestMapping("/login.json")
  36.     @ResponseBody
  37.     public DataTransful login(User user) throws Exception{
  38.         System.out.println(user.getUsername());
  39.         return userService.login(user);
  40.     }
  41.     /**
  42.      * 查看用户
  43.      * @param request
  44.      * @param response
  45.      * @return
  46.      * @throws Exception
  47.      */
  48.     @RequestMapping("/findAll.json")
  49.     @ResponseBody
  50.     public DataTransful findAll(HttpServletRequest request,HttpServletResponse response) throws Exception{
  51.         String page = request.getParameter("page");     //获取ExtJS传到后台的分页参数
  52.         String size = request.getParameter("limit");
  53.         String start = request.getParameter("start");
  54.         Integer pageNum = (page=="" || page==null)?1:Integer.parseInt(page);
  55.         Integer pageSize = (size=="" || size==null)?5:Integer.parseInt(size);
  56.         Integer pageStart = (start=="" || start==null)?1:Integer.parseInt(start);
  57.         DataTransful dt = new DataTransful();    //此为自定义的数据传输对象
  58.         dt.setPageStart(pageStart);
  59.         dt.setPageNum(pageNum);
  60.         dt.setPageSize(pageSize);
  61.         return userService.findAll(dt);
  62.     }
  63.     /**
  64.      * 添加用户
  65.      * @param user
  66.      * @return
  67.      * @throws Exception
  68.      */
  69.     @RequestMapping("/addUser.json")
  70.     @ResponseBody
  71.     public DataTransful addUser(User user) throws Exception{
  72.         System.out.println(user.getImgs()==null);
  73.         Blob blob = Hibernate.getLobCreator(HibUtil.getSession()).createBlob(user.getImgs().getInputStream(),16777218);
  74.         user.setPhoto(blob);
  75.         return userService.add(user);
  76.     }
  77.     /**
  78.      * 显示blob数据的输出流
  79.      * @param request
  80.      * @param response
  81.      * @throws Exception
  82.      */
  83.     @RequestMapping("/showPic.do")
  84.     public void showPic(HttpServletRequest request,HttpServletResponse response)throws Exception{
  85.         OutputStream out = response.getOutputStream();
  86.         String tid = request.getParameter("id");    //根据用户的id去数据库查找想要的Blob数据字段并返回数据
  87.         Integer id = (tid==null || tid=="")?null:Integer.parseInt(tid);
  88.         if(id!=null){
  89.             InputStream inputStream =userService.getImg(id);
  90.             byte[] b = new byte[4096];
  91.             int n = 0;
  92.             while((n=inputStream.read(b))!=-1){
  93.                 out.write(b, 0, n);    //将数据已流的形式写出
  94.             }
  95.             out.flush();
  96.             out.close();
  97.         }
  98.     }
  99. }


以下是我自定义的数据传输对象：DataTransful


点击(此处)折叠或打开

  1. package com.yiwen.ext.dto;

  3. public class DataTransful {
  4.     
  5.     private Boolean success = false;        //ExtJs中执行proxy方法是需要的标志位
  6.     private Boolean logStat = false;        //账号的登录状态
  7.     private Boolean lockStat = false;        //账号登录后的锁定状态
  8.     private Integer pageNum;        //当前页号
  9.     private Integer pageSize;        //每页显示的数据条数
  10.     private Integer PageStart;        //每页的起始数
  11.     private Object object;            //数据存储对象
  12.     private Long count;                //数据的记录总数
  13.     private String msg = "";        //系统提示信息
  14.     public Integer getPageNum() {
  15.         return pageNum;
  16.     }
  17.     public void setPageNum(Integer pageNum) {
  18.         this.pageNum = pageNum;
  19.     }
  20.     public Integer getPageSize() {
  21.         return pageSize;
  22.     }
  23.     public void setPageSize(Integer pageSize) {
  24.         this.pageSize = pageSize;
  25.     }
  26.     public Integer getPageStart() {
  27.         return PageStart;
  28.     }
  29.     public void setPageStart(Integer pageStart) {
  30.         PageStart = pageStart;
  31.     }
  32.     public Object getObject() {
  33.         return object;
  34.     }
  35.     public void setObject(Object object) {
  36.         this.object = object;
  37.     }
  38.     public Long getCount() {
  39.         return count;
  40.     }
  41.     public void setCount(Long count) {
  42.         this.count = count;
  43.     }
  44.     public Boolean getLogStat() {
  45.         return logStat;
  46.     }
  47.     public void setLogStat(Boolean logStat) {
  48.         this.logStat = logStat;
  49.     }
  50.     public Boolean getLockStat() {
  51.         return lockStat;
  52.     }
  53.     public void setLockStat(Boolean lockStat) {
  54.         this.lockStat = lockStat;
  55.     }
  56.     public String getMsg() {
  57.         return msg;
  58.     }
  59.     public void setMsg(String msg) {
  60.         this.msg = msg;
  61.     }
  62.     public Boolean getSuccess() {
  63.         return success;
  64.     }
  65.     public void setSuccess(Boolean success) {
  66.         this.success = success;
  67.     }
  68. }

以下是我的User对象：

点击(此处)折叠或打开

  1. package com.yiwen.ext.vo;

  3. import java.io.Serializable;
  4. import java.sql.Blob;
  5. import java.util.HashSet;
  6. import java.util.Set;

  8. import javax.persistence.Basic;
  9. import javax.persistence.Column;
  10. import javax.persistence.Entity;
  11. import javax.persistence.FetchType;
  12. import javax.persistence.GeneratedValue;
  13. import javax.persistence.Id;
  14. import javax.persistence.Lob;
  15. import javax.persistence.OneToMany;
  16. import javax.persistence.Table;
  17. import javax.persistence.Transient;

  19. import org.hibernate.annotations.Cascade;
  20. import org.hibernate.annotations.CascadeType;
  21. import org.springframework.web.multipart.commons.CommonsMultipartFile;

  23. import com.fasterxml.jackson.annotation.JsonIgnore;


  26. @Entity
  27. @Table(name="t_user")
  28. public class User implements Serializable{
  29.     @Id
  30.     @GeneratedValue
  31.     private Integer id;
  32.     private String username;
  33.     private String password;
  34.     @Transient
  35.     @JsonIgnore                                //ExtJS+Sprin mvc上传文件是默认是CommonsMultipartFile以上两个注解是不让改字段映射到数据库
  36.     private CommonsMultipartFile imgs;        //并且不让其转换成json数据格式(不让会报错)，在我的例子中 它只是一个中转
  37.     @Lob
  38.     @Basic(fetch=FetchType.EAGER)
  39.     @Column(columnDefinition="longBlob")    //存储到数据库的Blob字段，不让转换成Json数据，单独处理
  40.     @JsonIgnore
  41.     private Blob photo;
  42. /*    @JsonIgnore
  43.     @OneToMany(mappedBy="user")
  44.     @Cascade(CascadeType.ALL)
  45.     private Set roleUsers = new HashSet();*/
  46.     private Integer falg;
  47.     
  48. /*    public Set getRoleUsers() {
  49.         return roleUsers;
  50.     }
  51.     public void setRoleUsers(Set roleUsers) {
  52.         this.roleUsers = roleUsers;
  53.     }*/
  54.     public Integer getFalg() {
  55.         return falg;
  56.     }
  57.     public void setFalg(Integer falg) {
  58.         this.falg = falg;
  59.     }
  60.     public Integer getId() {
  61.         return id;
  62.     }
  63.     public void setId(Integer id) {
  64.         this.id = id;
  65.     }
  66.     public String getUsername() {
  67.         return username;
  68.     }
  69.     public void setUsername(String username) {
  70.         this.username = username;
  71.     }
  72.     public String getPassword() {
  73.         return password;
  74.     }
  75.     public void setPassword(String password) {
  76.         this.password = password;
  77.     }
  78.     public Blob getPhoto() {
  79.         return photo;
  80.     }
  81.     public void setPhoto(Blob photo) {
  82.         this.photo = photo;
  83.     }
  84.     public CommonsMultipartFile getImgs() {
  85.         return imgs;
  86.     }
  87.     public void setImgs(CommonsMultipartFile imgs) {
  88.         this.imgs = imgs;
  89.     }
  90. }
我相信各位朋友能找现在我发表的相关的知识，就不会对底层的代码陌生，这些代码是我的项目中的一部分，只能贴出这个知识点相关的代码，像Service和Dao层的代码就自己去实现哈。

望大家见谅哈

以上的解决方案只是个人现在的解决方案，有更好的方案的话欢迎回帖探讨。若需要改例子的Demo请发邮件索取。邮箱：iMissRing@Gmail.com


阅读(3532) | 评论(0) | 转发(0) |
0

上一篇：利用Extjs导出excel文件

下一篇：没有了

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6