SSM+Maven+Bootstrap+MySQL實現增刪改查的一個小demo

這個小demo是在學習SSM框架是用來熟悉框架在網上找到的一個小例子，感覺頁面還不錯，比較美觀，適合學習SSM的新手。

完整的項目下載：https://download.csdn.net/download/ydw_ydw/12186575

一、新建mavenProject

（安裝Maven以及如何新建Maven項目請自行搜索學習）

1、新建Maven項目要選擇war包。

2、通常新建的maven項目會報錯，這是因爲沒有web.xml，解決此報錯很簡單，直接在項目上右鍵【Java EE Tools】-【generate deployment xxx】，然後就不報錯了（如果新建Maven項目中如下選擇xxxx-webapp就不會出現這樣的錯誤）。

3、在代碼開始之前需要去網上下載如下幾個文件（或直接在下載的項目內複製出來）

bootstrap.min.css 和 bootstrap.min.js 和 jquery-3.3.1.min.js

二、項目代碼

用maven的好處之一就是不用到處找jar包，想要什麼jar包直接在pom.xml裏面添加依賴就可以了。想要依賴可以去中央倉庫找

我們可以把常用的依賴收集起來，以後可以直接複製pom.xml（前提裏面的jar包個各個版本需要對應，不對應可能會出現錯誤，大家可以在網上搜索一個所有版本對應的模板）。

1、首先是配置文件

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.lijiang</groupId>
  <artifactId>ssm_spring_mvc_maven</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <name>ssm_spring_mvc_maven</name>
  <description>用maven做的ssm_spring_mvc項目</description>
  
  <properties>
  	<!-- lib version -->
  	<spring.version>5.0.8.RELEASE</spring.version>
  	<mybais.version>3.4.6</mybais.version>
  	<mybatis-spring.version>1.3.2</mybatis-spring.version>
  	<mysql-connector.version>5.1.46</mysql-connector.version>
  	<ojdbc7.version>12.1.0.2.0</ojdbc7.version>
  	<druid.version>1.0.16</druid.version>
  	<aopalliance.version>1.0</aopalliance.version>
  	<aspectj.weaver.version>1.6.4.RELEASE</aspectj.weaver.version>
  	<commons.logging.version>1.1.1</commons.logging.version>
  	<jstl.version>1.2</jstl.version>
  	<log4j.version>1.2.16</log4j.version>
  	<slf4j-api.version>1.6.1</slf4j-api.version>
  	<slf4j-nop.version>1.6.4</slf4j-nop.version>
  	<fileupload.version>1.3.1</fileupload.version>
  	<jackson.version>2.9.6</jackson.version>
  	<junit.version>4.9</junit.version>
  	<servlet-api.version>8.0.53</servlet-api.version>
  	<jsp-api.version>8.0.53</jsp-api.version>
  	
  	<c3p0.version>0.9.5.2</c3p0.version>
  	
  	<!-- plugins version -->
  	<maven-compiler-plugin.version>3.8.0</maven-compiler-plugin.version>
  	<tomcat7-maven-plugin.version>2.2</tomcat7-maven-plugin.version>
  </properties>
  
  <!-- 鎖定版本， -->
  <dependencyManagement>
  	<dependencies>
  		 <!-- spring -->
		<dependency>
		    <groupId>org.springframework</groupId>
		    <artifactId>spring-core</artifactId>
		    <version>${spring.version}</version>
		</dependency>
	 	<dependency>
		   <groupId>org.springframework</groupId>
		   <artifactId>spring-web</artifactId>
		   <version>${spring.version}</version>
	    </dependency>
	    <dependency>
		   <groupId>org.springframework</groupId>
		   <artifactId>spring-tx</artifactId>
		   <version>${spring.version}</version>
	    </dependency>
	    <dependency>
		   <groupId>org.springframework</groupId>
		   <artifactId>spring-jdbc</artifactId>
		   <version>${spring.version}</version>
	    </dependency>
	    <dependency>
		   <groupId>org.springframework</groupId>
		   <artifactId>spring-webmvc</artifactId>
		   <version>${spring.version}</version>
	    </dependency>
	    <dependency>
		   <groupId>org.springframework</groupId>
		   <artifactId>spring-aop</artifactId>
		   <version>${spring.version}</version>
	    </dependency>
	    <dependency>
		   <groupId>org.springframework</groupId>
		   <artifactId>spring-context-support</artifactId>
		   <version>${spring.version}</version>
	    </dependency>
	    <dependency>
		   <groupId>org.springframework</groupId>
		   <artifactId>spring-test</artifactId>
		   <version>${spring.version}</version>
	    </dependency>
	    <!-- spring end -->
	    
	     <!-- mybais -->
		<dependency>
		    <groupId>org.mybatis</groupId>
		    <artifactId>mybatis</artifactId>
		    <version>${mybais.version}</version>
		</dependency>
		<!-- mybatis - spring 整合包-->
		<dependency>
		    <groupId>org.mybatis</groupId>
		    <artifactId>mybatis-spring</artifactId>
		    <version>${mybatis-spring.version}</version>
		</dependency>
		
		<!-- json -->
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-core</artifactId>
		    <version>${jackson.version}</version>
		</dependency>
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-annotations</artifactId>
		    <version>${jackson.version}</version>
		</dependency>
		<dependency>
		    <groupId>com.fasterxml.jackson.core</groupId>
		    <artifactId>jackson-databind</artifactId>
		    <version>${jackson.version}</version>
		</dependency>
		<!-- json end -->
		
