VUE以axios 方式请求后台接口
最近自己搭建了一个spring cloud, 前端用的是vue, 到了跟 后面交互的时候,蒙逼了,怎么都不对,后来请教小伙伴儿解决了。说明: 之前VUE和spring cloud的搭建过程我就忽略了,前提: 1、搭建好的spring coud 且有已经写好只管调用 的接口 2、搭建好的VUE,且相关路由等相关配置都已经配置齐全。 开工: 1、到已经搭建好的...
·
最近自己搭建了一个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>最后特别感谢帮助我的小伙伴儿 ^_^
更多推荐
已为社区贡献1条内容
所有评论(0)