springboot2+mybatis-plus+vue+element-ui ， 功能完善，代码极简, 一行代码顶过去十行代码， 是学mybatis-plus的最好的demo， 是上手element-ui最精简教程。

一、需求（要做什么）

基于现今最流行的技术实现增删改查demo， 便于初学者上手.   springboot2+mybatis-plus+vue+element-ui 

二、理论概述

springboot2： 后端框架中springboot无疑是首选，约定优于配置使代码极简， 现在最新的版本2.x.x。

mybatis-plus： 大拿基于mybatis封装的框架，增删改查分页等功能已经封装好，dao层。service层基本可以不写代码。

vue+element-ui ： 前端用element-ui美观大方，代码更是一行顶过去十行, 更少的代码完成更多的事情。

三、代码分析

分页的代码，参数传userDto，可以随意扩展查询条件

	@Override
	public IPage<User> selectPage(IPage<User> page, User userDto) {
        QueryWrapper<User> wrapper = new QueryWrapper<>();
        if(StringsUtils.hasText(userDto.getName())) {
        	String nameLike = StringPool.PERCENT+userDto.getName()+StringPool.PERCENT;
       	    wrapper.like("name", nameLike);
        }
        if(StringsUtils.hasText(userDto.getSex())) {
       	 wrapper.eq("sex", userDto.getSex());
        }
        if(null!=userDto.getStartDate()) {
          	 wrapper.gt("birthday", userDto.getStartDate());
        }
        if(null!=userDto.getEndDate()) {
          	 wrapper.lt("birthday", userDto.getEndDate());
        }
		IPage<User> pageResult = userDao.selectPage(page, wrapper);
		return pageResult;
	}

前端通过:rules 轻松实现form校验

            rules: {
                name: [
                  { required: true, message: '请输入您的姓名', trigger: 'blur' },
                  { min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                pwd: [
                    { required: true, message: '请输入您的密码', trigger: 'blur' },
                    { min: 6, max: 30, message: '长度在 6  到 30 个字符', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                    { type: 'number', message: '请输入数字', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                birthday: [
                  { type: 'string', required: true, message: '请选择出生日期', trigger: 'change' }
                ],
            }

日期格式化轻松实现前后端日期格式转换

@Component
public class DateConverter implements Converter<String, Date> {
 
    private static final List<String> FORMATS = new ArrayList<>(4);
    
    static{
        FORMATS.add("yyyy-MM");
        FORMATS.add("yyyy-MM-dd");
        FORMATS.add("yyyy-MM-dd HH:mm");
        FORMATS.add("yyyy-MM-dd HH:mm:ss");
    }
 
    @Override
    public Date convert(String source) {
        String value = source.trim();
        if ("".equals(value)) {
            return null;
        }
        if(source.matches("^\\d{4}-\\d{1,2}$")){
            return parseDate(source, FORMATS.get(0));
        }else if(source.matches("^\\d{4}-\\d{1,2}-\\d{1,2}$")){
            return parseDate(source, FORMATS.get(1));
        }else if(source.matches("^\\d{4}-\\d{1,2}-\\d{1,2} {1}\\d{1,2}:\\d{1,2}$")){
            return parseDate(source, FORMATS.get(2));
        }else if(source.matches("^\\d{4}-\\d{1,2}-\\d{1,2} {1}\\d{1,2}:\\d{1,2}:\\d{1,2}$")){
            return parseDate(source, FORMATS.get(3));
        }else {
            throw new IllegalArgumentException("Invalid date value '" + source + "'");
        }
    }
 
    /**
     * 格式化日期
     * @param dateStr String 字符型日期
     * @param format String 格式
     * @return Date 日期
     */
    public  Date parseDate(String dateStr, String format) {
        Date date=null;
        try {
            DateFormat dateFormat = new SimpleDateFormat(format);
            date = dateFormat.parse(dateStr);
        } catch (Exception e) {
        	 e.printStackTrace();
        }
        return date;
    }
 
}

四、项目文件结构截图

五、启动部署流程

1. 首先 在mysql创建数据库mybatis_plus,  在数据库执行sqlj脚本: sql/mybatis_plus.sql.

2. 然后用eclipse导入maven项目springboot2-mybatis-plus, 待maven依赖jar包加载完成后, 得到目录结构.

   

3. 右击DemoApplication --> run as -->Java Application, 启动成功后访问: http://localhost:8080

六、演示效果

增：

删：

改：

查：