Spring Boot+Vue 添加修改删除数据（四）

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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 156,907评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,546评论 1赞 289
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 106,705评论 0赞 238
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,624评论 0赞 203
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 51,940评论 3赞 285
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,371评论 1赞 210
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,672评论 2赞 310
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,396评论 0赞 195
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,069评论 1赞 238
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,350评论 2赞 242
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,876评论 1赞 256
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,243评论 2赞 251
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,847评论 3赞 231
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,004评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,755评论 0赞 192
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,378评论 2赞 269
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,266评论 2赞 259