适合初学者关于头像上传,平台分页查询用户信息的两个功能详解。
在我们实际开发中,特别是个人原创项目,公司负责项目模块。
电商项目,门户,系统等等之间的开发,有着形形色色的功能,这些功能构成了一个项目。
就拿电商项目功能而言
买家用户:用户留言,评论,晒图,购物车,支付,收藏,个人设置等功能。
商家用户:订单管理,优惠券管理,店铺管理,留言回复等功能。
商城本身的网站功能与平台管理,入驻审核,支付审核,数据统计,客服管理等等功能。
蘑菇街的项目功能构成模式就是上述那种,今天就向大家分享关于晒图—也就是图片上传的功能实现,上述功能后面会一一向大家展示的。
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>
<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>
<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>
<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>
<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等等各类技术会逐步给大家分享出来。直接源码让大家下载需要积分,我就直接给大家把源码贴出来了。有什么疑问可以关注我随时跟我交流!
- 使用Flask实现用户信息显示功能,头像上传
- 详解Vue+axios+Node+express实现文件上传(用户头像上传)
- Retrofit+RxJava+OkHttp封装类请求接口数据→原生登录,注册,个人信息页+设置用户头像(图片上传或拍照)+SharedPreferences保存信息+Fresco加载图片+Mvp分层
- 写一个程序让用户查询手机列表,用户输入页码,展示相应分页的手机信息(每页大小10)
- .NET平台开源项目速览(7)关于NoSQL数据库LiteDB的分页查询解决过程
- python获取的信息列表微信公共平台和用户头像
- 关于用户动态信息查询的讨论
- ThinkPHP框架实现用户信息查询更新及删除功能示例
- 关于用户动态信息查询的讨论
- 针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
- 关于列表显示带有用户头像的信息加载头像图片(AsyncTask)
- 银行管理系统 实现用户注册 登录 存、取款 交易记录查询和修改用户信息等功能
- .NET平台开源项目速览(7)关于NoSQL数据库LiteDB的分页查询解决过程
- 牛腩购物32:完成整个网站的功能制作(后台产品列表,多表查询+分页),产品修改保存,图片的上传保存
- iOS AFNetworking 图片上传(修改用户头像功能)
- 关于openstack中普通用户如何获取权限查询集群信息,创建模版flavor
- 【SSH项目实战】国税协同平台-5.头像上传功能
- sharepoint自定义(Customize)用户信息(userprofile)编辑(edit details)页面调用用户头像(select pictures)上传控件
- 微信根据openId查询微信用户信息,这个功能需要认证服务号
- Android 更改头像(图片)并上传服务器功能Demo详解