在开发中、打包后连接后端服务器,获取和提交数据的方法

大家能否交流一下,angular项目的开发中,你们是如何与后端进行API联调的?我先来说说我司的做法,如果说得不对的地方,请大家指出。
如图(1)所示,我通常是在新建项目的时候就把package.json的start 改成“set port=8071 && ng serve --proxy-config proxy.conf.json”
0_1517061755338_1.png
图(1)

其中的port=8071是指我用npm start 启动项目时的端口号为8071。–proxy-config proxy.conf.json是指我项目的一个反向代理文件。proxy.conf.json这个文件在新建项目时是没有的,要自己新建,该文件的内容如图(2)所示
0_1517062755226_3.png
图(2)

然后我们会对http请求封装一下,如图(3)
0_1517062784429_4.png
图(3)

然后我们发起http请求时就用这里的sassGet、sassPost,如图(4)所示
0_1517063024097_5.png
图(4)

到此,图都上传完了,该具体说说为什么这样做了。先说为什么要有proxy.conf.json这个文件,这是为了我们在开发时就能连接后端接口,方便进行接口联调。这里面的图(2)写法是有讲究的,例如有一个API:
http://192.168.3.5:8081/restcloud/rest/sass/SystemConfigurationRest/queryCustomerData
我们的API在http://192.168.3.5:8081/restcloud/rest/sass这部分都是一样的只有sass后面的不一样,所以我会在proxy.conf.json里面key 为/sass (注意这里面的别名不能乱起,一定要是API里面!!!),内容就是“ http://192.168.3.5:8081/restcloud/rest/sass”,接下来就说service里面调用这个API,我们只需要如图(4)一样: /sass/SystemConfigurationRest/queryCustomerData,这里面的/sass就是在proxy.conf.json里定义的代理名,我们在调用http时的url只需要填“/sass/******”,从sass到最后面的url即可,启动项目后发起http请求,它会自动识别proxy配置文件里面的配置,发起完整的url,前提是你如图(1)所示,在package.json文件里的start 改成“set port=8071 && ng serve --proxy-config proxy.conf.json” ,然后用npm start启动项目。

接下来在说说为什么要封装一下http,这是为了方便我们打包部署项目,因为我们前端是用Nginx做转发, 打包项目时要在API里面加上Nginx配置里面的代理名,而我们在开发时连接后端接口是不需要加上Nginx的配置key,为了打包和开发时的方便,我们把http的方法都做了一些封装,这样我们在打包时只需要改这几个封装的方法。 具体的Nginx配置,大漠老师有说,我就不重复了。例如我Nginx里配置的key是sassapi,我在开发时是不需要在url里面加上这个sassapi的,如图(3)所示,把sassapi注释掉,打包时就去掉注释,加上sassapi。

第一次写技术文章,表述得不怎么好,哪里说得不清楚的或者不合理的地方,欢迎大家指出,谢谢。还有交流一下你们的方法,谢谢。

Very cool!

这种方式能给团队里面所有人带来方便。

@admin 大漠老师,我能在这个网站里面写ionic3的知识么😉

@hmily 当然!举双手双脚热烈欢迎!

我也对inoic很感兴趣,之前把官网的项目运行了一下,打包发现总是报错。。

@gin 不好意思,年底公司比较忙,没怎么上这里。关于ionic打包出错的,能贴一下报错信息、ionic info的信息吗?ionic打包,要确保你网络是没问题,能翻墙,还有就是npm的源。

如果可以 希望能分享一下关于验证的情况.是使用的token还是用的cookie? 可以来个例子吗?

Angular学习中…
Git: https://github.com/wkylin/ng5-starter
多多交流!如果喜欢请给加个星,谢谢

此回复已被删除!

@lait233 token和cookie两者没冲突啊,我司的做法是,登录时后端生成一个token,只区分用户是在浏览器还是App访问,浏览器访问就把token存储在cookie,App就存储在storage里。

很实用

@zhongzhong 能得到钟钟大神的评价,真幸运,您在码云上的CodeBe项目,很厉害,看了您的代码,学到了很多东西,非常感谢。

登录后回复

与 Angular开发者 的连接断开,我们正在尝试重连,请耐心等待