第一篇blog

Vue前后端分离项目实现交互的一个简单例子

作者：web小张 个人wechat：zhangzsun_ 一个奋进的前端工程师！！！

数据请求

mounted() {
this.getPageData(1);
},
methods: {
//表格数据
getPageData(id) {
var that = this;
this.$axios
.post("/Investmentapply/verifylists", { page: id, …that.selectData })
.then(res => {
if (res.data.code == 1) {
that.pagetotal = res.data.data.total;
console.log(“接受到了数据！！”);
console.log(res.data);
that.tableData6 = res.data.data.data;
that.clone6 = that.tableData6;
}
})
.catch(err => {
console.log(err);
});
},

接收数据

mounted() {
var that = this;
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …apply_id: this.route.query.apply_id
})
.then(res => {
if (res.data.code == 1) {
console.log(“123”);
console.log(res.data);
that.listBox = res.data.data;
if(res.data.data.invest_status==1){
that.pass=“审核通过”
}else{
that.pass=“审核不通过”
}
}
})
.catch(err => {
console.log(err);
});
},

数据渲染

  <el-table
    ref="multipleTable"
    :data="tableData6"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    size="mini"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="invest_name" label="公司全称" width="55"></el-table-column>
    <el-table-column prop="field_name" label="所属行业"></el-table-column>
    <el-table-column prop="stage_name" label="投资阶段"></el-table-column>
    <el-table-column prop="invest_realname" label="联系人姓名"></el-table-column>
    <el-table-column prop="invest_mobile" label="联系人手机号" show-overflow-tooltip></el-table-column>
    <el-table-column prop="invest_mobile" label="联系人微信号" show-overflow-tooltip></el-table-column>
    <el-table-column prop="invest_status" label="认证状态" show-overflow-tooltip>
      <template slot-scope="scope">
        <p v-if="scope.row.invest_status=1">审核成功</p>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        <el-button size="mini" type="text" @click="handleDetails(scope.$index, scope.row)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="page" v-if="pagetotal">
    <el-pagination
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :total="pagetotal"
    ></el-pagination>
  </div>