SpingBoot-Vue前后端——实现CRUD

目录​​​​​​​

一、实例需求 ⚽

 二、代码实现  

数据库 

后端实现 

前端实现 

三、源码下载

---

一、实例需求 ⚽

 实现一个简单的CRUD，包含前后端交互。

 二、代码实现  

数据库 

CREATE TABLE `user` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) DEFAULT NULL COMMENT '姓名',
  `age` int(11) DEFAULT NULL COMMENT '年龄',
  `sex` varchar(1) DEFAULT NULL COMMENT '性别',
  `address` varchar(255) DEFAULT NULL COMMENT '地址',
  `phone` varchar(20) DEFAULT NULL COMMENT '电话',
  `create_time` varchar(20) DEFAULT NULL COMMENT '创建时间',
  `avatar` varchar(255) DEFAULT NULL COMMENT '头像',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1690322826313793539 DEFAULT CHARSET=utf8;

后端实现 

方式一（使用springboot + mybatis-plus）

package com.example.demo.service;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.boot.autoconfigure.data.web.SpringDataWebProperties;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.awt.print.Pageable;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

@Service
public class UserService {

    @Resource
    private UserMapper userMapper;

    public void save(User user) {
        String now = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        user.setCreateTime(now);
        userMapper.insert(user);
    }

    public void delete(Long id) {
        userMapper.deleteById(id);
    }

    public User findById(Long id) {
        if(id !=null){
            QueryWrapper queryWrapper = Wrappers.query();
            queryWrapper.eq("id", id);
            return userMapper.selectOne(queryWrapper);
        }else{
            return  null;
        }
    }

    public List findAll() {
        QueryWrapper queryWrapper = Wrappers.query();
        return userMapper.selectList(queryWrapper);
    }

    public IPage findPage(Integer pageNum, Integer pageSize, String name) {
        LambdaQueryWrapper queryWrapper = Wrappers.lambdaQuery();
        queryWrapper.like(User::getName, "%" + name + "%");
        return userMapper.selectPage(new Page<>(pageNum, pageSize), queryWrapper);
    }
}

参考资源下载。

方式二（使用JPA）

参考源码下载。

前端实现 

    
    
    



    
员工信息表
    
        
            新增
        
        
            查询
        
        
            
        
    
    
        
        
        
        
            
        
        
        
        
        
        
        
        
        
        
            
        
    
    
        
        
    
    
        
            
                
            
            
            
            
                
            
            
                男
                女
            
            
                
            
            
                
            
        
        
            取 消
            确 定
        
    

三、源码下载

Asukabai/usermanage: Contains CRUD and other basic operations for users (github.com)