最近自己搭建了一个spring cloud,   前端用的是vue,  到了跟 后面交互的时候,蒙逼了,怎么都不对,后来请教小伙伴儿解决了。

说明:

   之前VUE和spring cloud的搭建过程我就忽略了,

前提:

  1、搭建好的spring coud 且有已经写好只管调用 的接口

  2、搭建好的VUE,且相关路由等相关配置都已经配置齐全。

 开工:

 1、到已经搭建好的VUE项目下面,运行:npm install axios --save   命令,如果有warn 如下图:

像这种警告,可以直接 忽略,当然 后来我也百度了,造成这个警告的原因是在创建项目之前没有运行:npm install webpack 命令(参考博客:https://blog.csdn.net/weixin_37281289/article/details/79871923)
2、在安装好axios 后,就可以写前台代码了
     重点:在<script>标签的第一句话一定要引入axios 代码如下:
         import axios from 'axios'
3、以下是本人的前台代码
<template>
  <div class="hello">
        <input type="button" @click="post()" value="test">
  </div>
</template>

<script>
  import axios from 'axios' 这是最重要的东西,
export default {
  name: 'HelloWorld',
  methods: {
    post: function (){
      axios.post('/kernel/employee/query', {
        pageIndex: 1,
        pageSize: 10
      })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>最后特别感谢帮助我的小伙伴儿   ^_^
Logo

前往低代码交流专区

更多推荐