<!-- 		c3p0 -->
		<dependency>
		    <groupId>com.mchange</groupId>
		    <artifactId>c3p0</artifactId>
		    <version>${c3p0.version}</version>
		</dependency>
  	</dependencies>
  
  </dependencyManagement>
  
  <dependencies>
    <!-- spring -->
	<dependency>
	    <groupId>org.springframework</groupId>
	    <artifactId>spring-core</artifactId>
	</dependency>
 	<dependency>
	   <groupId>org.springframework</groupId>
	   <artifactId>spring-web</artifactId>
    </dependency>
    <dependency>
	   <groupId>org.springframework</groupId>
	   <artifactId>spring-tx</artifactId>
    </dependency>
    <dependency>
	   <groupId>org.springframework</groupId>
	   <artifactId>spring-jdbc</artifactId>
    </dependency>
    <dependency>
	   <groupId>org.springframework</groupId>
	   <artifactId>spring-webmvc</artifactId>
    </dependency>
    <dependency>
	   <groupId>org.springframework</groupId>
	   <artifactId>spring-aop</artifactId>
    </dependency>
    <dependency>
	   <groupId>org.springframework</groupId>
	   <artifactId>spring-context-support</artifactId>
    </dependency>
    <dependency>
	   <groupId>org.springframework</groupId>
	   <artifactId>spring-test</artifactId>
    </dependency>
    <!-- spring end -->
        
    <!-- mybais -->
	<dependency>
	    <groupId>org.mybatis</groupId>
	    <artifactId>mybatis</artifactId>
	</dependency>
	
	<!-- mybatis - spring 整合包-->
	<dependency>
	    <groupId>org.mybatis</groupId>
	    <artifactId>mybatis-spring</artifactId>
	</dependency>
 
	<!-- mysql -->
	<dependency>
	    <groupId>mysql</groupId>
	    <artifactId>mysql-connector-java</artifactId>
	    <version>${mysql-connector.version}</version>
	</dependency>
 
	<dependency>
	    <groupId>cn.easyproject</groupId>
	    <artifactId>ojdbc7</artifactId>
	    <version>${ojdbc7.version}</version>
	</dependency>
	<!-- mysql end -->
	
	 <!-- 阿里巴巴的數據庫連接池 -->
	<dependency>
	    <groupId>com.alibaba</groupId>
	    <artifactId>druid</artifactId>
	    <version>${druid.version}</version>
	</dependency>
	
	<!-- aop -->
	<dependency>
	    <groupId>aopalliance</groupId>
	    <artifactId>aopalliance</artifactId>
	    <version>${aopalliance.version}</version>
	</dependency>
	
	<dependency>
	    <groupId>org.aspectj</groupId>
	    <artifactId>com.springsource.org.aspectj.weaver</artifactId>
	    <version>${aspectj.weaver.version}</version>
	</dependency>
	<!-- aop end -->
	
	<!-- logging -->
	<dependency>
	    <groupId>org.apache.commons</groupId>
	    <artifactId>com.springsource.org.apache.commons.logging</artifactId>
	    <version>${commons.logging.version}</version>
	</dependency>
 
	<!-- jsp標準標籤庫 -->
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>jstl</artifactId>
		<version>${jstl.version}</version>
	</dependency>
	
	<!-- log -->
	<dependency>
		<groupId>log4j</groupId>
		<artifactId>log4j</artifactId>
		<version>${log4j.version}</version>
	</dependency>
	<dependency>
		<groupId>org.slf4j</groupId>
		<artifactId>slf4j-api</artifactId>
		<version>${slf4j-api.version}</version>
	</dependency>
	<dependency>
		<groupId>org.slf4j</groupId>
		<artifactId>slf4j-nop</artifactId>
		<version>${slf4j-nop.version}</version>
	</dependency>
	<!-- log end -->
 
	<!--文件上傳-->
	<dependency>  
		<groupId>commons-fileupload</groupId>  
		<artifactId>commons-fileupload</artifactId>  
		<version>${fileupload.version}</version>  
	</dependency>
	
	<!-- json -->
	<dependency>
	    <groupId>com.fasterxml.jackson.core</groupId>
	    <artifactId>jackson-core</artifactId>
	</dependency>
	<dependency>
	    <groupId>com.fasterxml.jackson.core</groupId>
	    <artifactId>jackson-annotations</artifactId>
	</dependency>
	<dependency>
	    <groupId>com.fasterxml.jackson.core</groupId>
	    <artifactId>jackson-databind</artifactId>
	</dependency>
	<!-- json end -->
	
	<!-- junit單元測試 -->
	<dependency>
	    <groupId>junit</groupId>
	    <artifactId>junit</artifactId>
	    <version>${junit.version}</version>
	    <scope>test</scope>
	</dependency>
	
	<!-- servlet-api 8.5.32 -->
	<dependency>
  		<groupId>org.apache.tomcat</groupId>
  		<artifactId>tomcat-servlet-api</artifactId>
  		<version>${servlet-api.version}</version>
  		<scope>provided</scope>
  	</dependency>
	<!-- jsp-api 8.5.32 -->
	<dependency>
	    <groupId>org.apache.tomcat</groupId>
	    <artifactId>tomcat-jsp-api</artifactId>
	    <version>${jsp-api.version}</version>
	    <scope>provided</scope>
	</dependency>
	
	<!-- 		c3p0 -->
		<dependency>
		    <groupId>com.mchange</groupId>
		    <artifactId>c3p0</artifactId>
		    <version>${c3p0.version}</version>
		</dependency>
	
  </dependencies>
  
  <build>
  	<plugins>
  		<plugin>
  			<groupId>org.apache.maven.plugins</groupId>
  			<artifactId>maven-compiler-plugin</artifactId>
  			<version>${maven-compiler-plugin.version}</version>
  			<configuration>
  				<source>1.8</source>
				<target>1.8</target>  			
  			</configuration>
  		</plugin>
  		
  		<plugin>
  			<groupId>org.apache.tomcat.maven</groupId>
  			<artifactId>tomcat7-maven-plugin</artifactId>
  			<version>${tomcat7-maven-plugin.version}</version>
  			<configuration>
  				<uriEncoding>UTF-8</uriEncoding>
  				<url>http://localhost:8080/manager/text</url>
  				<username>lijiang</username>
  				<password>111</password>
  			</configuration>
  		</plugin>
  		
  	</plugins>
  	
  	<!-- 配置文件放行 -->
    <resources>
		<resource>
			<directory>src/main/java</directory>
			<includes>
				<include>**/*.properties</include>
				<include>**/*.xml</include>
			</includes>
			<filtering>false</filtering>
		</resource>
		<!-- 放行main/resources下的配置文件 如果不放行spring mybatis等配置文件不會被打到包裏從而導致錯誤 -->
		<resource>
			<directory>src/main/resources</directory>
			<includes>
				<include>**/*.properties</include>
				<include>**/*.xml</include>
			</includes>
			<filtering>false</filtering>
		</resource>
	</resources>
  </build>
  
