vue-cli4得到el-table表格对应行数据，并用axios向后台发送ajax请求（小白记一笔~）

环境：springboot，nodejs，vue，axios，element-ui，vue-cli4

1首先解决axios跨域问题

1 安装axios: npm install axios -S
2 因为我的vue-cli是4版本的，所以先在项目根目录新建一个vue.config.js文件(与src对齐)，并写下以下代码，因为vue-cli3以上的就将config文件夹内置了，我们想修改，就自己建就可以~

module.exports = {
devServer:{
proxy:{                      //vue-cli3以上的是proxy
"/api":{                  //自己随便起的名字
target: '服务器的ip',    //你要访问的服务器的ip，如果不知道,打开cmd，输入ipconfig查看ipv4即可,
changeOrigin : true,
ws: true,
pathRewrite: {
'^/api': '/'
}
}
}
}
}

3 在main.ts文件中引入以下代码

import axios from 'axios';      //引入axios
Vue.prototype.$http = axios;   //设置这行代码后，就可以在页面直接用  this.$http.get/post 发起请求了
axios.defaults.baseURL = '/api/' ; // api 即上面 vue.config.js 中配置的地址
//这个是在发送post请求时设置的头，因为axios和ajax发送的头不一样，这样设置就可以了,其次还要引入Qs，局部引入
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2 通过el-button得到对应行数据

1 首先将表格双向绑定数据，其次给表格对象起个名字，这样才可以通过表格对象得到表格中显示出来的数据，并传给后台 (home.vue)

<!-- 给表格的data属性绑上vue实例中声明的tableData数组   -->
<el-table :data="tableData" border  align="center">
<!-- 因为在想后台传数据时会用到当前行的id,所以将id隐藏了v-show="false"  -->
<el-table-column  label="id"  width="10" v-show="false">
<!--可以理解成给表格中数据起的别名~-->
<template scope="scope"></template>
</el-table-column>
<el-table-column label="名字"  width="120">
<template scope="scope">
<!--scope.row可以得到当前行的对象，name为对象的姓名属性~-->
<span>{{scope.row.name}}</span >
</template>
</el-table-column>
<el-table-column  label="操作" >
<template scope="scope">
<!--删除提示框，应用了ellment-ui上的弹出框-->
<el-tooltip class="item" effect="light" content="删除" placement="top">
<!--  scope.$index表示当前行在表格中的索引，用于下面操作成功时前端页面删除一行
scope.row为当前行的对象 handleDelete这个方法只是让弹出框弹出~并把数据给到实例中定义的数据 -->
<el-button size="mini" :plain="true" @click="handleDelete(scope.$index, scope.row)" >
<i class="el-icon-delete"></i></el-button>
</el-tooltip>
<!--修改提示框，应用了element-ui上的弹出框-->
<el-tooltip class="item" effect="light" content="编辑" placement="top">
<!-- editRow(scope.row)只是调出弹出框-->
<el-button size="mini" @click="editRow(scope.row)"><i class="el-icon-edit"/></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!--  删除提示框 应用了element-ui上的弹出框 -->
<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%"  center>
<span>此条数据会永久删除？是否继续</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<!--这个deleteRow方法才是真正删除数据的方法，与后台交互的方法，注意：遇到有弹出框操作的通常都有2个方法，一个调弹窗，一个真正删除 -->
<el-button type="primary" @click="deleteRow">确 定</el-button>
</span>
</el-dialog>
<!--修改事项弹出框 将修改的表单数据与formUpdate（json串）双向绑定-->
<el-dialog title="修改事项~" :visible.sync="dialogFormVisible">
<el-form :model="formUpdate">
<el-form-item label="事项名称" :label-width="formLabelWidth">
<el-input v-model="formUpdate.name" autocomplete="off"  ></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
<!-- 真正进行修改的方法 -->
<el-button type="primary" @click="editList">确 定</el-button>
</div>
</el-dialog>

3 开始定义参数(home.vue)

