Full Stack Vue.js, Express & MongoDB - Full Stack Vue.js, Express & MongoDB [2] – Vue Frontend

Programming, Science & Technology

Full Stack Vue.js, Express & MongoDB [2] – Vue Frontend

hey guys welcome to part 2 of our full stack view Jas Express Mongo series in this video we're gonna start to deal with view because in the last one we

just created our back-end Express API you can see we have our server folder we have our API folder with our post Jas file in it okay which was pretty simple so now what we want to do is generate a

view application inside of a folder called client ok and this is gonna be generated with the view CLI so I'm actually gonna leave my back-end server running as you can see it's still

running on port 5,000 so I'm going to open up a new terminal while that runs and we're gonna install the view the view CLI globally so NPM install – G it's gonna be at view slash CLI that

will install the latest version of the CLI alright and the idea here is to have a client folder that will run the dev server that comes with with view Jas whoops I have to do sudo because I'm on

a Mac but but but yeah so we'll have a client folder that will have all the stuff that view CLI creates our entire dev environment and then when we're ready we're gonna we're gonna build all

of our static assets out to the public folder in the server folder so we'll have to add some extra config to be able to do that and then that's what will get deployed the actual client folder with

all the dev stuff review is not going to get deployed in fact we want to create a dot get ignore file that prevents that from even being committed so let's do that before we do anything I'm gonna

create a file in the root okay not in server not anywhere else just in the root called dot git ignore and we're gonna put in here slash client okay client hasn't been created

yet but we're gonna create it in a minute and then also of course node modules we don't want any of those folders to get pushed so let's save that and now let's generate the client folder

using the views so we're simply going to save you create and we're gonna call it client okay make sure that you're not in your server folder you're in the root here let's run

that I'm just going to click the default here babble es lint I'm using the version 3.0 dot for as you can see yours may be a little later depending on when you're watching this and as you can see

it created a client folder inside of our structure here just ignore that and I probably should have already created the git repository and and and have been doing my commits and stuff but

I'll go ahead and do that now so I'm going to say get in that make sure you're in if you're doing this with me just make sure you're in your route so we'll say gettig net or in it let's

say get add all and get commit and I'll just say initial back-end created probably should I did this a while ago but that's fine alright so in our client folder we have

just our default view stuff I actually want to run the the front-end dev server so I'm gonna go ahead and CD into clients and from here let's run what is it NPM run serve I believe yeah so

that's gonna start the view server okay and that starts on port 8080 by default so let's go ahead and open that up and there we go we have our default view application we still have our back-end

running on port 5000 ok so back in 5,000 front end is on 8080 so in our view j/s application I'm going to let's see we're going to source we have our components they give you this hello world component

by default I'm actually going to change the name of that I'm gonna change this hello world component to host component I spell that right so post component view that's gonna break our application

because if we go to app dot view it's actually looking for hello world and we need to change that so up here you can see they're giving the view logo I'm just gonna leave that and then this

hello world which has a prop of message we're gonna get rid of that and we're going to say post component instead and of course we need to bring that in so post component and that's gonna come

from components slash post component dot view and then we just want to change this reference down here to post component we'll save and now we should be back and up and running reload

there we go alright so before we deal with the the actual post component I want to create a service that handles making all of our requests and to make up our requests to our back-end I'm

going to use Axios so just for a second I'm going to stop the server and I'm gonna do make sure you're in your client folder and then do NPM install Axios unless you want to use the fetch

API that's absolutely fine or something else super agent or something but I prefer Axios so I'm going to NPM run serve again and now inside our source folder in the client folder we're gonna

create a file called posts should call posts let's do post service dot J s okay so the service like I said is gonna handle all of our requests and then we can

reference this from our component so let's first import Axios from Axios all right and then I'm gonna create a variable called URL and we're gonna set up a proxy later on but

for now we're just gonna put an HTTP local host port 5,000 slash API slash posts alright and then we're gonna create our post service class so class post service we're gonna have say get

posts create post delete post okay so for the forgetting post I want to create a method called get pose but we want to make this static okay and what what I mean by static is

is it means that even though we have a class here and we have a method we don't have to instantiate like a post object to be able to use this we don't have to say new post service or whatever we can

simply call post service dot get posts and that will run it okay so it's very important that we use static here and then the way I'm going to structure this is I want to return a promise with with

the information that we get from the back end with the posts and also an error if there's an error and will use a try-catch block for that so let's say return new promise and there's a million

different ways you can do this stuff but we're gonna say async and promise promises take in two things they take and resolve and reject okay so basically what it when the promise is done like

when we do what we want it to do when we're finished we want to call resolve if there's some kind of error we want to call reject so from here let's use an arrow function and from here we want to

do a try-catch block okay that will take in a possible error so what we want to try is to make our request to to get the the post so let's say Const res and I'm using a sync away okay we labeled this

as a sink right here so let's say a weight and then Axios dot get I'm gonna make a get request to the URL which is the API slash posts okay then that should give us data back so we'll have a