</project>

springmvc.xml

<?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:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
		
		
		<!-- 開啓註解掃描 -->
		<context:component-scan base-package="com.lijiang.controller"/>
		
		<!-- 開啓註解驅動 -->
		<mvc:annotation-driven/>
		
		<!-- 配置視圖解析器 -->
		<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
			<property name="prefix" value="/WEB-INF/jsp/"/>
			<property name="suffix" value=".jsp"/>
		</bean>
		
		<!-- 圖片上傳 -->
		<bean name="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
</beans>

db.properties（連接信息可根據自己的不同自己修改，或者參考之前自己做過的連接數據庫的項目去修改）

jdbc.driverClass=com.mysql.jdbc.Driver
jdbc.jdbcUrl=jdbc:mysql://localhost:3306/ssm
jdbc.username=root
jdbc.password=root

applicationContext_mapper.xml

<?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:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
		
				<!-- 讀取配置文件 數據庫 -->
		<context:property-placeholder location="classpath:db.properties" ignore-unresolvable="true"/>
		
		<!-- 配置數據源 -->
		<bean name="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
			<property name="driverClass" value="${jdbc.driverClass}"/>
			<property name="jdbcUrl" value="${jdbc.jdbcUrl}"/>
			<property name="user" value="${jdbc.username}"/>
			<property name="password" value="${jdbc.password}"/>
		</bean>
		
		<!-- 配置mybatis -->
		<bean name="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
			<property name="dataSource" ref="dataSource"/>
			<property name="typeAliasesPackage" value="com.lijiang.bean"/>
		</bean>
		
		<!-- mapper工廠 -->
		<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
			<property name="basePackage" value="com.lijiang.mapper"/>
		</bean>
