vue前后端接口的问题

Question

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

Answer 1

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

Answer 2

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

Answer 3

---

// 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 开发模式变量和生产模式变量，这一章节。
指定环境变量，就可以在生产模式，还是开发模式，进行状态判断。

Answer 4

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

常见的就是：

• 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);
                });
            });
        },

Answer 5

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

Answer 6

可以看下这个，获取对你有帮助 https://github.com/azl3979858...