您的位置:首页 > 其它

适合初学者关于头像上传,平台分页查询用户信息的两个功能详解。

2018-01-31 16:35 1006 查看

 在我们实际开发中,特别是个人原创项目,公司负责项目模块。

电商项目,门户,系统等等之间的开发,有着形形色色的功能,这些功能构成了一个项目。

就拿电商项目功能而言

买家用户:用户留言,评论,晒图,购物车,支付,收藏,个人设置等功能。

商家用户:订单管理,优惠券管理,店铺管理,留言回复等功能。

商城本身的网站功能与平台管理,入驻审核,支付审核,数据统计,客服管理等等功能。

蘑菇街的项目功能构成模式就是上述那种,今天就向大家分享关于晒图—也就是图片上传的功能实现,上述功能后面会一一向大家展示的。


jdbc+Struts2+jsp版本的晒图+分页功能实现   (适合初学者)  :


1:首先创建一个晒图实体类文件还要一个分页文件,里面是你用户展示晒图的信息。在用户评价时会进行晒图,我以平台查询评价信息为例子。


  分页信息实体类:

package com.entity


import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;


public class Page implements Serializable{
//总条数
private Integer total;
//查询出的数据集合
private List rows= new ArrayList(0); 
//当前页码
private Integer pageNo=1;
//行数
private Integer pageSize=3;
//总页数
private Integer totalPage=1;
//上一页
private Integer prevPage=1;
//下一页
private Integer nextPage=1;
   
//当前页码
public Integer getPageNo(){
if(pageNo<=0){
  pageNo=1;
}
  return pageNo; 
}
 
public void setpageNo(Integer pageNo){
  this.pageNo=pageNo; 
}
   
//行数
public Integer getpageSize(){
   if(pageSize<=0){
   pageSize=3;
   }
   return pageSize;
}
public void setpageSize(Integer pageSize){
   this.pageSize=pageSize;
}
  
//总页数
public Integer getTotalPage(){
   totalPage=total/pageSize;
   if(total % pageSize>0){
    totalPage+=1;
   }
   return totalPage;
}
public void setTotalPage(Integer totalPage){
   this.totalPage=totalPage;
}
   
//上一页
public Integer getPrevPage(){
    prevPage=pageNo-1;
    if(prevPage<=0){
    prevPage=1;
    }
     return prevPage;
}
public void setPrevPage(Integer prevPage){
    this.prevPage=prevPage;
}
   
//下一页
public Integer getNextPage(){
    this.getTotalPage();
    nextPage=pageNo+1;
    if(nextPage>totalPage){
    nextPage=totalPage;
    }
    return nextPage;    
}
  public void setNextPage(Integer nextPage){
   this.nextPage=nextPage;
  }
  
  
  public Integer getTotal(){
    return total;
  }
  public void setTotal(Integer total){
     this.total=total;
     this.getTotalPage();
  }
    
  public List getRows(){
    return rows;
  }
  public void setRows(List rows){
   this.rows=rows;
  }
  }



 2、数据库连接文件(MySQL)
package com.services;

import java.sql.Connection;
import java.sql.DriverManager;
public class Service {
    public static Connection getConn(){
         Connection conn=null;
         try{
          Class.forName("com.mysql.jdbc.Driver");
          conn=DriverManager.getConnection("jdbc:mysql:///**","**","******");
         }catch(Exception e){
          e.printStackTrace();
         }
         return conn;
     }
}


连接Oracle文件(想用哪个就用哪个)

package com.service;

import java.sql.Connection;
import java.sql.DriverManager;
public class Service {
  public static Connection getConn(){
  Connection conn=null;
  try{
  String url="jdbc:oracle:thin:@127.0.0.1:1521:orcl"; 
  Class.forName("oracle.jdbc.OracleDriver");
      conn=DriverManager.getConnection(url,"**","******");  
  }catch(Exception e){
    e.printStackTrace();
  }
  return conn;
  }
}



 3、dao层文件

package com.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.entity.Page;
import com.entity.UploadImg;
import com.services.Service;

public class UploadDao {
//添加
public void tianjia(String tx,String nc,String address,String ztime,String bz) throws Exception{
Connection conn=null;
try {
String sql="insert into testt(tx,nc,address,ztime,bz) values(?,?,?,?,?)";
//获取连接
conn=Service.getConn();
PreparedStatement ps=conn.prepareStatement(sql);
ps.setString(1, tx);
ps.setString(2, nc);
ps.setString(3, address);
ps.setString(4, ztime);
ps.setString(5, bz);
//执行
int re=ps.executeUpdate();
ps.close();

} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
if(conn!=null){
conn.close();

}
}
}


