小案例：使用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

展示页面

后端：

1、结构目录：

2、controller

package com.huangxinyi.petmanage.controller;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.huangxinyi.petmanage.entity.User;
import com.huangxinyi.petmanage.mapper.UserMapper;
import com.huangxinyi.petmanage.services.UserServices;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/user")
public class UserController {


    @Resource
    private UserServices userServices;


    @PostMapping("/page")
    public Page selectByPage(@RequestParam Integer pageNum,
                                   @RequestParam Integer pageSize,
                                   @RequestBody User user){
        return userServices.selectByPage(pageNum, pageSize, user);
    }



}

 3、serviceimpl

package com.huangxinyi.petmanage.services.impl;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.huangxinyi.petmanage.entity.User;
import com.huangxinyi.petmanage.mapper.UserMapper;
import com.huangxinyi.petmanage.services.UserServices;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.sql.Timestamp;
import java.util.Date;
import java.util.List;

@Service
public class UserServicesImpl extends ServiceImpl implements UserServices{
    @Resource
    private UserMapper userMapper;


    @Override
    public Page selectByPage(Integer pageNum, Integer pageSize, User user) {
        Page page = new Page<>(pageNum,pageSize);
        return userMapper.selectByPage(page,user);

    }

}

4、mapper

package com.huangxinyi.petmanage.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.huangxinyi.petmanage.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;
@Mapper
public interface UserMapper extends BaseMapper {


    Page selectByPage(@Param("page") Page page, @Param("user") User user);


}

5、mapper.xml

    
        select * from user where deleteflag = 0
            
                and username like concat('%',#{user.username},'%')
            
            
                and nickname = #{user.nickname}
            
            
                and sex = #{user.sex}
            
            
                and phone = #{user.phone}
            

    

7、实体类

package com.huangxinyi.petmanage.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

import java.math.BigInteger;
import java.sql.Timestamp;

@Data
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class User {
    @TableId(type = IdType.AUTO)
    private BigInteger id;
    private String username;
    private String password;
    private String nickname;
    private Integer age;
    private Integer sex;
    private BigInteger phone;
    private String email;
    private String role;
    private String address;
    private Timestamp inputtime;
    private Timestamp updatetime;
    private int deleteflag;

}

数据库：