Springboot+vue学习——实现增删改查

• 前端

关键技术：

前端：Vue+Element+JQuery

后端：Springboot+Springdatajpa

项目流程：

Part I：后端代码

1.创建项目

选择Spring Initializr，JDK选择1.8版本。

导入三个包：Spring Web——spring框架的核心类；Spring Data JPA——整合数据库操作；MYSQL Driver——数据库驱动

Maven使用默认Maven 3。

2..demo框架

Springboot+vue学习——实现增删改查

SpringBoot 项目一般外层只有两个文件，pom.xml文件 和src文件夹。

        pom.xml文件的内容是Spring的一些依赖配置;

        src文件夹的内容包括项目的大致结构，src文件夹里面包含main文件夹，main文件夹是java和resource文件夹。其中java里保存的spring后台的框架，resource中有static文件夹是存放静态页面的地方，application.yml用于连接数据库。

注意：启动类应放在与其他层相同的层级上。

Spring框架主要包括四层：

controller：控制层，控制业务逻辑

service：业务层，控制业务

dao：持久层，主要用于数据库交互

entity：实体层，数组库在项目中的类

另外，common包含一个通用配置文件夹里面包含Result（一个返回json数据的包装类）和WebMvcConfig（用于配置跨域访问）的配置类。

pom文件如下：


    4.0.0

    com.example
    demo
    1.0-SNAPSHOT

    
        org.springframework.boot
        spring-boot-starter-parent
        2.1.0.RELEASE
    

    
        UTF-8
        UTF-8
        1.8
    

    
        
        
            org.springframework.boot
            spring-boot-starter-web
        

        
        
            org.springframework.boot
            spring-boot-starter-data-jpa
        

        
        
            mysql
            mysql-connector-java
        
        
            junit
            junit
            test
        
        
            org.springframework.boot
            spring-boot-test
            2.7.10
            test
        

        
        
            org.springframework.boot
            spring-boot-starter-tomcat
            provided
        

    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    true
                
            
        
    

    
        
            public
            aliyun nexus
            http://maven.aliyun.com/nexus/content/groups/public/
            
                true

3.创建数据库

Springboot+vue学习——实现增删改查

 SQL语句：

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
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,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('2', '张三', '22', '男', '上海市', '13867675656', '2020-12-26');
INSERT INTO `user` VALUES ('3', '李四', '20', '男', '合肥市', '13978786565', '2020-11-18');
INSERT INTO `user` VALUES ('5', '赵柳', '20', '男', '南京市', '13978786565', '2020-11-18');
INSERT INTO `user` VALUES ('6', '钱望', '22', '男', '深圳市', '13867675656', '2020-11-18');
INSERT INTO `user` VALUES ('7', '李云', '20', '男', '合肥市', '13978786565', '2020-11-18');
INSERT INTO `user` VALUES ('8', '张傅', '22', '男', '上海市', '13867675656', '2020-11-18');
INSERT INTO `user` VALUES ('9', '李青', '20', '男', '合肥市', '13978786565', '2020-11-18');
INSERT INTO `user` VALUES ('10', '王二发', '22', '男', '昆明市', '13867675656', '2020-11-18');
INSERT INTO `user` VALUES ('12', '王得贵', '22', '男', '成都市', '13867674565', '2020-11-18');

新建成功：

Springboot+vue学习——实现增删改查

4.增删改查功能实现

一般按照倒序方式创建项目

（1）首先创建一个与数据库中的表格对应的entity实体类，每一个字段与数据库表字段应对。同时添加getter、setter方法。

@Entity   //标注为实体类
@Table(name = "user")    //映射数据库user表
public class User {
    @Id    //设置主键为id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private Integer age;
    private String sex;
    private String address;
    private String phone;
    @Column(name = "create_time")    //数据库采用驼峰式的结构，添加注释与该实体类createTime字段进行映射
    private String createTime;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getCreateTime() {
        return createTime;
    }

    public void setCreateTime(String createTime) {
        this.createTime = createTime;
    }
}

（2）配置到dao（mapper）接口，完成数据库多的交互。由于该层需要连接数据库，请确保数据库配置连接成功。

application.yml配置如下：

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    username: 数据库（一般为root）
    password: 密码
    url: jdbc:mysql://localhost:3306/数据库名称?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8

//在该接口中，增删改查的方法不用自己定义
@Repository    
public interface UserRepository extends JpaRepository {
//继承JpaRepository，两个泛型参数分别是数据库表和主键类型

}

 （3）Service类实现

在Spring data JPA中集成了很多操作数据库的方法，我们可以直接拿来使用。

先创建一个Service类，给一个Service注解，然后注入UserRepository数据库接口，并实现增删改查功能。

@Service
public class UserService {

    @Resource
    private UserRepository userRepository;  //注入数据库接口

