Vous n'êtes pas connecté. Connexion
|
|
TP Express CRUDDe $1Table des matières
IntroductionPour le moment, on a pas de base de données, donc on va juste simuler... Mais on prépare le routage, la page d'accueil etc. J'ai copié un TP de Peter Sander qu'il donne dans le cadre du cours "Programmable Web server-side" à Polytech (je donne le cours "client-side"). Dans cet exemple on utilise un générateur d'appli qui font du CRUD à l'aide du module express-generator. Par ailleurs, nous n'allons pas utiliser app.update et app.delete pour les opérations de suppression et mise à jour, car pour tester, il nous faudrait écrire un client Ajax. Pour le moment on fera cela avec du GET, par la suite il suffira de changer app.get en app.update, lorsque nous aurons un client Ajax.
Simple example of CRUD routingHere, we're concerned with how browser URLs get mapped to our application code. For example, when we type localhost:3000 into the browser address bar, we want our application to display the project home page in the browser. When we type localhost:3000/read we'd like everything in the database to display. Typing localhost:3000/read/foo would read and display the specific item indexed by foo. And so on. To simplify and to concentrate just on the routing
ToolsWe'll assume you've already got npm, Node.js and express installed. You'll also need
Getting started
This should spew out some lines indicating that it's creating files and then the routing directory should contain: app.js bin package.json public routes views
This should spew out some lines indicating what modules it's getting. There should now be a new directory node-modules with the necessary modules stored locally to the project. Storing the modules locally is generally a good idea to prevent updates to the global modules from breaking a running application that might rely on older versions.
We're ready to roll. To start up the server
We need to restart the server with the above line after every code change in the stuff below. Read with GETWe're going to get information from the server (which really should be getting it from the database) to the client browser. Home pageThe first modification to app.js is to get rid of the template and just hard-wire some HTML for the home page. Make it look like this var express = require('express'); Pretty trivial: localhost:3000 just displays a header saying what's up. NB: All further additions to app.js in what follows go before the module.exports = router; line. This is important. All itemsThe idea now is to get all items from the database. Adding /* Read stuff. */ and browsing to localhost:3000/read in the address bar should do it. The line // get all entities from db is where the code to actually access the database would go. Specific itemNow we'd like to get just one specific item from the database. Adding /* GET something specific. */ and browsing to localhost:3000/read/foo should do it. Well, that was pretty dull. Create with POSTNow comes the wildly exciting part - getting information from the browser to the server. This is a multi-step process
The first modification to app.js is to get the modules needed to parse the form. The start of the file should look like this var express = require('express'); Then add /* Create stuff. */ to the end of the file. The first block puts up a very simple form on the browser when the URL localhost:3000/create is typed into the address bar The second block parses the form when it's submitted to the server, and then in reality would talk to the database. Take a moment to catch your breath. Delete with...GETSpecific item via URLHuh? How come this isn't titled Delete with DELETE? Well, the browser address bar can only cope with GET, so we have to improvise and DELETE with GET. Fortunately that's not too hard. Add the following /* Delete stuff. Now localhost:3000/delete/foo in the browser address bar will remove the item foo from the database. Specific item via formWe can also send a form where the information on what to delete is to be filled in. Note that the form is POSTed back to the server; forms don't do PUT. /* DELETE something specific by posting a form. Then just localhost:3000/delete will bring up the form. Update with...GETSpecific item via formSame deal as with DELETE - the address bar can only send GET, and a form can only GET and POST /* Update stuff. Summary
|
|||||||||||||||||||||||||||||||||
Powered by MindTouch Deki Open Source Edition v.8.08 |