import Qs from 'qs';//用于将Post请求的参数改成formData形式，不然后台接不到参数
export default {
data() {
return {
tableData: [{
id:'',
name: ''
}],
//接收指定删除数据的id
listId:[],
//修改实装id的
updateid:'id',
//接收指定删除数据的的索引
listIndex:'',
//修改完成时显示的原始对象，
formUpdate:{
id:'',
name: ''
},
//修改完成后的加入数据库的数据
listBean: {
name: ''
}
};
},

4 开始写方法(home.vue)

methods: {
//查出所有事项->bingo
Getalllist:function(){
this.$http.get('/tolist/getAllLists')      //axios象后台发送get请求~~
.then(response =>{
if(response.data.code===0){
this.tableData=[];  //如果后台响应成功，将后台返回的数据传给前台，
我后台是定义了一个json对象，中的放置参数的属性微sata
this.tableData=response.data.sata;
}
}).catch(error =>{
console.log(error); //如果出现异常将异常写入日志~~
});
},
//事项删除时弹出删除框方法->bingo
handleDelete:function(index,row){
//将表格传过来的对象付给formSelect
this.formSelect=row;
//把单行删除的对象的id赋给listId，当出现弹出框时，会有2个点击函数，
//这是一定要把从表格传过来数据付给vue实例中定义的对象，这样才会
// 在哪都会调用到~~，另外push是专属于数组的赋值方法
this.listId.push(this.formSelect.id);
//将删除的对象的索引付给listIndex
this.listIndex=index;
//显示删除弹出框
this.centerDialogVisible = true;
},
//事项删除时真正删除方法->bingo
deleteRow:function(){
this.centerDialogVisible=false;
this.$http.get('/tolist/deleteListCon/'+this.listId) //向后台发送get请求带参数，后台接相应参数
//的不加注解,原因见(https://blog.csdn.net/duduyingya/article/details/104556665)
.then(response =>{
if(response.data.code===0){
//在表格中(装表格中数据的数组中)删除选中的行
this.tableData.splice(this.listIndex,1);
alert(response.data.msg);
}
})
.catch(error =>{
console.log(error);
});
},
//事项修改时显示的原来数据的方法 ->bingo
editRow:function (row) {
//有所有字段
this.formUpdate=row;
alert("this.formUpdate.name~"+this.formUpdate.name);
this.updateid=this.formUpdate.id,
this.dialogFormVisible=true;
},
//事项修改后需要加入数据库的参数 ->bingo
editList:function () {
alert("this.formUpdate.name~"+this.formUpdate.name);
//发送修改请求,把要修改的id传给传到后台的对象
this.listBean.id= this.updateid,
this.listBean.name=this.formUpdate.name,
this.$http.post(
'/tolist/updateListContentCon',
Qs.stringify(this.listBean)  //axios发送post请求带参数,  Qs.stringify将参数转为formdata形式
//类似表单提交
).then(response =>{
if(response.data.code===0){
alert("修改成功");
}
}).catch(error =>{
alert("修改失败");
console.log(error);
});
this.dialogFormVisible = false;
},
}

5 后台

@RestController
public class ToListController {
/**
* 访问得到所有事项的方法
*/
@GetMapping(value = "/tolist/getAllLists")
public JsonList getAllCon(
@RequestParam(defaultValue = "1",value = "pageNum")Integer pageNum,
@RequestParam(defaultValue = "6",value = "pageSize")Integer pageSize){
return listServiceImp.getAllListService(pageNum,pageSize);
}
/**
* 将事项删除
*/
@GetMapping(value = "/tolist/deleteListCon/{id}")
public JsonList deleteListCon(@PathVariable Integer id){
return listServiceImp.deleteListService(id);
}

/**
* 将选中的事项修改
*/
@PostMapping(value = "/tolist/updateListContentCon")
public JsonList updateListContentCon(ListBean listBean){ //这不加注解~~
return listServiceImp.updateListContentService(listBean);
}
}

• 点赞
• 收藏
• 分享
• 文章举报