ssm整合（一）

进度：项目搭建—》分页查询

1.新建web项目

2.导入jar包

3.navicat导入sql文件

4.web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    
        <context-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext-*.xml</param-value>
        </context-param>

    <!--1.监听器-->
        <listener>
            <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
        </listener>
        <filter>
            <!--2.乱码过滤器-->
            <filter-name>encodingFiltert</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>encodingFiltert</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    
    <!--3.前端控制器（springmvc）-->
    <servlet>
        <servlet-name>dispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    




</web-app>

5.springmvc.xml

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       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">
    <!--1.包扫描-->
    <context:component-scan base-package="stu.adam.ssm.controller">

    </context:component-scan>

    <!--2.注解驱动-->
    <mvc:annotation-driven></mvc:annotation-driven>

    <!--3.放行静态资源-->
<mvc:default-servlet-handler/>


</beans>

6.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.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

        <!--包扫描-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="stu.adam.ssm.mapper">
        </property>
    </bean>

    <!--加载外部配置文件db.properties-->
    <context:property-placeholder location="classpath:db.properties"></context:property-placeholder>

    <!--加载数据源-->
    <!--3.配置数据源-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driverClassName}"></property>
        <property name="url" value="${jdbc.url}"></property>
        <property name="username" value="${jdbc.username}"></property>
        <property name="password" value="${jdbc.password}"></property>
    </bean>

    <!--引用数据源-->
    <bean class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"></property>
    </bean>

</beans>

7.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"
       xmlns:mvc="http://www.springframework.org/schema/mvc" 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 https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
    
    <!--包扫描-->
    <context:component-scan base-package="stu.adam.ssm.service"></context:component-scan>
   <!--数据源事务管理器-->
    <bean class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"></property>

    </bean>

    <!--事务驱动-->
    <tx:annotation-driven></tx:annotation-driven>
    
</beans>

8.使用工具生成entity类和mapper接口、xml

9.编写异常处理类（发json格式的异常过去）

9.1编写枚举类 EnumStatus.class

package stu.adam.ssm.controller;

public enum EnumStatus {

//这里的格式取决于属性如何定义



    SUCCESS(2000,"成功"),
    ERROR(50000,"失败"),
    USERNAME_ERROR(4001,"用户名错误"),
    PASSWORD_ERROR(4002,"密码错误"),
    NO_LOGIN(5001,"未登录");
    private  int status;
    private  String message;

    EnumStatus(int status, String message) {
        this.status = status;
        this.message = message;
    }

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }


}

9.2 对返回结果进行封装

AjaxResult.class

package stu.adam.ssm.controller;

import org.aspectj.weaver.loadtime.Aj;

import java.util.HashMap;

/**
 * @program: ssm-conformity
 * @description:ajax类型封装
 * @author: adam
 * @create: 2021-12-21 20:24
 **/


public class AjaxResult extends HashMap<String,Object> {

    //1.map的key
    private static final String STATUS ="status";
    private static final String MESSAGE="message";

    private static final String DATA="data";
    private static final String TOTAL="total";

    //构造器私有话，放key
    private AjaxResult(EnumStatus enumStatus) {

        this.put(STATUS,enumStatus.getStatus());
        this.put(MESSAGE,enumStatus.getMessage());

    }
    //1.成功的默认状态码和信息
    public static AjaxResult success(){
        return new AjaxResult(EnumStatus.SUCCESS);
    }
    //2.返回自定义状态码
    public static AjaxResult success(EnumStatus enumStatus){
        return new AjaxResult(enumStatus);
    }
    //3.成功后返回数据
    public static AjaxResult success(Object data){
        //调用success
        AjaxResult success=success();
        //加key和value
        success.put(DATA,data);
        return success;
    }
    //4.返回成功后，翻页查询携带数据和总记录数
    public static AjaxResult success(Object data,long total){
        AjaxResult success=success();
        success.put(DATA,data);
        success.put(TOTAL,total);

        return success;
    }
    //5.失败后 返回默认状态码和信息
    public static AjaxResult error(){
        return new AjaxResult(EnumStatus.ERROR);
    }

    //6.失败后 返回默认状态码和信息
    public static AjaxResult error(EnumStatus enumStatus){
        return new AjaxResult(enumStatus);
    }

}

10.使用pagehelper插件完成分页操作（后台信息）

10.1导包

10.2 pagehelper在applicationcontext-mapper的sqlsessionfactorybean中加入

  <!--引用数据源-->
    <bean class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource">
            
        </property>
        
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor"></bean>
            </array>
        </property>
        
    </bean>

10.3分页接口及服务编写

AdminService

package com.javasm.ssm.service;

import com.javasm.ssm.entity.Admin;

import java.util.List;

/**
 * @Author：liulei
 * @Version：1.0
 * @Date：2021/12/21-15:40
 * @Since:jdk1.8
 * @Description:
 */
public interface AdminService {
    List<Admin> findByPage();
}

AdminServiceImpl

package stu.adam.ssm.service.serviceimpl;

import org.springframework.beans.factory.annotation.Autowired;
import stu.adam.ssm.entity.Admin;
import stu.adam.ssm.mapper.AdminMapper;
import stu.adam.ssm.service.AdminService;

import java.util.List;

/**
 * @program: ssm-conformity
 * @description:
 * @author: adam
 * @create: 2021-12-21 21:20
 **/