//更新
public void gengxin(Integer id,String tx,String nc,String address,String ztime,String bz) throws Exception{
Connection conn=null;
try {
String sql="update testt set tx=?,nc=?,address=?,ztime=?,bz=?where id=?";
//获取连接
conn=Service.getConn();
PreparedStatement pt=conn.prepareStatement(sql);
pt.setString(1, tx);
pt.setString(2, nc);
pt.setString(3, address);
pt.setString(4, ztime);
pt.setString(5, bz);
pt.setInt(6, id);

//执行
int re=pt.executeUpdate();
pt.close();

} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
if(conn!=null){
conn.close();

}
}
}
      
//查询
public static List<String[]> select(Page page) throws SQLException{
    Connection conn=null;
    conn=Service.getConn();
    Integer total = UploadDao.selectCount();
    page.setTotal(total);
    String sql="select * from testt limit ?,?";
    PreparedStatement ps= conn.prepareStatement(sql);
    ps.setInt(1, (page.getPageNo()-1)*page.getpageSize());
    ps.setInt(2, page.getpageSize()); 
    System.out.println(sql);
    ResultSet rs = ps.executeQuery();
    List<String[]> list=new ArrayList<String[]>();
      String[] arr=null;
      while(rs.next()){
      arr= new String[6];
      arr[0]=rs.getString(1);
      arr[1]=rs.getString(2);
      arr[2]=rs.getString(3);
      arr[3]=rs.getString(4);
      arr[4]=rs.getString(5);
      arr[5]=rs.getString(6);
      list.add(arr);
           }
          return list;
        }
      
      
      public static Integer selectCount() throws SQLException{
      Connection conn = null;
      conn = Service.getConn();
      String sql = "select  count(*) from testt ";
      Statement st = conn.createStatement();
  ResultSet rs = st.executeQuery(sql); 
      while(rs.next()){
      return rs.getInt(1);
      }
      return 0;
      }
      
      //删除
      public static void delete(Integer id) throws SQLException{
        Connection conn=null;
        conn=Service.getConn();
        String sql="delete from testt where id='"+id+"'";
        System.out.println(sql);
        Statement st=conn.createStatement();
        int result =st.executeUpdate(sql);
        
      }
}



4、图片上传action实现

