How can the front end appear "system maintenance page" in time when the front end is separated, the back end is maintained or when something goes wrong?

RT
backend java
frontend Vue

Javascript java
Mar.02,2021

the backend writes whether the interface is maintained or not. Before each request, the secondary API is sent to check whether the background is under maintenance, and the status shows that is maintaining at the front end. Otherwise, it's normal. (simple solution.

when an API returns status as 404 , jump to the

initial GET request on the system maintenance page, and the request will be processed by the backend. You can show whatever you want on the back end.
if it is an uncertain "accident" in the middle, what is shown is part of the function of the front end, and just ask the front end to do it.

if you are using axios as an interactive plug-in, you can try the following configuration 

this.$http.get(url, data, config)
    .then(res => {
      // success
    })
    .catch((err) => {
      // fail
      if (err.response) {
        // The request was made and the server responded with a status code
        // that falls out of the range of 2xx
        // 2xx
      } else if (err.request) {
        // The request was made but no response was received
        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
        // http.ClientRequest in node.js
        // 
      } else {
        // Something happened in setting up the request that triggered an Error
      }
      console.log(error.config);
    })

the front end can make a judgment based on the status code returned by the background. When a specific status code appears, it jumps to the maintenance page

.

when configuring nginx, backend maintenance, it automatically jumps to the system maintenance page under maintenance

Thank you very much. The problem has been solved. Let's talk about my practice. Because the size of the server is limited, it is impossible to do Websocket, and want to manipulate the maintenance page at will, so a json file is placed in the root directory of the server front end, and this json file is used as a configuration file. You can configure whether or not to maintain, the time period for maintenance, maintain the content displayed on the page, and then judge it by reading requests from the front end, which is also a way

.

Previous: The ``in router.push ({path: `/ user/$ {userId}`}) is changed to''. Is there any difference?

Next: Is mongoose's validator invalid for update?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b34dec-2bf40.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b34dec-2bf40.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?