Placeholder Image

字幕列表 影片播放

  • high in this tutorial, I'm going to show you how to develop a Web application using No J s and the Express J Swept Framework.

  • We will then deploy our application to AWS using elastic beanstalk environment.

  • We will develop a landing page where we collect and manage sales leads.

  • You can freely use the resulting source code as a starting point to develop your product.

  • And we will cover all off the concepts that you need to know to build a fully fledged Web application using Know Js we assume intermediates programming knowledge, but no background in bail application development or no genius.

  • Okay, let's get started.

  • So a little bit of background on No Jace many years back, developer Ryan Dole explored the idea of using general script for service side programming with the main motivation that existing http servers could not handle lots off simultaneous connections efficiently.

  • Meanwhile, also, Google's Chrome browser team developed a new jealous script changing from scratch called V eight and the unique property of V eight is that it was built to be much, much faster in interpreting and running JavaScript compared to the other browsers.

  • And no J s took Googles optimized V eight jealous script engine for server side programming, also creating a setup that allowed for much more scalable handling off requests and also a package manager or managing the open source.

  • Jealous crude libraries was introduced called MPM, and no Js was war.

  • Now, before we install Node.js, we're going to start by installing a script called In the Em.

  • So go ahead a type N V M in your browser and click on this link.

  • Envy Emma's short for no version manager.

  • It's a script to manage multiple active know Js versions on a single computer.

  • So let's go ahead and scroll down to copy and paste the install scripts for N V M.

  • Well paced it off terminal now.

  • I already had envy em installed, so this step may take a little longer.

  • In your case on what you need to do is close and reopen your terminal so that the Envy em script can initialize while your terminal starts.

  • You can check that your installation was successful by typing Envy em dash version.

  • We're now ready to install know Js So let's go back to jail or we're interested in the long term support version off no jizz.

  • And as off this video it is 10.15 point zero is the version that we need, So we go back to our terminal type N V M install 10 15 that zero of this step may take you a little bit longer.

  • You should have now no GS installed and being actively used just for the sake off showing you how it works.

  • You can also install other jails versions.

  • Let's go for 8 11 3 for example, and you can switch between know Js versions by typing envy em used so that switch back to using know Jay's $10.15 0 now for our application we're going to use, Express suggests.

  • So let's go ahead and visit.

  • Express Js up come express chases, a Web framework and the power off it is.

  • In its simplicity, you can develop very complex Web applications, yet it is a minimalist Web framework that is very easy to grasp, and this is the install commands for express, yes, but we're going to use another tool called the Express generator that will give us a good starting points and a directory structure.

  • So let's go ahead and copy and paste this command directory to install express generator.

  • Now here in this comment, NPM, as I mentioned, is the package manager.

  • We will use this to install packages and hear the dash G stands for a global install, which means the installation is going to happen the computer wide and not just one particle project.

  • So I'm going to press enter now.

  • But now we can go ahead and run express generator to generate our application and useful directory structure.

  • So I'm gonna copy Paste this command here, Dash Dash Few equals Puck means we're going to use pug as our HTML tempting engine.

  • So I'm just going to press enter and we have now created a directory structure for our application.

  • Now that we have January to the skeleton directory structure for our application, I want to go over each folder V creates.

  • Well, let's go ahead and start our text editor and let's take a look under my app.

  • The public folder contains our assets as it's our static files that your HTML files makes references to each HTML Files will refer to certain images such as logos and some jealous script files that need to be run on the Web page or style sheets that describe the style on a Web page.

  • The Ralphs folder contains the router.

  • Logic will get to routers in a little bit, and it's one of the key parts of our application.

  • And finally, views contain the representation off each individual html page in our application.

  • Notice that these are named park files on each of them.

  • Get converted to separate html page the BIN that the doubling file contains the initialization script for our Web server, and one off the notable files is Act Up J.

  • S.

  • This is the main entry point for our entire live application, and also we have the package that Jason File, which is a recipe that contains the list off open source packages we need to install to run our application.

  • Now let's go ahead and install these packages and run our application.

  • As it is, we go back to our terminal CD, my APP, and we type in p m stole.

  • We're pulling and installing all those packages.

  • This file contains not just the packages that we need, but also NPM allows us to fetch all the dependencies that these packages have and Now we know to run our application.

  • We need to fight this command.

  • And once I press enter, the Web server is running on Port 3000.

  • When I visit local host 3000 on my browser, I get to see this Web page served.

  • If you go back to our source code at the Js is the most important file that we care about after Js defines our application know Js express Js Applications are monolithic, meaning that every piece it's put together into a single application and let's see how that works.

  • We first important modules using the require statements and typically these modules are those ones that we find under the packages of Jason File these models here you will see that they have been imported and assigned to variable instances.

  • The one we're interested in is this express variable as you see the require statements includes the express package, assigns it to a variable and then later on, we call the constructor for express and a sign the results to a variable called up and up is an instance off on express application.

  • Typically, this is a vanilla instance, and then we make certain method coals to modify and configure our application and also use and include other modules.

  • Here we first set that the views are included in the directory called Views.

  • This is what this line does and we have as you can see, a fuse directory here and next.

  • We said that we are going to use pug as our view engine, So the APP instance that is unmodified and new gets modified by these set call.

  • And then we have certain use method calls where we defined further configuration for the components that were going to use it.

  • One off the notable ones is the index router object that we have defined in this project.

  • If you go up here, we used the require statements to include an index Js under the Routes directory, whatever that has been exported from this index.

  • Serious files assigned to index dropped variable, and this instance is then used for the path that is slash.

  • So this line means that our application is going to use index router for the slash route.

  • And that's how we also connect pieces off our application into one.

  • On a little instance, because in the extractor was defined here under index serious and it has been included from Apogee.

  • Yes, let's take a look at how the routes object is define.

  • If we go on the routes and index the Js again, we are requiring the express package.

  • We have a variable called Express and then we call router to create an instance off an express router.

  • And just as redid here, the router instance here is a vanilla instance.

  • It hasn't been modified, and then we make some certain method calls to define it further.

  • In this particular case, we're defining get method and how to handle this slash path with a function.

  • And then we export the router instance that we have created to be included by another module and act up Js includes that rotter here and that's how we connected and the router objects to recap is a vanilla instance that we make some modifications on it and then well, we exported and this pattern is used throughout the application.

  • This is how you divide your application into separate instances.

  • Now let's take a look at what they route Handler is and how it works.

  • Here we have a router variable that is an instance often expressed router, and this rotter variable has several components that we care about.

  • The 1st 1 is that we're making a call to get on.

  • This defines that the routes handler is associated with the get http method and then the second cup over.

  • Interested in is the path.

  • So typically, a router will match a particular path using a u.

  • R l.

  • And then finally, there's a handler that gets cold if a path is matched to look at it more closely.

  • If this is our girl, the first section defines the protocol being used, and the 2nd 1 is the domain.

  • And then finally, after the slash Here we have a path components.

  • So a router object will look at this path and see if it is a match for the path that it has in its own definition.

  • Finally, the router will call the handler that's associated with it.

  • The last bit of detail here is that the get method here is defining the http method that this route handler is limited to it only response to this get method.

  • If there are no routes that match for a given path or http method our application generates a 44 error, which means not found so as a recap under routes index that Js were creating an express instance.

  • And then we're calling Express that router to create a router instance and on this rotter were defining that for the http gets method If we are looking for the path slash and it gets matched, we call this function as our handler for this route and under app dot Js we have index Trotter representing our exports from routes slash index file.

  • And then we have this statement here at that use and for the slash path we're using index tractor effectively meaning that when we type this route a path with no slash or slash it, it means the same thing.

  • Essentially on when we press enter, we call the route handler that's defined here, which renders our index page.

  • And that's how essentially our route handler works before we dive into source code and define roots and handlers.

  • Let's cover about an http request is and how a request sequence works.

  • The http short for hypertext transfer political defines multiple methods for browsers to communicate with Web servers and the http methods allow the browser to take different actions.

  • The get methods simply fetches a resource from the Web server, such as a Web page.

  • When we make an http get requests, the server typically responds with a resource such as adjacent object or an HTML filing.

  • In our current scenario, we are interested in sending back on HTML Web page, and we use the express genius specific method called Resident Render.

  • A resolute render will generate an HTML page, and our Web server will respond back to the browser request with a Web page.

  • And the other method we're interested in is called http Post.

  • This is typically used for submitting data to a Web server.

  • When you fill out a form on a Web page and you press the submit button, the data is sent to the Web server and typically on http Post method is used.

  • There are multiple http methods, and what method is to be used is defined in the form definition on that particular HTML page.

  • But most of the time, and almost always, a post request is used.

  • And once the server received the Post request, it does something with the scent data, such as updating database and then the server typically calls the rez that redirect method again.

  • This is specific to express Js to redirect the browser to another girl or path.

  • So the server response with a redirect after processing data back to the browser.

  • And finally the browser will do another http get request as 1/3 step fetching the route that it has been redirected to.

  • Now there are a few more http methods, but this gives you the foundation for developing a rich Web application.

  • Now you know enough to develop routes, route handlers and develop your application.

  • One of the issues with our route handler is that the logic that matches a your L pattern is here, but also the handler function.

  • The handler logic itself is defined as part of the room Chandler, and what we want to do is separate these two so that we have a modular approach.

  • So we go to our terminal and I'm going to create a directory called Controllers.

  • Controllers essentially are a collection off route.

  • Chandler's.

  • I'm going to copy dysfunction from here and place it under controllers in a new file saved here and give it a name called Index and Save it with the name in the extra Js.

  • And if I go back to the couch defined Index as an instance off what we have exported from our controller's index Js file, I can now refer to the handler that I've defined from this route file.

  • So if I go back to controllers as a recap, we have an index of Js, and we have a method called Index that were exporting as our handler and under our routes, let let's save this file again on under our routes.

  • We are importing it as very well instance called Index, and we're assigning the index handler for this route.

  • Let's now save our application restarted and see if it will work restarting the application and typing this your L and it's working.

  • So controllers allow us to separate handler logic.

  • As you've seen this example from the roots handler logic, we're going to build many more of these controllers now.

  • Let's take a closer look at what our controller function does, So if you go under controller's index of Js, we named our function as Index, and the only call it has is to a coal called rez that render the resurrected ER called Renders an HTML page from a template.

  • The first arguments is the name off the template files, which is index.

  • If you see on their views directly, we have a file called Index of Pug, and the second argument is a JavaScript object with key value pair.

  • The key is title, and the value is expressed now under abduct Js.

  • We did define our view engine as pug, and we did define that the views are located under the Views directory, so express Jay's knows where to search as the starting point for view files.

  • So when we pass Index as the first argument, it will go and look at the Views directory and find that there's an index that bug file here.

  • And then pug will convert this template into a real HTML.

  • If we look at this second perimeter again Title Colon Express.

  • We also pass this as a perimeter to pug, so if you look at index that park, it will use variable and replace it with its value.

  • There are two cases where the value is being used here.

  • We'll get to this when we look at a park in more detail, but essentially, our controller function simply renders an HTML pages responds with a HTML page back to the requesting browser.

  • Now is a good time to use version control and checking all the files that we have created by assuming that you've installed gets and I'm going to initialize a git repositories here by typing gets in it d be.

  • Now we initialize the repertory and you can check that we have created They got Skid file in the current directory that stores all the files by R V.

  • Chip A story.

  • Now I worked a chicken old files.

  • Look, before I do that, I need to create a file.

  • Cold gets ignore under my app.

  • Lets create that file and type northern modules.

  • It's because no models are installed open source files.

  • They're not part of our projects.

  • And get ignore file.

  • Having no models will exclude those files.

  • All of these files from our version control typically any file that gets also generated or external to your re positive.

  • You should exclude by using a get ignore file.

  • Okay, going back to the terminal, I'm going to make my first comets by typing gets add dots dots here, representing the current directory.

  • So I'm going to add all the files in my current directory to the get index and commit them by typing gets commits, dash a meaning, commits everything that is in the index to get.

  • So as you can see, we have a bunch of files being committed, and we're also including get ignore file.

  • So it's like initial comments and save and exits, and we have essentially committed our first change to argue depository to get the full source code for the tutorials.

  • If you go to this website and scroll below, he will see posts with programming snippets as well as the link to the source code for those tutorials.

  • And if you have questions, you can click on this button on the same page, become a member, it's free, and then you will be able to add comments for tutorials and get answers.

  • Now, one of the problems we have is that every time we make a modification in one off our source files, we need to restart our Web server because the changes made to source files are not being recognized.

  • And in order to remedy this problem, there's a tool called no Dimon that we're going to install.

  • So I'm going to stop our Web server, and I'm going to install no moment by typing and PM install no old alone and then also typing save a dash death.

  • What this does is the safe that will save normal as a developer dependency, meaning that we only need to install it when we are developing our application.

  • So if we go under packaged on Jason, we now see that Norman is a developer dependency.

  • And now we need to modify this line so that in the case off on environments where we're in production, we're still using the standards note command.

  • But in case off development, we're going to run note moment instead that monitors for changes in the source files and restarts our Web server.

  • So for the start scripts, I'm gonna go ahead and type.

  • If environments is production, then we use note that's being www else.

  • We use node mon being www and then if I now this should work, and we are going to use notable to monitor our Web server.

  • So let's go ahead and try running this.

  • Okay.

  • As you can see, no demon has started and when we make any source code changes, it's going to automatically restart our Web server.

  • Now is a good time to make a good comments because we've been stolen normal.

  • So I'm going to get at Packaged Jason and then get commits.

  • Dash cam.

  • You still know more.

  • Now I'm going to cover the most common application development better where we are going to build a landing page with various routes to collect sales leads, manage them, view them, delete them and let's go ahead and rename the variable index as lending.

  • Because we're going to build the landing page and our controller is going to be cold lending.

  • We're going to name our first method that gets our landing page as gets landing.

  • If we call, he saved this file and go to Controller's Index Js.

  • Let's let's reading this file as Landing Js and first function is going to be gets landing and also but three.

  • Name the view.

  • Now when we fix this file, we're going to display a form where if a visitor likes our service, where our value proposition, they will enter their email address and send us that information in A So I go under views, landing the puck, and right below this paragraph, I'm going to designed a four off the form element takes one perimeter called the action.

  • When we submit the form which path we're going to use is defined by action.

  • So I put a coma for the second perimeter.

  • I'm going to use the method called post when you submit a form.

  • The method that has been defined in the form is the one that the browser will use for making the request.

  • So we're interested in using the postman, and I'm going to define improved elements off type email, and we're going to use a placeholder that's right here.

  • Enter your email address.

  • Notice how there is an indentation here.

  • Pug nests html elements by using indentation so inside form we have nested on input, and also, typically, we want to nest a button inside a form so that the button is associating with that for, so I'm going to define a bottom elements off type Submit when this is a submit button that indicates that we're going to submit the form that the bottom is nested in.

  • We're going to use a name for the button called submits, and I'm going to now save this form.

  • Let's make sure all of the files are saved.

  • And if I now restart my application, I should see the form being served by the center here.

  • Right?

  • So we have this internal email address form with an input and then a summit.

  • But we're also going to commit our changes by typing gets at because we renamed some files we need to explicitly add to get at views.

  • Had Fuller's Let's see if we have captured all the files I do get Comet stash a committal, the changes landing the part as being registered as a new file.

  • And so is Controller Landing of Js.

  • But we missed views landing that part.

  • So I'm going to explicitly at that file, blending the park.

  • Okay, now, if by comets, we should be covered with all the files that we have renamed and added gets so I'm going to write a comet message finding Paige getting started first for typically what in gets you first summarize your change in a single line, and then you would leave an empty space and then include further information in the second paragraph.

  • But at this point, we don't need to mention much, just going to leave it at the first light.

  • Now that we have defined this form, we're going to develop our first post routes.

  • So I go to routes in next O.

  • J s and include the new router with the post http method.

  • And then I'm going to use a new handler called Landing that submits lied because we're looking for Sands leads.

  • It is called Summit League.

  • Going to save this file, go to the controllers landing of Js just going to copy and paste This first number that we have and I'm going to name the 2nd 1 as submits leads when we submit our forms from landing the park.

  • There's the skin put elements we forgot to name it.

  • So I'm going to define a name for it's called lead email.

  • When the form is submitted from that browser, we're going to be ableto access the value inside this import elements with the name Lee email By going to our controller, let's delete this statement here.

  • We're going to print out the important items that we have received lead email and the way we do that is by using the body parse er library.

  • We are going to do wreck.

  • That's buddy.

  • Lead email to print out the value I believe I need to includes the package called Body Part Sir, in a pub Js for this to work.

  • But it turns out express Js already includes this functionality.

  • This allows us to retrieve the values for improved elements.

  • When there's a handler for a post request, you fee simply direct the body that the email.

  • We're going to be able to access the value inside infidelity.

  • Now this handler is successfully reading this data, but we can't leave it at that.

  • We need to conclude the request, so we're going to do arrest.

  • That's redirect, and we're going to use the original path off Slash so that we go back to the landing page for now.

  • I want to save this and we're already running the application.

  • Let's see what happens if we submit an email address here.

  • My email at domaine dot com.

  • So I'm going to press submit.

  • As you can see, the browser was redirected to the same page, but let's see what happened in our consul.

  • We were able to receive the value and printed Let's check in all the changes we made, so let's go to our terminal and type gets add controllers landing J's at Routes Index Js on.

  • We also modifying our files are going to get adv use Landing that pug and comments landing page pulls throat to submit email so we're able to receive data in our application but were not able to do much with it.

  • So we're going to install a database SQL database particular Post grace for our application.

  • Go ahead and open up your browser and type of home brew.

  • Home Brew is a package manager for Mac OS, and one off the packages maintained is the Post Rescue L package, so you can copy and paste this installation script on your terminal.

  • If you're on a quest to install Homebrew, let's go ahead and just do that.

  • And it's going to install a command line tool called Brew, which will allow you to then install very spec ages, including a post rescue.

  • Now I have it already installed, so I'm going to skip this step.

  • Assuming you have stole this, we can then install post dress by typing brew stall post rescue L So after you've done that, you can start your database by typing brew Service's starts Post grace que Well, this is going to start steeples.

  • Chris.

  • Process in the background on your machine so that you can connect to it and create databases many plate tables do things with.

  • So I've already run this command, so I already have my database running.

  • We're going to use a tool called P SQL to connect to our database and make some changes.

  • So I'm going to try P SQL Post GREss to connect.

  • And if everything goes well, you should see the Post Rescue El prompt, and now we're ready to create our database.

  • First, we create a user that can access that database by typing Create Roll Express and the P.

  • D.

  • B user.

  • I'm assuming here that going to use the name express an MVP for our application.

  • So I'm just adding a Dash D B user for that and with Logan passwords.

  • Make the past for simple for now and press enter, and now I'm going to create our database by typing creates Database Express and V.

  • P.

  • D.

  • B.

  • In case you want to delete these roles or databases and redo the same commands.

  • You can do that by typing a drop database or drop roll.

  • So we're now ready with Rabies.

  • I'm going to quit Spee SQL by doing the control d We're done with our database it up.

  • Now.

  • We're interested in using a library for accessing our data base from Java script and manipulating data.

  • And for this, we're going to use an object Relational member library shortly Called on.

  • Oh, are we picked sequel eyes as our choice of or M?

  • If you go ahead and type sequel eyes in your browser, we're going to find a website for it as equalizes a stable and popular or in for no J.

  • S.

  • And it will work well for most of our needs on the warrant greatly simplifies the type of queries you have to write for manipulating database tables and rose.

  • Instead of typing long error prone screw inquiries and order, let's you generate those queries by writing jealous script.

  • Okay, so let's go ahead and open up our terminal again and type NPM stole sequel eyes.

  • This will install seek allies as a package I recommend doing that stash is safe so that it's safe to our package.

  • Jason FILE.

  • We're also interested in the database driver library in Know Js for Post Rescue Earl, which is simply called PG, So I'm going to go ahead and type MPM install P g Dash Dash Save as well.

  • See Equalized.

  • Will invoke PG in order to access the Post Grad School.

  • Al Davis This is a low level library for accessing Post Grad school databases.

  • The other tools that we need is a common line to force equalize called sequelae.

  • See, ELISA, I'm working stole that as well.

  • By typing, MPM stole sequel eyes that cli and I'm going to use Dash G so that Coke lose our installation for most pressing, C equalized.

  • Now we're going to create some configuration files so that our application and sequel eyes can access our database.

  • And for that we're going to use the tools secret allies cli.

  • But before we start, we need to first create a configuration file for secret allies.

  • CLI.

  • So that's the default paths we use are going to be defined.

  • Let's go ahead and create a file called that secret allies are see in the root of our projects.

  • Typing touched That's sequel.

  • Eyes are Sea and let's open up our editor.

  • When we open a sequel, eyes are see.

  • We see certain paths defined.

  • Let's remove the Devi path and let's keep it empty.

  • For now, we want to create these directories directly under our application route forward so that there accessible easier with one less steps.

  • Let's go ahead and save this file, and now we're ready to generate some files.

  • So I'm going to buy secret lies in it.

  • And we have created several folders the conflict slash conflict, that Jason's the one we're interested.

  • This is defines the database details.

  • Let's open up our editor again and go to convict slash conflict Js We have three environments to find you one for developments test.

  • Also want for election.

  • So I'm going to apply peer model that exports equals and for developments.

  • We define the database user name as Express and VP Dash Devi user as our password.

  • We find 123456 and for our database these air the users and database recreated using the P SQL woman previously, So we're going to type expressed M v P.

  • D.

  • Be at our host is 127 years ago.

  • On this stands for the local host the database for using his post grace.

  • We're going to use the dialect Post Press here.

  • There's one more parents are missing here.

  • The port perimeter.

  • Typically for most crimes database, that is.

  • 5432 I'm currently not going to touch the other environments and going to save this one here, so we should be now ready to access our database from sequel eyes using our application.

  • Now I'm going to go back to the terminal to commit some of the changes that were made so far.

  • We installed secret lies in the PG library, so we've modified our package that Jason let's go ahead and create a comment for that change.

  • We have added sequel eyes and PG packages to save this comet.

  • We also defined a sequel, Eyes that are See Files weren't going to add that one as well and commits this change.

  • Corporation filed for sequel Eyes CLI and I've also created a configuration file for our database connection, so I'm going to commit this file with it.

  • There's also one more fire that I'd like to introduce to you briefly under models when we ran sequel Izing it.

  • We define the file called Index of Justice Will initialize seek allies When we run our application, it takes the environment that we define other conflict Js and then creates a new sequel, Eyes instance, using the database credentials that we have created.

  • So this is the initialization file.

  • It was also generated when we typed sequel Lies in its, So I'm going to check this file in as well.

  • On the file.

  • Name is always index of Js under models, and this is a specific file just for initializing sequel eyes.

  • So I'm going to commit these changes configuration file for a sequel.

  • Eyes on the script as a recap for where we left off.

  • We can visit our landing page and then submit an email address to our application and display the email address collected as a consul log.

  • Now that we have installed our database and sold sequel eyes where am configured it?

  • We're ready to define our first model as well as the first migration.

  • So let's go ahead into our text editor and creates a new boulder, holds migrations and let's create a new vial under models directory named lead The Js since were collecting sales leads.

  • Our table and model will be named Leeds Migrations.

  • Allow us to create recipes to take our database states the database definition from point A to Point B, for example.

  • Right now we have no tables in our database, even though it has been created.

  • And with the migration recipe, we will be able to create our first table that represents our sales leads.

  • And we will run that migration to create our first table and start accessing it.

  • And the model definition is used by sea equalized to create, to generate the methods for accessing the table and to update the table to take database actions such as creating roles, deleting rolls, dating rose and fields.

  • And, in contrast, migrations are used for manipulating the database table definitions themselves, such as creating a table, adding a new column or changing the type off the Cole Liam in that table.

  • The migration find that we're going to create is highly specific to seek allies.

  • Seek relies has so little methods for accessing and many plating a post Chris come out database.

  • But the migration itself is file a recipe that's specific to equalize, and so is the model that we're going to define.

  • So let's go ahead and creates a new migration file.

  • And let's define our first table.

  • I'm going to copy and paste this code that I have already prepared as our first migration.

  • Let's first save this file.

  • Migrations are a sequential in the sense that they need to be run in order.

  • They don't make sense if they around without an order.

  • So we need to order them by the file name.

  • And we do that by including a date, starting with the year among and the hour and even the minutes when the migration is created.

  • So as of now, we're in January 4th 2019.

  • So I'm going to name my migration as 2019 0104 and then the hour is 1917 and I'm going to include the action that this migration is going to take, which is creating a table.

  • Names lead, so create leads table, and they're finally that's a Js.

  • Here is our first migration saved, and the migrations are bidirectional, so you can apply a migration represented by the up methods, and then you can roll back a migration by using a down method.

  • So in this case, the up method stands for creating a new table Cold leads with so and so fields, and then the down methods or action represents.

  • Dropping the table will effectively cause the table to be deleted from our database.

  • Now, if you look at the fields that are being generated first, obviously have an idea.

  • Field and I d represents a unique call.

  • Liam in our database, and it's represented by universally unique I.

  • D.

  • Type and Secret lies has that type of built in for us, and typically we need a created at an updated that field for each role.

  • When a new role is created, this date will be relevant, and each time a row is updated, this second field updated that is going to be irrelevant.

  • And finally, the actual field.

  • The data that we were collecting in our application is an email address that we're including Field called email off Type C equalized strength.

  • So we have saved this migration.

  • We can go ahead and run it by typing.

  • C equalized d be migrate.

  • The command has succeeded, which means we have created the table called leads in our database.

  • Now we need to define the sequel Eyes Model definition for the table we just created.

  • So let's open our editor and create a new file on their models.

  • Hold lead that Js I'm going to copy and paste the definition that I created earlier.

  • For this.

  • This just could model file is specific to secret lies.

  • A secret Lies will generate the methods it needs to access the database table.

  • By using this model definition, we define our i D field in the model, which is a primary key.

  • And then we define an email field as well, which is off type string.

  • Notice how these fields match the migration.

  • We just ran for the leads table, and we omitted the creator that updated that fields in the model because, see, equalized assumes they always exist.

  • When we run the application.

  • Secret allies will run models index dot Js If you will get this for each section, it will go over each model definition under the Models directory to import and use for accessing the respective database Things under models directory for each day of a stable redefine a model such as the one we created for leader Js for leads table and sequel Eyes will go over each of those to generate the methods so that it can access those tables.

  • In order to achieve this, we need to go to the initialization file being slash www and here initialize secret lies.

  • For that we need to first created very cold models and imports the models directory and thes three lines.

  • Starts our server listening.

  • One particular reports We're going to modify this cold a little bit.

  • We're going to type return models that sequel eyes sink and then results.

  • I'm going to cut and paste this portion inside the body off this Cole.

  • Okay, we're not ready to further develop our application.

  • And Ron Secret lies queries.

  • Before we go any further, let's check in the files that we have just created.

  • So I'm going to add the migration we created.

  • Quit the spoils, create migration for leads table for creating leads, table handwork, chicken the model as well Models lead the Js.

  • We're also going to check in the changes we made all the initialization file being slash www initialize equalize being that we don't now that we have a database set up.

  • We can implement the post route where we will save an email address to our database.

  • So let's go and open up our editor and go to controller slash landing Js.

  • We're going to modify the summit League handler to save the email address collected to our database.

  • So let's go to the top and then type Coast models equals require doctor Slash models.

  • Models gives us access to the secret lies methods for the model that we have defined.

  • And I'm going to life return models that lead that creates.

  • Not that create is a sequel.

  • Eyes methods for the email field.

  • We're going to use the value revolting from wreck body leads e mail, then take the results and redirect back to the landing stage and lets his elite this last line of the first line safe and rerun our application.

  • If I go back to the landing page type of email address year is running at gmail dot com and submit notice that the browser reloaded the landing patient.

  • That's because off the Treasury director and I'm assuming that the creates Cole has succeeded.

  • If you go back to our terminal, we see this SQL statement here generated by sea equalized run bys equalized.

  • We're inserting a new roll into the league stable, particularly I'd email created that updated that Fields knew a unique I d for the role and then the email address we just submitted and then the dates.

  • So we've successfully saved the email address in our database.

  • Let's commit the changes we made.

  • So I'm going to like it.

  • Adds controllers landing Js and then commit to change safe please collected on landing page.

  • We save email addresses collected back to the database.

  • We're going to implement the most common red development pattern shortly known as Krug, which stands for create update and delete.

  • We've already done the creation off leads with this route, and now we're going to define new routes that allow us to do listing, editing, updating and deleting athletes.

  • So and the 1st 1 we will cover is for listing the lead.

  • So let's define a new routes with the path slash leads and the handler called as show leads.

  • Let's save this file and let's go to controllers landing the Js to defying our new handler.

  • Let's copy and paste the 1st 1 we created.

  • That's name it as show leads.

  • Now all we need to do is fetch the leads from the database, and for that we're going to call models, lead that find all and then we will be returned on object.

  • Let's name it as Leeds and let's cut this line with the resurrected ER and pasted inside the body here.

  • A few things to know this Cole here is a promise We're gonna cover promises in detail later.

  • But for now, what you need to know is that this call is going to execute a synchronously, and the then here ensures that the results within this body are available after the execution off this Cole has completed.

  • So there's a guarantee that this body is going to be available after this execution.

  • Even though the coal is a synchronous, we'll get to those later.

  • And the final method is defined by sequel eyes, and also the leads object here contains the roles return from the database and also the methods to access those rose.

  • So as you can recall the render method, the second perimeter is a knob.

  • Jek passed to our view file.

  • We're going to define a new key here called leads and assigning value off our object leads and save this file.

  • And one more thing to note is that this view file usually typically we use a different view file for each purpose.

  • But for the time being, we're going to the same landing view file toe also show the collection off leads.

  • Now let's go to views landing that punk.

  • We're going to type.

  • If Leeds Puck will check that if the leads variable is non zero, it's going to include the rest off the HTML snippets.

  • Let's type if Leeds and then let's define the heather here cold with text leads.

  • Park also has the capability off alteration we're going to do for lead in Leeds.

  • Note that leads is on array of objects off type lead.

  • We're going to create a paragraph and type lead the email now Part considers that anything off that comes after the P is text.

  • We don't want to display this Aztecs that we want to use the pug way off park syntax off the referencing this variable, which we used here by typing hash open curry brackets and then caused curly brackets.

  • Let's save this landing file and go to our terminal.

  • Our application is still running, so let's school to our browser and type local host three thousands.

  • There's one more thing we want to do.

  • Let's go back to the landing Js controller.

  • Now, instead of redirecting to see slash route, we actually wants to go to the leads rout when we submit a new lead.

  • So that's the change.

  • We make sure that the this new routes that we define is going to be triggered, which will call this show leads function.

  • Okay, so if you go back to our browser, let me submits a new email address.

  • Lead one email dot com, and when I submit this, I see the list off leads on the same page and notice how the browser went to slash leads routes because off the change we just made.

  • So let's check in the changes we made.

  • So I'm going to do get ads from Fuller's Landing Js.

  • You add routes in extraneous and as abuse landing the puck.

  • Clement's Leaves roads show a collection off lease upon submission.

  • Now we want to take a look at the details off each individual lead, so let's define a new routes called slash lead slash colon lead on the score i d.

  • And let's find a handler landing that show.

  • Underscore lead Now Two interesting things here.

  • Firstly, we defined slash, slash as a unique path component to match individual leads on notice how this path is unique and different than the other routes re defined.

  • We will handle all details off on individual lied under slash slash path component, which gives a sort of a name space to work on individual lease.

  • The coal on here defines lead i d as a perimeter as a request perimeter.

  • That means whatever that comes into your l you type in the browser after slash Slash is going to be captured in a request perimeter named lead on the score I D.

  • And we can then access the value of despair emitter in the Rue Dentler Short lead.

  • Now let's go to controllers landing Js and copy and Paste one off the handlers we already have.

  • That's name it as show lead, and what we need to do now is query the database for a leagues with a given I D.

  • So I need to do return models.

  • That's lead finds one.

  • And then the wear clause helps us query for a particular feeling.

  • We're going to use the idea Fields, and we're going to pass the request perimeter that we received named as lead I d to find the particular the lead record in the database corresponding toe our leads?

  • No, this will return a lead value.

  • Let's go ahead and delete this portion and here we're going to do rest render.

  • We're going to define a new view file called Lead and Pass an object with Ki lead, assigning it the database object that we received.

  • Now let's save this file and go ahead and creates and you file on the reviews called Lead Let's Go pay the initial portion off Landing that Buck.

  • Let's define on H one lead Heather and let's simply define a paragraph with the lead information.

  • Leave the email.

  • Now Let's go to landing that park.

  • We want to give the user and opportunity to click on a link that takes us to the individual details page for that link, and we don't have that leak here, so I'm going to add that to this paragraph.

  • But I would like to display both the leads email and also that link on a single line the same life.

  • So I'm going to nest the link and the E mail under the same paragraph as a reminder.

  • We nest HTML elements with indentation in pug, so I'm going to first define under the paragraph a spend elements that will display our email.

  • And also this character that I'm typing is used for text and also to display spaces in park.

  • So I'm going to include one space character and define our link with the ankle tag with an H ref property off slash lead slash And now here We already have access to the lead object that has been obtained from the database so we can include the idea off the lead here by typing lead that I D.

  • And we're going to use the text details in the link.

  • So now this link is going to point.

  • That's the path slash, slash plus the database.

  • I d off the lead.

  • So let's save this.

  • And from our application, everything seems to work fine.

  • So let's open up our browser type local host.

  • Three thousands.

  • Let's submits new leads, new leads.

  • That's you mean that Come and see that we're able to display both the leads and also the details link for those leads.

  • I'm going to click one off them were now navigated to that path, and we're able to display the lead information.

  • Now it's chicken.

  • All the changes.

  • We mates at views, add controllers and Rawls.

  • And if you commit now, I have a new routes to display.

  • Lead details.

  • Let's go back to routes slash index that Jason We're now going to define the routes for editing individual leads.

  • So let's like router that gets slash lead slash colon lead underscore i d.

  • And we're going to define a new action for this particular lead i D.

  • Which is going to be.

  • Slash edits, and we're going to define a new handler with landing the Sure it's leads.

  • Now this is a gay trout, which means that we're going to fetch a new Web page for the purpose off editing the lead idea.

  • So we're going to deliver a form that contains information about this lead i d.

  • By using the show it it leads Handler.

  • Let's type Rh altered a post slash lead slash Coulombe leads i d slash it is and define a new handler called headed underscore lead here.

  • The first route we define shows the form for editing the lead i d.

  • And the seconds around we defined, which is a post, submits the form to edit the lead idea.

  • Now there's one key point here.

  • We are highly interested in defining the same path component for the gets and the post routes.

  • And this is because on an error when we handle the Post Request, if we re render the same page, we want the girl in the browser to match the original get request.

  • We're going to go into more detail about this when we cover era Hedley.

  • Now let's get started by creating the link that will take us to the edit trails for the lead.

  • For that, let's open up views.

  • Lead that bug.

  • We're going to modify this by creating a span under the paragraph, and we're also going to create a link on Iike a tech within a trip off slash lead slash plus lead.

  • The I d.

  • Remember that we have the lead database old J available to us so we can reference it's i D.

  • And also we're going to add the slash its path for editing the elite.

  • Now let's write.

  • It is for this link and save this file and notice how the value off this H F property corresponds to the get route we define here.

  • Now let's define the handler for this stroll.

  • It's Lee drought by going to controllers and landing the Js.

  • Let's copy and paste one off the handlers here and call it show It's Underscore League.

  • Now this handler also obtains one lead record from the database by using the lead i d perimeter and then we're going to instead off displaying the lead.

  • We're going to display a form where we can edit and submit the updates on a lead.

  • So I'm going to call this it on their score lead as we're going to use a directory cold lead for all the view files where we manipulate each lead.

  • So I'm going to finally call this lead slash It bleeds.

  • Now let's say this controller and create a sub folder on their views.

  • Cold leads on also creates a new punk file.

  • Cool.

  • It's underscore.

  • Lead that puck.

  • Now let's go to landing that Park and cookie the beginning.

  • Portia to AIDS leads and Now we're going to create a form.

  • Other end.

  • It leads where we will modify.

  • We will have the opportunity to modify the lead so we can copy some cold from landing that pottery or where we already had a form.

  • I'm going to copy this form and input element and the button elements, too.

  • It leads now.

  • The action for our form needs to reflect the route that we define here,

high in this tutorial, I'm going to show you how to develop a Web application using No J s and the Express J Swept Framework.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

Express.js和Node.js初學者課程--完整教程。 (Express.js & Node.js Course for Beginners - Full Tutorial)

  • 0 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字