package com.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import org.apache.struts2.ServletActionContext;
import com.dao.UploadDao;
import com.entity.Page;
import com.entity.UploadImg;
import com.opensymphony.xwork2.ActionSupport;
public class UploadTest extends ActionSupport{
private File head;
private String headFileName;
private String headContentType;
private Integer id;
private String tx;
private String nc;
private String address;
private String ztime;
private String bz;

public File getHead() {
return head;
}
public void setHead(File head) {
this.head = head;
}
public String getHeadFileName() {
return headFileName;
}
public void setHeadFileName(String headFileName) {
this.headFileName = headFileName;
}
public String getHeadContentType() {
return headContentType;
}
public void setHeadContentType(String headContentType) {
this.headContentType = headContentType;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getTx() {
return tx;
}
public void setTx(String tx) {
this.tx = tx;
}
public String getNc() {
return nc;
}
public void setNc(String nc) {
this.nc = nc;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getZtime() {
return ztime;
}
public void setZtime(String ztime) {
this.ztime = ztime;
}
public String getBz() {
return bz;
}
public void setBz(String bz) {
this.bz = bz;
}

@Override
public String execute() throws Exception {
try {

System.out.println("********************");
System.out.println("图片名称:"+headFileName);
System.out.println("图片类型:"+headContentType);
System.out.println("********************");

String newName = null;
//接收图片复制到上传文件夹
if(headFileName==null || "".equals(headFileName)){
throw new NullPointerException("未接收到图片");
}

//新名称
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
newName = sdf.format(new Date())+headFileName.substring(headFileName.lastIndexOf("."));
//获取路径(正确路径)
String uploadPath="E:/******/******/*****/WebRoot/upload/head";

/*(错误路径)
String rootPath = ServletActionContext.getServletContext().getRealPath("/upload/head");
*/

//判断文件是否存在
File file = new File(uploadPath+"/"+newName);
System.out.println(uploadPath);
if(!file.exists()){
file.createNewFile();
}

//临时文件另存为新文件
InputStream is = new FileInputStream(head);
OutputStream os = new FileOutputStream(file);
byte[] rb = new byte[2048];
int rc = 0;
while((rc = is.read(rb))>0){
System.out.print(rc+"\t");
os.write(rb);
}
os.flush();
os.close();
is.close();

//保存图片信息
UploadDao ud = new UploadDao();
tx=newName;
if (id != null && !"".equals(id)) {
ud.gengxin(id, tx, nc, address, ztime, bz);
}else{
ud.tianjia( tx, nc, address, ztime, bz);
}

//取出保存的所有图片信息
/*Page page=null;
List list = UploadDao.select(page);
ServletActionContext.getRequest().setAttribute("userlist", list);*/

} catch (Exception e) {
e.printStackTrace();
throw e;
}
return "uploadsuccess";
}
}


  跳转链接以及分页判断action实现:

package com.action;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.dao.UploadDao;
import com.entity.Page;

public class UploadQuery {
private Integer id;
private String tx;
private String nc;
private String address;
private String ztime;
private String bz;

public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getTx() {
return tx;
}
public void setTx(String tx) {
this.tx = tx;
}
public String getNc() {
return nc;
}
public void setNc(String nc) {
this.nc = nc;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getZtime() {
return ztime;
}
public void setZtime(String ztime) {
this.ztime = ztime;
}
public String getBz() {
return bz;
}
public void setBz(String bz) {
this.bz = bz;
}

public String test(){
System.out.println("测试主页");
return "testsuccess";
}
public String test1(){
System.out.println("网站头部");
return "a";
}
public String test2(){
System.out.println("测试全选与反选");
return "b";
}


//数组
    private List<String []> list = new ArrayList<String []>();
public List<String[]> getList() {
return list;
}
public void setList(List<String[]> list) {
this.list = list;
}

  //分页中方法及当前页面、页面数据获取。
Page page=new Page();
private Integer pageNo;
private Integer pageSize;
public Page getPage(){
return page;
}
public void setPage(Page page){
this.page=page;

public Integer getPageNo() {
return pageNo;
}
public void setPageNo(Integer pageNo) {
this.pageNo = pageNo;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}


//返回上传页面
public String backhome(){
System.out.println("返回上传页面");
return "backhomesucc";
}

//增加
public String save() throws Exception {
UploadDao ud = new UploadDao();
if(id != null && !"".equals(id)){
ud.gengxin(id, tx, nc, address, ztime, bz);
}else{
ud.tianjia(tx,nc,address,ztime,bz);
}
return "save";
}

//查询上传信息
public String selectfin() throws SQLException{
if("".equals(pageNo)||pageNo == null){
pageNo = 1;
}
if("".equals(pageSize)||pageSize == null){
pageSize = 3;
}
page.setpageNo(pageNo);
page.setpageSize(pageSize);
setList(UploadDao.select(page)); 
return "selectfinal";  
}

public String deletemess() throws SQLException{
System.out.println(id);
UploadDao.delete(id);
return "deletefinal";
}
}



5、Struts.xml配置


图片是存在web工程的图片文件夹中,还有需要用到的jar包。因为适合初学这块功能的人用,至于Redis缓存之类的后面会讲到。


    web.xml

  



 6、接下来就是jsp页面展示了,样式有点丑,但是我们注重的是功能。

  index.jsp  首页

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
     <% request.setAttribute("mxh", request.getContextPath()); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>上传信息页面</title>


      <style>
         a{color:gray;width:140px;height:20px;padding-top:3px;
         -moz-border-radius:10px;border-radius:10px;border-width:1px 1px 1px 1px;
         text-decoration:none;}
         a:hover{ top:20px;background-color:#169BD5;color:white;}
      </style>
      
</head>
<body>
     <center>
         <div id="0" style="position:absolute;top:0px;left:0px;width:100%;height:690px;background:lightgray;">
         
         <div id="1" style="position:absolute;top:100px;left:190px;width:1000px;height:480px;
         border:1px lightgray solid;background:white;-moz-border-radius:10px;border-radius:10px;
         border-width:1px 1px 1px 1px;">
         
          <font color="gray" size="5" style="position:absolute;top:10px;left:430px;">上传信息</font>
          
          <form action="${mxh}/NewsUpload.action" enctype="multipart/form-data" method="post"
          style="position:absolute;top:30px;left:100px;">
          
          <b style="position:absolute;left:-95px;top:35px;">
          <font color="gray">Head portrait</font></b>
          <input type="file" name="head" 
          style="position:absolute;left:40px;width:300px;height:20px;top:40px;
          border-style: 1px solid lightgray;"/><br><br>
          
          <b style="position:absolute;left:-90px;top:85px;">
          <font color="gray">nickname</font></b>
          <input type="text" name="nc" 
          style="position:absolute;left:40px;width:298px;height:20px;top:90px;
          border:1px solid lightgray;"/><br><br>
          
          <b style="position:absolute;left:-90px;top:135px;">
          <font color="gray">address</font></b>
          <input type="text" name="address" 
          style="position:absolute;left:40px;width:298px;height:20px;top:140px;
          border:1px solid lightgray"/><br><br>
          
          <b style="position:absolute;left:-90px;top:185px;">
          <font color="gray">time</font></b>
          <input type="text" name="ztime" 
          style="position:absolute;left:40px;width:298px;height:20px;top:190px;
          border:1px solid lightgray"/><br><br>
          
          <b style="position:absolute;left:-90px;top:235px;">
          <font color="gray">Remarks</font></b>
          <textarea cols="60" rows="8" name="bz" style="position:absolute;left:40px;top:240px;
          border:1px solid lightgray">
          </textarea><br><br>
           
          <input type="submit" value="上传"  style="position:absolute;left:40px;top:400px;width:90px;
      height:30px;background:#169BD5;color:white;-moz-border-radius:10px;border-radius:10px;
      border:1px solid lightgray;">
      <input type="reset" value="重写"  style="position:absolute;left:200px;top:400px;width:90px;
       height:30px;background:#169BD5;color:white;-moz-border-radius:10px;border-radius:10px;
      border:1px solid lightgray;">
          
          </form><br><br>
          <a href="${mxh}/final_selectfin.action" style="position:absolute;top:400px;left:800px;">查询上传信息</a>
           <br>
   
         </div>
        </div>
     
     </center>
</body>
</html>


   上传成功页面  success.jsp 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>上传详情</title>
      <style>
         a{color:gray;width:120px;height:20px;padding-top:3px;
         -moz-border-radius:10px;border-radius:10px;border-width:1px 1px 1px 1px;
         text-decoration:none;}
         a:hover{ top:20px;background-color:#169BD5;color:white;}
      </style>
</head>
<body>
     <br>
     <center><b>上传成功</b></center><br>
     <a href="${pageContext.request.contextPath}/final_backhome.action"
     style="position:absolute;top:70px;left:550px;">返回上传页面</a>
     
</body>
</html>


平台查询用户信息页面    home.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="/struts-tags"  prefix="s" %>
    <% request.setAttribute("mxh", request.getContextPath()); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>个人信息查询页面</title>

 <script type="text/javascript">
   function toPage(pageNo){
  if(pageNo==null || pageNo==''){
pageNo = 1;
}
document.getElementById("pageNo").value = pageNo;
document.getElementById("form01").submit();
  }
  </script>
 
  <script>
         function resure(){
         for(var i=0;i<document.form.elements.length-1;i++){
        if(document.form.elements[i].value==""){
           alert("信息必须填写完整");
           document.form.elements[i].focus();
           return false;
          }
             question=confirm("确认上传?");
             return true;
         } 
       }   
     </script>
     
     
   <style>
       a{text-decoration:none;}
       a{color:gray;width:30px;height:20;border:1px solid lightgray;
       -moz-border-radius:10px;border-radius:10px;border-width:1px 1px 1px 1px;}
        a:hover{color:white;background-color:#169BD5;}
    </style>
</head>
<body>
   <center>
       <div id="1" style="position:absolute;top:70px;left:60px;width:1000px;height:300px;border:1px dotted lightgray">
            <form action="${pageContext.request.contextPath}/final_selectfin.action" id="form01" onSubmit="return resure()">
                  <input type = "hidden" value = "${page.pageNo }" name = "pageNo" id = "pageNo"/>
                  <input type = "hidden" value ="${page.pageSize }" name = "pageSize" id = "pageSize"/>
                   
                    <table width="990px" height="300px">
                      
                      <s:iterator value="list" var="up">
                      
                      <th>
                      
                      <table border="1px lightgray solid">
                      
                      <tr>
                      <td><input type = "checkbox" name = "id" value = "#up[0]"/></td>
                      <td><s:property value="#up[0]"/></td>
                      </tr>
                      
                      <tr>
                      <td>头像</td>
                      <td> 
                       <img src='${mxh}/upload/head/<s:property value="#up[1]"/>' 
                        style="width:100px;height:85px;-moz-border-radius:50px; 
                         -webkit-border-radius: 50px;border-radius:50px;"></td>
                      </tr>
                      
                      <tr>
                       <td>昵称</td>
                       <td><s:property value="#up[2]"/></td>
                      </tr>
                         
                       <tr>
                       <td>地址</td>
                       <td><s:property value="#up[3]"/></td>
                       </tr>
                       
                       <tr>
                       <td>更新时间</td>
                       <td><s:property value="#up[4]"/></td> 
                       </tr>
                           
                       <tr>
                       <td>备注</td>
                       <td><s:property value="#up[5]"/></td> 
                       </tr> 
                  
                       <tr>
                       <td>
                       <a href="${pageContext.request.contextPath}/final_deletemess.action?id=<s:property value="#up[0]"/>">
                         delete</a></td>
               <!-- 
            <td>
            <a href="${pageContext.request.contextPath }/final_showmess.action?id=<s:property value="#student[0]"/>">
                 update</a></td>
            <tr>
            
            -->
                    </table>
              </s:iterator>         
             </table>
        </form>  
         </div>    
         
        
                   
     <div id="3-2" style="position:relative;top:260px;left:15px;width:1000px;">
           <a href="javascript:void(0);" target="_self" onclick="javascript:toPage('1');"
           style="position:absolute;width:50px;height:20px;left:-20px;top:130px;
           -moz-border-radius:10px;border-radius:10px;border-width:2px 2px 0 0;border:1px solid gray;
           background:#169BD5;color:white">首页</a>&nbsp;&nbsp;
           
       <a href="javascript:void(0);" onclick="javascript:toPage('<s:property value="page.prevPage"/>');"
                  style="position:absolute;width:50px;height:20px;left:50px;top:130px;
           -moz-border-radius:10px;border-radius:10px;border-width:2px 2px 0 0;border:1px solid gray;
           background:#169BD5;color:white">上一页</a>&nbsp;&nbsp;
       
       <a href="javascript:void(0);" onclick="javascript:toPage('<s:property value="page.nextPage"/>');"
       style="position:absolute;width:50px;height:20px;left:180px;top:130px;
           -moz-border-radius:10px;border-radius:10px;border-width:2px 2px 0 0;border:1px solid gray;
           background:#169BD5;color:white">下一页</a>&nbsp;&nbsp;
   
   <a href="javascript:void(0);" onclick="javascript:toPage('<s:property value="page.totalPage"/>');"
   style="position:absolute;width:50px;height:20px;left:250px;top:130px;
           -moz-border-radius:10px;border-radius:10px;border-width:2px 2px 0 0;border:1px solid gray;
           background:#169BD5;color:white">尾页</a>&nbsp;&nbsp;
   
   <font style="position:absolute;top:132px;left:140px;" color="gray">
   <s:property value="page.total"/></font>
   <font style="position:absolute;top:132px;left:320px;" color="gray">
   总共<s:property value="page.totalPage"/>页,</font>
   <font style="position:absolute;top:132px;left:390px;" color="gray">
   当前第<s:property value="page.pageNo"/>页</font>
     </div>
           
         <a href="${pageContext.request.contextPath}/index.jsp"
style="position:absolute;width:50px;height:20px;left:560px;top:398px;
           -moz-border-radius:10px;border-radius:10px;border-width:2px 2px 0 0;border:1px solid gray;
           background:#169BD5;color:white">编辑</a>
           
           
 
      </center>
</body>
</html>


 淘宝上,京东上用户晒图也是这样的。有头像,昵称,图片,评价内容等,当然了我这个是平台管理里面的查询信息,是有地址的。换汤不换药嘛,淘宝上用户登录成功后,个人信息页面有头像,昵称,个性签名等等。

关于其他框架,spring,hibernate,springMVC,mybatis,springboot。页面freemarker,ASP等等多种方式实现头像上传,分页,文件上传与下载还有我上述项目那些功能,Redis技术,数据库方面,zookeeper等等各类技术会逐步给大家分享出来。直接源码让大家下载需要积分,我就直接给大家把源码贴出来了。有什么疑问可以关注我随时跟我交流!

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