vue前后端接口的问题

本人学习vue新手一枚,官网也都过了一遍,对前后端接口这块有些模糊,我这么理解不知道对不对:后端(假设是php)通过.php文件提供json数据,前端通过ajax读取该json数据渲染前端文件。在开发阶段,由于前后端分离开发,前端需要伪造数据,前端是不是可以直接创建一个json文件放在static文件夹里供ajax调用读取。那么生产环境下,前端文件都打包到dist文件夹里了,ajax读取json数据时不应该还是读取static文件夹里的伪造数据吧,该怎么操作使ajax读取真实数据库里的数据呢?

阅读 5.5k
6 个回答

这个主要还是看公司的流程,一般接口的数据结构还是服务端比较了解,我们这边通常由服务端模拟数据给前端而不是前端自己来创建。

可是在开发的时候设置代理在开发的时候读取json数据,在正式跟测试的时候请求正式环境的接口跟测试环境的接口。而开发的时候使用的url保持一致


// dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  host: '0.0.0.0',
  AXIOS_BASR_URL: '""',
  NUM: '0'
})

可以阅读 vue-cli 2.9.3 开发模式变量和生产模式变量,这一章节。
指定环境变量,就可以在生产模式,还是开发模式,进行状态判断。

前后台分离不是说前后台完全独立然后最后进行合并,而是模式上是分离。在开发阶段,前台读取的后台数据就是根据后台人员给你提供接口来获取的(哈哈,前台伪造数据是会出事的),然后你根据返回的状态码来判断操作是否成功。

常见的就是:

  • 200 ok
  • 404 not found
  • 500 后台代码异常 你就要找后台同志问问情况了

此外,后台提供的值不一定是json字符串(所以不能伪造哦),你们在项目开发前是需要进行沟通的,如果他偏要提供放入集合或者数组的值,那么你就要进行转换了。

下面写了一个简单的axios的get请求:

       //查询所有班级信息
       findAllClass:(context,id)=>{
            return new Promise((resolve,reject)=>{
                axios.get('url接口',{params:{id}}).then(({data})=>{
                    if(data.status==200){
                        resolve(data.data);
                    }else{
                        reject(data);
                    }
                }).catch((error)=>{
                    reject(error);
                });
            });
        },

每个公司具体情况 不一样,我们公司是开发开始的时候就定好接口格式和内容,后台开发工程师会提前把接口文档给到前端,然后先在后台接口生成固定数据(格式和最终开发完成的数据保持一致),这样前端工程师直接就可以调用后台接口进行开发和测试,等后台工程师完成接口开发后再联合调试。
vue开发环境和生产环境的配置问题,你可以参考我写的一篇文章:https://segmentfault.com/a/11...

推荐问题
宣传栏