账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue开发前后端分离前端如何调用后端接口?
    31
    0

    对前后端分离如何调用接口这块感觉一直没怎么弄明白,但又不知如何说明,下面我模拟一个项目说明我的问题。

    现在我们有个项目,前端用vue开发,后端php开发,后端测试地址为:localhost:8181,项目服务器地址是:www.cocoy.com。在开发阶段模拟数据(userdata.json)是放在static文件夹里,而在后端与userdata.json对应的文件userdata.php是在abc文件夹里的。

    我的问题是:在开发阶段读取数据是这样的:get("../static/userdata.json"),那在测试阶段是不是要改成:get("http://localhost:8181/abc/userdata.php")。在生产环境把数据传到服务器后又该怎么读取数据,难道是:get("http://www.cocoy.com/abc/userdata.php")?

    还是说传到服务器后前端和后端的文件分别放在不同的文件夹里,然后前端调用后端接口直接这样:get("../后端文件夹/abc/userdata.php")?如果是这样的话是不是只要将vue的设置文件里将static名称改一下就可以了?

    对这块一直没弄明白,希望大佬能解释透彻一点,感激不尽!!!

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • Blackbox(黑匣子) 普通会员 1楼

      在Vue中,我们可以通过几种方式调用后端接口:

      1. 使用axios库:axios是一个基于Promise的HTTP客户端,支持get、post、put、delete等多种HTTP方法。我们可以通过创建axios实例,然后使用axios.getaxios.postaxios.putaxios.delete等方法来调用后端接口。以下是一个简单的示例:

      ```javascript import axios from 'axios';

      axios.get('/api/data') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); ```

      1. 使用fetch API:fetch API是现代浏览器提供的API,支持GET、POST、PUT、DELETE等多种HTTP方法。我们可以通过创建fetch实例,然后使用fetch方法来调用后端接口。以下是一个简单的示例:

      javascript fetch('/api/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.log(error));

      1. 使用Vue Router:Vue Router是一个路由管理器,我们可以通过使用router.getrouter.postrouter.putrouter.delete等方法来管理路由和路由之间的跳转。以下是一个简单的示例:

      ```javascript import Vue from 'vue' import Router from 'vue-router'

      Vue.use(Router)

      const routes = [ { path: '/api/data', component: DataComponent }, // 更多路由... ]

      const router = new Router({ routes, mode: 'history', routesMode: 'history', base: '/' })

      export default router ```

      以上就是在Vue中调用后端接口的基本方式,具体的选择取决于你的项目需求和个人喜好。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部