    //新增与修改功能
    //add与update都调用save方法，区别在于add在传递参数时不传id，而update传递id
    public void save(User user) {
        String now = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        user.setCreateTime(now);
        userRepository.save(user);
    }
    //删除操作
    public void delete(Long id) {
        userRepository.deleteById(id);
    }
    //根据id查询操作，查询失败返回null
    public User findById(Long id) {
        return userRepository.findById(id).orElse(null);
    }
    //查找全部
    public List findAll() {
        return userRepository.findAll();
    }
    //分页查询
    public Page findPage(Integer pageNum, Integer pageSize, String name) {
        // 构建分页查询条件，根据create_time倒序排序
        Sort sort = Sort.by(Sort.Direction.DESC, "create_time");
        //分页查询操作
        Pageable pageRequest = PageRequest.of(pageNum - 1, pageSize, sort);
        return userRepository.findByNameLike(name, pageRequest);
    }
}

Springboot+vue学习——实现增删改查

自定义模糊查询：

@Repository
public interface UserRepository extends JpaRepository {
//继承JpaRepository，两个泛型参数分别是数据库表和主键类型
    @Query(value = "select * from user where name like %?1%", nativeQuery = true)
    Page findByNameLike(String name, Pageable pageRequest);
}


//项目为前后端分离，前端返回的数据是json格式，标记注解RestController表示返回的数据都是json格式
@RestController
@RequestMapping("/user")    //url路径
@ComponentScan("com.example.demo4.controller")  //扫描
public class UserController {

    @Resource   //注入UserService，使用UserService中的方法等
    private UserService userService;

    // 新增用户
    @PostMapping
    public Result add(@RequestBody User user) {
        userService.save(user);
        return Result.success();
    }

    // 修改用户
    @PutMapping
    public Result update(@RequestBody User user) {
        userService.save(user);
        return Result.success();
    }

    // 删除用户
    //delete域名映射将域名映射为id，通过PathVariable接收参数id，根据id删除用户
    //Restful用法
    @DeleteMapping("/{id}")
    public void delete(@PathVariable("id") Long id) {
        userService.delete(id);
    }

    // 根据id查询用户
    @GetMapping("/{id}")
    public Result findById(@PathVariable Long id) {
        return Result.success(userService.findById(id));
    }

    // 查询所有用户
    @GetMapping
    public Result<List> findAll() {
        return Result.success(userService.findAll());
    }

    // 分页查询用户
    //RequestParam传递两个参数
    @GetMapping("/page")
    public Result<Page> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
                                       @RequestParam(defaultValue = "10") Integer pageSize,
                                       @RequestParam(required = false) String name) {
        return Result.success(userService.findPage(pageNum, pageSize, name));
    }

}

至此，后端代码完成。

Part II：前端代码

前端架构

Springboot+vue学习——实现增删改查

中间由于从其他地方拷贝过来的代码，以下几个文件被加上了路径导致前端404和没能把element组件渲染，后面修改成以下成功运行，算是一点粗心了。

Springboot+vue学习——实现增删改查

Springboot+vue学习——实现增删改查

前端页面代码在index.html完成，代码如下：



    
    用户信息
    
    



    
用户信息表


    
        
            新增
            
        
    

    
        
        
        
        
        
        
        
        
        
        
        
            
                
                
            
        
    
    
        
        
    

    
        
            
                
            
            
                
            
            
                男
                女
            
            
                
            
            
                
            
        
        
            取 消
            确 定
        
    









    new Vue({
        el: '#app',
        data: {
            page: {},
            name: '',
            pageNum: 1,
            pageSize: 8,
            dialogVisible: false,
            form: {}
        },
        created() {
            this.loadTable(this.pageNum);
        },
        methods: {
            loadTable(num) {
                this.pageNum = num;
                $.get("/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.name).then(res => {
                    this.page = res.data;
                });
            },
            add() {
                this.dialogVisible = true;
                this.form = {};
            },
            edit(row) {
                this.form = row;
                this.dialogVisible = true;
            },
            save() {
                let data = JSON.stringify(this.form);
                if (this.form.id) {
                    // 编辑
                    $.ajax({
                        url: '/user',
                        type: 'put',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        this.dialogVisible = false;
                        this.loadTable(1);
                    })
                } else {
                    // 新增
                    $.ajax({
                        url: '/user',
                        type: 'post',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        this.dialogVisible = false;
                        this.loadTable(1);
                    })
                }
            },
            del(id) {
                $.ajax({
                    url: '/user/' + id,
                    type: 'delete',
                    contentType: 'application/json'
                }).then(res => {
                    this.loadTable(1);
                })
            }
        }
    })

 项目展示：

Springboot+vue学习——实现增删改查

 

 

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/a4db5d8ef0.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