http://www.ngfans.net/topic/78/post
Can you share with us, how did you jointly debug the API with the backend during the development of the angular project? Let me first talk about our company's practice. If there is something wrong, please point it out.
As shown in Figure (1), I usually change the start of package.json to "set port=8071 && ng serve --proxy-config proxy.conf.json" when creating a new project . Figure (1)
The port=8071 means that the port number when I start the project with npm start is 8071. --proxy-config proxy.conf.json refers to a reverse proxy file of my project. The file proxy.conf.json does not exist when creating a new project. You have to create it yourself. The content of the file is shown in Figure (2) . Figure (2)
Then we will encapsulate the http request, as shown in Figure (3) Figure (3)
Then we use the sassGet and sassPost here when we initiate an http request, as shown in Figure (4) Figure (4)
At this point, the pictures are all uploaded, it is time to talk about why this is done. Let's talk about why there is a proxy.conf.json file. This is so that we can connect to the back-end interface during development, which is convenient for interface debugging. The picture (2) here is exquisite, for example, there is an API:
http://192.168.3.5:8081/restcloud/rest/sass/SystemConfigurationRest/queryCustomerData
Our API is at http://192.168.3.5:8081 The parts of /restcloud/rest/sass are all the same, only the ones behind sass are different, so I will set the key in proxy.conf.json as /sass (note that the aliases here cannot be messed up, it must be in the API!!! ), the content is " http://192.168.3.5:8081/restcloud/rest/sass", and then the API is called in the service. We only need to be as shown in Figure (4): /sass/SystemConfigurationRest/queryCustomerData, this The /sass inside is the proxy name defined in proxy.conf.json. We only need to fill in "/sass/******" in the url when calling http, from sass to the last url, start After the project initiates an http request, it will automatically identify the configuration in the proxy configuration file and initiate the complete url, provided that you change the start in the package.json file to "set port=8071 && ng as shown in Figure (1)" serve --proxy-config proxy.conf.json" and start the project with npm start.
Next, I will talk about why we need to encapsulate http. This is to facilitate our packaging and deployment projects, because our front end uses Nginx for forwarding. When packaging the project, we need to add the proxy name in the Nginx configuration to the API, and we are developing. It is not necessary to add the configuration key of Nginx to connect the back-end interface. For the convenience of packaging and development, we have encapsulated the http methods, so that we only need to change these encapsulation methods when packaging. The specific Nginx configuration, Mr. Da Mo said, I will not repeat it. For example, the key configured in my Nginx is sassapi. I don't need to add this sassapi to the url during development. As shown in Figure (3), comment out the sassapi. When packaging, remove the comment and add sassapi.
This is the first time to write a technical article, the expression is not very good, where is unclear or unreasonable, welcome everyone to point out, thank you. Also share your method, thank you.