SpringBoot+Vue实现用户管理（六）

vue前端添加用户表单

<template>

  <!--
      :model 用于绑定表单数据对象
      :rules 用于表单验证规则
      ref 引用获取表单元素
      prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
      v-model 表单数据项
  -->
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="用户名称" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="用户性别" prop="usersex">
      <el-input v-model="ruleForm.usersex"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data() {

      // 表单校验
      return {
        ruleForm: {
          username: '',
          usersex: '',
        },
        // required 控制必填/非必填
        // message 提示信息
        // trigger 触发事件
        rules: {
          username: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ],
          usersex: [
            { required: true, message: '请输入用户性别', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {

      //提交表单
      submitForm(formName) {
        //_this.ruleForm获取表单数据
        const _this = this
        this.$refs[formName].validate((valid) => {
          //参数合法，提交表单
          if (valid) {
            console.log(_this.ruleForm);
            alert('校验通过!');
          }
          //参数不合法，控制台打印信息
          else {
            console.log('校验失败!');
            return false;
          }
        });
      },

      //重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
</style>

后端实现添加用户服务

用户实体类

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

/**
 * @author xfgg
 */
@Entity
@Data
public class User {
    @Id /**主键*/
    @GeneratedValue(strategy = GenerationType.IDENTITY) /**自增主键**/
    private Integer id;
    private String username;
    private String usersex;
}

持久层用了JPA框架

package com.xf.demo.repository;

import com.xf.demo.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;


/**
 * @author xfgg
 */
public interface UserRepository extends JpaRepository<User,Integer> {
}

JPA自带增删改查

编写测试类

package com.xf.demo;

import com.xf.demo.entity.User;
import com.xf.demo.repository.UserRepository;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;


@SpringBootTest
class DemoApplicationTests {
    @Autowired
    private UserRepository userRepository;
    @Test
    void findAll() {
        System.out.println(userRepository.findAll());
    }
    /*添加一个用户*/
    void adduser(){
        User user = new User();
        user.setUsername("**");
        user.setUsersex("*");
        userRepository.save(user);
    }
}

运行可以增加一个

controller层修改

package com.xf.demo.controller;


import com.xf.demo.entity.User;
import com.xf.demo.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserRepository userRepository;
    @GetMapping("findAll")
    List<User> findAll(){
        return userRepository.findAll();
    }
    @GetMapping("findAll/{page}/{size}")
     public Page<User> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size) {
        //获取分页参数
        PageRequest pr = PageRequest.of(page,size);
        //返回分页数据
        return userRepository.findAll(pr);
    }
    @PostMapping("/save")
    public String addUser(@RequestBody User user){
        User result = userRepository.save(user);
        if (result!=null){
            return "success";
        }else{
            return "error";
        }
    }
}

前后端联调

修改校验通过

          //参数合法，提交表单
          if (valid) {
            console.log(_this.ruleForm);
            alert('校验通过!');
          }

         if (valid) {
            axios.post('api/user/save',this.ruleForm).then(function(resp){
              if(resp.data == 'success'){
                _this.$message("添加成功");
              }
            })
          }