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

最新推荐文章于 2024-02-18 09:08:25 发布

ignite_

最新推荐文章于 2024-02-18 09:08:25 发布

阅读量2.6k

点赞数 15

分类专栏： java

本文链接：https://blog.csdn.net/ignite_/article/details/91395377

版权

java 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

上篇讲了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/beans
     http://www.springframework.org/schema/beans/spring-beans.xsd
     http://www.springframework.org/schema/mvc
     http://www.springframework.org/schema/mvc/spring-mvc.xsd
     http://www.springframework.org/schema/context
     http://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;
    }

    @Override
    public Custom login(String name, String password) {
        return customMapper.login(name,password);
    }

    @Override
    public boolean register(Custom custom) {
        return customMapper.register(custom.getName(),
                                    custom.getPassword(),
                                    custom.getMobile(),
                                    custom.getEmail());
    }

    @Override
    public List<Custom> query() {
        return customMapper.query();
    }

    @Override
    public boolean delete(int id) {
        return customMapper.delete(id);
    }

    @Override
    public boolean insert(Custom custom) {
        return customMapper.insert(String.valueOf(custom.getId()),
                                    custom.getName(),
                                    custom.getPassword(),
                                    custom.getMobile(),
                                    custom.getEmail());
    }

    @Override
    public 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 {
    @Autowired
    CustomService 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";
        }
        else
        return "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/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context
        http://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>
    //载入获得json
    window.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用的还不是很熟练，更改信息的时候，样式全被撑开了。。。
嗯。。大概就是这样了。。。不到一天就做完了，还不错。。加油

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

ignite_

关注

15
点赞
踩
47

收藏

觉得还不错? 一键收藏
55
评论
SSM框架学习(四)，简单小项目---客户管理系统

上篇讲了SSM整合，既然整合完了，就要使用，想着之前javaweb结课设计做过SSH的客户管理系统，不过代码都是书上的，这次就自己写个SSM的客户管理系统吧。SSM整合连接接上： https://blog.csdn.net/ignite_/article/details/91358157这个小项目很简单，就是对数据库的增删改查操作，所以不是很困难，但是对于刚接触SSM的来说，练手再合适不过了...
复制链接

扫一扫