Java Spring Boot Vue CRUD | MySQL | Docker | Swagger | VueJs | Lombook | JPA | Full Stack App

hello welcome back to another exciting session my name is mahesh karya you're watching me on youtube now and today i'm gonna take you through the full stack application with spring boot hibernate mysql as a back end and view as a friend so you have to have a few things available uh before proceeding node of course uh jdk and docker if possible you can use sam fam lamp or whatever it may be for mysql and uh jdk of course so i'm going to use next for this video so uh so it this video will be very organized video where you will learn from scratch everything so here without wasting any time let's deep dive into it so you have to have one editor available i'm using vs code you can choose any by the way there is no battery to specifically editor but last time i got comments to use like uh sts or intellij but uh off there are few plugins in vs code that you i always prefer to use like spring spring boot extension pack so you just need to install this one extension pack so that's it and if you have jdk available inside your system then you need to install one more plugin that is java projects so this is it i guess these two plugins are very important and very essential to proceed so java project manager this one okay and the last thing we are going to use long book so we don't need to use get a set of so you need to install this one as well if you are using intellij or sts so you need to install this plugin on in your respective editors so yeah without wasting any time now we can start so you just need to after installation you need need to uh go to command plata and just search for spring initializer okay and this the same process that we generally um do on uh start dot spring dot io okay so uh you can do this okay so apart from that after that you just need to uh choose your version then your language after that your group id will be io dot mahesh for now uh enter artifact id rest api enter after that the packaging format will be jar enter and the version i'm using java 16 enter after that uh for now i'll be using only web okay if you are using vs code then make sure to use only spring web for the first time okay don't use any other dependencies we'll add this later there is few uh drawbacks so this is in preview i guess so there are few things that i'm not sure that will work properly or not but uh for this tutorial we'll start with spring boot okay after that we'll install mysql gp and all so yeah enter now choose your folder inside desktop i'm going to create new folder we'll name it like spring hyphen view i guess and will contain are all the source code so inside that i'm going to generate my java project okay now you can click here on open after that you will get this link over here okay and now it will ask for the it will import the import everything you don't need to worry about anything else so yeah you just need to hit yes yeah or you can choose always as well so yes okay it will take some time so uh till then we are going to work on front-end side so front-end side will be similar we will use another window so open new window from here and here you just need to drag your folder whatever we have just created on desktop so we'll go to the desktop first okay after that we have spring view inside that i'm going to create new folder again so uh i will name it app only okay so this is the name of folder i'm going to drag this folder on the top of my another window here and after that now we can proceed with both the things side by side okay so this is my front end stuff open your terminal from here and i'm using git bash you can choose any terminal by the way so the process will be similar yarn in it if you don't have yarn already you just need to install npm install hyphen g yarn that's it and i already have it so i'm not going to install this again so yarn in it hyphen y that's it and after that you just need to create folder structure there are uh folder pattern is given by provided by next so i'm going to follow the same pattern okay uh before that i'm going to install few dependencies like uh i'm going to install yarn uh add next this is same like npm install okay okay if you are using npm it's fine so next js iphone xios because we need to install axios for to communicate with the backend stuff and you can use fetch as well it's all your choice uh and another thing is nudge slash beautify it makes sense to use beautify okay otherwise you can use tail wind or whatever you prefer it's completely fine or you can choose the cli as well that is the official cli provided by next it's all up to you but another uh extension is required that is view t e r i guess something like viewer yeah v e p u are i guess something like that i'm not sure about that plug in but the plugin is required let's see what's going on here so here you can see the java projects that the extension we have downloaded so you can see here so you don't need to work with the normal folder structure you can see all the uh that if you are familiar with eclipse or intellij so uh it makes sense and this is springboot dashboard where you can find your all the running projects all the projects so on with the just one click you can start your spring boot project so before proceeding i'm going to create a few uh we can go with the single package because this format is uh given by this springboot developers to use just single sorry i don't need to create a class i'm going to create a package over here i will name it user inside that user we are going to create uh classes okay so you can create controller entities the separate packages as well but this is the standard format that i am following after that here i need to create user class okay we will be i will contain my entity entity stuff okay here after that we'll be having my user controller controller so uh make sure to use the capital okay and after that you'll be having another i don't know why anyways so it's fine after that we'll be having a repository user repository repository okay and here we go this this will be interface which will be extended by gpa repository so before proceeding we need to install few plugins that i told you we'll install later uh you just need to right click on your pom.xml and after that you just need to uh click on add starter okay it will ask for the you want to install few more dependencies then you can simply search for like mysql you can search for gpa you can search for long book as well like that so now we have four dependencies okay uh make sure to follow this process don't install everything with the on uh when you start the new project okay so because i was getting errors so that's why i'm telling you so just hit enter okay now you can click on proceed hit ctrl s finish and click on now so it will download the dependencies so till then again we'll proceed with the front-end stuff here we already have viewer available okay you can download this thing so this is nice plugin after that i am going to create the folder structure like pages will be there okay make sure to follow this folder structure don't provide another names okay pages should be there inside pages i'm going to create a normal index dot view okay so that's it to getting started with these two things you have to do and just write vu e and you will get the suggestion of a view template i guess so i'm not getting suggestion it's fine let's try again let's try view and okay we are not getting suggestion might be because of something else let's see it's okay okay i got this now you just need to hit enter on view and here i'll be creating just one single h1 okay let's see if we get suggestion anyways h1 and now here i'll simply write hello world finish and here inside package.json you need to write one script okay scripts inside that i'll be using start script where i'll simply write next that's it finish then here you just need to hit yarn start so uh this is it i guess it will take some time then we'll see what's going on here inside rest api you just need to run this thing but before that i need to um write something inside my resource okay inside here i'll be using these things okay so you can use yaml file as well application.yaml uh because nowadays everyone likes to work on yama files so here uh all the things i have provided my username password of my database and uh localhost colon this will be my database name so before that i have to create database so i'm using docker so i just need to open my terminal otherwise i already have from here as well you can open your terminal like let's go with the powershell so here let's let me open the another terminal so it will be better so i am using this terminal you can download this from store windows store as well so check for docker iphone iphone version okay if you have it then it's completely fine then simply run docker rent iphone have fun iphone half a name name of your container will be mysql mysqldb okay and after that environment variable will be mysql uh root sorry my keyboard is not working today my secret root password okay my secret root password will be a normal password i guess that i have just provided over here the name that i have provided here this is my password so you can set your password like this another environment variable will be mysql database okay my database name will be test that i have provided over here okay and another thing is in detach mode i'll publish this thing in 3306 colon three three zero six this is it and now you need to define your image name mysql is my image name so hit enter and that's it finish for the first time it will take some time to download your image i already have image that's why uh i got it so after that now i can proceed with you can simply hit docker ps where you will see this is running eight seconds okay so now i can proceed now i just need to delete my powershell from here so i can proceed with the further things let's hit uh now inside here we'll go to this rest api and we'll click here and i can close this thing as well uh inside my front end uh you can see local host colon 3000 you i can grab this thing or you can go here and you can search for local school and 3000 you'll see this hello world so yeah vue.js is ready now now we can proceed with the another folders like we'll be having our layouts layouts will be having will contain default dot view will be having normal view okay so a default is uh everything we can wrap with this default layout like i'm gonna show you like if i have div inside that you just need to write this next okay this will be and here if you write header okay now let's see if i refresh the page okay so uh default.view it looks good to me i guess so let it be he'll say it later it might be layout i guess let's see so yeah this is layouts it will work don't worry we'll see it later after that we'll proceed with let's try to wrap this thing inside here and try again okay okay later we will see it later so after that we need a store where we will write the ux files like for the state management i'll be using user dot uh js and we'll be having user storchies where we'll get all the data okay after that here you just need to write export default and state okay and state will be having a function uh will contain the data like this is user so we'll be having a data for the first time it will have the empty data after that another thing is extrude export default or default you need to use default this time uh you just need to use const variables okay here as well we'll be using normal const variables for mutation mutations will be container object that i'll use uh you can say store data will be better to store data will contain a function okay and inside that function will pass two things the first one will be the state the current state and another one will be the data so we can set our state dot data state dot data or we can say yeah will be equal to data so this for structure will be the same for user as well so here also you need to paste this thing and where we'll be using few more things inside form will be having id will be having name for the first time it will be empty email for the first time empty password for the first time it will empty after that we'll be having store id over here and inside here as well i'll be having id so this is now i need to define this thing four times for name email and password so this is view x on big projects we always prefer to use ux because as we your project will grow you will find difficulties to manage the states that's why nowadays i'm using this view x so yeah these are the functions so we can write name here this will be our email and this is my password so this is it i get this to get started with the store after that we'll have one more file that will be next dot config dot js will contain object will export default object okay will contain build modules will be an array where we will define at next chase flash beautify and we'll be having one model that we have used that is axios this will be my models where i'll define axios and the last one is you need to write components components will equal to true this is a tigers to get started with these things so here inside pages are there there is one more folder uh components where we define components okay components will contain the table and form there table dot view and form dot view that's it i guess so inside that uh the folder structure will be similar uh sorry the syntax will be similar since we are using nux so uh it comes with the lots of uh sorry beautify so it comes with the lots of things like uh p at bar v main v container so let it will see it later so let's go with the java thing and let's see if everything is working fine so yeah everything is working fine so let's uh define here will be v app okay of main [Music] then we'll be having app bar like this i guess i'm not sure okay or not like this app bar like this so like this now we'll be having act bar title about title will contain the home for now okay and here after that we'll write this next variable over here so let's compile this one more time alt shift f for formatting this thing and let's restart this thing i don't know why this is not happening it will take some time so till then i'll go here i'll try to write some back-end stuff here oh okay i have user controller i haven't tried anything yet so here we can start with the user entity so we'll continue this will be my data okay first this will be my entity okay hit enter after that it will be my on data as well that comes with the long book after that i'll be having id i'll be having generated value that will wrap this will be public variables public uh int id okay then we'll be having public spring name [Music] and public string email then you'll be having public spring password so this three dependence sorry these three things are required okay that's it i guess now we can proceed with uh user controller here we just need to define this is my rest controller okay and after that i will write auto wired uh user repository i guess yeah user repository but we don't have user repository yet so we'll define this uh you just need to extend this thing with our user repository not user repository gpa repository gpa repository and you just need to define your model here this is my user model that will get this from here okay and the integer the data type of your uh entity so this is it i guess after that we can proceed with controller part where i will define this my user repository will name it repository okay and this is my private variable so this is it i guess now we can proceed with our gate mapping and stuff so gate mapping path will be the normal normal path okay uh return type will be the normal list of users okay list of user name will be my uh find all i guess find all will be bet better i don't have any params for now and in return i'll simply return user repository dot find all sorry repository dot find all this is it i guess this is it now we can proceed with another methods like we have get by id post put and delete so uh process will be similar this will be my gate mapping but we are having id you don't need to define these values as well just need to define path here i'll be having one id uh find one will be better i guess okay you can choose service layer as well it's all your choice so in uh this is my path variable id is my path variable so in patch variable uh and type will be in tigers uh id this is it so inside here you can write find by id where you can define id or else it might be null as well okay so this is it and this is not a written type will be single user not the list of user that's why uh the next thing is post mapping you just need to write post here but let's go with the suggestion so it will automatically import the packages required packages so this will be a normal route and here i'll use create method okay where i'll be having a request body request body will be type of user so this is my simple user now i can simply write save method over here it will return [Music] save user it will return the user created user so uh this is also the single user return type will be a single user here we will be using post put mapping so put mapping where we'll get the id from the paths here the process is similar so the name will be update will be better i guess where we'll get two things first we'll get the path variable which will be type of end and id will be there and another thing will be requested body so will be type of user so you can define user or you it's all your choice what you choose so here you just need to find something before proceeding so i'll be using uh user old user okay which will be similar to this thing okay because we are getting id so we'll get the old user first then i'll use old user dot set name okay and you can say user dot get name because all the data setters are there you don't need to write data setters because of lombok but make sure to use the dependency of lombok inside the plugin before proceeding so this is my email so this is my email last one is my password i don't know uh this is all your choice how you use it there are different uh strategies to use update pattern but uh last one is the save where we'll save the old user because the old user is updated now the last one is this is the return type will be a single user always so in case of save so here also will be having written type written type will be id integer i guess will be better because we'll just return the deleted id or destroy will be better okay and here i'll be using [Music] delayed by id if possible delete by id i guess yes this is there so this is similar to id which will come with the path variable okay will be type of end id this is it i guess and in return we will just write an id this is it the all the required things we have done let's see what's going on inside front end so in front end we are getting this thing so inside store data we have made mistake uh this is my their operator this is my function so let's see how it will work i guess yeah follow it so i don't know why the default is not working let it be so i guess this is uh working actually because you can see the hello world was it should not be there okay it's fine so let's try to grab this thing inside v container we contain a justify center and align align center as well and inside that we will wrap this next so this is not part of uh app bar this is part of main so let's move this to here alt shift tab and now it should work i guess so now you can see it's working fine let's okay so now we can proceed with the components where i'll be using my component stuff over here it's uh let's create the the layouts first inside index i'll try to create layout okay so let's have row will contain column okay will contain form form okay and let's have another column will contain table okay you can directly use this like this all the components that you will create so this is the pattern that will follow okay in form let's try to write something h1 will be form and let's try to write here as well h1 will be table so let's see if we can see side by side two things yeah this is working so now we can proceed with the remaining stub for the documentation you can go to beautify beautify inside here okay so uh you will learn everything from here just click on get started and here you can choose the components ui components like all the components that you you will like to work on you can get this from here okay just like other libraries everything is given over here but uh let's go i already have a menu so i will not go with that let's search for the table first where we'll be having a data table let's go with the data table if we can use it so let's try this out let's try this v table once let's uh grab this thing inside table if possible i'm not sure but let's not use these things i don't want this thing let's have atom will be users that i know okay i'll be having users headers will be something i guess let's try to grab headers from here okay we have hit us as well here i don't need this thing i don't need this thing so let's let's grab this thing we'll remove it later so let's grab this off for the first time so in return this is my data okay so let's let's use this data inside here okay and i don't need this thing and let's try to use this thing first before proceeding so let's have a search post let's try this out yeah wow this is working the pagination is also there so you just need to grab this thing so let's try to use user source here okay now inside here i have headers but inside headers i'll be having and be having my headers name email password edit delete kind of stuff so let's try name let's try email let's type password let's try add it and delete stuff as well okay and the process will be similar let's apply delete edit password and email this will be my name so this is it i guess and we can remove this thing for now and straight off so let's use this thing as well because we have buttons so i'll need this thing so this is the button of edit delete and view for view i don't need this thing so these two buttons are required i guess so you can write this thing this for i did this for delete this is my function name that will write okay and the rest of process will be same like we have a variable like computed okay inside that i'll be having a name uh data okay we'll uh use users over here so uh inside that this is my function will return like this dot dollar dollar store store dot users dot this this will be state state dot users dot data so from that file that we have created inside store here so you will get the data from there oh this is my data that will get here okay so this is it i guess now we need uh async page method will fetch the data okay so for that we need to do this dot dollar store dot uh commit okay where we need to define the name of file user slash your name of your function store data inside that i'll be having a await method you will fish the data from somewhere else like uh a weight i'll be using this dot dollar axios let's use dollar axios dot get and we'll get from http colon slash localhost colon 8080 support of our backend and slash users if possible will try to write inside users.data okay so this will be this is the pattern to use fetch make sure to grab this thing inside client only client only try this thing so uh this is it i guess now we need methods okay so i'm going to define methods over here methods will have all the methods to get fetch delete update so let's try to see what the method name we have given over here let's follow the same okay i have delete item delete item will get id okay or this will be async method and here i'll do the this dot dollar axios dollar axios dot dot delete delete and here i'll be using paths that will be similar you can define this thing inside environment variable or somewhere else this is constant so here the path will be this and we'll use the id over here okay and after that we need to do one more thing this is definitely how it should be there and after that we need to use this thing again to store id back to zero id back to zero let's see don't need this thing because when there will be a id as well inside form okay and then we will click on it the id will be updated so we need to get back to zero once you have deleted something so we don't need this i guess let's we just need to fetch this thing again so this is it okay once you delete something it will automatically fetch the latest users so this is the idea and after that we need edit edit user as well okay let's grab this edit item not user so edit item will contain a user okay i guess there is no need to use user as well because we already know but even though we'll use user uh because now i don't need this thing okay now we just need to update all the fields of our form okay so when i'll click on the button it will update the form so we'll use same for form for the post method and for the put method as well so this will be id 0 after that we'll be having we'll get this thing for the three more time for name email and password here i'll be using name and yes my password password will be user dot password this is my user dot email this is my user dot name and this is my user dot id okay so this is it this is it i guess now the next thing is let's go to the back end and let's see what's going on there now we need to define one more thing here inside my main file which is i don't know the user application this one so let it be we'll go here and we'll define the cross platform origin we just need to use at cross origin first one another one is to try to try to install dependency let's try to use request url as well uh request mapping will be slash users okay like this and the last one is we need to deploy define one maven dependency which will be spring fox hyphen starter let's search for the start so you will get one dependency which is very much resolved all the issues you don't need to use postman anymore let's try again bring fox okay let's try once again we'll name it spring fox boot okay this one okay so you can see now it's just updated palm.xml now you need to hit control s and click on now it will grab this thing okay just uh click here on stop we'll just start the server once again okay and hit ctrl kw to close all the files before that we need to save user controller here sure okay let's try this thing one once again so till then we'll go to here so here we have almost defined everything over here so now it's time to work on form okay so let's go to the form inside that i'll be using v form will contain all the p text field okay v text field will contain model as well so we'll see it later let's see uh model v model will be id simple id okay let's let's label it let's we can use label this will be my id for the first time so if we get the id then only we'll show the id okay otherwise we don't need to show this thing if we have id then we'll show it so this will be hidden type hidden field most of the time this is common practice to use same form for all the time for edit and delete as well so name edit and post name email and this is my password so same for password same for email same for let's go to the name okay and we don't need to define this thing here and let's uh this is it now we need button as well here we will use v button btn will be better so inside that button i click will do something on flick will do one thing that will submit something submit will be you'll get the user okay so user will be object so here we will define id name email password this is a tigers let's try this out and here you can define you can wrap this thing in something you can define h1 like you need to define action we'll use h2 let's use some br tags inside that i'll be using h2 inside h2 i'll simply write the form okay like this like this and here inside button we can we can define uh like like if we have the id let's say if we have id then we will write um edit okay if we don't have id it means we need to use submit okay this is what i feel so uh we need to grab this thing inside here okay like this so now it will work now let's try to define the data okay here we'll be having a data and data will be uh contain the object of id so we'll define id gate so here i will be using on this dot dollar store story store dot state dot user dot id like that and for set you don't need to define or set i'll be using um just this this dot on dollar store dot commit okay inside that the name of your file slash or store whatever the name id and here will pass the id okay like this and let's name it value will be better okay so let's grab this thing for the for id email name email and password okay let's go here let's define this thing for name okay this is for name okay this will be user slash store name you can define functions as well it's all your choice to minimize the code name email and here as well we'll be using email and same here we'll use the name of function that we have defined email and here we'll be using password and we will define password function name so and let's define something here uh the methods that uh methods will be this simple i guess because we have submit okay submit method we will get the user okay and let's use the method if we have user.id user.id which is not equal to zero so it means we are going to edit the user so uh let's try to use await this time this uh let's try axios dollar x0 dot what we can say well where we'll pass the http colon slash slash let's try localhost colon 8080 flash users flash we can say plus user user.id okay and uh okay this is it i guess and we need to define the data here user okay so once else i'll shift f that i use to format the page and apart from that if you don't get id it means we need to post the data okay so instead of put i'll be using post where i don't need this thing id okay and make sure to use this slash okay at the ending of this so i forgot in table i guess let's use the slash after each so it's a good practice so this is it is inside form i got this thing but before that after doing everything we need to reset the form okay so this is my async method so after that here we need to reset reset form reset means what we need to uh define this thing back to zero so let's say we have user okay and if we have so we'll update the values we can say so we can write user dot id over here three more times for email name email password name email password yes well i'll be using email and let's say name okay and let's try to define this thing over here after once you perform that operation after that here we'll be using id will be my zero to reset the form name will be back to normal email will be back to normal password will be back to empty okay and this is it to reset the form now we need to edit form okay so edit means no it's fine i guess now let's uh go to the java stuff okay it's working i guess now we can click here to recompile everything because we have installed the dependencies over here and let's say if i go to the so you can see this thing okay now if i go to the local host colon 8080 slash 8080 flash swagger ui so i should get something i guess according to me so let's see if we get some errors on one error no it's taking time but it's fine source so use dialect here let's refresh the page it should work i guess you know why this is not working user controller what the user controller pin method there is already user controller method let's see what okay this one not needed i guess he is already there in user controller let's see what the mistake we have made gate mapping get mapping boot mapping post mapping boot mapping okay gate mapping this one instead of this we should have delete mapping okay so let's save this thing okay and let's start again so now it will work i guess so yeah it's it's working so inside users will try to fetch all users first let's see if we get some errors no we are not getting error here so inside post let's try to post something like uh in here in name i'll try to pass something i don't need id i guess okay email will be my mahesh at gmail.com password will be password name will be mahesh let's try to submit this thing okay it's working fine let's try to get one let's try to define the id so here let's see if we get the error okay not getting errors we are getting response so let's try to update something over here let's add id let's define the it's not define id let's get the response that we just got okay and now let's try to edit this thing so i'll be using added symbol in front of all so it should work is the stand so yeah the data is updated let's try to delete the data again so let's go to right one here let's delete something so yeah it's deleted everything is working fine if i go back to my find all method it will provide the empty array as usual if i go to the users if i try to submit again i'll get id2 so it's working and if i refresh the page i should get at least something over here let's add it something so it's not working the edit button is not working uh let's try to go to the inspect and let's see what's happening over there inside console so we are getting this users okay got it so let's go to here there is something wrong where we are getting user slash store id okay here this is not users this is user like this oh it should work now let's refresh the page let's close this thing try to okay we have inside default we have something to see uh form components what pages index dot view okay inside form i guess we have some thing to open password the method password is not defined the property or method password is not defined inside form let's go to the form first and let's let's try to understand the password okay this one is not defined it's fine so uh this should this is because of this i guess let's use computed here let's try this once again and uh let's see okay it's we are getting something over here so it's working it's working but the password is not here let's try to refresh the page okay and let's click on edit so yeah we got instead of id we are getting password so there is something else uh here model is id name email and password okay id name email and password via submitting so it should work as expected why we are not getting id this is the issue apart from that delete will work i guess let's try to delete something let's try to refresh the page let's try to submit something first okay name will be mahesh let's submit this thing so yeah a reset form restaurant instead of rest form we need to define reset form okay it's not defined it's well this is not defined because of this okay let's use await as well no need i guess two use of it let's try this out let's refresh the page once you need to refresh page i guess so uh okay it's done let's add it why we're getting this thing inside edit let's see here we have made mistake uh when we click on add it so inside table when we are clicking on edit it means in store id store name store email password okay name email password this is perfect let's go to the user let's see id name email and password this is again perfect mutations so so i guess because of inside form here it should be password let's try this once again and let's see yeah now this is working let's try to edit something i'll put the symbol at it simple as usual and let's try to update something it's updated but we are not getting data wash here okay so it's updated so we need to update this thing as well once we submit something let's try to submit again something okay okay there should be validations as well over here so how to update this data is also important so when we click on submit thing here when you reset the form after that we need to uh make things normal so we need to call this thing one time so after everything we'll get this thing we need to update here after resetting the form let's try this once again there are editors validators are available inside documentation you can prefer to use okay let's added this thing okay we got this thing it's delayed here deleted let's try this to remove this thing okay and let's see so yeah it's working so thank you very much all of you guys for being with me supporting me all the time it's been pleasure to be here let me know inside comment box if you like this video please consider to subscribe my channel and if you want some more videos from my side please let me know i'll be more happy to make a few i used to make videos on different technologies dotnet almost all the technologies so please let me know inside comment box thank you

Channel: Mahesh Kariya

Views: 1,829

Rating: 4.9200001 out of 5

Keywords: java, spring, boot, vue, mysql, CRUD, Fullstack, Docker, Vuex, VSCode, JPA, Springfox

Id: BkSBvFo3eJs

Length: 64min 36sec (3876 seconds)

Published: Sun Jul 11 2021