前端vue项目调用java后端接口并回显到表单

下载axios

npm install axios

yarn add axios

main.js中引用

import axios from axios //全局引入
Vue.prototype.$axios = axios //全局注册

业务代码中配置

定义调用后端算法的函数

export default {
  name: Home,
  //接收返回值 item就是接口返回值
  data() {
    return{
      item:[],
        msg: "hello 青哥哥",
        collapseBtnClass: el-icon-s-fold,
        isCollapse: false,
        sideWidth: 300,
        logoTextShow: true,
        headerBg: headerBg
    }
  }，
 methods: {
    query(){
      this.$axios.get(/api/develop/querySysUserList,{
        params:{
          tenantId:webApp,
          updateTime:2023-05-18 14:11:11
        }
      }).then(response => {
      console.log(response.data.data)
        this.item=response.data.data //返回值
        console.log(this.item)
    }).catch(error => {
      console.log(error)
    })},
    getInfo(){
      console.log(this.page)
      this.$http.post(/api/resourceController/requestResourceListData,{page:this.page,rows:this.rows},{
        emulateJSON:true
      }).then(result =>{
        console.log(result.body.rows)
        this.list=result.body.rows
      })
    }
}

按钮添加@click后面是上面创建的函数

<div style="margin: 10px 0">
          <el-button type="primary" @click="getInfo">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
          <el-button type="primary" @click="query">查询 <i class="el-icon-top"></i></el-button>
        </div>

vue.config.js中配置后端ip

const { defineConfig } = require(@vue/cli-service)
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      /api: {
        target: http://ip:端口,
        changeOrigin: true,
        pathRewrite: {
          ^/api: 
        }
      }
    }
  }
})