Скачать или смотреть #2 Vue.js 2 with Laravel 5.8 | Post data with Axios and VueJs to MySql Database

In Part 2 of Vue.js, we will post data into MySql database in our E-com website built in Laravel 5.8 with Axious and Vue.js 2)

Vue.js recommends Axios that replaces Ajax as a JavaScript library to interact with the server, to send and get HTTP request from the server.

So, we will use Axios to send an HTTP request to the Node.js server and fetch the data from the database and display it on the client side.

We will quickly separate Contact form for testing with Vue.js requests.

1) Create post.blade.php file :- Create similar page like contact blade file but we are going to embed contact form in div id app with some changes as shown in video.

2) Create Route :-
Create separate GET/POST route in web.php file for posting form like below :-
// Display Post Page (for Vue.js)
Route::match(['GET','POST'],'/page/post','CmsController@addPost');

3) Create addPost function :-
Now create addPost function similar to contact function at CmsController.

4) Update app.js file :-
Now we will update app.js file to call the addPost function and will alert something to test if everything is working fine.

5) Run npm commands :-
Now run below npm commands :-
npm run dev or npm run production
npm run watch

Now you can see alert is working when we click on submit button in post form.

6) Update app.js file :-
Now update app.js file again to perform a POST request using Axios.

You can search "post data with axios vue js" in Google and open SO link to get help making your Axious Post Request.

https://stackoverflow.com/questions/4...

You can modify your code in app.js to send data via axious but you can send only single string with this script as shown in video.

7) Update app.js file (to post multiple data)
Search for keyword "post multiple data with axios vue js" in Google and open below link :-
https://stackoverflow.com/questions/4...

Use above link and modify your Vue code at app.js file like shown in video.

Now you can see in video we can able to send form data to our addPost function located at CmsController. In next video, we will post the data in table as well.

Thanks for watching :)