SpringMVC之前端增删改查实现

SpringMVC是一个基于MVC架构的框架，它可以帮助我们实现前后端的分离，同时也能很好地支持前端的增删改查操作。

配置

Cloudjun

    CloudJun 1.1 core library
    CloudJun core
    1.1
    CloudJun
    http://jsp.veryedu.cn

    
        page
        com.CloudJun.tag.PageTag
        JSP
        
            pageBean
            true
            true
        
    

web.xml

  Archetype Created Web Application
  
  
  
    contextConfigLocation
    classpath:spring-context.xml
  
  
  
    org.springframework.web.context.ContextLoaderListener
  
  

  
  
    encodingFilter
    org.springframework.web.filter.CharacterEncodingFilter
    true
    
      encoding
      UTF-8
    
  
  
    encodingFilter
    /*
  

  
  
    SpringMVC
    org.springframework.web.servlet.DispatcherServlet
    
    
      contextConfigLocation
      classpath:spring-mvc.xml
    
    1
    
    true
  
  
    SpringMVC
    /
  

zhang.tld

  Archetype Created Web Application
  
  
  
    contextConfigLocation
    classpath:spring-context.xml
  
  
  
    org.springframework.web.context.ContextLoaderListener
  
  

  
  
    encodingFilter
    org.springframework.web.filter.CharacterEncodingFilter
    true
    
      encoding
      UTF-8
    
  
  
    encodingFilter
    /*
  

  
  
    SpringMVC
    org.springframework.web.servlet.DispatcherServlet
    
    
      contextConfigLocation
      classpath:spring-mvc.xml
    
    1
    
    true
  
  
    SpringMVC
    /
  

generatorConfig.xml

jdbc.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost/mybatis_ssm?useUnicode=true&characterEncoding=UTF-8
jdbc.username=root
jdbc.password=123456

log4j2.xml

	
		
		/root/workspace/lucenedemo/logs
		/root/workspace/lucenedemo/logs/error
		/root/workspace/lucenedemo/logs/warn
		%d{yyyy-MM-dd HH:mm:ss.SSS} [%t-%L] %-5level %logger{36} - %msg%n
	

	
		
		
			
			
			
			
			
		

		
		
		
			
		
		
		
			
			
			
			
				
				
				
				
				
				
			
		

		
			
			
			
				
				
			
			
			
		

		
			
			
			
				
				
				
			
		

	

	
	
		
		
		

		
		
		
		
		
		


		
		
			
			
			
			
		

	

spring-context.xml

spring-mvc.xml

spring-mybatis.xml

    
    
    
    
    

    

    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    

    
    
    
        
        
        
        
        
        
        
        
            
                
                    
                        
                            helperDialect=mysql
                        
                    
                
            
        
    

    
    
    
        
        
        
        
    

    
        
    
    
    

StudentBizImpl

package com.zhanghao.Biz.Impl;

import com.zhanghao.Biz.StudentBiz;
import com.zhanghao.mapper.StudentMapper;
import com.zhanghao.model.Student;
import com.zhanghao.utils.PageBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author zhanghao
 * @site
 * @company s集团
 * @create 2023-09-08 23:12
 */
@Service
public class StudentBizImpl implements StudentBiz {
    @Autowired
    private StudentMapper studentMapper;

    @Override
    public int deleteByPrimaryKey(String sid) {
        return studentMapper.deleteByPrimaryKey(sid);
    }

    @Override
    public int insert(Student record) {
        return studentMapper.insert(record);
    }

    @Override
    public int insertSelective(Student record) {
        return studentMapper.insertSelective(record);
    }

    @Override
    public Student selectByPrimaryKey(String sid) {
        return studentMapper.selectByPrimaryKey(sid);
    }

    @Override
    public int updateByPrimaryKeySelective(Student record) {
        return studentMapper.updateByPrimaryKeySelective(record);
    }

    @Override
    public int updateByPrimaryKey(Student record) {
        return studentMapper.updateByPrimaryKey(record);
    }

    @Override
    public List selBySnamePager(Student student, PageBean pageBean) {
        return studentMapper.selBySnamePager(student);
    }


}

PagerAspect

package com.zhanghao.aspect;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.zhanghao.utils.PageBean;
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.springframework.stereotype.Component;

import java.util.List;

/**
 * @author zhanghao
 * @site
 * @company s集团
 * @create 2023-08-25 17:01
 */
@Aspect
@Component
public class PagerAspect {

    @Around("execution(* *..*Biz.*Pager(..))")
    public Object invoke(ProceedingJoinPoint args) throws Throwable {
        PageBean pageBean = null;
        //获取目标中的所有方法
        Object[] args1 = args.getArgs();
        for (Object o : args1) {
            if (o instanceof PageBean) {
                pageBean = (PageBean) o;
                break;
            }
        }
        if (pageBean != null && pageBean.isPagination()) {
            PageHelper.startPage(pageBean.getPage(), pageBean.getRows());
        }
        Object proceed = args.proceed();
        if (pageBean != null && pageBean.isPagination()) {
            PageInfo pageInfo = new PageInfo((List) proceed);
            pageBean.setTotal((int) pageInfo.getTotal());
        }
        return proceed;
        }

}

PageTag

package com.zhanghao.tag;

import com.zhanghao.utils.PageBean;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.BodyTagSupport;
import java.io.IOException;
import java.util.Map;
import java.util.Map.Entry;
import java.util.Set;

