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

濮俊美
2023-12-01

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

 

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

 

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

 类似资料: