Part 3: How to build a job board with vue js and the Laravel 5.5 API ?

Part 3: How to build a job board with vue js and the Laravel 5.5 API ?

Commissioning the back end series

Created on: April 01, 2018

Updated on: April 01, 2018

In part 2 we created the front view containing a series of buttons that we will use to invoke actions. Since we are now concentrating on the front end our task is to create the methods that are associated with these buttons so that our application is wired up and ready to go.

We need to go back to our masterblade file; do you remember when we added a fetchJobs function that was necessary to fetch our job listings and present it to the view?

Next, we will add the delete, update and storeJob methods (CRUD methods) just underneath it to ensure that our buttons and input fields are wired up.

In part 2 we created a vue component and this contained a method called fetchJobs. As a reminder here is the code that we added earlier.

Now that we have accomplished this we can now return to the master.blade.php component section. Our storeJob function will perform a post request to the database on the backend. We will set the job id and we will set the job.editing flag to false.

As you can see within the createJob method the variable newJob is initialised and the empty fields are set. The job.editing flag is set to true meaning that all of the input fields set on the template will open.

A new job is pushed on to the array, and after that the storeJob method is invoked and this is where the post request we discussed earlier is invoked and the job is save on the backend.

Please check out our github repo for the code in full:

https://github.com/ormrepo/jobboard

Today we learnt how to implement the front-end architecture by creating the various table definitions, buttons, vue components and the vue instance that can be applied to specific web development services you offer.

Wiring up a back-end API with a front-end application doesn’t have to be complicated.