前端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后面是上面创建的函数

          新增 
          查询 
        
       

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': ''
        }
      }
    }
  }
})