一个前后端分离的例子，前端技术：bootstrap+jquery。后端技术：spring+springMVC。
首先是后端的代码，一个自己创建的连接池
package com.freshbin.pool;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.lang.reflect.InvocationHandler;
import java.lang.reflect.Method;
import java.lang.reflect.Proxy;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.SQLFeatureNotSupportedException;
import java.util.Collections;
import java.util.LinkedList;
import java.util.List;
import java.util.Properties;
import java.util.logging.Logger;
import javax.sql.DataSource;
public class JdbcPool implements DataSource {
// 创建一个集合来保存所有的数据库连接，当程序需要连接数据库时，则从集合中获取，同时调用集合的remove方法
// 因为集合的remove方法返回的正是你集合中的对象，所有正好可以将从集合中remove的连接对象赋给程序
// 当关闭数据库时，则调用集合的add方法，将连接返回给集合
// 使用Collections工具类，使集合是线程安全的
private static List<Connection> connList = Collections
.synchronizedList(new LinkedList<Connection>());
static {
// 通过java的反射加载配置文件
InputStream is = JdbcPool.class.getClassLoader().getResourceAsStream(
"conf/jdbc.properties");
// 创建一个pro对象，方便从配置文件中读取文件
Properties pro = new Properties();
// 加载文件流,读取内容
try {
pro.load(is);
String drive = pro.getProperty("driver");
String url = pro.getProperty("url");
String username = pro.getProperty("username");
String password = pro.getProperty("password");
int jdbcPoolInitSize = Integer.parseInt(pro
.getProperty("jdbcPoolInitSize"));
//加载驱动
Class.forName(drive);
for (int i = 0; i < jdbcPoolInitSize; i++) {
Connection conn = DriverManager.getConnection(url, username, password);
System.out.println("获取到了数据库连接：" + conn);
//将数据库连接存到集合中
connList.add(conn);
}
System.out.println("数据库连接池的总共个数：" + connList.size());
System.out.println("----------------------------------------------------");
} catch (Exception e) {
throw new ExceptionInInitializerError(e);
}
}
@Override
public PrintWriter getLogWriter() throws SQLException {
// TODO Auto-generated method stub
return null;
}
@Override
public int getLoginTimeout() throws SQLException {
// TODO Auto-generated method stub
return 0;
}
@Override
public Logger getParentLogger() throws SQLFeatureNotSupportedException {
// TODO Auto-generated method stub
return null;
}
@Override
public void setLogWriter(PrintWriter out) throws SQLException {
// TODO Auto-generated method stub
}
@Override
public void setLoginTimeout(int seconds) throws SQLException {
// TODO Auto-generated method stub
}
@Override
public boolean isWrapperFor(Class<?> arg0) throws SQLException {
// TODO Auto-generated method stub
return false;
}
@Override
public <T> T unwrap(Class<T> arg0) throws SQLException {
// TODO Auto-generated method stub
return null;
}
@Override
public Connection getConnection() throws SQLException {
//首先判断集合中有没有空闲的数据库连接对象，如果没有则直接抛出异常,不再返回
if(connList.size() > 0) {
//返回一个连接对象,集合调用remove的同时即可返回一个对象
final Connection conn = connList.remove(0);
System.out.println("被拿走了一个连接：" + conn);
System.out.println("数据库连接池的个数：" + connList.size());
//使用动态代理返回
return (Connection) Proxy.newProxyInstance(JdbcPool.class.getClassLoader(), conn.getClass().getInterfaces(), new InvocationHandler() {
@Override
public Object invoke(Object proxy, Method method, Object[] args)
throws Throwable {
//如果调用的是close方法，则将数据库连接对象重新加入到集合中
if("close".equals(method.getName())) {
connList.add(conn);
System.out.println("数据库对象已回收：" + conn);
System.out.println("连接池的个数：" + connList.size());
System.out.println("----------------------------------------------------");
return null;
} else {
return method.invoke(conn, args);
}
}
});
} else {
throw new RuntimeException("暂时没有空闲的数据库对象可以使用！请等等。。。");
}
}
@Override
public Connection getConnection(String arg0, String arg1)
throws SQLException {
// TODO Auto-generated method stub
return null;
}
}
一个连接工具类
package com.freshbin.util;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import com.freshbin.pool.JdbcPool;
public class JdbcUtil {
private static JdbcPool pool = new JdbcPool();
public static Connection getConnection() throws SQLException {
return pool.getConnection();
}
public static void close(Connection conn, Statement st, ResultSet rs) {
if (rs != null) {
try {
// 关闭存储查询结果的ResultSet对象
rs.close();
} catch (Exception e) {
e.printStackTrace();
}
rs = null;
}
if (st != null) {
try {
// 关闭负责执行SQL命令的Statement对象
st.close();
} catch (Exception e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
// 关闭Connection数据库连接对象
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
public static void main(String[] args) {
try {
Connection conn = JdbcUtil.getConnection();
System.out.println("拿连接：" + conn);
System.out.println("-------------------------------");
conn = JdbcUtil.getConnection();
System.out.println("拿连接：" + conn);
System.out.println("-------------------------------");
JdbcUtil.close(conn, null, null);
conn = JdbcUtil.getConnection();
System.out.println("拿连接：" + conn);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
数据库配置文件
driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/springtest?useUnicode=true&&useSSL=false&characterEncoding=utf-8
username=root
password=root
jdbcPoolInitSize=2
web.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>SpringMVCHouDuan</display-name>
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:conf/application.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>SpringMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/classes/conf/application-mvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app><beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.springframework.org/schema/beans" xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:cache="http://www.springframework.org/schema/cache" xmlns:p="http://www.springframework.org/schema/p"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-4.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.2.xsd">
<!-- 只扫描service -->
<context:component-scan base-package="com.freshbin">
<context:include-filter type="annotation"
expression="org.springframework.stereotype.Service" />
<context:exclude-filter type="annotation"
expression="org.springframework.stereotype.Controller" />
</context:component-scan>
</beans><?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.2.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd">
<!-- 只扫描Controller注解的类 -->
<context:component-scan base-package="com.freshbin" use-default-filters="false">
<context:include-filter type="annotation"
expression="org.springframework.stereotype.Controller" />
</context:component-scan>
<!-- 处理器适配器和处理器映射器 自动注册DefaultAnnotationHandlerMapping 与AnnotationMethodHandlerAdapter两个bean -->
<mvc:annotation-driven>
<mvc:message-converters>
<bean
class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
</list>
</property>
<!-- 通用json日期转换， @JsonFormat 优先级更高 -->
<property name="objectMapper">
<bean class="com.fasterxml.jackson.databind.ObjectMapper">
<property name="dateFormat">
<bean class="java.text.SimpleDateFormat">
<constructor-arg type="java.lang.String" value="yyyy-MM-dd HH:mm:ss" />
</bean>
</property>
</bean>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
<!-- 定义跳转的文件的前后缀 ，视图模式配置 -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!-- 自动给后面action的方法return的字符串加上前缀和后缀，变成一个 可用的url地址 -->
<property name="prefix" value="/WEB-INF/page/" />
<property name="suffix" value=".jsp" />
<property name="contentType" value="text/html; charset=utf-8" />
<property name="cache" value="false" />
</bean>
<!--DispatcherServlet拦截"/",也可以访问静态资源，不会出现404 -->
<mvc:resources location="/WEB-INF/bootstrap-3.3.5-dist/images/"
mapping="/bootstrap-3.3.5-dist/images/**" />
<mvc:resources location="/WEB-INF/bootstrap-3.3.5-dist/css/"
mapping="/bootstrap-3.3.5-dist/css/**" />
<mvc:resources location="/WEB-INF/bootstrap-3.3.5-dist/js/" mapping="/bootstrap-3.3.5-dist/js/**" />
<!-- 异常处理 -->
<bean id="exceptionResolver"
class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
<property name="defaultErrorView">
<value>/error/500</value>
</property>
<property name="defaultStatusCode">
<value>500</value>
</property>
<!-- spring就会使用apache的org.apache.commons.logging.Log日志工具，
记录这个异常，级别是warn -->
<property name="warnLogCategory">
<value>org.springframework.web.servlet.handler.SimpleMappingExceptionResolver
</value>
</property>
</bean>
</beans>log4j.rootLogger=INFO,console
log4j.appender.console=org.apache.log4j.ConsoleAppender
log4j.appender.console.layout=org.apache.log4j.PatternLayout
log4j.appender.console.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss,SSS} [%c]-[%p]%m%n
log4j.logger.java.sql=DEBUG
所需的包下载地址为http://download.csdn.net/detail/freshbin000/9637399
实体层代码
package com.freshbin.user.domain;
public class User {
private String name;
private String account;
private String password;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
DAO层代码
package com.freshbin.user.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Repository;
import com.freshbin.user.domain.User;
import com.freshbin.util.JdbcUtil;
@Repository
public class UserDAOImpl implements UserDAO {
// 得到所有用户列表
private final static String GETALLUSER = "select * from user";
@Override
public List<User> getAllUser() throws Exception {
List<User> userList = new ArrayList<User>();
Connection conn = JdbcUtil.getConnection();
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn.setAutoCommit(false);
pstmt = conn.prepareStatement(GETALLUSER);
rs = pstmt.executeQuery();
while (rs.next()) {
User user = new User();
user.setName(rs.getString("name"));
user.setAccount(rs.getString("account"));
user.setPassword(rs.getString("password"));
userList.add(user);
}
conn.commit();
} catch (Exception e) {
conn.rollback();
} finally {
JdbcUtil.close(conn, pstmt, rs);
}
return userList;
}
// 根据用户名得到指定的用户
private final static String GETUSER = "select * from user where account=?";
@Override
public User getUser(String account) throws Exception {
Connection conn = JdbcUtil.getConnection();
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn.setAutoCommit(false);
pstmt = conn.prepareStatement(GETUSER);
pstmt.setString(1, account);
rs = pstmt.executeQuery();
if (rs.next()) {
User user = new User();
user.setName(rs.getString("name"));
user.setAccount(rs.getString("account"));
user.setPassword(rs.getString("password"));
return user;
}
conn.commit();
} catch (Exception e) {
conn.rollback();
} finally {
JdbcUtil.close(conn, pstmt, rs);
}
return null;
}
// 新增一个用户
private final static String ADDUSER = "insert into user (name,account,password) values(?,?,?)";
@Override
public int addUser(User us) throws Exception {
Connection conn = JdbcUtil.getConnection();
PreparedStatement pstmt = null;
int rs = 0;
try {
conn.setAutoCommit(false);
pstmt = conn.prepareStatement(ADDUSER);
pstmt.setString(1, us.getName());
pstmt.setString(2, us.getAccount());
pstmt.setString(3, us.getPassword());
rs = pstmt.executeUpdate();
conn.commit();
} catch (Exception e) {
conn.rollback();
} finally {
JdbcUtil.close(conn, pstmt, null);
}
return rs;
}
// 删除一个用户
private final static String DELETEUSER = "delete from user where account=?";
@Override
public int deleteUser(String account) throws Exception {
Connection conn = JdbcUtil.getConnection();
PreparedStatement pstmt = null;
int rs = 0;
try {
conn.setAutoCommit(false);
pstmt = conn.prepareStatement(DELETEUSER);
pstmt.setString(1, account);
rs = pstmt.executeUpdate();
conn.commit();
} catch (Exception e) {
conn.rollback();
} finally {
JdbcUtil.close(conn, pstmt, null);
}
return rs;
}
// 更新用户信息
private final static String UPDATEUSER = "update user set password=? where account=?";
@Override
public int updateUser(String account, String password) throws Exception {
Connection conn = JdbcUtil.getConnection();
PreparedStatement pstmt = null;
int rs = 0;
try {
conn.setAutoCommit(false);
pstmt = conn.prepareStatement(UPDATEUSER);
pstmt.setString(1, password);
pstmt.setString(2, account);
rs = pstmt.executeUpdate();
conn.commit();
} catch (Exception e) {
conn.rollback();
} finally {
JdbcUtil.close(conn, pstmt, null);
}
return rs;
}
public static void main(String[] args) throws Exception {
UserDAOImpl userDao = new UserDAOImpl();
//测试是否能查询用户列表
// for(User user : userDao.getAllUser()) {
// System.out.println("name:" + user.getName()
// + "----------account:" + user.getAccount()
// + "----------password:" + user.getPassword());
// }
//测试是否能查询指定用户
// User user = userDao.getUser("bin");
// if(user != null) {
// System.out.println(user.getName() + "------" + user.getAccount());
// } else {
// System.out.println("用户不存在");
// }
//测试是否能插入一个用户
// User user = new User();
// user.setName("ccc");
// user.setAccount("a");
// user.setPassword("b");
// int i = userDao.addUser(user);
// if(i > 0) {
// System.out.println("插入成功！");
// } else {
// System.out.println("插入失败！");
// }
//测试是否能成功删除一个用户
// int result = userDao.deleteUser("a");
// if(result > 0) {
// System.out.println("删除成功");
// } else {
// System.out.println("删除失败");
// }
//测试是否能更新成功
int result = userDao.updateUser("tyb", "123");
if(result > 0) {
System.out.println("更新成功！");
} else {
System.out.println("更新失败！");
}
}
}
service层代码
package com.freshbin.user.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.freshbin.user.dao.UserDAO;
import com.freshbin.user.domain.User;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserDAO userDao;
@Override
public List<User> getAllUser() throws Exception {
return userDao.getAllUser();
}
@Override
public User getUser(String account) throws Exception {
return userDao.getUser(account);
}
@Override
public int addUser(User us) throws Exception {
return userDao.addUser(us);
}
@Override
public int deleteUser(String account) throws Exception {
return userDao.deleteUser(account);
}
@Override
public int updateUser(String account, String password) throws Exception {
return userDao.updateUser(account, password);
}
}
action层代码
package com.freshbin.user.action;
import java.util.List;
import javax.websocket.server.PathParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import com.freshbin.user.domain.User;
import com.freshbin.user.service.UserService;
@RestController()
public class UserAction {
@Autowired
private UserService service;
//查询所有用户
@RequestMapping(value="/users", method=RequestMethod.GET)
public List<User> getAllUser() throws Exception {
return service.getAllUser();
}
//查询指定用户
@RequestMapping(value="/user/{account}", method=RequestMethod.GET)
public User getUser(@PathVariable String account) throws Exception {
return service.getUser(account);
}
//增加用户
@RequestMapping(value="/user", method=RequestMethod.POST)
public RestResult addUser(User us) throws Exception {
RestResult rr = new RestResult();
rr.setStatus(service.addUser(us));
if(rr.getStatus() == 1) {
rr.setMsg("添加用户成功");
} else {
rr.setMsg("添加用户失败");
}
return rr;
}
//删除用户
@RequestMapping(value="/user/{account}", method=RequestMethod.DELETE)
public RestResult deleteUser(@PathVariable String account) throws Exception {
RestResult rr = new RestResult();
rr.setStatus(service.deleteUser(account));
if(rr.getStatus() == 1) {
rr.setMsg("删除用户成功");
} else {
rr.setMsg("删除用户失败");
}
return rr;
}
//修改用户
@RequestMapping(value="/user/{account}", method=RequestMethod.PUT)
public RestResult updateUser(@PathVariable String account, String password) throws Exception {
RestResult rr = new RestResult();
rr.setStatus(service.updateUser(account, password));
if(rr.getStatus() == 1) {
rr.setMsg("修改用户成功");
} else {
rr.setMsg("修改用户失败");
}
return rr;
}
}
action层的增删改方法需要返回一个状态类，这个类代码如下
package com.freshbin.user.action;
public class RestResult {
/**
* 1:成功，0表示失败
*/
private int status;
/**
* 说明
*/
private String msg;
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
自此，后端的代码全部完毕。
下面是前端的页面代码
一个主页面main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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>
<%System.out.println(basePath); %>
<link href="<%=basePath%>bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<base href="<%=basePath%>">
</head>
<body>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#navbar-ex-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><img height="30" width="50" alt="Brand" src="<%=basePath%>bootstrap-3.3.5-dist/images/logo.jpg"></a>
</div>
<div class="collapse navbar-collapse" id="navbar-ex-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a>欢迎<span style="color: red">freshbin</span>来到信息管理系统！</a></li>
<li class="bg-info">
<a href="#" data-toggle="dropdown">
<img src="<%=basePath%>bootstrap-3.3.5-dist/images/head.jpg" alt="head photo" class="img-circle"
height="18">
</a>
<div class="dropdown-menu">我是超级管理员</div>
</li>
<li class="bg-danger">
<a href="http://www.baidu.com">注销</a>
</li>
<li>
<a></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="main.jsp">用户管理</a>
</li>
<li>
<a href="<%=basePath%>listalluser.jsp" target="contentframe" id="getAllUser">查看所有用户</a>
</li>
<li>
<a href="<%=basePath%>listuser.jsp" target="contentframe" id="getUser">查询用户</a>
</li>
<li>
<a href="<%=basePath%>adduser.jsp" target="contentframe" id="addUser">增加用户</a>
</li>
<li>
<a href="<%=basePath%>deleteuser.jsp" target="contentframe" id="deleteUser">删除用户</a>
</li>
<li>
<a href="<%=basePath%>updateuser.jsp" target="contentframe" id="updateUser">修改用户信息</a>
</li>
</ul>
</div>
<div class="col-md-10">
<iframe
width="100%"
id="contentframe"
name="contentframe"
οnlοad="ifmresize()"
frameborder="0"
scrolling="auto"
src="<%=basePath%>listuser.jsp">
</iframe>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<footer>
<div class="container text-center">
<p>Copyright © 2016 广州共享科技有限公司</p>
<p> 粤ZH-KU备201320244322号-1</p>
</div>
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="<%=basePath %>bootstrap-3.3.5-dist/js/jquery-3.1.0.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="<%=basePath %>bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="<%=basePath %>bootstrap-3.3.5-dist/js/jquery.form.js"></script>
</body>
<script>
<!-- 编写脚本 -->
function ifmresize(){
var ifm= document.getElementById("contentframe");
ifm.height=document.documentElement.clientHeight;
}
window.οnresize=function(){
ifmresize();
}
</script>
</html>列出所有用户的页面listalluser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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>
<link href="<%=basePath%>bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=basePath%>bootstrap-3.3.5-dist/css/jquery.bootgrid.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/jquery-3.1.0.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/jquery.form.js"></script>
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/jquery.bootgrid.min.js"></script>
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/jquery.bootgrid.fa.min.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
url : "http://localhost/SpringMVCHouDuan/users",
async : false,
datatype : "json",
type : "GET",
success : function(result) {
debugger;
var userList = JSON.parse(result);
var tbodyHtml = $("#allUser");
tbodyHtml.html(" ");
for (var i = 0; i < userList.length; i++) {
$("#allUser").append(
"<tr><td>" + userList[i].name
+ "</td><td>"
+ userList[i].account
+ "</td><td>"
+ userList[i].password
+ "</td></tr>");
}
}
});
$("#btn_get").click(
function() {
$("#grid-basic").bootgrid();
debugger;
$.ajax({
url : "http://localhost/SpringMVCHouDuan/users",
async : false,
datatype : "json",
type : "GET",
success : function(result) {
debugger;
var userList = JSON.parse(result);
var tbodyHtml = $("#allUser");
tbodyHtml.html(" ");
for (var i = 0; i < userList.length; i++) {
$("#allUser").append(
"<tr><td>" + userList[i].name
+ userList[i].account
+ "</td><td>"
+ userList[i].password
+ "</td></tr>");
}
}
});
});
});
</script>
<base href="<%=basePath%>">
</head>
<body>
<ul class="breadcrumb">
<li><a href="listalluser.jsp">用户管理</a></li>
<li class="active" id="curmenu">查询所有用户信息</li>
</ul>
<div class="container-fluid">
<div>
<button id="btn_get">列出用户列表</button>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="username" data-type="numeric">姓名</th>
<th data-column-id="account">账号</th>
<th data-column-id="password" data-order="desc">密码</th>
</tr>
</thead>
<tbody id="allUser">
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>下面是查询指定用户的页面listuser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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>
<link href="<%=basePath%>bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/jquery-3.1.0.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
$("#btn_get").click(function() {
debugger;
var account = $("#account").val();
$.ajax({
url:"http://localhost/SpringMVCHouDuan/user/"+account,
async:false,
datatype:"json",
type:"GET",
success:function(result) {
debugger;
if(result != "") {
$("#msg").text("");
var user = JSON.parse(result);
var tbodyHtml = $("#user");
tbodyHtml.html(" ");
$("#user").append("<tr><td>" + user.name
+ "</td><td>" + user.account
+ "</td><td>" + user.password
+ "</td></tr>");
} else {
var tbodyHtml = $("#user");
tbodyHtml.html(" ");
$("#msg").text("用户不存在！");
}
}
});
});
});
</script>
<base href="<%=basePath%>">
</head>
<body>
<ul class="breadcrumb">
<li><a href="listalluser.jsp">用户管理</a></li>
<li class="active" id="curmenu">查询用户信息</li>
</ul>
<div class="container-fluid">
<div>
<input type="text" id="account" name="account" />
<button id="btn_get">查询用户</button>
<span id="msg"></span>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-hover">
<thead>
<tr>
<th>姓名</th>
<th>账号</th>
<th>密码</th>
</tr>
</thead>
<tbody id="user">
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>增加用户的界面adduser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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>
<link href="<%=basePath%>bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/jquery-3.1.0.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
$("#btn_update").click(
function() {
debugger;
var name = $("#name").val();
var account = $("#account").val();
var password = $("#password").val();
$.ajax({
url : "http://localhost/SpringMVCHouDuan/user?name="
+ name + "&password=" + password + "&account="
+ account,
async : false,
datatype : "json",
type : "POST",
success : function(result) {
debugger;
var msg = JSON.parse(result);
$("#msg").text(msg.msg);
}
});
});
});
</script>
<base href="<%=basePath%>">
</head>
<body>
<ul class="breadcrumb">
<li><a href="listalluser.jsp">用户管理</a></li>
<li class="active" id="curmenu">增加用户信息</li>
</ul>
<div class="container-fluid">
<div>
<label for="name">姓名：</label><input type="text" id="name" name="name" />
<br /> <br /> <label for="account">账号：</label><input type="text"
id="account" name="account" /> <br /> <br /> <label for="password">密码：</label><input
type="password" id="password" name="password" /> <br /> <br />
<button id="btn_update">增加用户</button>
<span id="msg"></span>
</div>
</div>
</body>
</html>修改用户的界面updateuser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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>
<link href="<%=basePath%>bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/jquery-3.1.0.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
$("#btn_update").click(
function() {
debugger;
var account = $("#account").val();
var password = $("#password").val();
$.ajax({
url : "http://localhost/SpringMVCHouDuan/user/"
+ account + "?password=" + password,
async : false,
datatype : "json",
type : "PUT",
success : function(result) {
debugger;
var msg = JSON.parse(result);
$("#msg").text(msg.msg);
}
});
});
});
</script>
<base href="<%=basePath%>">
</head>
<body>
<ul class="breadcrumb">
<li><a href="listalluser.jsp">用户管理</a></li>
<li class="active" id="curmenu">修改用户信息</li>
</ul>
<div class="container-fluid">
<div>
<label for="account">账号：</label><input type="text" id="account"
name="account" /> <br /> <br /> <label for="password">密码：</label><input
type="password" id="password" name="password" /> <br /> <br />
<button id="btn_update">修改密码</button>
<span id="msg"></span>
</div>
</div>
</body>
</html>删除用户的界面deleteuser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!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>
<link href="<%=basePath%>bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/jquery-3.1.0.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="<%=basePath%>bootstrap-3.3.5-dist/js/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
$("#btn_delete").click(function() {
debugger;
var account = $("#account").val();
$.ajax({
url : "http://localhost/SpringMVCHouDuan/user/" + account,
async : false,
datatype : "json",
type : "DELETE",
success : function(result) {
debugger;
var msg = JSON.parse(result);
$("#msg").text(msg.msg);
}
});
});
});
</script>
<base href="<%=basePath%>">
</head>
<body>
<ul class="breadcrumb">
<li><a href="listalluser.jsp">用户管理</a></li>
<li class="active" id="curmenu">删除用户</li>
</ul>
<div class="container-fluid">
<div>
<input type="text" id="account" name="account" />
<button id="btn_delete">删除用户</button>
<span id="msg"></span>
</div>
</div>
</body>
</html>前端所需的包下载地址http://download.csdn.net/detail/freshbin000/9637418
最后上几张图片
新增用户
查询所有用户
查询指定的用户
修改用户的密码
删除用户
结果
实现效果后，发现ajax请求还有spring框架真是好用
扫一扫
331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
