Spring Boot+Vue前后端分离开发09-----Form表单

最新推荐文章于 2024-04-16 10:01:04 发布

maxchen.cn

最新推荐文章于 2024-04-16 10:01:04 发布

阅读量2.2k

点赞数 4

分类专栏： Java Vue 文章标签： vue java

本文链接：https://blog.csdn.net/u012420395/article/details/104723372

版权

Java 同时被 2 个专栏收录

14 篇文章 3 订阅

订阅专栏

Vue

7 篇文章 0 订阅

订阅专栏

标签： Java Vue Sring JPA ELementUI
作者： Maxchen
版本： V1.0.0
日期： 2020/3/7

1. Vue开发——Form表单前端

此次开发的Form表单功能为新增图书，具体要求如下：

添加一个图书，图书包含名称和作者两个字段
对添加的图书的字段进行合法性检验，既不能添加空信息，信息长度也不能过长
提供两个按钮，一个按钮可以提交数据，另一个按钮重置输入

第一步：然后新增一个Component名为AddBook.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="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="图书作者" prop="author">
            <el-input v-model="ruleForm.author"></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: {
                    name: '',
                    author: '',
                },
                // required 控制必填/非必填
                // message 提示信息
                // trigger 触发事件
                rules: {
                    name: [
                        { required: true, message: '请输入图书名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    author: [
                        { 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>

model 用于绑定表单数据对象
rules 用于表单验证规则
ref 引用获取表单元素
prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
v-model 表单数据项
required 控制必填/非必填
message 提示信息
trigger 触发事件

第二步：输入空参，验证下程序是否能进行合法性检验：

image.png-20.6kB

第三步：输入合法参数校验成功，进入下一阶段开发：

image.png-43.4kB

2. SpringBoot开发——Form表单接口开发

这次开发的Form表单非常简单，在数据库表book中新增一条记录，记录包含id主键、name图书名称、author作者

image.png-88.5kB

第一步：实体类Book，实体类绑定数据库表book同时绑定id、name、author字段

package com.maxchen.springboottest.entity;

import lombok.Data;
import net.bytebuddy.dynamic.loading.InjectionClassLoader;

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

@Entity
@Data //getter and setter方法
public class Book {

    @Id //主键
    @GeneratedValue(strategy = GenerationType.IDENTITY) //自增主键
    private Integer id;
    private String name;
    private String author;

}

第二步：持久层BookRepository，持久层采用了jpa框架

package com.maxchen.springboottest.repository;

import com.maxchen.springboottest.entity.Book;
import org.springframework.data.jpa.repository.JpaRepository;

public interface BookRepository extends JpaRepository<Book,Integer> {

}

第三步：这里我们将BookRepository的继承关系逐层展开，不难发现我们继承的方法里面已经包含了常见的增删改查方法，因此我们这里写个代码测试一下：

image.png-23.2kB

package com.maxchen.springboottest;

import com.maxchen.springboottest.entity.Book;
import com.maxchen.springboottest.repository.BookRepository;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

@SpringBootTest
class SpringboottestApplicationTests {

    @Autowired
    private BookRepository bookRepository;

    @Test
    void findAll(){
        System.out.println(bookRepository.findAll());
    }

    /**
     * @Title: addBook
     * @Description: 添加一个书籍
     * @Author Maxchen
     */
    @Test
    void addBook(){
        Book book = new Book();
        book.setName("三体");
        book.setAuthor("刘慈欣");
        bookRepository.save(book);
    }

}

测试发现图书数据新增成功

image.png-54.8kB

image.png-98.2kB

第四步：接下来修改Controller层BookController

package com.maxchen.springboottest.controller;

import com.maxchen.springboottest.entity.Book;
import com.maxchen.springboottest.repository.BookRepository;
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("/book")
public class BookController {

    @Autowired
    private BookRepository bookRepository;

    //增加图书
    @PostMapping("/save")
    public String addBook(@RequestBody Book book){
        Book result = bookRepository.save(book);
        if(result != null){
            return "success";
        }else{
            return "error";
        }
    }

}

第五步：接口写好以后，我们最后进行一次测试，如果显示了success则说明新增到数据库成功

image.png-56.8kB

image.png-135.2kB

3. SpringBoot+Vue——前后端联调

通过前面的教程我们完成了Form表单界面和Form表单接口，还有一个步骤就是联调。

第一步：修改AddBook.vue的代码

image.png-68.8kB

// POST方法调用Form表单接口，接口返回"success"则表示添加成功
axios.post('http://localhost:8181/book/save',this.ruleForm).then(function(resp){
	if(resp.data == 'success'){
		_this.$message("添加成功");
	}
})

第二步：在添加图书页面新增一条数据，最后重新查询图书即可看到新增的数据

image.png-23.8kB

image.png-53.3kB

第三步：优化应用体验

通过上述教程，我们开发了一个新增数据的功能，但实际使用中并不友好，用户在点了立即创建按钮之后需要跳转到响应的表格页，因此我们需要做一些小的改造

image.png-103.4kB

if(resp.data == 'success'){
	_this.$alert('《'+_this.ruleForm.name+'》添加成功！', '消息', {
		confirmButtonText: '确定',
		callback: action => {
			_this.$router.push('/BookManage')
		}
	})
}

第四步：前台进行测试，如果弹出添加成功窗口并且能查询到新增数据，说明开发成功！

image.png-49.8kB

image.png-36.6kB

最后贴上整体的代码

<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="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="图书作者" prop="author">
            <el-input v-model="ruleForm.author"></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: {
                    name: '',
                    author: '',
                },
                // required 控制必填/非必填
                // message 提示信息
                // trigger 触发事件
                rules: {
                    name: [
                        { required: true, message: '请输入图书名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    author: [
                        { 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('校验通过!');
                        // POST方法调用Form表单接口，接口返回"success"则表示添加成功
                        axios.post('http://localhost:8181/book/save',this.ruleForm).then(function(resp){
                            if(resp.data == 'success'){
                                _this.$alert('《'+_this.ruleForm.name+'》添加成功！', '消息', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        _this.$router.push('/BookManage')
                                    }
                                })
                            }
                        })
                    }
                    //参数不合法，控制台打印信息
                    else {
                        console.log('校验失败!');
                        return false;
                    }
                });
            },

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

<style scoped>

</style>

4. SpringBoot+Vue——通过表单修改数据

第一步：新增一个修改图书的路由

{
    path: '/bookUpdate',
    name: '修改图书',
    component: () => import('../views/BookUpdate.vue')
}

第二步：图书管理表上新增一个修改按钮

<el-table-column label="操作" width="100">
	<template slot-scope="scope">
		<el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
		<el-button type="text" size="small">删除</el-button>
	</template>
</el-table-column>

image.png-63.3kB

第三步：给修改按钮绑定一个功能，点击修改按钮之后跳转到修改页面

edit(row) {
	// console.log(row);
	this.$router.push({
		path: '/bookUpdate',
		query: {
			id: row.id
		}
	})
}

image.png-33.3kB

image.png-23.9kB

第四步：修改页面需要自动填充原来待修改的数据，因此还需要增加一个按照id查询数据的接口

@GetMapping("findBookById/{id}")
Book findBookById(@PathVariable("id") Integer id){
	return bookRepository.findById(id).get();
}

第五步：接口写好之后测试一下，直到没有报错或者正常显示数据

image.png-36.9kB

第六步：修改BookUpdate.vue的component，完善修改输入框和联调接口

image.png-93.2kB

image.png-62.8kB

<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="图书编号">
            <el-input v-model="ruleForm.id" readOnly></el-input>
        </el-form-item>

        <el-form-item label="图书名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="图书作者" prop="author">
            <el-input v-model="ruleForm.author"></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: {
                    id: '',
                    name: '',
                    author: '',
                },
                // required 控制必填/非必填
                // message 提示信息
                // trigger 触发事件
                rules: {
                    name: [
                        { required: true, message: '请输入图书名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    author: [
                        { 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('校验通过!');
                        // POST方法调用Form表单接口，接口返回"success"则表示添加成功
                        axios.post('http://localhost:8181/book/save',this.ruleForm).then(function(resp){
                            if(resp.data == 'success'){
                                _this.$alert('《'+_this.ruleForm.name+'》修改成功！', '消息', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        _this.$router.push('/BookManage')
                                    }
                                })
                            }
                        })
                    }
                    //参数不合法，控制台打印信息
                    else {
                        console.log('校验失败!');
                        return false;
                    }
                });
            },

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

        //修改的输入框回填旧数据
        created() {
            const _this = this
            axios.get('http://localhost:8181/book/findBookById/'+this.$route.query.id).then(function(resp){
                _this.ruleForm = resp.data
            })
        }

    }
</script>

<style scoped>

</style>

第七步：测试一下修改功能

image.png-47.5kB

image.png-19.6kB

image.png-30.3kB

image.png-43kB

maxchen.cn

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot+Vue前后端分离开发09-----Form表单

标签： Java Vue Sring JPA ELementUI作者： Maxchen版本： V1.0.0日期： 2020/3/7目录1. Vue开发——Form表单前端2. SpringBoot开发——Form表单接口开发3. Form表单前后端联调4. 通过表单修改数据1. Vue开发——Form表单前端此次开发的Form表单功能为新增图书，具体要求如下：添加...
复制链接

扫一扫