小案例：使用axios达到post请求

目录

1、安装axios

2、main.js中引入

3、vue中使用

所有代码：

前端：

1、main.js

2、home.vue

后端：

1、结构目录：

2、controller

 3、serviceimpl

4、mapper

5、mapper.xml

7、实体类

数据库：

---

1、安装axios

npm install axios -g

2、main.js中引入

import axios from 'axios'
Vue.prototype.$http = axios

3、vue中使用

params：将数据传到后端的requestparam中

data：将数据传到后端的requestbody中，data后的username为后端实体类的字段

resp：为后端传回来的数据，可更改名字，res、respond都随意

this.total = resp.data.total：将后端返回来的json中的data中的total赋值为this.total

console.log（resp）：打印后端返回的数据里面有什么，右键前端展示页面->检查->控制台可查看

this.$http({
        method: 'post',
        url: 'http://localhost:8080/user/page',//后端接口
        params:{  //后端使用@requestparam接收
          pageNum: this.pageNum,
          pageSize:this.pageSize,
        },
        data: { //后端使用@requestbody接收
          username:this.inputFindName,
          phone:this.inputFindMobile


        }
      }).then(resp =>{        //改为箭头函数
        console.log(resp);
        console.log(resp.data);
        this.total = resp.data.total;
        this.tableData = resp.data.records;
      })

所有代码：

前端：

1、main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/global.css'
import request from './utils/request'
import axios from 'axios'
Vue.prototype.$http = axios


Vue.config.productionTip = false
Vue.use(ElementUI, {size:"mini"});
Vue.prototype.request = request
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2、home.vue

展示页面

<template>
  <div>
    <el-container style="min-height: 100vh;">
      <el-aside :width="isCollapse?'64px':'210px'" style="background-color: rgb(238, 241, 246) ;box-shadow: 2px 0 6px rgb(0 21 41 / 35%)">
        <el-menu  style = "height: 100vh ; overflow-x: hidden"
                  background-color="rgb(48,65,86)"
                  text-color="#fff"
                  active-text-color="#1E90FF"
                  :collapse-transition="false"
                  :collapse="isCollapse"
                  menu-trigger="click"
        >
          <div style="height: 60px; line-height: 60px; text-align: center">
            <!--图标-->
            <img src="../assets/whyCat1.jpg" style="width: 40px; position: relative; top:8px; margin-right: 5px; ">
            <b style="color: white" v-show="!isCollapse">宠物后台管理系统</b>

          </div>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>
              <span slot="title">导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>