How does the front end of vue development separate from the front end to call the back-end interface?

I don"t know much about how to call the interface from the front and back end, but I don"t know how to explain it. I"ll simulate a project to illustrate my problem.

now we have a project, the front end is developed with vue, the back end is developed with php, and the back end test address is: localhost:8181, project server address: www.cocoy.com. During the development phase, the simulation data (userdata.json) is placed in the static folder, while on the back end, the corresponding file userdata.php to userdata.json is in the abc folder.

my question is: if reading data in the development phase is like: get (".. / static/userdata.json"), will it be changed to: get ("http://localhost:8181/abc/userdata.php")" in the test phase? How to read the data after the data is transferred to the server in the production environment, is it: get ("http://www.cocoy.com/abc/userdata.php")?

or does the front-end and back-end files transferred to the server are put in different folders, and then the front-end calls the back-end interface directly like: get (".. / back-end folder / abc/userdata.php")? If so, is it just necessary to change the name of static in the settings file of vue?

I don"t understand this piece all the time. I hope the boss can explain it more thoroughly. Thank you very much!

Apr.26,2021

1. You are right to request different api in different circumstances
2. Generally speaking, no matter the development environment, the test environment or the online environment, the path of url is the same, but the prefix is different. This prefix can adapt to
3 according to the change of packaging environment. The mock of your current development environment is mock. Json, can start the mock server in dev-server. Mock request


you should know about axios


first.

define the interface document first, such as

< table > < thead > < tr > < th align= "left" > user list < / th > < th align= "left" > < / th > < / tr > < / thead > < tbody > < tr > < td align= "left" > address < / td > < td align= "left" > / api/users < / td > < / tr > < tr > < td align= "left" > request method < / td > < td align= "left" > GET < / td > < / tr > < / tbody > < / table > < table > < thead > < tr > < th align= "center" > request parameters < / th > < th align= "center" > Type < / th > < th align= "center" > is required < / th > < th align= "center" > description < / th > < / tr > < / thead > < tbody > < tr > < td align= "center" > type < / td > < td align= "center" > int < / td > < td align= "center" > N < / td > < td align= "center" > user type < / td > < / tr > < tr > < td align= "center" > name < / td > < td align= "center" > string < / td > < td align= "center" > N < / td > < td align= "center" > user name < / td > < / tr > < tr > < td align= "center" >. < / td > < td align= "center" > < / td > < td align= "center" > < / td > < td align= "center" > < / td > < / tr > < / tbody > < / table > < table > < thead > < tr > < th align= "center" > response result < / th > < th align= "center" > Type < / th > < th align= "center" > format < / th > < th align= "center" > description < / th > < / tr > < / thead > < tbody > < tr > < td align= "center" > ret < / td > < td align= "center" > int < / td > < td align= "center" > 200 < / td > < td align= "center" > Login succeeded < / td > < / tr > < tr > < td align= "center" > < / td > < td align= "center" > int < / td > < td align= "center" > 201 < / td > < td align= "center" > login failed < / td > < / tr > < tr > < td align= "center" > msg < / td > < td align= "center" > string < / td > < td align= "center" > < / td > < td align= "center" > request result information < / td > < / tr > < tr > < td align= "center" > total < / td > < td align= "center" > int < / td > < td align= "center" > < / td > < td align= "center" > number of data items that meet the criteria < / td > < / tr > < tr > < td align= "center" > userList < / td > < td align= "center" > Array < userInfo > < / td > < td align= "center" > < / td > < td align= "center" > user list < / td > < / tr > < / tbody > < / table > < table > < thead > < tr > < th align= "center" > userInfo < / th > < th align= "center" > Field < / th > < th align= "center" > Type < / th > < th align= "center" > format < / th > < th align= "center" > description < / th > < / tr > < / thead > < tbody > < tr > < td align= "center" > < / td > < td align= "center" > username < / td > < td align= "center" > string < / td > < td align= "center" > < / td > < td align= "center" > user name < / td > < / tr > < tr > < td align= "center" > < / td > < td align= "center" > id < / td > < td align= "center" > string < / td > < td align= "center" > < / td > < td align= "center" > user id < / td > < / tr > < tr > < td align= "center" > < / td > < td align= "center" >. < / td > < td align= "center" > < / td > < td align= "center" > < / td > < td align= "center" > < / td > < / tr > < / tbody > < / table >

eg.
request JSON:

{
    "name": "wanghaiyang",
    "type": 1
}

respond to JSON:

{
    "ret": 200,
    "msg": "success",
    "userList": [
        {
              "username": "wanghaiyang",
              "id": "12345676543"
        }
        ...
    ],
    "total": 1000
}

if you deploy on the same server and the front-end files are placed in the root directory of the Web server, the direct get (/ api/users) interface should return the corresponding json data, which is related to the background configuration, no matter where you put the php files


No, when you local mock data, pay attention to the form of http, local webpack had better use express middleware for dev development, so, you can write the express interface, write a fake data interface, you can directly request this interface locally, like you directly request the local file is not right, that becomes the file protocol.
also, notice that you need to specify a baseUrl , and the global request introduces this baseUrl from one place, so that the OK is changed.


axios can solve your problems
just configure different interfaces during development and production


if the backend requires you to access according to the folder. If you don't want to change much, try to be consistent with the back end.
but the question is, it looks like your local json is just that you want to mock the data?


your test address http://localhost:8181/abc/userdata.php indicates that you have an interface locally. Do you know what get (".. / static/userdata.json") is for? There is no need to change the
code. Dev.env.js and prod.env.js in the config directory can respectively define the root domain name of the backend interface


you can set the proxy server in the index.js in the config folder, and then write / xxx/xx (which interface path in that folder is fine)


when you ajax.

after careful consideration, I finally figured out how it was done. The record is here for a rainy day. If there are any mistakes, I hope you will correct them.

now suppose the backend interface address of the project is 192.168.0.15, and open config/index.js, to set the proxyTable property:

    proxyTable: {
      '/abc': {
        target: 'http://192.168.0.15', // 
        // secure: false,  // https
        changeOrigin: true, // 
        pathRewrite: {
          '^/abc': '/abc'
        }
      }
    }

Note that abc in the above code is not a random name, it should be consistent with the folder of the back-end interface address so that you don't make mistakes when you pack it.

then use axios to reference the interface: axios ("/ abc/data.php"). In this way, the back-end interface can be referenced directly in the development environment. After npm run build is packaged, the files in dist are copied to the backend root directory, and the backend abc/data.php API can be called directly without changing any code.

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-1bf140a-31d7c.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-1bf140a-31d7c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?