Teach you in LAN deployment front-end VUE + back-end PHP website services

1. Who to read

This tutorial is suitable for beginners to read, veterans can directly × off

2. Tutorial difficulty

primary

My level is limited, the content of the article will inevitably have problems, if any questions welcome to point out, thank you

preface

Nowadays, the website construction is popular before and after the end of separation, the author should also be the trend of The Times, suitable for VUE to do front-end, back-end by PHP to do interface, there are many pits in the development, in order to fill in the blank referred to a lot of information, now it is finally a successful end.

The development period

In the development phase, the VScode editor is used.

After creating the VUE-CLI scaffolding, start work.

1. The first pothole you encounter

At the early stage of development, I haven’t decided on the back-end, so let me make the interface first. Since it is separated from the front and back ends, data dictionary will be required, and the HTTP protocol will automatically convert to all lowercase letters. However, when I edited the data dictionary, the variable name was mixed with uppercase letters, so I could not find the variable name when I received the parameter later.

You can’t make a variable name that is case mixed, and it’s so long that the back end will scold you.

2. Cross-domain problems

PHP says he has added cross-domain access code, but I still have cross-domain error, the error is as follows.

After querying countless information, I realized that vuE-CLI must be configured with its own cross-domain proxy service in the development environment to access the PHP backend across domains

In your project root directory config/index.js to configure proxyTable, target to enter the backend interface domain name, other parameters can be copied.

After the configuration is complete, write/API in front of the interface you requested, followed by your interface path, do not write the interface domain name, as shown below

Then re-run NPM run Dev to implement the cross-domain problem of VUE in the development environment.

3 Then came the problem of parameter transfer

Ajax POST data submission The PHP background does not receive data

After the interface is tested, the back end does not receive any parameter when sending a parameter to it.

It turns out that axios sends data in JSON format, and the backend only accepts data in traditional form data format, which the JSON daemon does not recognize. The front-end sends this application/ JSON

Knowing the reason, several solutions are as follows

1. Change the request header format

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

或者

{headers: {'Content-Type':'application/x-www-form-urlencoded'}}


Copy the code

I tried it, but it’s still not a good idea

2. Qs conversion parameters

The qs library is included in AXIos, so you don’t need to download it anymore.

3. Solution three, let your background change the way of receiving, so that he received (wall crack recommended)

The author adopts this way, let the back end change.

Finally everything worked out and we started testing the interface, but…….

When the landing interface test pass, the second interface, 404 error, what is the situation, I and the back end check the code, the code is correct, that why will explode 404 error

After investigation, the problem was finally found, back-end query database, data table has a field and query statement variable name is inconsistent, the database exploded 404, PHP framework put the error back to the front end, not the interface can not be found, it is dish force front end met dish force back end

And then all the way to the end, the project is ready to go live. The problem is that customers need projects online to their LAN, providing only one computer as a server.

Need TO deploy VUE and PHP to LAN?

The back end is on the server computer, loaded with this little thing

I put the packaged dist files in the root of the PHP file, and put the project in the WWW directory under phpStudy

Start service, can access, problem again, front-end page interface 404 error. How to fill in the front-end request interface? Fill in the LAN IP for that server?

Do not fill in the request IP, write the relative path, as shown below.

Enter the IP of that computer, test, complete, and all other computers on the LAN are working properly.

conclusion

This is a problem I encountered in my initial vUE development project. Cabbage dog meets cabbage dog

Afterword.

This article has been sent before, at that time I do not know typesetting, there is no graphic and not a few people see, now a reconstruction