variable called data and we'll set it to res dot data okay and then I just want to recall resolve here okay if if what we do is successful we want to call resolve and inside this resolve

we're just gonna map through the data that we get we're gonna say data dot map and map just it's a high order function that will basically loop through a set of data or whatever it is and you can

return another array from it so I'm gonna pass in post you'd call that anything but we're just gonna say post and then in here we're going to use the spread operator and basically that will

take whatever is in the current post and then we just want to say created at and set that to new date and pass in whatever the created at date is so post dot created at alright so that will

resolve our data and that will return all of our posts now if there's an error then we want to call reject that's how promises work okay so if there's something goes wrong we call reject and

pass an error this this would be what would be in the catch okay if you don't use a sink away and you use then you know dot then dot catch this was what would be in the catch all right so

hopefully that makes sense now these other these other methods are going to be much more simple because we're not actually returning data or just we're just making the request and

we're getting at either a 200 back or 201 or whatever so let's say static and we'll call this insert poke post and it's just going to take in one parameter of text okay and then in here we just

want to return Axios we're going to return directly Axios dot post and pass in the URL and then we want the data which is just text okay and we could do text text like that

but you but since they're the exact same with es6 we can just do text and that's it just put a semicolon there and it's but one here and you don't need semicolons in fact and view its popular

not to use them but I prefer to use them so delete post very simple we're gonna say static delete post and that's actually gonna take in an ID because we need to know which one to delete right

so we're gonna return Axios dot make a delete request and remember with with this we need to actually go to API slash post slash and then the ID so I'm going to take this URL and then put the this

ID directly after it so I'm going to put in backticks we'll use the variable syntax here for the URL and directly after that we want to use ID okay and we don't have to put

a slash in between because if you look at the UI we'll actually forgot to do that we want to put a slash like that okay that way we don't even have to add a

slash here and that's it so we'll save that and one thing I forgot to do is is export this so we want to export default post service okay and we should be all set here so let's close this up let's go

to our post component and this is obviously you know this is the view that we're going to that people will see so I'm gonna actually get rid of everything in the template it's getting what's get

rid of all this and the template will leave the template tags though and then let's see for the script I guess we'll just leave that for now and then the style actually have a just a little bit

of CSS that I'm gonna paste and I don't want to type it all out because it's it's it's pretty easy and I don't want to I don't want this to take too long so I'm just going to replace all this

styling with this and I'm just going to go through if you want to copy it from here you can do that if you want to if you want to go to the the repository and copy it you can do that as well so we

have the container we have the error okay we want red background for any errors the posts will have the green background some padding and so on the created at

we're gonna position it up to the top left also give it a darker green and then the text has some style so that's that's the basic styling for this all right so let's do let's do the script

tag first so I'm gonna actually just change this name to post component it has no props okay but nothing's being passed in with the component tag so we'll get rid of that we are gonna have

some data though associated with this component okay and if you're new to view this is basically like like if you have experience with react it's like your state and your component State okay but

we want to make sure we return an object with this stuff in it so we're gonna have posts which originally will be an empty array and then what we want to do is make a request to our back-end and

fill that array we're also gonna have error which is just going to be an empty string to begin with and then text is going to represent whatever is is typed into the post into the input to add a

post okay so that's the data associated with this component then what we want to do is go under data we'll put a comma here and we're going to use a sync created okay so created is like a life

cycle method it runs automatically when your component is created or when it's initialized so here I'm going to use a try-catch okay so we'll do a try-catch and from here i want to set the posts so

if I say this stop post this pertains to this data right here this array and I want to fill this okay when when the component is created I want to make a request to the backend through the post

service that we just created okay and remember that returns asynchronous synchronously so we want to use a weight and then post service dot and we want to call get posts okay remember that if we

go on our post service so we're reaching into post sir and we can use post-service dot ket post directly and without instantiating anything because of this static so that

will try to make a request and get a response now one thing we need to do is bring in the post service because right now it won't know what the hell we're talking about so up at the top inside

the script let's say import post service from we want to go up one level dot dot slash into whoops post service that's right all right we want to go out of components and then into post service

okay so in the catch we're just going to set this error to whatever this is so this dot error equals whatever the error is okay actually it has this is an object it has a message value so we want

to do error dot message okay so I think that that should be good you know what let's I mean we have to do the create post and delete post and stuff like that but I think for now I just want to get

the post and display them in the component so let's go up to our template now and let's do div class equals container I'm going to do a little bit of styling here but not too much and I

don't have Emmet set up with view so I can't do like you know div test at oh I can mine I thought I couldn't use it here so let's do h1 and let's say latest posts

and here we're gonna want to create we're going to need the form to create a post but I'm gonna skip that for now in fact I'll say create post here and underneath that we're going to have an

HR and then let's have an area for the error so this will have a class of error and we only want this to display if there is an error so we want to put a conditional in here so we want to say V

if equals error and then pass in here whatever that error is so we want to use our double curly brace syntax and just put an error all right and then underneath that we want a container a

post container and then we want to loop through each post so we'll have a class div with the class of posts but we want to put a bunch of we want to put a bunch of attributes on here so I'm going to go

