ssm整合（一）

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

1.新建web项目

2.导入jar包

3.navicat导入sql文件

4.web.xml

<?xml version="1.0" encoding="UTF-8"?>


    
        
            contextConfigLocation
            classpath:applicationContext-*.xml
        

    
        
            org.springframework.web.context.ContextLoaderListener
        
        
            
            encodingFiltert
            org.springframework.web.filter.CharacterEncodingFilter
                
                    encoding
                    utf-8
                

        
    
        encodingFiltert
        /*
    
    
    
    
        dispatcherServlet
        org.springframework.web.servlet.DispatcherServlet
        
            contextConfigLocation
            classpath:springmvc.xml
        
        1
    
    
        dispatcherServlet
        /

5.springmvc.xml

6.applicationContext-mapper.xml

<?xml version="1.0" encoding="UTF-8"?>

7.applicationContext-service.xml

<?xml version="1.0" encoding="UTF-8"?>

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 {

    //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中加入

  
    class="org.mybatis.spring.SqlSessionFactoryBean">
        "dataSource" ref="dataSource">
            
        
        
        "plugins">
            
                class="com.github.pagehelper.PageInterceptor">

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 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 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 adminList = adminService.findByPage();
        PageInfo 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'/>
    
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <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">

<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">
            
            <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>
                    
                    <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>


<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+=`  
                               #
                                `+item.userId+`
                                `+item.username+`
                                `+item.phone+`
                                `+item.description+`
                                `+item.avater+`
                                
                                    
                                    
                                
                            `;


        })
            $("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();

})

效果：

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

SSM整合

ssm整合（一）

相关

mybatis-ssm整合

ssm整合依赖包

SSM整合_年轻人的第一个增删改查_查找

千峰商城-springboot项目实战04-基于springboot的SSM整合

ssm整合：添加书籍功能

19 SSM整合，SSM框架快速搭建

标签