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.