and here we want to do a V – 4 this is all we can loop through V for equals and I'm gonna say parenthesis we're gonna use post for each one and then index if we want the index for anything so in

posts ok V for posts index in posts what is this error respect to have V okay we just haven't done the V binds yet so after this let's do our V – bind and we're gonna set item is going to be

equal to post okay so whatever we put right here is going to go here and then under that let's do V – find and let's set our key actually let's do our index so we'll do V bind : index to the index

and then we want our key so V – find key and what I'm going to use for the key is the the ID of the post and we can get that with post dot underscore ID remember MongoDB creates an underscore

ID field alright so now in here we should be able to display our post text so I'll put a paragraph with the class of text and inside here we want double curly braces

and just save post dot text now above that I want a format that created at the date so I basically want to get the the day the month and the year and format it

that way so let's go ahead and put our expression in here we're going to use backticks and use our variable syntax so we want to say post dot created at dot get date

okay so that'll give us the day and then after the curly brace let's do a slash and then we want the month so I'm just going to copy what I just did here and paste that and except instead of get

date we're gonna do get month okay and then after that we'll do another slash and paste it in and then we're gonna do get full year and these are just standard JavaScript methods so get full

year and that should give us the format that we want and I think that should do it let's save and let's go up an error here see what's going on and poor Axios and post-service and port Axios from

Axios oh we need quotes around this alright save that ok let's go back to our app and reload there we go so we're getting the posts from our API so whatever we got here hello world and

so on if we went to postman and added another post it would show up here but obviously we won't we want to be able to do that through our application so let's continue on and let's add that

functionality so let's go up in the template where are we we want to go to post component and in the template we want to replace this with our form so I'm going to have a class of create –

post and let's put a label I'll say label for create – post and we'll just say say something and then underneath that let's do an input and this is gonna have an ID of create – post ok what else

do we want to do here we actually want to bind this we want to bind this value text to this input okay so to do that we use V model V – model and we want to set that to text okay so we're going to bind

that let's also add a placeholder so a placeholder or equals and we'll just say create a post all right and then we want a button so it's a

button and I'm gonna add a an event to this so we'll say V – on and then the event we want is a click event so whenever whenever we click this button we want to call create post

okay and then we'll just say post for the text so let's save that and let's just make sure that it actually shows up okay so here it is what the heck happened to our data though wait a

second okay so just I think it's just because we haven't we have we haven't added the create post function so it's just it's messing up because of that so once we do

that we should be fine yeah so it's looking for a method called create post so we want to go down here and go after the created lifecycle method I'm going to put a comma here and

we want to define methods okay so these are just like custom methods that we create so one of them is going to be create posts we're gonna say async create post and let's await from the

post service so a post service and remember we created an insert post method we want to pass in this dot text okay because this text value right here is bound to the input so whatever is in

that input we can access with with this dot text okay and then once we do that once we insert the posts we simply want to say this dot posts equals what just like we did up here we just want to get

the posts again so I'm gonna go ahead and just paste that in okay so let's save that and let's go back and we see our data we don't see any errors that's good and let's say this is post three

this when I click this it should fire off create post and there it is and if we go to our API and reload that gets added awesome so now we want to do the delete and then the functionality should

be done and we can get ready to start the adding the proxy and changing the build directory and stuff like that so method let's see it's gonna be pretty similar so I'm just gonna copy this

whole thing put a comma here paste that and change it to delete post and we're going to use the post service instead of insert we want delete and we're gonna pass in here ID okay and

I realize we haven't created this up above yet but we will and then again we just want to fetch the post so let's go up above and the idea is we want to be able to double click on a post and have

it call that delete post function and also pass in the ID so this is the div that represents each individual post so I'm going to add on to this I'm gonna add an event handler so V dash on the

event is DB l click cake so you can use any native event and we're gonna set it to delete post and pass in post dot underscore ID okay that's so that's how we can get the ID once that runs it'll

call the delete post it's in the service interacts with the backend makes the delete requests gets the response and then reload the post so let's save let's go back to our application sorry low

let's double click let's see we're getting any errors here reference ID is not defined okay so let's see what's going on oh I didn't pass in ID right here okay so up here it's Pat where

we're passing in post dot underscore ID I wasn't I wasn't handling it right here so it didn't know what to do so let's try it again hopefully that fixes it so we'll reload and let's double click

and there we go okay so now we can delete so I think that's it guys in the next video we're gonna just do a little preparation before we deploy to Heroku we want to make it so that we need a

proxy so that instead of our URL and our post service being localhost 5,000 we can just do slash API slash posts so we need to actually add a special config file for that alright so we're going to

do that stuff in the next video

In part 2 we will be adding the client side using the Vue CLI and connect to our backend Express app. We will create a PostService to interact with the API from part 1


💖 Become a Patron: Show support & get perks!

Website & Udemy Courses

Follow Traversy Media:


    full stack vue fullstack vue heroku js js express node.js deploy vue vue express vue host vue mongodb vue.js vue.js deploy vue.vue tutorial