vue.js+element ui Table+spring boot增删改查

桃扇骨 2021-11-09 11:02 186阅读 0赞

小白初学，不懂的还是太多了，找了好多资料才做出来的先记录一下

1.先用Spring boot创建一个包含了增删改查的项目

2.创建vue.js项目

3.安装Element UI

（1）进入项目文件夹下，输入如下指令：

cnpm i element-ui -S

（2）修改main.js

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css' // 这一句要写，否则没有样式
    
    Vue.config.productionTip = false
    Vue.use(ElementUI)
    /* eslint-disable no-new */
    new Vue({
       
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

（3）回到cmd，执行

cnpm install

（4）将HelloWorld.vue的代码替换为

<template>
      <div class="hello">
        <h1>{
        { msg }}</h1>
        <el-button type="primary">主要按钮</el-button>
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange"></el-input-number>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'HelloWorld.vue',
          num: 5
        }
      },
      methods: {
        handleChange(value) {
          console.log(value)
        }
      }
    }
    </script>

（5）右键package.json，选择show npm scripts，双击dev，看看运行是否正常，正常表示element ui 安装成功。

参考：

[https://blog.csdn.net/vbirdbest/article/details/84871336][https_blog.csdn.net_vbirdbest_article_details_84871336]

4.去掉app.vue中的图片链接。

5.安装axios

（1）回到cmd，执行如下指令

`cnpm install axios -S`（2）修改main.js

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css' // 这一句要写，否则没有样式
    import axios from '../node_modules/axios'
    
    Vue.config.productionTip = false
    Vue.use(ElementUI)
    /* eslint-disable no-new */
    Vue.prototype.$axios = axios
    new Vue({
      el: '#app',
      router,
      axios,
      components: { App },
      template: '<App/>'
    })

（3）回到cmd，执行

cnpm install

6.创建PersonTable组件，添加如下代码：

<template>
      <div>
        <p style="text-align: left;">
        <el-button type="primary" @click="dialogFormAdd = true">添加</el-button>
        </p>
    
        <el-table :data="tableData" stripe border style="width:100%" highlight-current-row>
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="id" label="ID" align="center" min-width="120">
            <template slot-scope="scope">
              <span>{
        { scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" align="center" min-width="100">
            <template slot-scope="scope">
              <span>{
        { scope.row.age}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center" min-width="120">
            <template slot-scope="scope">
              <span>{
        { scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="100">
            <template slot-scope="scope">
              <el-button type="info" @click="toEdit(scope)">修改</el-button>
              <el-button type="info" @click="deleteUser(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    
        <el-dialog title="修改人员" :visible.sync="dialogFormEdit">
          <el-form :model="person">
            <el-form-item label="编号" >
              <el-input v-model="person.id" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" >
              <el-input v-model="person.age" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" >
              <el-input v-model="person.name" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormEdit = false">取 消</el-button>
            <el-button type="primary" @click="edit(person)">确 定</el-button>
          </div>
        </el-dialog>
    
        <el-dialog title="添加人员" :visible.sync="dialogFormAdd">
          <el-form :model="person">
            <el-form-item label="编号" >
              <el-input v-model="person.id" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" >
              <el-input v-model="person.age" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" >
              <el-input v-model="person.name" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormAdd = false">取 消</el-button>
            <el-button type="primary" @click="add(person)">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
      export default {
        
        name: 'PersonTable',
        data () {
        
          return {
        
            tableData: [],
            dialogFormEdit: false,
            dialogFormAdd:false,
            person: {
        
              id: '',
              age: '',
              name: ''
            }
          }
        },
        methods: {
        
          init () {
        
            var self = this
            this.$axios.get('url')
              .then(function (res) {
        
                // console.log(res.data)
                self.tableData = res.data
              })
              .catch(function (err) {
        
                console.log(err)
              })
          },
          add (person) {
        
            let params = new URLSearchParams()
            params.append('name', person.name)
            params.append('age', person.age)
            this.$axios.post('url', params).then(res => {
        
              // if (res.data.success === true) {
        
              this.$message.success('添加成功')
              this.dialogFormAdd = false
              this.init()
              // this.checkTable()
              // } else {
        
              //   this.$message.warning(res.data.msg)
              // }
            })
              .catch(function (error) {
        
                console.log(error)
              })
          },
          edit (person) {
        
            let params = new URLSearchParams()
            params.append('id', person.id)
            params.append('name', person.name)
            params.append('age', person.age)
            this.$axios.put('url' + person.id, params).then(res => {
        
              // if (res.data.success === true) {
        
              this.$message.success('修改成功')
              this.dialogFormEdit = false
              this.init()
              // this.checkTable()
              // } else {
        
              //   this.$message.warning(res.data.msg)
              // }
            })
              .catch(function (error) {
        
                console.log(error)
              })
          },
          toEdit (scope) {
        
            this.person.id = scope.row.id
            this.person.age = scope.row.age
            this.person.name = scope.row.name
            this.dialogFormEdit = true
          },
          deleteUser (scope) {
        
            if (!scope.row.id) {
        
              this.tableData.splice(scope.$index, 1)
            } else {
        
              this.$confirm('确认是否删除', '提示', {
        
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
              })
                .then(() => {
        
                  console.log(scope.row.id)
                  this.$axios.delete('url' + scope.row.id, {id: scope.row.id}).then(res => {
        
                    // if (res.data.success === true) {
        
                    this.$message.success('删除成功')
                    this.init()
                    // this.checkTable()
                    // } else {
        
                    //   this.$message.warning(res.data.msg)
                    // }
                  })
                    .catch(function (error) {
        
                      console.log(error)
                    })
                })
                .catch(() => {
        
                  this.$message({
        
                    type: 'info',
                    message: '已取消删除'
                  })
                })
            }
          }
        },
        mounted: function () {
        
          this.init()
        }
      }
      /* eslint-disable no-new */
    
    </script>
    
    <style scoped>
    
    </style>

7.修改router下的index.js，改为

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import PersonTable from '@/components/PersonTable'
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/PersonTable',
          name: 'PersonTable',
          component: PersonTable
        }
      ]
    })

转载于:https://www.cnblogs.com/MarsMercury/p/11185614.html

[https_blog.csdn.net_vbirdbest_article_details_84871336]: https://blog.csdn.net/vbirdbest/article/details/84871336