喜欢就点个赞呗!
GitHub项目 ssm-learn-crm
show me the code and take to me,做的出来更要说的明白
git clone https://github.com/buerbl/ssm-learn-crm.git
我们需要做一个客户系统,使用者可以在系统上面保存、编辑、删除、客户信息。
这次我们选择 ssm 三大框架搭建系统的后端,前端页面的话用 JSP 以及 JQuery EasyUI;数据库使用 MySQL;项目构想使用 Maven 工具。
技术 | 作用 |
---|---|
Spring | 管理对象,管理事务等 |
SpringMVC | 路径跳转,请求访问等 |
Mybatis | 数据获取等 |
JQuery EasyUI | 页面展示等 |
MySQL | 存取数据等 |
IDEA | 快速写代码等 |
Navicat | 数据库可视化软件 |
我们需要保存客户的名字、性别、联系方式和地址,因此我们的数据库脚本如下
CREATE table t_customer( id int PRIMARY KEY auto_increment, name VARCHAR(20), gender char(1), telephone VARCHAR(20), address VARCHAR(50) );
一次性导入我们需要的jar,依赖如下
<dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.11</version> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>4.3.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.3.3.RELEASE</version> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-pool2</artifactId> <version>2.4.2</version> </dependency> <dependency> <groupId>commons-dbcp</groupId> <artifactId>commons-dbcp</artifactId> <version>1.4</version> </dependency> <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.26</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>4.3.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>4.3.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>4.3.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>4.3.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>4.3.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>4.3.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-expression</artifactId> <version>4.3.3.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aspects</artifactId> <version>4.3.3.RELEASE</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.3.3</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>4.3.3.RELEASE</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.16.12</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.6.0</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.6.0</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.6.0</version> </dependency> </dependencies>
可能当我们编译的时候,我们发现 webapp 的文件并没有编译进来,我们需要在 pom.xml 中加入如下,告诉 Mavne 需要编译特定文件。
<build> <resources> <resource> <directory>src/main/webapp</directory> <filtering>true</filtering> </resource> </resources> </build>
来到这里的话,我们需要建立文件夹,准备开始写代码。一般按照套路的话,我喜欢如下的规则
文件夹 | 作用 |
---|---|
controller | 控制层代码 |
domain | 实体类代码 |
dao | Mapper代码 |
service | 服务层代码 |
我们根据数据库字段编写实体类代码,代码如下,我使用了 lombok 框架,这个东西需要 IDEA 安装一个 lombok 插件。
package com.buer.domain; import lombok.AllArgsConstructor; import lombok.Getter; import lombok.Setter; import lombok.ToString; /** * @Description: * @Author: boolean * @Date: 2019/12/22 11:51 */ @Getter @Setter @ToString @AllArgsConstructor public class Customer { private Integer id; private String name; private String gender; private String telephone; private String address; }
有个问题,这些字段是怎样和数据库字段一一对应的呢?下面揭晓。
这里我们需要的 Mybatis 要上场了,首先我们需要如下Mapper代码
package com.buer.dao; import com.buer.domain.Customer; import java.util.List; public interface CustomerMapper { /** * 添加客户 */ void saveCustomer(Customer customer); /** * 查询所有客户 * @return */ List<Customer> list(); /*** * 查找某个客户 * @param id * @return */ Customer findById(Integer id); }
有了 Mapper 代码,我们需要给 Mapper 配上相应的 xml 文件。如下
<?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"> <!-- 该文件编写mybatis中的mapper接口里面的方法提供对应的sql语句 --> <mapper namespace="com.buer.dao.CustomerMapper"> <!-- 添加客户 --> <insert id="saveCustomer" parameterType="com.buer.domain.Customer"> INSERT INTO ssm.t_customer ( NAME, gender, telephone, address ) VALUES ( #{name}, #{gender}, #{telephone}, #{address} ) </insert> <select id="list" resultType="com.buer.domain.Customer"> select * from t_customer </select> <select id="findById" resultType="com.buer.domain.Customer"> select * from t_customer where id = #{id} </select> </mapper>
解答上面的问题,实体类字段是怎样和数据库字段一一对应,通过 resultType 来自动映射。
先来接口层的代码。代码如下
package com.buer.service; import com.buer.domain.Customer; import java.util.List; public interface IcustomerService { /** * 添加客户 */ void saveCustomer(Customer customer); /** * 返回所有数据 * @return */ List<Customer> list(); /** * 修数据 * @return */ Customer findById(Integer id); }
然后实现接口,代码如下
package com.buer.service.Impl; import com.buer.dao.CustomerMapper; import com.buer.domain.Customer; import com.buer.service.IcustomerService; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import javax.annotation.Resource; import java.util.List; /** * @Description: * @Author: boolean * @Date: 2019/12/22 18:28 */ @Service("customerService") public class IcustomerServiceImpl implements IcustomerService { @Resource private CustomerMapper customerMapper; @Override @Transactional public void saveCustomer(Customer customer) { customerMapper.saveCustomer(customer); } @Override public List<Customer> list() { return customerMapper.list(); } @Override public Customer findById(Integer id) { return customerMapper.findById(id); } }
这里我们看到 @Service("customerService")
, @Resource
, @Transactional
,这些注解他们的作用是啥子哦?请看下面
注解 | 作用 |
---|---|
@Service("customerService") | 告诉 Spring, 这是一个叫 customerService 的东西,你要照顾好她,给他在初始化的时候创建一个对象。 |
@Resource | Java里面的注解,注入对象 |
@Transactional | 告诉 Spring,需要开始事务 |
这里就是 SpringMVC 的舞台了。代码如下
package com.buer.controller; import com.buer.domain.Customer; import com.buer.service.IcustomerService; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import javax.annotation.Resource; import java.util.List; /** * @Description: * @Author: boolean * @Date: 2019/12/22 18:50 */ @Controller @RequestMapping("/customer") public class CustomerController { @Resource private IcustomerService service; @RequestMapping("/index") public String test(){ System.out.println("ssss"); return "index"; } @RequestMapping("/save") public String save(Customer customer){ System.out.println("save"); service.saveCustomer(customer); return "success"; } @RequestMapping("/list") @ResponseBody public List<Customer> list(){ System.out.println("list"); return service.list(); } @RequestMapping("/findById") @ResponseBody public Customer findById(Integer id){ System.out.println("findById"); return service.findById(id); } }
注解 | 作用 |
---|---|
@Controller | 告诉 SpringMVC, 这是你负责的代码 |
@RequestMapping("/save") | 告诉 SpringMVC,用 “/save”路径访问 |
@ResponseBody | 告诉 SpringMVC,需要返回JSON |
以上就是代码的编写,但是还没有完成哈,我们需要一些配置文件。
我们要连接数据库,代码如下
jdbc.url=jdbc:mysql://localhost:3306/ssm jdbc.driverClass=com.mysql.jdbc.Driver jdbc.user=root jdbc.password=123456
我们要告诉 Spring 连接数据库,以及我们写的代码在哪里,怎么去操作我们的代码。代码如下
<?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:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd"> <!-- 读取jdbc.properties --> <context:property-placeholder location="classpath:jdbc.properties"/> <!-- 创建DataSource --> <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource"> <property name="url" value="${jdbc.url}"/> <property name="driverClassName" value="${jdbc.driverClass}"/> <property name="username" value="${jdbc.user}"/> <property name="password" value="${jdbc.password}"/> <property name="maxActive" value="10"/> <property name="maxIdle" value="5"/> </bean> <!-- 创建SqlSessionFactory对象 --> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <!-- 关联连接池 --> <property name="dataSource" ref="dataSource"/> <!-- 加载mapper.xml --> <property name="mapperLocations" value="classpath:mapper/*.xml"/> </bean> <!-- Mapper所有接口的扫描 --> <!--注意:如果使用Mapper接口包扫描,那么每个Mapper接口在Spring容器中的id名称为类名: 例如 CustomerMapper -> customerMapper--> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <!-- 配置Mapper接口所在包路径 --> <property name="basePackage" value="com.buer.dao"></property> </bean> <!-- 开启Spring的IOC注解扫描 --> <context:component-scan base-package="com.buer"/> <!-- 开启Spring的事务 --> <!-- -事务管理器 --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource"/> </bean> <!-- 启用Spring事务注解 --> <tx:annotation-driven transaction-manager="transactionManager"/> </beans>
我们需要告诉 SpringMVC,他需要的代码在哪里,怎么去操作我们的代码
我们需要启动项目了,以及一些字体指定。代码如下
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>01.mybatis</display-name> <!-- 配置SpringMVC编码过滤器 --> <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> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- 启动SpringMVC --> <servlet> <servlet-name>DispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 参数:读取spring-mvc.xml --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-mvc.xml</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>DispatcherServlet</servlet-name> <url-pattern>*.action</url-pattern> </servlet-mapping> <!-- 启动spring --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- 修改路径 --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> </web-app>
这里的话,后端就搭起来了。
我们需要编写首页,代码如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>booleanbl 公众号 客户关系管理系统</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <link id="themeLink" rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <style type="text/css"> ul{ line-height: 30px; } </style> </head> <body class="easyui-layout"> <!-- 顶部 --> <div data-options="region:'north',split:true" style="height:80px;"> <!-- logo --> <div id="logo"> <img src="images/20191223003101.png"/> </div> <!-- 登录用户信息 --> <div id="loginDiv" style="position: absolute;right: 20px;top: 20px;"> 欢迎你,[超级管理员],你使用[192.156.21.22]IP登录! </div> <div id="themesDiv" style="position: absolute;right: 20px;top:40px;"> <a href="javascript:void(0)" id="mb" class="easyui-menubutton" data-options="menu:'#Themesmeus',iconCls:'icon-edit'">切换风格</a> <div id="Themesmeus" style="width:150px;"> <div>default</div> <div>gray</div> <div>black</div> <div>bootstrap</div> <div>material</div> <div>metro</div> </div> </div> </div> <!-- 底部 --> <div data-options="region:'south',split:true" style="height:30px;"> <div id="copyrightDiv" style="text-align: center;"> booleanbl出品©2018版权所有 </div> </div> <!-- 左边系统菜单 --> <div data-options="region:'west',title:'系统菜单',split:true" style="width:200px;"> <div id="aa" class="easyui-accordion" style="width:193px;" data-options="border:0,multiple:true" > <div title="系统管理" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;"> <ul> <li><a href="javascript:void(0)" pageUrl="customer_manage.jsp">客户管理</a></li> </ul> </div> </div> </div> <!-- 中间编辑区域 --> <div data-options="region:'center'" style="padding:5px;background:#eee;"> <div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true"> <div title="起始页" style="padding:20px;display:none;"> 欢迎登录booleanbl客户关系管理系统 </div> </div> </div> <script type="text/javascript"> $(function(){ //给a标签绑定时间 $("a[pageUrl]").click(function(){ //1.获取pageUrl属性值(需要跳转的页面地址) var pageUrl = $(this).attr("pageUrl"); //获取a标签的内容,标题 var title = $(this).text(); //2.判断是否存在指定标题的选项卡 if( $("#tt").tabs("exists",title) ) { //3.如果存在,则选项该选项卡 $("#tt").tabs("select",title); }else{ //4.如果不存在,则添加选项卡 $("#tt").tabs("add",{ title:title, content:"<iframe src='"+pageUrl+"' width='100%' height='100%' frameborder='0'><iframe>", closable:true }); } }); //点击切换模块菜单的时候,进行切换模块 $("#Themesmeus").menu({ onClick:function(item){ //1.获取需要改变的模块名称 var themeName = item.text; //2.获取link标签的href属性 var href= $("#themeLink").attr("href"); //3.更改href的属性值 // easyui/themes/default/easyui.css href = href.substring(0,href.indexOf("themes"))+"themes/"+themeName+"/easyui.css"; //4.更新link的href属性 $("#themeLink").attr("href",href); } }); }); </script> </body> </html>
我们需要详情页,代码如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>客户管理</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- 导入easyui的资源文件 --> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <link id="themeLink" rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> </head> <body> <table id="list"></table> <!-- 工具条 --> <div id="tb"> <a id="addBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a> <a id="editBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a> <a id="deleteBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a> </div> <!-- 编辑窗口 --> <div id="win" class="easyui-window" title="客户数据编辑" style="width:500px;height:300px" data-options="iconCls:'icon-save',modal:true,closed:true"> <form id="editForm" method="post"> <%--提供id隐藏域 --%> <input type="hidden" name="id"> 客户姓名:<input type="text" name="name" class="easyui-validatebox" data-options="required:true"/><br/> 客户性别: <input type="radio" name="gender" value="男"/>男 <input type="radio" name="gender" value="女"/>女 <br/> 客户手机:<input type="text" name="telephone" class="easyui-validatebox" data-options="required:true"/><br/> 客户住址:<input type="text" name="address" class="easyui-validatebox" data-options="required:true"/><br/> <a id="saveBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a> </form> </div> <script type="text/javascript"> $(function(){ $("#list").datagrid({ //url:后台数据查询的地址 url:"customer/list.action", //columns:填充的列数据 //field:后台对象的属性 //tille:列标题 columns:[[ { field:"id", title:"客户编号", width:100, checkbox:true }, { field:"name", title:"客户姓名", width:200 }, { field:"gender", title:"客户性别", width:200 }, { field:"telephone", title:"客户手机", width:200 }, { field:"address", title:"客户住址", width:200 } ]], //显示分页 pagination:true, //工具条 toolbar:"#tb" }); //打开编辑窗口 $("#addBtn").click(function(){ //清空表单数据 $("#editForm").form("clear"); $("#win").window("open"); }); //保存数据 $("#saveBtn").click(function(){ $("#editForm").form("submit",{ //url: 提交到后台的地址 url:"customer/save.action", //onSubmit: 表单提交前的回调函数,true:提交表单 false:不提交表单 onSubmit:function(){ //判断表单的验证是否都通过了 return $("#editForm").form("validate"); }, //success:服务器执行完毕回调函数 success:function(data){ //data: 服务器返回的数据,类型字符串类 //要求Controller返回的数据格式: //成功:{success:true} 失败:{success:false,msg:错误信息} //把data字符串类型转换对象类型 data = eval("("+data+")"); if(data.success){ //关闭窗口 $("#win").window("close"); //刷新datagrid $("#list").datagrid("reload"); $.messager.alert("提示","保存成功","info"); }else{ $.messager.alert("提示","保存失败:"+data.msg,"error"); } } }); }); //修改数据 $("#editBtn").click(function(){ //判断只能选择一行 var rows = $("#list").datagrid("getSelections"); if(rows.length!=1){ $.messager.alert("提示","修改操作只能选择一行","warning"); return; } //表单回显 $("#editForm").form("load","customer/findById.action?id="+rows[0].id); $("#win").window("open"); }); //删除 $("#deleteBtn").click(function(){ var rows =$("#list").datagrid("getSelections"); if(rows.length==0){ $.messager.alert("提示","删除操作至少选择一行","warning"); return; } //格式: id=1&id=2&id=3 $.messager.confirm("提示","确认删除数据吗?",function(value){ if(value){ var idStr = ""; //遍历数据 $(rows).each(function(i){ idStr+=("id="+rows[i].id+"&"); }); idStr = idStr.substring(0,idStr.length-1); //传递到后台 $.post("customer/delete.action",idStr,function(data){ if(data.success){ //刷新datagrid $("#list").datagrid("reload"); $.messager.alert("提示","删除成功","info"); }else{ $.messager.alert("提示","删除失败:"+data.msg,"error"); } },"json"); } }); }); }); </script> </body> </html>
原因是没有转换json返回
@ResponseBody