#02 MEVN Full Stack Web Application Tutorial | Working On Front-End

[Music] hello world welcome to my channel i am sahil and i am developing a full stack web application using mi venus stack and in previous video you have already seen that how i have created restful api using node.js express and mongodb now in this video i will show you how to work on front-end part using vue.js and beautify okay so let's start so first what i will do is i will create a new view cli project into the root of the project directory okay so first what i will do is i will install view cli globally in my system okay so for this just use npm install hyphen g at the right view cli okay so i have already installed view cli in my system so i will not use this command again but if you are not then just use this command to install view cli globally in your system okay after that to create a views project just use view create and the name of the project so i will name it client okay now hit enter okay and wait until something displays okay now here just select this last one manually select features and from here i will select choose view version and variable and i will also use router so i will select this router i will not use linter formatter so i will deselect this okay now next hit enter now i will select this uh two point x version because beautify is only supported in 2.x version okay so i will select this one and here asking use history mode for routers okay so i will use so just write y here and hit enter okay now here i will select this in package.json and i will not save this as preset so i will just write n and press enter okay now it will install all the package for this project okay so just wait okay so here you can see the project has been created with name client okay so this is client okay now next what i will do is just write cd client now next i will add beautify into this project okay so for this just open beautify gs.com okay and here click on get started and then click on installation okay now here i will use this command to add beautify okay so just copy this command and just paste it here and hit enter okay now wait here asking for choose a preset okay so i will select this default and then hit enter okay okay so beautify is also added to this project okay now next i will add one more package that is axios okay so i will just write npm i exist and hit enter okay now just wait okay so here you can see the excess package is also added to the project okay now next what i will do is i will just write npm run sir to start the local server okay so just hit enter now next what i will do is i i will split the terminal in two part okay now in this i will just write cd server and from here i will start the development server of a backend part okay so here i will write npm run dave okay and pm run dave to start the local development server okay so here you can see the server running at this address okay and here the client project is uh running okay so just wait until it starts the server okay okay so here you can see the client project server has also started okay so just open this link now here you can see this is the sample project from the beautify okay so now next what i will do is now next we will add the dev server proxy first okay so just open this file view dot config.js file and here i will use dave server okay and here i will use proxy and in proxy we have to use this address okay so this is the backend address okay so just paste it here and save okay now close this file now open this src folder and inside this src folder just go to this components folder and delete this hello world dot view file okay and go to this view views directory and also inside this home dot view just remove this line okay save this now in app dot view file i will not use these code so just select all the codes and delete and now go to beautify js.com and from here just click on wireframes okay i will use this base wireframe so just click on this so this is the base wireframe okay so i will use this and just click on this to get the source code of this wireframe okay now just copy and paste in app.view file and save okay now if we just open our application then we can see this uh wireframe okay is working fine now next what i will do is i will create a nav bar here okay so for this what i will do is just come here and here just remove this comment and then here i will use v list item okay now inside this i will use b item sorry v list item content okay now insert this i will use v list item title okay and here i will write decode mania my channel name now next i will use v list item subtitle okay in subtitle i will write meven full stack app okay now next i will just use v divider for horizontal line here so i will use v divider okay now just below this divider i will display three menus okay home add post and about page okay so for this i will go to this beautify gs.com and from here just click on this ui components and then just go to this lists okay and then i will use this one okay so just click here and copy this v list okay so i will just copy this list and paste here okay paste here now i will not use this v model so just remove this and i will also not use this b sub header so remove this and next what i will do is just come here again and click on a script just select this items okay and just go below now here in data we have to just paste the items okay so just here paste okay save now just replace now here we can see these items okay so we will change this so here what i will do is i will just use title instead of text okay and in title i will use home and i will use icon here mdi home okay and here also i will use a link okay and in link i will use slash okay and next what i will do is just remove these two just duplicate two more times and next i will just write here add post and in icon i will use note plus okay and in link i will use add post okay now here in link i will use about and here i will use help box okay and here i will use about save this now if i come here okay so we have to do one more thing just here i will write title okay now you can see this is home add post and abort page okay now next what i will do is here in beh main i will use router view okay router view save this now next just go to this home dot view file and just remove all this here i'll write home page okay now go to this abort dot view and just delete all in h1 i'll write about page okay and i will create one more page okay add post dot view okay here i will use h1 add post page okay save this now go to this router folder and open this index.js file okay now here i will change the name to home okay now copy the same thing paste here okay now this is for add post so here i will write add hyphen post similarly just copy and paste it here okay and here the name of the component so add post okay now we have to just import the view from the views directory in this file okay so just duplicate this line and import okay save this now next what i will do is just go to app dot view file okay and here uh in this line what i will do is i will just use these link okay so here i will use two prop okay and i will bind the link here okay so i will use item dot link okay and here i will use link prop save this now if i just come here and rephrase and when i click on home then we are getting the home page content if i click on add post then we are getting the add post page content this is about page content okay let me go to home dot view page again okay so save this now we are getting home page okay so everything is fine now next what i will do is fetch all the posts from the database and display here in the home page okay so for this we need to create a new file inside this src folder okay so just create a new file with name api dot js okay now inside this file first we will import axios package okay so just write exios from exios okay now here i'll create a constant with name url and here i'll use slash api slash post okay and then i will use export default and i will create a class here with name api okay now here i will define a method to get all the post from the server okay so here i will use static keyword static and also this method will be async and method name will be get all post get all post and here i will create a constant response equal to await exios sorry excuse dot git method okay and here just pass url now we will just use return raise dot data okay now similarly i will define all the methods okay so just copy the same thing paste here to get single post okay by id so here i will just write um get post by id okay and here i will pass id as parameter and in url i will just use string literal okay and here i will use this and then slash then this id okay and rest will be same now next copy the same thing paste here to send sorry to insert post into database okay so here i will use add post and here i will use a parameter post okay now here i will just use url and then the post okay and rest will be same now just copy the same thing for to update post into database here i will use two parameter id and post okay and i will use this here okay i'll use this here and then i will use post okay and this will be a patch method and this will be a post method and this will be a gate and this will be also a gate okay now next we will just copy the same thing from here for to delete a post okay here i will just delete post and here just pass the okay so this will be same yeah just right delete okay and okay now this method will be used to interact with the server okay to send and receive data okay so just open home dot view file and here i'll use data property okay return i'll create an object posts okay now next i will create a lifecycle method async created okay now inside this i will select this uh object okay and i will use a weight api dot get all host method okay and we have to just import import api from api okay so i am using get all post method that i have just defined here okay and by using this method you will get all the posts from the database okay and assign in this post array object okay now next just design this page so here what i will do is i will use a b container first now inside this v container i will use v row okay inside this v row i will use b column and here i will use sm equal to four okay and i will also use class padding all three okay and i will use v4 directive okay to look through all the posts okay so here i will use post in posts okay and it will accept a key okay so i will find the key so here i'll write post dot id okay now next what i will do is inside this week column i will use v card okay and i will also use a class to this v card padding all sorry padding all one and then here i will use inside this v card i will use v image okay with height 250 and i will bind the src attribute with the value uh i will use a string literal here okay slash then i will use this and then i will write post dot image okay now next just below this image i will use v button okay with class margin left four okay and margin top three okay and i will use small small outline and color equal to indigo indigo okay and here i will display the post category so here i will write post dot category okay now just below this button i will display the title post title okay so here i will use the iphone card hyphen title okay and i'll also use a class headline now just inside this i will use post dot title okay now just below this title i will use v card text okay now i will use a class here padding top and bottom zero okay now inside this i will use b tag and inside this p tag i will post dot content dot sub string okay so i will not display all the text in the home page okay so i will just display some content okay so i will use sub string method and it will take two arguments so i will use 0 to 100 okay and then i'll concatenate with this triple dot save this now next just wait okay now here if we replace then we can see there is one record is present in the database okay this captain america okay and we are getting the image and this title sorry in this category this title and this text content okay let me just give a uh no gutter props okay no gutters okay now it looks better okay so this looks fine now next what i will do is i will work on add post okay so here okay so before uh going to add post first we will work on when we click on this post then we will display in detail okay so for this what i will do is just come here i'll create another views inside this views directory okay so just create a new file post dot view okay now just go to the router okay router index.js file and here what i will do is i will copy the same thing okay paste here here i'll write post slash and then id of the post okay and here i'll write the name of the post this will just write post and in component i'll write post okay so we have to include this here so just include it post okay now just go to post dot view okay and here what i will do is first just use template okay now first we will see that the id will get the id when we click on this then we will get the id of this particular record and send to the post uh um post page okay and from this page we will get the post detail by using the id okay so first we go to this home dot view file and here we have to do one thing okay so here what i will do is in this b column okay not in this b column this big card here i will use uh to prop okay and i will bind this with a name okay so i will send when we click on the card then we will send to sorry let me just do in the course okay now here i'll send to post views and i will send params and in params i will send the id okay and what id will send i will send the post id so i will use post underscore id okay save this and in post dot view here i will write post details okay now just wait if we click on this then we are going to this post view with the post id okay so here we have to design this page okay so here what i will do is first here i will use script okay now here i'll use data and then return okay now here i will use post okay now here i will use async async created lifecycle method and here i will create a constant response equal to await and api dot get post by id okay get post by id and here i will use this dot route dot params.id okay now to get the id from this url you will use this line okay now just go to api.js okay so get post by id sorry get post by id and in post get post by id okay now we have to import the api.js file here so just write import import api from api okay save this now next what i will do is i will use this dot post sorry this dot post equal to response whatever the response will come from the server we will assign into this post okay now next what i will do is just go come here and first i will create a container so just create a container and then a row then a column okay and here i will use sm 10 okay and i will use class padding all four and then i will use mx auto to center the column okay now inside this column i will use the card b card class padding all two okay now here i will use b img with class sorry not class here i will use src attribute okay and i will find this src attribute here i will use this string literal okay slash then here i'll just write post dot image okay and then just below this image i will use v card accents okay and here i'll use class padding bottom zero okay now inside this v card accents i will use v row okay and inside this i will use a class margin top one and margin left and right one okay now inside this i will use v column okay with sm equal to two okay here i will use v button and here i will use small hot line and color equal to primary primary okay now here i will display the category okay so just write post cat degree post category okay now just below this column i will create one more column we column okay and here i will use sm equal to 10. and i will also use class display flex okay justify end justify end now inside this i will use b button okay and here i will use edit and now here i use color sorry color success okay and duplicate this color red and just use delete here okay now next what i will do is just below this v card action i will use v card subtitle subtitle and i will use a class head line okay now inside this i will use s3 for displaying the post title so just write post title okay now just below this v card subtitle i'll use v card text okay and here i'll use class gray text for the color of the text and here i'll use p tag and then here i'll use post content content okay duplicate this here i will display the date and time save this now if i come here then we can see the details of the let me keep here no gutters props okay save this okay now do one more thing here in buttons i will just use okay i'll use text and here also i will use text save this now you can see this is edit button this is delete button okay and this is the content of the post this is the title this is the category and this is the image okay and if you click on home page then we will display all the post here okay so next what i will do is i will work on this add post page okay so just open add post dot view file and here first i will design this page okay so here also i will use the container inside this week container i will use v row and here i will use no gutter props and inside this i will use v column with sm equal to 10 and i will use class also here mx auto to center okay inside this v column i will create a b card and here i will use class padding all five okay now insert this v card i will use v card title okay and here i will write add new post now just below this v card i will use v divider v divider and just below this v divider i will use v form and ref form i will also use a class padding all five okay and i will use ink type equal to sorry multi part slash form hyphen data okay now inside this v form i will design the input field so here i will use v text field okay now here i will use label title okay and i will also use an icon okay so here i will use prepend icon equal to equal to mdi note okay and i will also validate in this input field so here i will use rules equal to rules okay if i save this and open this page okay so it's still compiling so just wait okay now here you can see the title text field okay similarly we will create all the input fields okay so this will be four categories so here i'll write category okay and for icon here i will use mdi view list okay and just paste now this time for content okay so for content i will use i will not use this v text field instead i will use v text area okay text area and here in label i will use content okay and prepend icon will be mdi mdi note plus plus okay and rules will be rules okay save this now i will also so and icon is not displaying in this title and category so what's the problem okay so i have written mdo mdi and mdi okay okay now the icons are displaying now next we have to create a uh file chooser okay so for this i will use v file input and here i will use rules for two rules for validation and here i will use so size prop and i will also use counter prop and multiple multiple prop okay and here i will use label as select image if i save this then after compiling here you can see the image select filled now finally we have to just create a button b button and type will be submit so just write submit and class margin top 3 color will be primary so just write primary and here just write add post okay save this and our form is ready okay now first we will validate this form when i click this add post then you can see the form is not validating okay so first we will validate in this form so how to validate this form okay so here what i will do is i will just go below and here i will use script and then i will use data return and then i will use the rules rules and here inside this array i will use value okay value and then i will use value or here i will display the message this field is required okay now now if you just come here and if we just do not enter any value then the form is validating okay now next what i will do is i will just use post and then here i will use title equal to empty category equal to empty and content empty image okay and i will use another image okay here now i will create a method methods so in methods i will use select file okay and here i will write file and here i will use this dot image equal to file zero okay now next i will just use a submit submit dot sorry prevent and then submit form okay now next here in this hyphen file hyphen input we will use a change a change event and here i will write select file here okay save this now next i will define this method to submit this form okay this form this method so just copy and here what i will do is just use async and the method name now here i will create a constant constant sorry const from data equal to new from data okay and then here i will use form data dot append append okay so first i will use append image and i will get the value from this dot image okay similarly copy the same thing and here i will get the value of title and here i will use typed and again i will use category here and we will get the okay so we will get the category from post category okay so we here we have to write post and here also we have to write post okay similarly we'll get the content value from the post dot content okay now next what i will do is we have to just use v model in all these so here i will use v model and post dot title okay just copy the same thing paste it here and here i will write category okay and in content i will write post dot content okay and this uh v file input will not accept v model okay that's why here i i am using change event okay to get the file details now next i will use if statement and then here i will use this dot reps dot form dot validate okay we will check that form is validated or not if form is validated properly then we will send the form data to the server okay so for this i will use const response equal to await sorry await api sorry api dot add post method okay and here just pass form data and we have to just import this api class here okay so just use import api from api okay save this now next what i will do is i will i will redirect from add post to the home page okay so here i will use this dot router dot push okay and i will redirect to home page with the message okay so here i'll write the name where we want to redirect so i will redirect to home and then i will send some params params okay here i will send a message that will come from the server okay save this now go to home page okay now in home page what i will do is just here i will use v alert okay v alert and here i'll use border border equal to left okay close open text equal to close alert okay and color equal to green and ascent four okay and use dark prop also dismissable dismissable and here we will use v if directive okay and here i will check this dot route dot params params params.message we are checking if there is any message passed from another route to this home page route then only we will display the message okay so here just copy the same thing and paste okay save this now let's test that add post is working or not okay so just rephrase and here i'll write a name spiderman marvel spider-man content select an image okay i'm selecting this one click on add post okay so add post is not working so let me check where is the problem okay so open the codes here looks everything fine open this api.js file okay so i have defined two method with the same name okay so here we have to write update post okay save this now if you come here rephrase now just write spider man marvel spider man content select image okay and click on add post okay now here you can see post created successfully and the post is here okay so add post is also working fine now next we will see how to delete or edit a post okay so first we will see how to edit a post then we will see how to delete a post okay so for edit a post what i will do is i will create another view inside views directory edit post dot view okay now here i will use template and edit post now in routers directory in index.js file i'll create another route okay so just copy the same thing paste here here i'll write edit open post and then id here just write edit post and here just write edit post okay copy this and import the views here save this okay now next just go to this edit post but before going to do anything in this file first go to this post dot view file okay and here what i will do is i will just use two props inside this edit okay and here i will use sorry here i will use name equal to edit edit post okay and i will send a pyramid params okay the id of the post okay so id post dot underscore id okay save this now if i just click on this edit then we are going to this view edit hyphen post with the post id okay now similarly we will get the post detail by using this id okay so here what i will do is just come here go to add post select all the codings and copy and select all and paste here okay now in edit what i will do is everything will be same but here i will change this rules i will remove the rules from this file okay and next what i will do is i'll change this submit form to update form okay update form and here also i will change this to edit this post okay list will be same and all will be same here just change to update post okay from color primary to color success okay and then uh next now all will be same here i will use a lifecycle created method okay and here i will use const response equal to a weight and here i'll use api dot get post by id and here i will use this dot route dot parents dot id okay and then i will use this dot post equal to response now if i save this and now here you can see the previous values of the post is now set on this form okay but i will i i also want to display the image preview here so for this what i will do is just here just below this v file input i will use v img sorry the img and then insert this i will use src and then here i will use string literal slash post dot image okay and here i'll use with equal to 120 excel okay save this now you can see the image preview also here okay now next what i will do is just go below it will change the form sorry method to update form okay and next i will send all these fields okay along with one more that is old underscore image okay and here i will use this dot sorry this dot post dot image okay and the rest will be same now here what i will do is i will use const response instead i will use update post method okay and here i will pass id okay so first here i will use this dot route okay dot parents dot id comma and then the form data okay so form data and then we will redirect to the home page again with the message that will come from the server okay now save this just come here and here i will just change i will remove this america okay and click on update post so here we can see the post updated successfully if i want to change the image so just click on edit select a new image and click on update post okay so the image is also updated okay now let's work on delete this pro uh delete in this post okay so for this what i will do is i will just go to this post dot view file and here in this delete button i will add a click event okay so here i will use another click equal to remove post okay and here i will use post dot underscore id okay now we will just define this method here in post dot view file okay so here i will use methods and then i will use async remove post okay remove post and here i will use id as parameter because here you can see i have used this method and here i have passed an argument the id of the post okay now next here i will use const response equal to await api dot delete post okay and here i will pass the id and then here i will use this so i will redirect to the home page after deleting the post okay so here i will use name home and i will also send the success message in parameter okay so here i will write message response dot message okay save this now let's try to delete okay so go to home page first so i want to delete this spiderman record okay so just click on delete okay so now you can see post deleted successfully okay so that's it for now in next video i will show you how to prepare this project for deployment in roku.com till then thanks for watching this video please like and share this video and also subscribe this channel see you soon in the next video you

Channel: DCodeMania

Views: 4,585

Keywords: wolfmania, dcodemania, mevn stack, mern stack project, mevn tutorial 2021, mevn full stack tutorial, vuetify mevn, mevn vuetify, mevn crud application, mevn vuetify application, full stack mevn, mern stack project from scratch, venm stack, venm full stack, node express restful api, image upload multer, mevn blog application, blog app with mevn stack, vue js tutorial, vue cli 3, vue and vuetify tutorial, vue router tutorial, vue js crud app, vue js 3 tutorial

Id: -qdG_P85fFQ

Length: 63min 20sec (3800 seconds)

Published: Thu Mar 18 2021