//一开始忘记写了直接gg
@service
public class AdminServiceImpl implements AdminService {


    @Autowired
    private AdminMapper adminMapper;

    @Override
    public List<Admin> findByPage()
    {
        return adminMapper.selectByExample(null);
    }
}

10.4 分页controller编写

package stu.adam.ssm.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import stu.adam.http.AjaxResult;
import stu.adam.ssm.entity.Admin;
import stu.adam.ssm.service.AdminService;

import java.util.List;

/**
 * @program: ssm-conformity
 * @description:
 * @author: adam
 * @create: 2021-12-21 21:17
 **/

//相当于都返回json
@RestController
public class AdminController {
    @Autowired
private AdminService adminService;
    @RequestMapping("findByPage")
public AjaxResult findByPage(@RequestParam(defaultValue = "1")Integer currentPage,@RequestParam(defaultValue = "3")Integer pageSize){

        PageHelper.startPage(currentPage,pageSize);
        List<Admin> adminList = adminService.findByPage();
        PageInfo<Admin> adminPageInfo=new PageInfo<>(adminList);
        long total=adminPageInfo.getTotal();
        return AjaxResult.success(adminList,total);
    }
    
}

效果：

11.前端页面编写以及前端数据显示

11.1放页面资源进去

附（前端页面）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>ssm综合练习</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <!--     Fonts and icons     -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href="css/now-ui-kit.css?v=1.1.0" rel="stylesheet"/>
    <style>
        .form-control {
            height: 44px;
        }

        .footer {
            padding: 0;
        }

        .logo-container {
            margin-bottom: 20px !important;
        }
    </style>
</head>

<body class="login-page sidebar-collapse">
<!-- End Navbar -->
<div class="page-header" filter-color="orange">
    <div class="page-header-image" style="background-image:url(images/intro-bg.jpg)"></div>

    <div class="container">

        <div class="col-md-4 content-center">
            <!--<h4>综合练习之图书管理</h4>-->
            <div class="card card-login card-plain">
                <form class="form" id="form">
                    <div class="header header-primary text-center">
                        <div class="logo-container">
                            <img src="images/now-logo.png" alt="">
                        </div>
                    </div>
                    <!--tips-->
                    <span style="margin-bottom: 20px;color: red;font-weight: bold; font-size: 20px; display: none" id="tips">用户名或者密码错误</span>
                    <div class="content">
                        <div class="input-group form-group-no-border input-lg">
                                <span class="input-group-addon">
                                    <i class="fa fa-envelope"></i>
                                </span>
                            <input type="text" class="form-control" placeholder="请输入用户名" name="username">
                        </div>
                        <div class="input-group form-group-no-border input-lg">
                                <span class="input-group-addon">
                                    <i class="fa fa-lock"></i>
                                </span>
                            <input type="password" placeholder="请输入密码" class="form-control" name="password"/>
                        </div>
                    </div>
                    <div class="footer text-center">
                        <a href="javascript:void(0)" class="btn btn-primary btn-round btn-lg btn-block loginBtn">登录</a>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<!--引入jquery-->
<script src="js/jquery.min.js"></script>


</body>

</html>

11.2改Js

html页面底下写入：

11.3admin.html的js文件编写

$(function () {
    //1.定义变量
    var  total;
    let currentPage=1;
    let pageSize=3;
    //2.定义方法
    function findByPage() {
        $.get(`/findByPage?currentPage=`+currentPage+"&pageSize="+pageSize).then(response=>{
            let str=``;
        if (response.status==2000) {
            response.data.forEach(item=>{
                str+=`  <tr>
                               <td>#</td>
                                <td>`+item.userId+`</td>
                                <td>`+item.username+`</td>
                                <td>`+item.phone+`</td>
                                <td>`+item.description+`</td>
                                <td>`+item.avater+`</td>
                                <td>
                                    <button class="btn btn-sm  btn-info" data-toggle="modal"
                                            data-target="#modal-default">
                                        编辑
                                    </button>
                                    <button class="btn btn-sm  btn-warning" data-toggle="modal" data-target="#delModal">
                                        删除
                                    </button>
                                </td>
                            </tr>`;


        })
            $("tbody").html(str);

        }
        total=response.total;
        initPage(total);

    })

    }


    function initPage(total){

        $("#pagination").pagination(total,    //分布总数量，必须参数
            {
                callback: PageCallback,  //PageCallback() 点击分页选项卡时调用,初始化分页插件时调用
                prev_text: "« 上一页",
                next_text: "下一页 »",
                items_per_page:pageSize,
                num_edge_entries: 2,       //两侧首尾分页条目数
                num_display_entries: 10,    //连续分页主体部分分页条目数
                current_page: currentPage-1,   //当前页索引
                load_first_page:false
            });
    }

///////////////////////////////分页插件////////////////////////////
    // function PageCallback(index,aa) {
    //     console.log("index==="+index);
    //     console.log("index==="+aa);
    // }
    function PageCallback(index)
    {
        console.log("index===="+index);
        currentPage = index+1;
        findByPage()
    }
    ////////////////////////////分页插件////////////////////////////
    //3.调用方法
    findByPage();

})

效果：

==== 整合（第一天）完

posted on 2021-12-21 22:53 realAdam 阅读(57) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ssm整合（一）

公告