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

一时失言乱红尘 2024-03-24 10:14 44阅读 0赞

**目录**

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>
                </template>
                <el-menu-item-group>
                  <template slot="title">分组一</template>
                  <el-menu-item index="2-1">选项1</el-menu-item>
                  <el-menu-item index="2-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                  <el-menu-item index="2-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="2-4">
                  <template slot="title">选项4</template>
                  <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span slot="title">导航三</span>
                </template>
                <el-menu-item-group>
                  <template slot="title">分组一</template>
                  <el-menu-item index="3-1">选项1</el-menu-item>
                  <el-menu-item index="3-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                  <el-menu-item index="3-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="3-4">
                  <template slot="title">选项4</template>
                  <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                </el-submenu>
              </el-submenu>
            </el-menu>
          </el-aside>
    
          <el-container>
            <el-header style=" font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
              <div style="flex: 1; font-size: 20px">
                
                <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
              </div>
    
    
              <el-dropdown style="width: 70px; cursor: pointer">
                <div>
                  <span>王小虎</span>
                  <span :class="personIcon" style="margin-left: 8px"></span>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>个人信息</el-dropdown-item>
                  <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
    
            </el-header>
    
            <el-main>
              
              <div style="padding: 0 0 20px 0;">
                
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
              
              <div style="padding: 10px 0 ;">
                <span class="ml-5">用户名: </span>
                <el-input style="width: 200px"
                          prefix-icon="el-icon-search"
                          placeholder="请输入用户名"
                          v-model="inputFindName"
                          class="ml-5"
                          clearable
                >
                </el-input>
                <span class="ml-5">手机号: </span>
                <el-input style="width: 200px"
                          prefix-icon="el-icon-mobile"
                          placeholder="请输入手机号"
                          v-model="inputFindMobile"
                          class="ml-5"
                          clearable
                >
                </el-input>
                <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
    
              </div>
              
              <div style="padding: 10px 0 20px 0;">
                <el-button type="primary">新增<i class="el-icon-plus"style="padding-left: 5px"></i></el-button>
                <el-button type="danger">删除<i class="el-icon-delete"style="padding-left: 5px"></i></el-button>
                <el-button type="primary">上传<i class="el-icon-upload2"style="padding-left: 5px"></i></el-button>
                <el-button type="primary">下载<i class="el-icon-download"style="padding-left: 5px"></i></el-button>
              </div>
              <el-table :data="tableData" border stripe
                        :header-cell-class-name="headBg"
                        :header-cell-style="{'text-align':'center'}"
              >
                <el-table-column prop="id" label="ID" width="100" align="center">
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="120" align="center">
                </el-table-column>
                <el-table-column prop="nickname" label="昵称" width="120" align="center">
                </el-table-column>
                <el-table-column prop="age" label="年龄" width="50" align="center">
                </el-table-column>
                <el-table-column prop="sex" label="性别" :formatter="sexFormat" width="80" align="center">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="120" align="center">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="120" align="center">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
                <el-table-column prop="inputtime" label="创建时间" :formatter="dateFormat" width="180" align="center">
                </el-table-column>
                <el-table-column prop="updatetime" label="最近修改时间" :formatter="dateFormat" width="180" align="center">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
    
              <div style="padding: 10px 0; ">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
              </div>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    import moment from 'moment'
    
    export default {
      name: 'HomeView',
      components: {
        HelloWorld
      },
      data() {
        return {
          tableData: [],
          total:0,
          pageNum:1,
          pageSize:2,
          collapseBtnClass:'el-icon-s-fold',
          personIcon:'el-icon-arrow-down',
          isCollapse:false,
          inputFindMobile:'',
          inputFindName:'',
          headBg:'headBg',//表头背景
        }
      },
    
      created() {
        //查询分页
        this.load()
      },
      methods:{
        collapse(){
          //点击收缩按钮触发
          this.isCollapse = !this.isCollapse
          this.collapseBtnClass=
              this.isCollapse?"el-icon-s-unfold":"el-icon-s-fold";
        },
    
        load(){
          this.$http({
            method: 'post',
            url: 'http://localhost:8080/user/page',
            params:{
              pageNum: this.pageNum,
              pageSize:this.pageSize,
            },
            data: {
              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;
          })
        },
    
        handleSizeChange(pageSize){
          this.pageSize = pageSize
          this.load()
        },
    
        handleCurrentChange(pageNum){
          this.pageNum = pageNum
          this.load()
        },
    
        //时间格式化-S
        dateFormat(row, column) {
          var date = row[column.property];
          if (date == undefined) {
            return "";
          }
          return moment(date).format("YYYY-MM-DD HH:mm:ss");
        },
    
        //性别转换：后端数字、前端文字
        sexFormat(row, column) {
          const preasCode = row.sex;
          if (preasCode == '0') {
            return '女';
          } else if (preasCode == '1') {
            return '男';
          }
        },
    
    
    
    
    
      }
    
    }
    </script>
    
    <style>
    .headBg{
      background-color: #F5FFFA!important;
    }
    </style>

### 后端： ###

#### 1、结构目录： ####

![4df35cc051f0440ea5d68884ce40f037.png][]

#### 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<User> 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<UserMapper,User> implements UserServices{
        @Resource
        private UserMapper userMapper;
    
    
        @Override
        public Page<User> selectByPage(Integer pageNum, Integer pageSize, User user) {
            Page<User> 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<User> {
    
    
        Page<User> selectByPage(@Param("page") Page page, @Param("user") User user);
    
    
    }

#### 5、mapper.xml ####

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper
            PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.huangxinyi.petmanage.mapper.UserMapper">
    
        <select id="selectByPage" parameterType="com.huangxinyi.petmanage.entity.User" resultType="com.huangxinyi.petmanage.entity.User">
            select * from user where deleteflag = 0
                <if test="user.username != null and user.username != '' ">
                    and username like concat('%',#{user.username},'%')
                </if>
                <if test="user.nickname != null and user.nickname != '' ">
                    and nickname = #{user.nickname}
                </if>
                <if test="user.sex != null and user.sex != '' ">
                    and sex = #{user.sex}
                </if>
                <if test="user.phone != null and user.phone != '' ">
                    and phone = #{user.phone}
                </if>
    
        </select>
    
    
    </mapper>

#### 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;
    
    }

### 数据库： ###

![925fffe65365428e9947c50356300467.png][]

[4df35cc051f0440ea5d68884ce40f037.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/e0eeba0cb9ec48b8b439798c96ea6fae.png
[925fffe65365428e9947c50356300467.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/554fa83b58c542f9b43f8f1cd3e2bb36.png