用户列表显示
我们昨天完成了第一部分的开发，即项目搭建和登录、注册功能实现。今天本文将与读者一起实现用户列表的显示、部门模块的显示和头像上传功能。
在用户列表下有一个查看用户功能，但是前端开发人员只给出了固定的“假数据”，我们现在要从数据库中查出所有用户的信息然后再写入前端页面。
既然又是涉及到数据库的操作，那么肯定要重新封装Dao层和DaoImpl层了。
Dao层
代码语言：javascript复制package com.yixi.dao;
import com.yixi.model.User;
import java.util.List;
import java.util.Map;
public interface UserDao {
List<User> select();
Map<String,String> selectDetail(Integer id);
int saveUser(User user);
// int delete(Integer id);
// int update(Integer id,User user);
}DaoImpl层
代码语言：javascript复制package com.yixi.daoImpl;
import com.yixi.dao.UserDao;
import com.yixi.model.User;
import com.yixi.utils.ConnDB;
import com.yixi.utils.JDBCUtil;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class UserDaoImpl implements UserDao {
private ConnDB conn = new ConnDB();
@Override
public List<User> select() {
List<User> userList = null;
try {
String sql = "select * from user";
JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtil.getDataSource());
userList = jdbcTemplate.query(sql,new BeanPropertyRowMapper<>(User.class));
}catch (Exception e){
e.printStackTrace();
}
return userList;
}
@Override
public Map<String,String> selectDetail(Integer id) {
Map<String,String> map = null;
String sql1 = "select * from user where id='" id "'";
String sql2 = "SELECT count(1) as f from userfocus where user_focus_id='" id "'";
ResultSet rs1 = conn.executeQuery(sql1);
ResultSet rs2 = conn.executeQuery(sql2);
try{
map = new HashMap<>();
if (rs1.next()){
map.put("look",rs1.getString("look"));
map.put("real_name",rs1.getString("real_name"));
map.put("dept_name",rs1.getString("dept_name"));
map.put("phone",rs1.getString("phone"));
map.put("age",rs1.getString("age"));
map.put("gender",rs1.getString("gender"));
map.put("register_time",rs1.getString("register_time"));
map.put("login_time",rs1.getString("login_time"));
map.put("is_secret",rs1.getString("is_secret"));
map.put("pic",rs1.getString("pic"));
}
if (rs2.next()){
map.put("focus",rs2.getString("f"));
}
}catch (SQLException e){
e.printStackTrace();
}
conn.close();
return map;
}
@Override
public int saveUser(User user) {
int ret = -1;
try {
String sql = "insert into user(username,password,email) values('"
(user.getUsername()) "','"
(user.getPassword()) "','"
(user.getEmail()) "')";
JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtil.getDataSource());
ret = jdbcTemplate.update(sql);
}catch (Exception e){
e.printStackTrace();
ret = 0;
}
return ret;
}
}在DaoImpl我们实现了“按照用户ID”来查找用户数据的功能接口，并以HashMap的方式返回给调用者。接下来我们修改前端静态页面，使它变为动态数据页面。在这里有两种处理方式。第一种是将html文件改为jsp文件，使用jsp技术（jsp本质上也是一个java servlet）动态显示数据。第二种方式是使用ajax（异步处理技术）并结合JQuery框架进行前后端分离的开发。
在实际开发中，我们往往选择后者，因为jsp技术代码耦合度太高，前后端往往难以统一维护（前端人员不一定懂后端技术），并且jsp页面渲染效率低于html，运行速度也低于纯前端框架开发的运行速度。但是我们作为初学者，必须了解jsp的运行原理和语法格式，因此本功能我们使用jsp技术开发，后续版本迭代我们再重新使用ajax技术。
代码语言：javascript复制<%@ page import="com.yixi.model.User" %>
<%@ page import="java.util.List" %>
<%@ page import="com.yixi.utils.ConnDB" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
ConnDB conn = new ConnDB();
ResultSet rs = conn.executeQuery("select * from user");
%>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<!-- Font Awesome CSS-->
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
<!-- Custom Font Icons CSS-->
<link rel="stylesheet" href="css/font.css">
<!-- theme stylesheet-->
<link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
<!-- Custom stylesheet - for your changes-->
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/layer.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-switch.min.css">
<title>查看用户</title>
</head>
<body>
<header class="header">
<nav class="navbar navbar-expand-lg">
<div class="search-panel">
<div class="search-inner d-flex align-items-center justify-content-center">
<div class="close-btn">Close <i class="fa fa-close"></i></div>
<form id="searchForm" action="#">
<div class="form-group">
<input type="search" name="search" placeholder="What are you searching for...">
<button type="submit" class="submit">Search</button>
</div>
</form>
</div>
</div>
<div class="container-fluid d-flex align-items-center justify-content-between">
<div class="navbar-header">
<!-- Navbar Header--><a href="home.html" class="navbar-brand">
<div class="brand-text brand-big visible text-uppercase"><strong class="text-primary">小标</strong><strong>会议平台</strong></div>
<div class="brand-text brand-sm"><strong class="text-primary">X</strong><strong>B</strong></div></a>
<!-- Sidebar Toggle Btn-->
<button class="sidebar-toggle"><i class="fa fa-long-arrow-left"></i></button>
</div>
<div class="right-menu list-inline no-margin-bottom">
<!-- Log out -->
<div class="list-inline-item logout">
<a id="logout" href="index.html" class="nav-link"><span class="d-none d-sm-inline">Logout </span></a>
</div>
</div>
</div>
</nav>
</header>
<div class="d-flex align-items-stretch">
<!-- Sidebar Navigation-->
<nav id="sidebar">
<!-- Sidebar Header-->
<div class="sidebar-header d-flex align-items-center">
<div id="avatar" class="avatar"><img src="img/avatar-6.jpg" alt="..." class="img-fluid rounded-circle"></div>
<div class="title">
<h1 class="h5">小标</h1>
<p>研发部</p>
</div>
</div>
<!-- Sidebar Navidation Menus--><span class="heading">Main</span>
<ul class="list-unstyled">
<li><a href="home.html"> <i class="icon-home"></i>主页 </a></li>
<li><a href="#userDropdown" data-toggle="collapse" aria-expanded="true"> <i class="icon-windows"></i>用户列表</a>
<ul id="userDropdown" class="collapse show">
<li class="active"><a href="user.html">查看用户</a></li>
<li><a href="my_user.html">我关注的用户</a></li>
<li><a href="article.html">发布文章</a></li>
<li><a href="article_collect.html">我的收藏</a></li>
</ul>
</li>
<!--<li><a href="login.html"> <i class="icon-logout"></i>Login page </a></li>-->
<li><a href="#depDropdown" data-toggle="collapse"> <i class="icon-windows2"></i>部门列表</a>
<ul id="depDropdown" class="collapse list-unstyled ">
<li><a href="department.html">全部部门</a></li>
<li><a href="meeting.html">会议系统</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Sidebar Navigation end-->
<div class="page-content">
<div class="page-header">
<div class="container-fluid">
<h2 class="h5 no-margin-bottom">用户列表</h2>
</div>
</div>
<section class="no-padding-bottom">
<div class="title">
<form class="form-inline">
<div class="form-group">
<label for="inlineFormInput" class="sr-only">Name</label>
<input id="inlineFormInput" type="text" placeholder="按名字查找" class="mr-sm-3 form-control">
</div>
<div class="form-group">
<input type="submit" value="查询" class="btn btn-primary">
</div>
</form>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>简介</th>
<th>操作</th>
<th>加关注</th>
</tr>
</thead>
<tbody>
<%
String str=(String)request.getParameter("Page");
if(str==null){
str="0";
}
int pagesize=5;
rs.last();
int RecordCount=rs.getRow();
int maxPage=0;
maxPage=(RecordCount%pagesize==0)?(RecordCount/pagesize):(RecordCount/pagesize 1);
int Page=Integer.parseInt(str);
if(Page<1){
Page=1;
}else{
if(((Page-1)*pagesize 1)>RecordCount){
Page=maxPage;
}
}
try {
rs.absolute((Page-1)*pagesize 1);
} catch (SQLException e) {
e.printStackTrace();
}
for(int i=1;i<=pagesize;i ){
try {
Integer id = rs.getInt("id");
String realName = rs.getString("real_name");
String gender = rs.getString("gender");
Integer age = rs.getInt("age");
String desc = rs.getString("desc");
%>
<tr>
<th scope="row"><%=id%></th>
<td><%=realName%></td>
<td><%=gender%></td>
<td><%=age%></td>
<td><%=desc%></td>
<td>
<a href="/toUserDetail?id=<%=id%>"><input type="submit" value="详细信息" class="btn-xs btn-primary userDetail"></a>
</td>
<td>
<input type="checkbox" value="" class="checkbox-template">
</td>
</tr>
<%
}catch (Exception e){
e.printStackTrace();
}
try{
if(!rs.next()){
break;
}
}catch(Exception e){
e.printStackTrace();
}
}
%>
</tbody>
</table>
<nav class="text-center" aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<%if(Page>1){%>
<li><a href="user.jsp?Page=1">第一页</a></li>
<li><a href="user.jsp?Page=<%=Page-1%>">上一页</a></li>
<%
}
if(Page<maxPage){
%>
<li><a href="user.jsp?Page=<%=Page 1%>">下一页</a></li>
<li><a href="user.jsp?Page=<%=maxPage%>">最后一页</a></li>
<%}
%>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</section>
<footer class="footer">
<div class="footer__block block no-margin-bottom">
<div class="container-fluid text-center">
<p class="no-margin-bottom">Copyright © 2019.Company <a href="#" >东方标准</a> </p>
</div>
</div>
</footer>
</div>
</div>
<!-- JavaScript files-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"> </script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-switch.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="js/layer.js"></script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="js/charts-home.js"></script>
<script src="js/front.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.min.js"></script>
</body>
</html>
前端jsp页面重写完成后，我们再编写用户查询接口。 /toUserDetail 接口
代码语言：javascript复制package com.yixi.service;
import com.yixi.daoImpl.UserDaoImpl;
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.Map;
@WebServlet("/toUserDetail")
public class UserDetail extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String id = req.getParameter("id");
UserDaoImpl userDao = new UserDaoImpl();
Map<String, String> map = userDao.selectDetail(Integer.parseInt(id));
HttpSession session = req.getSession();
session.setAttribute("look",map.get("look"));
session.setAttribute("real_name",map.get("real_name"));
session.setAttribute("dept_name",map.get("dept_name"));
session.setAttribute("phone",map.get("phone"));
session.setAttribute("age",map.get("age"));
session.setAttribute("gender",map.get("gender"));
session.setAttribute("register_time",map.get("register_time"));
session.setAttribute("login_time",map.get("login_time"));
session.setAttribute("is_secret",map.get("is_secret"));
session.setAttribute("pic",map.get("pic"));
session.setAttribute("focus",map.get("focus"));
req.getRequestDispatcher("user_detail.jsp").forward(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}部门模块显示
部门模块jsp页面重写
代码语言：javascript复制<%@ page import="com.yixi.utils.ConnDB" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
Object id = session.getAttribute("id");
int ID = (Integer)id;
ConnDB conn = new ConnDB();
ResultSet rs = conn.executeQuery("SELECT user_focus_id as f from userfocus where user_id='" ID "'");
%>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<!-- Font Awesome CSS-->
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
<!-- Custom Font Icons CSS-->
<link rel="stylesheet" href="css/font.css">
<!-- theme stylesheet-->
<link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
<!-- Custom stylesheet - for your changes-->
<link rel="stylesheet" href="css/custom.css">
<title>我的用户列表</title>
</head>
<body>
<header class="header">
<nav class="navbar navbar-expand-lg">
<div class="search-panel">
<div class="search-inner d-flex align-items-center justify-content-center">
<div class="close-btn">Close <i class="fa fa-close"></i></div>
<form id="searchForm" action="#">
<div class="form-group">
<input type="search" name="search" placeholder="What are you searching for...">
<button type="submit" class="submit">Search</button>
</div>
</form>
</div>
</div>
<div class="container-fluid d-flex align-items-center justify-content-between">
<div class="navbar-header">
<!-- Navbar Header--><a href="home.html" class="navbar-brand">
<div class="brand-text brand-big visible text-uppercase"><strong class="text-primary">小标</strong><strong>会议平台</strong></div>
<div class="brand-text brand-sm"><strong class="text-primary">X</strong><strong>B</strong></div></a>
<!-- Sidebar Toggle Btn-->
<button class="sidebar-toggle"><i class="fa fa-long-arrow-left"></i></button>
</div>
<div class="right-menu list-inline no-margin-bottom">
<!-- Log out -->
<div class="list-inline-item logout">
<a id="logout" href="index.html" class="nav-link"><span class="d-none d-sm-inline">Logout </span></a>
</div>
</div>
</div>
</nav>
</header>
<div class="d-flex align-items-stretch">
<!-- Sidebar Navigation-->
<nav id="sidebar">
<!-- Sidebar Header-->
<div class="sidebar-header d-flex align-items-center">
<div id="avatar" class="avatar"><img src="img/avatar-6.jpg" alt="..." class="img-fluid rounded-circle"></div>
<div class="title">
<h1 class="h5">小标</h1>
<p>研发部</p>
</div>
</div>
<!-- Sidebar Navidation Menus--><span class="heading">Main</span>
<ul class="list-unstyled">
<li><a href="home.html"> <i class="icon-home"></i>主页 </a></li>
<li><a href="#userDropdown" data-toggle="collapse" aria-expanded="true"> <i class="icon-windows"></i>用户列表</a>
<ul id="userDropdown" class="collapse show">
<li><a href="user.html">查看用户</a></li>
<li class="active" ><a href="my_user.html">我关注的用户</a></li>
<li><a href="article.html">发布文章</a></li>
<li><a href="article_collect.html">我的收藏</a></li>
</ul>
</li>
<!--<li><a href="login.html"> <i class="icon-logout"></i>Login page </a></li>-->
<li><a href="#depDropdown" data-toggle="collapse"> <i class="icon-windows2"></i>部门列表</a>
<ul id="depDropdown" class="collapse list-unstyled ">
<li><a href="department.html">全部部门</a></li>
<li><a href="meeting.html">会议系统</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Sidebar Navigation end-->
<div class="page-content">
<div class="page-header">
<div class="container-fluid">
<h2 class="h5 no-margin-bottom">我的关注列表</h2>
</div>
</div>
<section class="no-padding-bottom">
<div class="list-group myList">
<ul>
<%
String str=(String)request.getParameter("Page");
if(str==null){
str="0";
}
int pagesize=5;
rs.last();
int RecordCount=rs.getRow();
int maxPage=0;
maxPage=(RecordCount%pagesize==0)?(RecordCount/pagesize):(RecordCount/pagesize 1);
int Page=Integer.parseInt(str);
if(Page<1){
Page=1;
}else{
if(((Page-1)*pagesize 1)>RecordCount){
Page=maxPage;
}
}
try {
rs.absolute((Page-1)*pagesize 1);
} catch (SQLException e) {
e.printStackTrace();
}
for(int i=1;i<=pagesize;i ){
try {
String f = rs.getString("f");
System.out.println(f);
ResultSet resultSet = conn.executeQuery("select real_name as n,id as i from user where id='" f "'");
if (resultSet.next()){
String name = resultSet.getString("n");
String i1 = resultSet.getString("i");
%>
<li class="list-group-item">
<a href="user_detail.jsp?id=" <%=i1%>><%=name%></a>
<div style="float: right" class="text-right">
<input type="submit" class="btn btn-danger" value="取消关注">
</div>
</li>
<%}
}catch (Exception e){
e.printStackTrace();
}
try{
if(!rs.next()){
break;
}
}catch(Exception e){
e.printStackTrace();
}
}
%>
</ul>
<nav class="text-center" aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
<%if(Page>1){%>
<li><a href="user.jsp?Page=1">第一页</a></li>
<li><a href="user.jsp?Page=<%=Page-1%>">上一页</a></li>
<%
}
if(Page<maxPage){
%>
<li><a href="user.jsp?Page=<%=Page 1%>">下一页</a></li>
<li><a href="user.jsp?Page=<%=maxPage%>">最后一页</a></li>
<%}
%>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</section>
<footer class="footer">
<div class="footer__block block no-margin-bottom">
<div class="container-fluid text-center">
<p class="no-margin-bottom">Copyright © 2019.Company <a href="#" >东方标准</a> </p>
</div>
</div>
</footer>
</div>
</div>
<!-- JavaScript files-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"> </script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="js/charts-home.js"></script>
<script src="js/front.js"></script>
<script src="js/custom.js"></script>
</body>
</html>部门具体信息jsp页面
代码语言：javascript复制<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<!-- Font Awesome CSS-->
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
<!-- Custom Font Icons CSS-->
<link rel="stylesheet" href="css/font.css">
<!-- theme stylesheet-->
<link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
<!-- Custom stylesheet - for your changes-->
<link rel="stylesheet" href="css/custom.css">
<title>用户详情</title>
</head>
<body>
<header class="header">
<nav class="navbar navbar-expand-lg">
<div class="search-panel">
<div class="search-inner d-flex align-items-center justify-content-center">
<div class="close-btn">Close <i class="fa fa-close"></i></div>
<form id="searchForm" action="#">
<div class="form-group">
<input type="search" name="search" placeholder="What are you searching for...">
<button type="submit" class="submit">Search</button>
</div>
</form>
</div>
</div>
<div class="container-fluid d-flex align-items-center justify-content-between">
<div class="navbar-header">
<!-- Navbar Header--><a href="home.html" class="navbar-brand">
<div class="brand-text brand-big visible text-uppercase"><strong class="text-primary">小标</strong><strong>会议平台</strong></div>
<div class="brand-text brand-sm"><strong class="text-primary">X</strong><strong>B</strong></div></a>
<!-- Sidebar Toggle Btn-->
<button class="sidebar-toggle"><i class="fa fa-long-arrow-left"></i></button>
</div>
<div class="right-menu list-inline no-margin-bottom">
<!-- Log out -->
<div class="list-inline-item logout">
<a id="logout" href="index.html" class="nav-link"><span class="d-none d-sm-inline">Logout </span></a>
</div>
</div>
</div>
</nav>
</header>
<div class="d-flex align-items-stretch">
<!-- Sidebar Navigation-->
<nav id="sidebar">
<!-- Sidebar Header-->
<div class="sidebar-header d-flex align-items-center">
<div id="avatar" class="avatar"><img src="img/avatar-6.jpg" alt="..." class="img-fluid rounded-circle"></div>
<div class="title">
<h1 class="h5">小标</h1>
<p>研发部</p>
</div>
</div>
<!-- Sidebar Navidation Menus--><span class="heading">Main</span>
<ul class="list-unstyled">
<li><a href="home.html"> <i class="icon-home"></i>主页 </a></li>
<li><a href="#userDropdown" data-toggle="collapse"> <i class="icon-windows"></i>用户列表</a>
<ul id="userDropdown" class="collapse list-unstyled">
<li><a href="user.html">查看用户</a></li>
<li><a href="my_user.html">我关注的用户</a></li>
<li><a href="article.html">发布文章</a></li>
<li><a href="article_collect.html">我的收藏</a></li>
</ul>
</li>
<!--<li><a href="login.html"> <i class="icon-logout"></i>Login page </a></li>-->
<li><a href="#depDropdown" data-toggle="collapse"> <i class="icon-windows2"></i>部门列表</a>
<ul id="depDropdown" class="collapse list-unstyled ">
<li><a href="department.html">全部部门</a></li>
<li><a href="meeting.html">会议系统</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Sidebar Navigation end-->
<div class="page-content">
<div class="page-header">
<div class="container-fluid">
<h2 class="h5 no-margin-bottom">用户详情</h2>
</div>
</div>
<section class="no-padding-bottom">
<!-- Form Elements -->
<div class="col-lg-12">
<div class="block">
<div class="title"><strong>TA的头像</strong></div>
<div class="avatar"><img src="<%=request.getSession().getAttribute("pic")%>" alt="加载中..." style="width: 150px;height: 150px" class="img-thumbnail rounded-circle"></div>
<!--<div style="margin-top: 15px" class="text-left">-->
<!--<!– 用于展示上传文件名的表单 –>-->
<!--<input id="showname" onclick="makeThisfile()" type="button" class="btn btn-primary" value="更换头像">-->
<!--<!– 真正的文件上传表单 –>-->
<!--<input name="realFile" type="file" id="myFile" style="display: none" />-->
<!--</div>-->
<div class="title">
<br>
<p class="h5"><strong>粉丝数：</strong><span> </span><span> </span><span><%=request.getSession().getAttribute("focus")%></span></p>
<br>
<p class="h5"><strong>被看数：</strong><span> </span><span> </span><span><%=request.getSession().getAttribute("look")%></span></p>
<br>
</div>
<div class="title"><strong>TA的数据</strong></div>
<div class="block-body">
<form class="form-horizontal">
<div class="form-group row">
<label class="col-sm-3 form-control-label">真实姓名</label>
<div class="col-sm-9">
<input disabled="disabled" type="text" value="<%=request.getSession().getAttribute("real_name")%>" class="form-control">
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">所属部门</label>
<div class="col-sm-9">
<input disabled="disabled" type="text" value="<%=request.getSession().getAttribute("dept_name")%>" class="form-control">
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">电话</label>
<div class="col-sm-9">
<input disabled="disabled" type="text" value="<%=request.getSession().getAttribute("phone")%>" name="password" class="form-control">
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">年龄</label>
<div class="col-sm-9">
<input disabled="disabled" type="text" placeholder="<%=request.getSession().getAttribute("age")%>" class="form-control">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">性别 </label>
<div class="col-sm-9">
<div class="i-checks">
<%
Object gender = request.getSession().getAttribute("gender");
String gender1 = (String) gender;
if (gender1 == null){
gender1 = "3";
}
if (gender1.equals("1")){
%>
<input disabled="disabled" id="radioCustom1" type="radio" value="1" name="sex" class="radio-template" checked="checked">
<label for="radioCustom1">男</label>
<span> </span><span> </span><span> </span>
<input disabled="disabled" id="radioCustom2" type="radio" value="0" name="sex" class="radio-template">
<label for="radioCustom2">女</label>
<%
}else if (gender1.equals("0")){
%>
<input disabled="disabled" id="radioCustom1" type="radio" value="1" name="sex" class="radio-template">
<label for="radioCustom1">男</label>
<span> </span><span> </span><span> </span>
<input disabled="disabled" id="radioCustom2" type="radio" value="0" name="sex" class="radio-template" checked="checked">
<label for="radioCustom2">女</label>
<%
}else {
%>
<input disabled="disabled" id="radioCustom1" type="radio" value="1" name="sex" class="radio-template">
<label for="radioCustom1">男</label>
<span> </span><span> </span><span> </span>
<input disabled="disabled" id="radioCustom2" type="radio" value="0" name="sex" class="radio-template">
<label for="radioCustom2">女</label>
<%
}
%>
</div>
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">注册时间</label>
<div class="col-sm-9">
<input type="text" disabled="" placeholder="<%=request.getSession().getAttribute("register_time")%>" class="form-control">
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">登录时间</label>
<div class="col-sm-9">
<input type="text" disabled="" placeholder="<%=request.getSession().getAttribute("login_time")%>" class="form-control">
</div>
</div>
<div class="line"></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">是否私密 <br><small class="text-primary">默认为否，可以不设置</small></label>
<div class="col-sm-9">
<div class="i-checks">
<%
Object is_secret = request.getSession().getAttribute("is_secret");
String is_secret1 = (String) is_secret;
if (is_secret1 == null){
is_secret1 = "3";
}
if (is_secret1.equals("0")){
%>
<input disabled="disabled" id="checkboxCustom1" type="checkbox" value="" class="checkbox-template" checked>
<%
}else {
%>
<input disabled="disabled" id="checkboxCustom1" type="checkbox" value="" class="checkbox-template">
<%
}
%>
<label for="checkboxCustom1">是否私密</label>
</div>
</div>
</div>
<div class="line"></div>
<!--<div class="text-center">-->
<!--<input type="submit" class="btn btn-primary" value="保存">-->
<!--</div>-->
</form>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="footer__block block no-margin-bottom">
<div class="container-fluid text-center">
<p class="no-margin-bottom">Copyright © 2019.Company <a href="#" >东方标准</a> </p>
</div>
</div>
</footer>
</div>
</div>
<!-- JavaScript files-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"> </script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="js/charts-home.js"></script>
<script src="js/front.js"></script>
<script src="js/custom.js"></script>
</body>
</html>ajax异步技术实现图片上传
我们的数据库表中保存的仅仅是一个图片的路径，因为图片的磁盘开销比较大，一般在实际项目中会有专门的图片服务器来存储图片的，数据库只是保存图片的地址而已，当拿到图片地址之后再去访问图片服务器的图片。 我们做上传图片有如下步骤：
- 将图片真正上传到后台服务器中。
- 将新上传到服务器中的图片路径存储到数据库的图片字段中。
- 将新的路径响应给前端，进行图片回显。
我们知道图片上传可以使用表单，把表单的 entype 类型改为enctype=“multipart/form-data” 就可以实现图片的上传，但是表单提交不是异步无刷新的，我们采用ajax实现图片的上传。用户体验更好。
ajax上传图片是需要注意几个参数： processData：(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
contentType：(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）
JQuery在线文档
前端代码
代码语言：javascript复制$('#picFile').change(function () {
// 构建一个虚拟表单,此表单类型默认为multipart/form‐data类型
var formData = new FormData();
// 给表单追加参数(图片)
formData.append("iconFile", document.getElementById("picFile").files[0]);
$.ajax({
url: "/user/updatePic",
processData: false, //默认为true,对请求传递的参数(formData)不做编码处理
contentType: false, //不对请求头做处理(ajax请求默认的contentType为application/x‐www‐
form‐urlencoded)
data: formData,
type: "post",
async: true,
success: function (res) {
if (res.status == 200) {
layer.msg('上传成功');
// 上传成功后置空
$("#picFile").val("");
// 替换成后台的url
$("#pic").attr("src", res.picUrl);
$("#loginUserPic").attr("src", res.picUrl);
} else {
layer.msg(res.message);
}
},
error: function (data) {
layer.msg('服务器忙');
}
});
});第三部分
码云链接