</beans>

applicationContext_service.xml

<?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:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
		<!-- 開啓註解掃描 -->
		<context:component-scan base-package="com.lijiang.service"/>
</beans>

applicationContext_transaction.xml

<?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:context="http://www.springframework.org/schema/context"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">
				<!-- 事務核心管理器 -->
		<bean name="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
			<property name="dataSource" ref="dataSource"/>
		</bean>
		
		<!-- 開啓註解事務 -->		
		<tx:annotation-driven transaction-manager="transactionManager"/>
</beans>

2、代碼的編寫（實現的順序是：持久層——dao層——service層——controller層——jsp層）

ItemInfo.java

public class ItemInfo {
	private Integer id;
	private String username;
	private String password;
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
 
	public ItemInfo(Integer id, String username, String password) {
		super();
		this.id = id;
		this.username = username;
		this.password = password;
	}
}

ItemMapper.java

public interface ItemMapper {
	List<ItemInfo> selectAll(ItemInfo itemInfo);
	void deleteById(Integer id);
	void saveItem(ItemInfo itemInfo);
	void updateItem(ItemInfo itemInfo);
	ItemInfo selectItemInfoById(Integer id);
}

ItemMapper.xml（代碼第五行要引入剛纔ItemMapper.java的位置）

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper    
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"    
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 
<mapper namespace="com.xxxxx.ItemMapper">
 
<!-- 	List<ItemInfo> selectAll(ItemInfo itemInfo); -->
  <select id="selectAll" resultType="ItemInfo" parameterType="ItemInfo">
  	select * from user
  	<where>
			<if test="username != null and username != ''">
				and username LIKE "%"#{username}"%"
			</if>
	</where>
  </select>
<!--   void deleteById(Integer id); -->
  <delete id="deleteById" parameterType="Integer">
   delete from user where id=#{id}
  </delete>
