Element UI 表单数据校验
定义 rules 对象，在 rules 对象中设置表单各个选项的校验规则
rules: {
name: [
{ required: true, message: 'error', trigger: 'blur' },
{ min: 3, max: 5, message: '⻓度在 3 到 5 个字符', trigger: 'blur' }
]
}
required: true, 是否为必填项
message: 'error', 提示信息
trigger: 'blur'，触发事件
1.添加数据
后台
@GetMapping("save")
public String save(@RequestBody Book book){
Book save = bookRepository.save(book);
if (save!=null){
return "success";
}else {
return "error";
}
}
前端
提交表单数据方式
this.$ajax.post("http://localhost:8181/book/save",this.ruleForm) 直接提交表单
<template>
<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:''
},
rules: {
name: [
{ required: true, message: '请输入图书名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
author: [
{ required: true, message: '请输入作者', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
const _this = this;
this.$refs[formName].validate((valid) => {
if (valid) {
this.$ajax.post("http://localhost:8181/book/save",this.ruleForm).then(function(resp){
if (resp.data == 'success'){
_this.$message({
message: '添加成功',
type: 'success'
});
_this.$router.push('/pageOne')//跳转页面
}else if (resp.data == "error"){
_this.$message.error('添加失败');
}
})
// alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
2.修改删除数据
PageOne.vue
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="id"
label="编号"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="书名"
width="120">
</el-table-column>
<el-table-column
prop="author"
label="作者"
width="120">
</el-table-column>
<el-table-column
prop="publish"
label="出版社"
width="120">
</el-table-column>
<el-table-column
prop="pages"
label="页数"
width="300">
</el-table-column>
<el-table-column
prop="price"
label="定价"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="180">
<template slot-scope="scope">
<!-- scope.row传送的是对象信息-->
<el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
<el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
@current-change="page">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
edit(row) {
// row.id
//跳转带参数 path :路径 query 参数
this.$router.push({
path:'/pageThree',
query:{
id:row.id
}
})
// this.$router.push("/pageThree")
},
del(row){
const _this = this
this.$ajax.delete("http://localhost:8181/book/del/"+row.id).then(function () {
_this.$message({
message: '删除成功',
type: 'success'
});
window.location.reload()
})
},
page(currentPage){
//处理this作用域问题
const _this = this
this.$ajax.get("http://localhost:8181/book/findAll/"+currentPage+"/6").then(function (resp) {
_this.tableData = resp.data.content
_this.pageSize = resp.data.size
_this.total = resp.data.totalElements
});
}
},
created(){
//处理this作用域问题
const _this = this
this.$ajax.get("http://localhost:8181/book/findAll/1/6").then(function (resp) {
_this.tableData = resp.data.content
_this.pageSize = resp.data.size
_this.total = resp.data.totalElements
});
},
data() {
return {
total: null,
tableData: null
}
}
}
</script>
<style scoped>
</style>
PageThree.vue
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="图书编号" prop="id">
<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:''
},
rules: {
name: [
{ required: true, message: '请输入图书名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
author: [
{ required: true, message: '请输入作者', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
const _this = this;
this.$refs[formName].validate((valid) => {
if (valid) {
this.$ajax.put("http://localhost:8181/book/update",this.ruleForm).then(function(resp){
if (resp.data == 'success'){
_this.$message({
message: '修改成功',
type: 'success'
});
_this.$router.push('/pageOne')//跳转页面
}else if (resp.data == "error"){
_this.$message.error('修改失败');
}
})
// alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
created() {
//跳转选择$router 参数选择$route
// this.$route.query.id
const _this = this
this.$ajax.get('http://localhost:8181/book/findById/'+this.$route.query.id).then(function (resp) {
_this.ruleForm = resp.data
// _this.name = resp.data.name
// _this.author = resp.data.author
})
}
}
</script>
@GetMapping("findById/{id}")
public Book findById(@PathVariable("id") Integer id){
return bookRepository.findById(id).get();
}
@PutMapping("/update")
public String update(@RequestBody Book book){
Book save = bookRepository.save(book);
if (save!=null){
return "success";
}else {
return "error";
}
}
@DeleteMapping("del/{id}")
public void del(@PathVariable("id") Integer id){
bookRepository.deleteById(id);
}
导航调整代码如下
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import PageOne from "../views/PageOne"
import PageTwo from "../views/PageTwo"
// import App from "../App";
import index from "../views/index"
import PageThree from "../views/PageThree";
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: '图书管理',
component: index,
show:true,
redirect:"/pageOne",
children:[
{
path:'/pageOne',
name:'查询图书',
component:PageOne
},
{
path:'/pageTwo',
name:'添加图书',
component:PageTwo
}
]
}
,{
path: '/pageThree',
component: PageThree,
show:false
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
App.vue
<template>
<div id="app">
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
</el-container>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<!-- <el-menu :default-openeds="['1', '3']" :default-active="'1-2'">-->
<!-- <el-submenu index="1">-->
<!-- <template slot="title"><i class="el-icon-message"></i>导航一</template>-->
<!-- <el-menu-item index="1-1">选项1</el-menu-item>-->
<!-- <el-menu-item index="1-2">选项2</el-menu-item>-->
<!-- <el-menu-item index="1-3">选项3</el-menu-item>-->
<!-- <el-submenu index="1-4">-->
<!-- <template slot="title"><i class="el-icon-message"></i>选项4</template>-->
<!-- <el-menu-item index="1-4-1">选项4-1</el-menu-item>-->
<!-- <el-menu-item index="1-4-2">选项4-2</el-menu-item>-->
<!-- </el-submenu>-->
<!-- </el-submenu>-->
<!-- </el-menu>-->
<el-menu router>
<el-submenu v-for="(item,index) in $router.options.routes" :key="item.label" :index="index+''" v-if="item.show">
<template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
<el-menu-item v-for="(item2) in item.children" :key="item2.label" :index="item2.path"
:class="$route.path==item2.path?'is-active':''">{{item2.name}}</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
<!-- <router-view></router-view>-->
</div>
</template>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
网友评论