public class PageTag extends BodyTagSupport{
	private PageBean pageBean;// 包含了所有分页相关的元素
	
	public PageBean getPageBean() {
		return pageBean;
	}

	public void setPageBean(PageBean pageBean) {
		this.pageBean = pageBean;
	}

	@Override
	public int doStartTag() throws JspException {
//		没有标签体，要输出内容
		JspWriter out = pageContext.getOut();
		try {
			out.print(toHTML());
		} catch (IOException e) {
			e.printStackTrace();
		}
		return super.doStartTag();
	}

	private String toHTML() {
		StringBuffer sb = new StringBuffer();
//		隐藏的form表单---这个就是上一次请求下次重新发的奥义所在
//		上一次请求的URL
		sb.append("
");
		sb.append("	");
//		上一次请求的参数
		Map paramMap = pageBean.getMap();
		if(paramMap != null && paramMap.size() > 0) {
			Set> entrySet = paramMap.entrySet();
			for (Entry entry : entrySet) {
//				参数名
				String key = entry.getKey();
//				参数值
				for (String value : entry.getValue()) {
//					上一次请求的参数，再一次组装成了新的Form表单
//					注意：page参数每次都会提交，我们需要避免
					if(!"page".equals(key)) {
						sb.append("	");
					}
				}
			}
		}
		sb.append("");
		
//		分页条
		sb.append("
");
		sb.append("	
首页
");
		sb.append("	
<
");// less than 小于号
//		sb.append("	
1
");
//		sb.append("	
2
");
		sb.append("	
"+pageBean.getPage()+"
");
		sb.append("	
>
");
		sb.append("	
尾页
");
		sb.append("	
到第页
");
		sb.append("	
确定
");
		sb.append("	
共"+pageBean.getTotal()+"条
");
		sb.append("
");
		
//		分页执行的JS代码
		sb.append("");
		
		return sb.toString();
	}
}

实现功能

StudentController

package com.zhanghao.web;

import com.zhanghao.Biz.StudentBiz;
import com.zhanghao.model.Student;
import com.zhanghao.utils.PageBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

/**
 * @author zhanghao
 * @site
 * @company s集团
 * @create 2023-09-08 21:52
 */
@Controller
@RequestMapping("/student")
public class StudentController {
    @Autowired
    private StudentBiz studentBiz;

    @RequestMapping("/list")
    public String list(Student student, HttpServletRequest request){
        PageBean pageBean = new PageBean();
        pageBean.setRequest(request);
        List students = studentBiz.selBySnamePager(student, pageBean);
        request.setAttribute("list",students);
        request.setAttribute("pageBean",pageBean);
        return "stu/list";
    }

    @RequestMapping("/add")
    public String add(Student student){
        studentBiz.insertSelective(student);
        return "redirect:list";
    }

    @RequestMapping("/del/{sid}")
    public String add(@PathVariable("sid") String sid){
        studentBiz.deleteByPrimaryKey(sid);
        return "redirect:/student/list";
    }

    @RequestMapping("/edit")
    public String edit(Student student){
        studentBiz.updateByPrimaryKeySelective(student);
        return "redirect:list";
    }

    @RequestMapping("/pareSave")
    public String pareSave(Student student, Model model){
        if(student!=null && student.getSid()!=null){
            Student s = studentBiz.selectByPrimaryKey(student.getSid());
            model.addAttribute("s",s);
        }
        return "stu/edit";

    }


}

JSP

List.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>



<%@ include file="/common/header.jsp" %>



    

        
        
        
<%--        --%>
    
    查询
    新增



        

    

    

        
学生编号
        
学生名称
        
学生年龄
        
学生性别
        
操作
    
    
    

    

            
${s.sid }
            
${s.sname }
            
${s.sage }
            
${s.ssex }
            

                修改
                删除
            
        
    
    



${pageBean}

edit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>



    
    



    学生编号:

    学生姓名:

    学生年龄:

    学生性别:

    

heard.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://jsp.veryedu.cn" prefix="z"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>



    
    
    
    

前端增删改查实现一般需要完成以下几个步骤：

1. 前端页面设计。前端页面应该清晰明了，使用户易于理解和使用。需要定义表格用于展示数据，包括表头和表内容，同时还需要添加各种操作按钮用于增加、修改和删除数据。

2. 接口设计。接口是前后端之间的桥梁，要实现增删改查功能，需要定义对应的增删改查接口。接口应该具有明确的功能和参数，以便前端能够正确调用。

3. 数据库设计。数据库是存储数据的重要组成部分。需要定义对应的数据表，包括数据列、数据类型和主键等，以便后台能够存储数据并进行操作。

4. 前端逻辑实现。前端需要编写对应的JavaScript代码来实现增删改查功能。具体包括：对表格进行初始化、监听操作按钮点击事件、调用后台接口进行数据操作等。

5. 后台接口实现。后台接口需要根据前端定义的接口进行实现。一般需要包括对应的增删改查方法，以便能够正确处理前端传递的参数和数据。

6. 后台逻辑实现。后台需要根据前端传递的参数和数据，进行相应的处理，包括数据的存储和修改、数据的查询和删除等。同时，还需要对数据进行校验和验证，保证数据的正确性和安全性。

综上所述，前端增删改查实现需要前后端配合完成，同时还需要遵循一定的规范和标准，才能够实现功能完善、性能优良的系统。