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

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

 

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

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
    }
  ]
})