SSM框架学习(四)，简单小项目---客户管理系统

上篇讲了SSM整合，既然整合完了，就要使用，想着之前javaweb结课设计做过SSH的客户管理系统，不过代码都是书上的，这次就自己写个SSM的客户管理系统吧。

SSM整合连接接上： https://blog.csdn.net/ignite_/article/details/91358157
这个小项目很简单，就是对数据库的增删改查操作，所以不是很困难，但是对于刚接触SSM的来说，练手再合适不过了。

使用技术：

前台：html css JavaScript JQuery ajax 使用框架bootstrap
后台：java SpringMVC Spring Mybatis

页面效果

1.登陆页面

2.注册页面

3.主页页面

4.添加客户和更改客户按钮实现

除登陆和注册，其他几个功能与后台交流都是通过ajax异步传递json数据完成的

目录结构

jar包

<dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.4.6</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.37</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-core</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-aop</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-aspects</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-beans</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-expression</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-instrument</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-web</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-oxm</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-orm</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-tx</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-context-support</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-test</artifactId><version>4.2.4.RELEASE</version></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis-spring</artifactId><version>1.3.2</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.8</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.9.8</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.9.8</version></dependency>

具体代码：

1.applicationContext.xml(用于配置Mybatis，ioc和di操作)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsd">
<!--    配置mybaits-->
<!--    1.配置数据源--><bean id="datasource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"><property name="driverClassName" value="com.mysql.jdbc.Driver"/><property name="url" value="jdbc:mysql://localhost:3306/ssh_demo?useUnicode=true&amp;characterEncoding=utf8"/><property name="username" value="root"/><property name="password" value="root"/></bean>
<!--    2.配置sqlSessionFactory--><bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"><property name="dataSource" ref="datasource"/><property name="mapperLocations" value="classpath:mapper/*.xml"/></bean>
<!--    3.sqlSessionFactory托管给spring--><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"><property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/><property name="basePackage" value="mapper"/></bean><!--    给CustomService注入Mapper--><bean id="CustomService" class="service.Impl.CustomServiceImpl"><property name="customMapper" ref="customMapper"/></bean>
</beans>

实体类(domain)


public class Custom {private int id;private String name;private String password;private String mobile;private String Email;}

set和get方法就不放出来了，可以直接通过编译器自动生成

Dao层(mapper)

CustomMapper.java(Mybatis动态代理对象)

public interface CustomMapper {Custom login(@Param("name") String name, @Param("password") String password);boolean register(@Param("name") String name,@Param("password") String password,@Param("mobile") String mobile,@Param("Email") String Email);List<Custom> query();boolean delete(@Param("id") int id);boolean insert(@Param("id") String id,@Param("name") String name,@Param("password") String password,@Param("mobile") String mobile,@Param("email") String email);boolean update(@Param("oldid") String oldid,@Param("id") String id,@Param("name") String name,@Param("password") String password,@Param("mobile") String mobile,@Param("email") String email);
}

CustomMapper.xml(Mybatis的Mapper映射文件)

<?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="mapper.CustomMapper"><select id="login" resultType="domain.Custom" parameterType="java.lang.String">select * from custom where name= #{name} and password=#{password}</select><insert id="register">insert into custom(id,name,password,mobile,Email) values (null ,#{name},#{password},#{mobile},#{Email})</insert><select id="query" resultType="domain.Custom">select * from custom</select><delete id="delete" parameterType="java.lang.Integer">delete from custom where id = #{id}</delete><insert id="insert" parameterType="java.lang.String">insert into custom values (#{id},#{name},#{password},#{mobile},#{email})</insert><update id="update" parameterType="java.lang.String">update custom  set id=#{id},name=#{name},password=#{password},mobile=#{mobile},Email=#{email} where  id=#{oldid}</update>
</mapper>

Service层

CustomServiceImpl

package service.Impl;import domain.Custom;
import mapper.CustomMapper;
import service.CustomService;import java.util.List;public class CustomServiceImpl implements CustomService {CustomMapper customMapper;public void setCustomMapper(CustomMapper customMapper) {this.customMapper = customMapper;}@Overridepublic Custom login(String name, String password) {return customMapper.login(name,password);}@Overridepublic boolean register(Custom custom) {return customMapper.register(custom.getName(),custom.getPassword(),custom.getMobile(),custom.getEmail());}@Overridepublic List<Custom> query() {return customMapper.query();}@Overridepublic boolean delete(int id) {return customMapper.delete(id);}@Overridepublic boolean insert(Custom custom) {return customMapper.insert(String.valueOf(custom.getId()),custom.getName(),custom.getPassword(),custom.getMobile(),custom.getEmail());}@Overridepublic boolean update(int oldid, Custom custom) {return customMapper.update(String.valueOf(oldid),String.valueOf(custom.getId()),custom.getName(),custom.getPassword(),custom.getMobile(),custom.getEmail());}
}

这里会调用Dao层，可以将customMapper通过Spring的依赖注入，所以customMapper需要set方法

handle(原生代码结构中的Servlet)

package handle;import domain.Custom;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import service.CustomService;import java.util.List;@Controller
@RequestMapping("custom")
public class CustomHandle {@AutowiredCustomService customService;@RequestMapping(value = "/login.handle",method = RequestMethod.POST)public String login(String name,String password){System.out.println(name);System.out.println(password);Custom custom = customService.login(name, password);if (custom!=null) {return "query";}elsereturn "error";}@RequestMapping(value = "/register.handle",method = RequestMethod.POST)public String register(String name,String password,String mobile,String Email){Custom custom = new Custom();custom.setName(name);custom.setPassword(password);custom.setMobile(mobile);custom.setEmail(Email);System.out.println(custom);if (customService.register(custom)){return "query";}return "error";}@ResponseBody@RequestMapping(value = "/query.handle")public List<Custom> query(){return customService.query();}@ResponseBody@RequestMapping(value = "/delete.handle")public boolean delete(int id){return customService.delete(id);}@ResponseBody@RequestMapping(value = "/insert.handle")public Custom insert(int id,String name,String password,String mobile,String email) {List<Custom> query = customService.query();int b=0;for (int i = 0; i < query.size(); i++) {if (id == query.get(i).getId()) {b=1;break;}}if (b!=1) {Custom custom = new Custom();custom.setId(id);custom.setName(name);custom.setPassword(password);custom.setMobile(mobile);custom.setEmail(email);System.out.println(custom);if (customService.insert(custom)) {return custom;}}else{Custom custom = new Custom();custom.setName("false");return custom;}return null;}@ResponseBody@RequestMapping(value = "/update.handle")public Custom update(int oldid,int id,String name,String password,String mobile,String email){Custom custom = new Custom();custom.setId(id);custom.setName(name);custom.setPassword(password);custom.setMobile(mobile);custom.setEmail(email);System.out.println(custom);if (customService.update(oldid,custom)){return custom;}else return null;}
}

通过拦截请求，交由这个类处理请求。

applicationContext-springmvc.xml(Springmvc配置文件)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.springframework.org/schema/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/mvchttp://www.springframework.org/schema/mvc/spring-mvc.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsd">
<!--    配置视图解析器--><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/html/"/><property name="suffix" value=".html"/></bean>
<!--    扫描包--><context:component-scan base-package="handle"/><mvc:resources mapping="/fonts/**" location="/fonts/"/><mvc:resources mapping="/css/**" location="/css/"/><mvc:resources mapping="/js/**" location="/js/"/><mvc:resources mapping="/html/**" location="/html/"/><mvc:annotation-driven/>
</beans>

前台html

index.html(登陆页面)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="./css/bootstrap.min.css" \><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="./css/bootstrap-theme.min.css"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="./js/jquery-3.3.1.js"></script><script src="./js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="width: 500px;margin-top: 100px"><h3>客户管理系统</h3><form action="./custom/login.handle" method="post"><div class="form-group"><label >账号</label><input type="text" class="form-control" name="name" placeholder="账号"></div><div class="form-group"><label >密码</label><input type="password" class="form-control" name="password" placeholder="密码"></div><button type="submit" class="btn btn-default">登陆</button><a href="./html/register.html" class="btn btn-default">注册</a></form></div>
</body>
</html>

html/register.html(注册页面)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="../css/bootstrap.min.css" \><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="../css/bootstrap-theme.min.css"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="../js/jquery-3.3.1.js"></script><script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="width: 500px;margin-top: 100px"><h3>欢迎注册</h3><form action="../custom/register.handle" method="post"><div class="form-group"><label >账号</label><input type="text" class="form-control" name="name" placeholder="账号"></div><div class="form-group"><label >密码</label><input type="password" class="form-control" name="password" placeholder="密码"></div><div class="form-group"><label >确认密码</label><input type="password" class="form-control" name="password2" placeholder="确认密码"></div><div class="form-group"><label >mobile</label><input type="text" class="form-control" name="mobile" placeholder="mobile"></div><div class="form-group"><label >mobile</label><input type="text" class="form-control" name="Email" placeholder="Email"></div><button class="btn btn-default" type="submit">注册</button></form></div>
</body>
</html>

html/error.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="../index.html">账号或密码错误返回主页</a>
</body>
</html>

html/query.html(主要页面)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="../css/bootstrap.min.css" \><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="../css/bootstrap-theme.min.css"><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="../js/jquery-3.3.1.js"></script><script src="../js/bootstrap.min.js"></script>
</head>
<script>//载入获得jsonwindow.onload=function () {$.getJSON("../custom/query.handle",function (result) {for (var index = 0 ;index<result.length;index++){$("#tableAppend").append("<tr id='tr"+result[index].id+"'>\n" +"<td>"+result[index].id+"</td>\n" +"<td>"+result[index].name+"</td>\n" +"<td>"+result[index].password+"</td>\n" +"<td>"+result[index].mobile+"</td>\n" +"<td>"+result[index].email+"</td>\n" +"<td class='btn btn-primary' type='button' data-toggle='collapse' data-target='#collapseExample"+result[index].id+"' aria-expanded='false' aria-controls='collapseExample"+result[index].id+"' >更改</td>\n" +"<td class='btn btn-danger' onclick='deleteId("+result[index].id+")'>删除</td>\n" +"</tr>"+"<tr class='collapse' id='collapseExample"+result[index].id+"'>"+"<td><input class=\"form-control\" type='text' value='"+result[index].id+"' style='width: 125px' id='update"+result[index].id+"id'></td>"+"<td><input class=\"form-control\" type='text' value='"+result[index].name+"' style='width: 138px' id='update"+result[index].id+"name'></td>"+"<td><input class=\"form-control\" type='text' value='"+result[index].password+"'style='width: 138px' id='update"+result[index].id+"password'></td>"+"<td><input class=\"form-control\" type='text' value='"+result[index].mobile+"' style='width: 138px' id='update"+result[index].id+"mobile'></td>"+"<td><input class=\"form-control\" type='text' value='"+result[index].email+"' style='width: 138px' id='update"+result[index].id+"email'></td>"+"<td class='btn btn-default' colspan='2' onclick='update("+result[index].id+")' >确认更改</td>"+"</tr>")}})}//删除function deleteId(id){$.getJSON("../custom/delete.handle",{"id":id},function (result) {if (result){$("#tr"+id).hide(1000);$("#collapseExample"+id).hide(1000);}})}//显示insert表单function insertopen() {$("#insert").toggle(1000);}//提交新增客户function insert() {var id=$("#insert_id").val();var name=$("#insert_name").val();var password=$("#insert_password").val();var mobile=$("#insert_mobile").val();var email=$("#insert_Email").val();if (id==""||name==""||password==""||mobile==""||email=="") {alert("输入不能为空");}else{$.getJSON("../custom/insert.handle",{"id": id, "name": name, "password": password, "mobile": mobile, "email": email},function (result) {if (result.name != "false") {$("#tableAppend").append("<tr id='tr" + result.id + "'>\n" +"<td>" + result.id + "</td>\n" +"<td>" + result.name + "</td>\n" +"<td>" + result.password + "</td>\n" +"<td>" + result.mobile + "</td>\n" +"<td>" + result.email + "</td>\n" +"<td class='btn btn-primary' type='button' data-toggle='collapse' data-target='#collapseExample"+result.id+"' aria-expanded='false' aria-controls='collapseExample"+result.id+"' >更改</td>\n" +"<td class='btn btn-danger' onclick='deleteId(" + result.id + ")'>删除</td>\n" +"</tr>"+"<tr class='collapse' id='collapseExample"+result.id+"'>"+"<td><input class=\"form-control\" type='text' value='"+result.id+"' style='width: 125px' id='update"+result.id+"id'></td>"+"<td><input class=\"form-control\" type='text' value='"+result.name+"' style='width: 138px' id='update"+result.id+"name'></td>"+"<td><input class=\"form-control\" type='text' value='"+result.password+"'style='width: 138px' id='update"+result.id+"password'></td>"+"<td><input class=\"form-control\" type='text' value='"+result.mobile+"' style='width: 138px' id='update"+result.id+"mobile'></td>"+"<td><input class=\"form-control\" type='text' value='"+result.email+"' style='width: 138px' id='update"+result.id+"email'></td>"+"<td class='btn btn-default' colspan='2' onclick='update("+result.id+")' >确认更改</td>"+"</tr>")$("#insert").hide(1000);} else {alert("添加信息有误,id重复");}})}}//更改function update(updateid) {var id = $("#update"+updateid+"id").val();var name = $("#update"+updateid+"name").val();var password = $("#update"+updateid+"password").val();var mobile = $("#update"+updateid+"mobile").val();var email = $("#update"+updateid+"email").val();$.getJSON("../custom/update.handle",{"oldid":updateid,"id":id,"name":name,"password":password,"mobile":mobile,"email":email},function (result) {$("#tr"+updateid).remove();$("#tableAppend").append("<tr id='tr" + result.id + "'>\n" +"<td>" + result.id + "</td>\n" +"<td>" + result.name + "</td>\n" +"<td>" + result.password + "</td>\n" +"<td>" + result.mobile + "</td>\n" +"<td>" + result.email + "</td>\n" +"<td class='btn btn-primary' type='button' data-toggle='collapse' data-target='#collapseExample"+result.id+"' aria-expanded='false' aria-controls='collapseExample"+result.id+"' >更改</td>\n" +"<td class='btn btn-danger' onclick='deleteId(" + result.id + ")'>删除</td>\n" +"</tr>"+"<tr class='collapse' id='collapseExample"+result.id+"'>"+"<td><input class=\"form-control\" type='text' value='"+result.id+"' style='width: 125px' id='update"+result.id+"id'></td>"+"<td><input class=\"form-control\" type='text' value='"+result.name+"' style='width: 138px' id='update"+result.id+"name'></td>"+"<td><input class=\"form-control\" type='text' value='"+result.password+"'style='width: 138px' id='update"+result.id+"password'></td>"+"<td><input class=\"form-control\" type='text' value='"+result.mobile+"' style='width: 138px' id='update"+result.id+"mobile'></td>"+"<td><input class=\"form-control\" type='text' value='"+result.email+"' style='width: 138px' id='update"+result.id+"email'></td>"+"<td class='btn btn-default' colspan='2' onclick='update("+result.id+")' >确认更改</td>"+"</tr>");$("#collapseExample"+updateid).hide();})}
</script><body>
<div class="container" style="width: 1000px"><h3>客户管理系统</h3><table class="table table-hover" style="text-align: center" id="tableAppend"><tr><td>id号</td><td>账号</td><td>密码</td><td>电话</td><td>Email</td><td>操作</td></tr></table>
</div>
<div class="container" style="width: 200px;margin-top:30px "><button class="btn btn-block" style="width: 200px;margin: 0px auto"onclick="insertopen()">添加客户</button>
</div><div class="container" style="margin-top: 30px;width: 200px;display: none" id="insert" >id:<input type="text" class="form-control" id="insert_id" style="width: 50px" placeholder="id" value="">name: <input type="text" class="form-control" id="insert_name" style="width: 180px" placeholder="name">password: <input type="text" class="form-control" id="insert_password" style="width: 180px" placeholder="password">mobile: <input type="text" class="form-control" id="insert_mobile" style="width: 180px" placeholder="mobile">Email: <input type="text" class="form-control" id="insert_Email" style="width: 180px" placeholder="Email"><button class="btn btn-default" style="width: 200px;margin-top:30px " onclick="insert()">确认添加</button>
</div>
</body>
</html>

前台页面主要就是使用了jquery+ajax+bootstrap框架，用于显示与和后台进行数据交互

web.xml配置

<?xml version="1.0" encoding="UTF-8" ?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" version="2.5"><welcome-file-list><welcome-file>index.html</welcome-file></welcome-file-list>
<!--  加载spring--><context-param><param-name>contextConfigLocation</param-name><param-value>classpath:applicationContext.xml</param-value></context-param><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener>
<!--  配置springmvc--><servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:applicationContext-springmvc.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>*.handle</url-pattern></servlet-mapping></web-app>

注意事项

1.SpringMVC对静态资源访问问题

可以在SpringMVC配置文件中加入一下代码

<mvc:resources mapping="/fonts/**" location="/fonts/"/><mvc:resources mapping="/css/**" location="/css/"/><mvc:resources mapping="/js/**" location="/js/"/><mvc:resources mapping="/html/**" location="/html/"/><mvc:annotation-driven/>

2.Spring使用注解问题

例如在handle使用了Spring的注解，这里在需要调用Service层，若使用IOC和Di操作，会出现空指针，所以在创建Service对象时，使用注解自动装配即可

3.handle给前台传递Json

需要注意两个问题
第一个：
需要使用注解@ResponseBody即可直接返回对象数据
第二个：
需要jar包，并且版本一致

<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.8</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.9.8</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.9.8</version></dependency>

4.Dao层数据类型问题

在创建实体类的时候，id是用了int类型，存入数据库时，因为输入类型是String，所以，在接口中，应该强转int为String

主要就是这样，不是很复杂，但是对想我这样的新手练习使用SSM很有帮助。
bootstrap用的还不是很熟练，更改信息的时候，样式全被撑开了。。。
嗯。。大概就是这样了。。。不到一天就做完了，还不错。。加油

仅供学习，如若有地方不对，敬请前辈指出，感激不尽。