本人学习vue新手一枚,官网也都过了一遍,对前后端接口这块有些模糊,我这么理解不知道对不对:后端(假设是php)通过.php文件提供json数据,前端通过ajax读取该json数据渲染前端文件。在开发阶段,由于前后端分离开发,前端需要伪造数据,前端是不是可以直接创建一个json文件放在static文件夹里供ajax调用读取。那么生产环境下,前端文件都打包到dist文件夹里了,ajax读取json数据时不应该还是读取static文件夹里的伪造数据吧,该怎么操作使ajax读取真实数据库里的数据呢?
本人学习vue新手一枚,官网也都过了一遍,对前后端接口这块有些模糊,我这么理解不知道对不对:后端(假设是php)通过.php文件提供json数据,前端通过ajax读取该json数据渲染前端文件。在开发阶段,由于前后端分离开发,前端需要伪造数据,前端是不是可以直接创建一个json文件放在static文件夹里供ajax调用读取。那么生产环境下,前端文件都打包到dist文件夹里了,ajax读取json数据时不应该还是读取static文件夹里的伪造数据吧,该怎么操作使ajax读取真实数据库里的数据呢?
// 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 开发模式变量和生产模式变量,这一章节。
指定环境变量,就可以在生产模式,还是开发模式,进行状态判断。
前后台分离不是说前后台完全独立然后最后进行合并,而是模式上是分离。在开发阶段,前台读取的后台数据就是根据后台人员给你提供接口来获取的(哈哈,前台伪造数据是会出事的),然后你根据返回的状态码来判断操作是否成功。
常见的就是:
此外,后台提供的值不一定是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...
6 回答2.3k 阅读✓ 已解决
5 回答5.3k 阅读✓ 已解决
6 回答1.1k 阅读
2 回答1.7k 阅读✓ 已解决
2 回答3k 阅读✓ 已解决
4 回答1.6k 阅读✓ 已解决
2 回答1.3k 阅读✓ 已解决
这个主要还是看公司的流程,一般接口的数据结构还是服务端比较了解,我们这边通常由服务端模拟数据给前端而不是前端自己来创建。