Vue入门7、axios带参数请求+渲染后端返回接口数据

Vue入门7、axios带参数请求+渲染后端返回接口数据

新建/views/Seven.vue

<template>
<div>
    <span>hello world</span>
    <el-input v-model="pageNum" placeholder="请输入当前的页码"></el-input>
    <el-input v-model="pageSize" placeholder="请输入每页有多少条记录"></el-input>
    <el-row>
        <el-button type="primary" round v-on:click="getByI">主要按钮</el-button>
    </el-row>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="id"
      width="180">
    </el-table-column>
    <el-table-column
      prop="username"
      label="username"
      width="180">
    </el-table-column>
    <el-table-column
      prop="avatar"
      label="avatar">
    </el-table-column>
        <el-table-column
      prop="email"
      label="email">
    </el-table-column>
        <el-table-column
      prop="password"
      label="password">
    </el-table-column>
        <el-table-column
      prop="status"
      label="status">
    </el-table-column>
        <el-table-column
      prop="created"
      label="created">
    </el-table-column>
        <el-table-column
      prop="last_login"
      label="last_login">
    </el-table-column>
  </el-table>
</div>

</template>
<script>
export default {
    name: 'Seven',
    data() {
    return {
      pageNum: '',
      pageSize:'',
      tableData:[],      
    }
  },
  created(){
    window.seven = this

  },
  methods:{
      getByI:function(){
    this.$axios({
        url:'api/crud/page',
        method: 'post',
        data:{
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }
    }).then(res=>{
      console.log(res)

      this.tableData = res.data.content
      
    })
      }
  }
}
</script>
<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

router/index.js加入Seven.vue路由

import Vue from 'vue'
import VueRouter from 'vue-router'
//  首先将页面导入进来
import Main from '../views/Main'
import Four from '../views/Four'
import user from '../views/User'
import List from '../views/user/list'
import Profile from '../views/user/profile'
import Seven from '../views/Seven'

Vue.use(VueRouter)

const routes = [
  {
    //  标识一下路径
    path: '/main',
    //  组件就是我们刚刚引入的Main
    component: Main,
    //  name，就是起个名字，可有可无
    name: Main
  },
  {
    path:'/four',
    component: Four,
    name: Four
  },
  {
    path:'/seven',
    component: Seven,
    name:Seven
  },
  {
    path:'/goHome',
    redirect:'/four'
  },
  {
    path:'/user',
    component: user,
    name: user,
    children:[
      {
        path:'/user/list',
        component: List,
        name: List
      },
      {
        path:'/user/profile',
        component: Profile,
        name: Profile
      }
    ]
  }
  

]

const router = new VueRouter({
  //将路由模式修改为history模式
  mode: 'history',
  routes
})

export default router

结果：

重点1、后端接口如何设计

1、我们有什么入参，就设计一个类
比如说我这个有一个当前的页码，有一个每页有多少条记录

package com.crud.utils;

import lombok.Data;

@Data
public class PageRequest {
    /**
     * 当前页码
     * **/
    private int pageNum;
    /**
     * 每页数量
     * **/
    private int pageSize;
}

controller,注意，要用@RequestBody才可以

    @RequestMapping(value = "/page",method = RequestMethod.POST)
    public Object findPage(@RequestBody PageRequest pageRequest){
        return userService.getAllUserPage(pageRequest);
    }

如果你的后段没有用分页查询，也可以这样

package com.crud.entity;

import lombok.Data;

@Data
public class RequestParamOne {
    private Integer id;
}

controller

    @RequestMapping(value = "userone",method = RequestMethod.POST)
    public User getUserByIdPost(@RequestBody RequestParamOne requestParamOne){
        return userService.getUserById(requestParamOne.getId());
    }