<!--   void saveItem(ItemInfo itemInfo); -->
   <insert id="saveItem" parameterType="ItemInfo">
   insert into user values(#{id},#{username}, #{password});
   </insert>
<!-- void updateItem(ItemInfo itemInfo); -->
   <update id="updateItem" parameterType="ItemInfo">
   	update user
  		<set>
  			<if test="username != null and username != ''">username = #{username},</if>
  			<if test="password != null and password != ''">password = #{password}</if>
  		</set>
  		where id = #{id}
   </update>
<!--    ItemInfo selectItemInfoById(Integer id); -->
	<select id="selectItemInfoById" parameterType="Integer" resultType="ItemInfo">
		select * from user where id=#{id}
	</select>
</mapper>

ItemService.java

public interface ItemService {
	List<ItemInfo> selectAll(ItemInfo itemInfo);
	void deleteById(Integer id);
	void saveItem(ItemInfo itemInfo);
	void updateItem(ItemInfo itemInfo);
	ItemInfo selectItemInfoById(Integer id);
}

ItemServicelmpl.java

@Service
public class ItemServicelmpl implements ItemService {
 
	@Autowired
	private ItemMapper itemMapper;
 
	public List<ItemInfo> selectAll(ItemInfo itemInfo) {
		return itemMapper.selectAll(itemInfo);
	}
 
	public void deleteById(Integer id) {
		itemMapper.deleteById(id);
	}
 
	public void saveItem(ItemInfo itemInfo) {
		itemMapper.saveItem(itemInfo);
	}
 
	public void updateItem(ItemInfo itemInfo) {
		itemMapper.updateItem(itemInfo);
	}
 
	public ItemInfo selectItemInfoById(Integer id) {
		return itemMapper.selectItemInfoById(id);
	}
 
}

ItemController.java

@Controller
@RequestMapping("/admin/items")
public class ItemController {
 
	@Autowired
	private ItemService itemService;
	
//	顯示所有列表
	@RequestMapping("allList.do")
	public String selectAll(Model model,ItemInfo itemInfo){
		List<ItemInfo> itemList=itemService.selectAll(itemInfo);
 
		model.addAttribute("itemList", itemList);
		return "item_list";
	}
	
//	刪除
	@RequestMapping("delete.do")
	public String delete(Integer id){
		itemService.deleteById(id);
		return "forward:allList.do";
	}
	
//	添加
	@RequestMapping("save.do")
	public String save(ItemInfo itemInfo){
		itemService.saveItem(itemInfo);
		return "forward:allList.do";
	}
	
//	修改
	@RequestMapping("update.do")
    public String update(ItemInfo itemInfo){
    	itemService.updateItem(itemInfo);
    	return "forward:allList.do";
    }
	
//	編輯 回顯數據
	@RequestMapping("edit.do")
	@ResponseBody
	public ItemInfo edit(Integer id) {
		return itemService.selectItemInfoById(id);
	}
 
}

item_list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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>Insert title here</title>
 
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css"  rel="stylesheet">
<script src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
 
</head>
<body>
 
 
            
		<table  class="table table-hover table table-striped" id="myTable">
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addLayer">
				     <span class="glyphicon glyphicon-plus"></span>添加記錄
				</button>
				
				<!-- 			查詢記錄  -->
					 <form id="search_form" action="${pageContext.request.contextPath }/admin/items/allList.do" method="post">
			           <div class="row">
			                 <div class="col-md-2">
			                       <input type="text" id="search_item_name" class="form-control input-sm" placeholder="輸入用戶名" name="username" value="">
			                 </div>                
			                 <div class="col-md-9">
			                    
			                    <button id="search_btn" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 查詢</button>&nbsp;&nbsp;
			                 </div>
			            </div> 
		             </form>
		             
				<thead>
					    <th>id</th>
						<th>username</th>
						<th>password</th>
				</thead>
				<tbody>
					<c:forEach items="${itemList}" var="item">
						 <tr>
						    <td>${item.id}</td>
						    <td>${item.username}</td>
						    <td>${item.password}</td>
						    <td>
						    	<button class="btn btn-success btn-xs"  data-toggle="modal" data-target="#editLayer" οnclick="editItems(${item.id})"> <span class="glyphicon glyphicon-pencil"></span>修改</button>
						    	<button class="btn btn-danger btn-xs" οnclick="deleteItem(${item.id})"><span class="glyphicon glyphicon-remove"></span>刪除</button>
						    	
						    </td>
		
						</tr>
						
					</c:forEach>
		
				</tbody>
				
	</table>
 
<!-- 			記錄添加彈出層 -->
			<div class="modal fade" id="addLayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog">
			        <div class="modal-content">
			          <div class="modal-header">
			          
			            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
			            <h4 class="modal-title">添加記錄</h4>
			            
			          </div>
			            <div class="modal-body">
				            <form id="add_items_form" class="form-horizontal">
				                <input type="hidden" class="form-control" name="id"> <br>
								<input type="text" class="form-control" placeholder="用戶名" name="username"> <br>
	                            <input type="password" class="form-control" placeholder="密碼" name="password">
	                        </form>
				        </div>
			          
			          
			          <div class="modal-footer">
			            <button data-dismiss="modal" class="btn btn-default" type="button">關閉</button>
			            <button class="btn btn-primary" type="button" οnclick="addItem()">確認添加</button>
			          </div>
			          
			        </div>
			      </div>
			</div>
			 <!-- <div style="height:200px"></div> -->
			            
             
  <!-- 			記錄修改彈出層 -->
			<div class="modal fade" id="editLayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog">
			        <div class="modal-content">
			          <div class="modal-header">
			          
			            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
			            <h4 class="modal-title">修改記錄</h4>
			            
			          </div>
			            <div class="modal-body">
				            <form id="edit_items_form" class="form-horizontal">
				                <input type="hidden" id="edit_item_id" class="form-control" name="id"> <br>
								<input type="text" id="edit_item_username" class="form-control" placeholder="用戶名" name="username"> <br>
	                            <input type="password" id="edit_item_password" class="form-control" placeholder="密碼" name="password">
	                        </form>
				        </div>
			          
			          
			          <div class="modal-footer">
			            <button data-dismiss="modal" class="btn btn-default" type="button">關閉</button>
			            <button class="btn btn-primary" type="button" οnclick="updateItem()">確認修改</button>
			          </div>
			          
			        </div>
			      </div>
			</div>
			 <!-- <div style="height:200px"></div> -->
</body>
<script type="text/javascript">
  $(function(){
	  init();
  })
  function init(){
// 	  alert("初始化界面...");
  }
  
//   刪除
  function deleteItem(id){
	 if(confirm("確定要刪除該記錄嗎？")){
		 $.post(
					"${pageContext.request.contextPath }/admin/items/delete.do",
					{"id":id},
					function(){
						alert("刪除成功！");
						window.location.reload();
					}
				);
	 }
  }
	//添加記錄
	function addItem(){
		$.ajax({
			type:"POST",
			data:new FormData($("#add_items_form")[0]),
			url:"${pageContext.request.contextPath }/admin/items/save.do",
			
			cache:false,
			contentType:false,
			processData:false,
			success:function(){
				alert("記錄添加成功!");
				window.location.reload();
			}
		});
	}
	
// 	“確認修改”按鈕的點擊事件
	function updateItem(){
		$.ajax({
			type:"POST",
			data:new FormData($("#edit_items_form")[0]),
			url:"${pageContext.request.contextPath }/admin/items/update.do",
			
			cache:false,
			contentType:false,
			processData:false,
			success:function(){
				alert("修改成功!");
				window.location.reload();
			}
		});
	}
	
	//點擊“修改”按鈕，打開編輯窗口，回顯數據
	function editItems(id){
		$("#edit_items_form")[0].reset();
		$.ajax({
			type:"POST",
			data:{"id":id},
			url:"${pageContext.request.contextPath }/admin/items/edit.do",
			
			dataType:"json",
			success:function(data){
				$("#edit_item_id").val(data.id);
				$("#edit_item_username").val(data.username);
				$("#edit_item_password").val(data.password);
 
			}
		});
	}
</script>
</html>

三、數據庫設置