How does the front end of vue development separate from the front end to call the back-end interface? - Codes Helper - Programming Question Answer

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!

Javascript php java

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.

Previous: How to use regular expressions to extract ip ports from a web page?

Next: Abnormalities in the comparison of two groups of numpy data

Ask for a regular expression
the requirement is 010203 = > [01JEI 02jue 03] to write a regular "010203 ". Split (regular) = [01J 02pr 03] how do you write this? (0 [1-9] | (1 [0-2])) + g.test ( 0122 ) Why true is returned here. I want to match the number between 01 and 12....

Javascript php java cPP regular-expression

Mar.06,2021
Mini Program reads on the mobile phone, blank, as shown in the following picture
< H2 > Development < H2 > ...

Mini-Program javascript php java python

Mar.07,2021
About a question that the request doesn't work.
The common problem with is that the server does not allow the front end to cross-domain, right? I know that it is a cross-domain problem, but the leaders do not know, please give some explanatory suggestions, it is also good to share the pot, thank you....

Javascript php java

Mar.22,2021
Mysql order list, how to design shopping cart list, connect them to form a complete system, such as the following table structure
< H2 > question < H2 > want to add a shopping cart table, let users add items to the shopping cart, click settlement to generate the order, but do not know how to design and associate < H2 > reference < H2 > the link I referenced https: blog....

Javascript php java python mysql

Mar.23,2021
How does node+mysql, generate the following shopping cart interfaces (array package objects), such as the following figure and code
< H2 > problem, want to find out a data set similar to Taobao shopping cart < H2 > A user has a shopping cart, there are multiple stores under one shopping cart, and there are multiple items under one store linked table query 1. Check out the shop...

Javascript php java mysql node.js

Mar.25,2021
Ask for a rule that can only be entered in uppercase letters and separated by commas?
if you have a question, you can only enter the regular format of "Chrme,Safari,Firefox ". ...

Javascript php java

Mar.29,2021
Where can I find the template for GitHub.io?
Can or some boss give me an empty template? Save it and then write your own style and so on! ...

Javascript php java github

Mar.31,2021
Regular matching problem
preg_match( var ori_head_img_url = "(.*?)"; ,$content,$biz); "||"MjM5MjAxNDM4MA== MjM5MjAxNDM4MA== ...

Javascript php java

Apr.03,2021
Front and rear separation set-cookie failure
as shown in the title: because the front and rear ends are separated from each other, jwt is used as a token to save user information. token is easy to be attacked by XSS when placed in localstorage, so I thought of using httpOnly s cookie to save tok...

Javascript php java

Jul.26,2021

Menu