JavaScript辅导：COMP3322 Modern Technologies on World Wide Web讲解Java程序、Java程序讲解

JavaScript，。

Overview

In this assignment, we are going to develop a simple single-page social photo sharing application iAlbum using the MEAN stack (MongoDB, Express.JS, AngularJS, and Node.js).
The main work flow of iAlbum is as follows.

Upon loading, the sketch of the page is shown in Fig. 1
After a user has logged in, the sketch of the page is in Fig. 2. A list of friend albums is shown in the left division.
After clicking “My Album”, the sketch of the page is in Fig. 3. The photos in the user’s own album is displayed in the right division, together with messages of who liked a photo, deletion buttons, and new photo selection/upload buttons.
Each photo is clickable. After clicking a photo, the photo will be enlarged as in Fig. 4, together with the “liked” message and the deletion button. When the cross is clicked, the page returns to the view shown in Fig. 3.
When a friend’s album is selected in the left-hand list, the page view becomes one in Fig. 5. Photos of the friend are shown in the right division, together with messages of who liked a photo and the like buttons.
Similarly, when a photo is clicked, the photo will be enlarged as in Fig. 6, together with the “liked” message and the like button. When the cross is clicked, the page returns to the view shown in Fig. 5.

Preparations

Following steps in Lab 6, install the Node.js environment and the Express framework, create an Express project named iAlbum, add dependencies for MongoDB in package.json, and install dependencies.
Following steps in Lab 6, intall MongoDB, run MongoDB server, and create a database “assignment3” in the database server.

Insert a number of records to a userList collection in the database in the format as follows. We will assume that user names are all different in this application.

db.userList.insert({apos;usernameapos;: apos;Eddieapos;, apos;passwordapos;: apos;123456apos;, apos;friendsapos;:[apos;Kenapos;, apos;Aliceapos;, apos;Billapos;]})

Create a folder “uploads” under the public folder in your project directory. Copy a few photos to the uploads folder (due to our simplified implementation to be outlined later, we will only use .jpg photo files in this assignment). Insert a few records to a photoList collection in the database in the format as follows, each corresponding to one photo you have copied to the uploads folder. Here userid should be the value of _id generated by MongoDB for the photo owner’s record in the userList collection, which you can find out using db.userList.find().

db.photoList.insert({apos;urlapos;: apos;uploads/1.jpgapos;, apos;useridapos;: apos;xxxxxxxapos;, apos;likedbyapos;:[apos;Kenapos;, apos;Aliceapos;]})

Note that copying photos to uploads folder and inserting photo records into the photoList collection, as we do above, are only for testing purpose. We will implement the functionality of uploading photos and inserting their records to the database using iAlbum.

For implementation simplicity, in this assignment, we do not store uploaded photos in MongoDB. Instead, we store them in the harddisk under the ./public/uploads/ folder, and store the path of a photo in the photoList collection only, using which we can identify the photo in the uploads folder.

Task 1. Implement server-side logic (app.js, ./routes/albums.js)

app.js

In app.js, load the router module implemented in ./routes/albums.js. Then add the middleware to specify that all requests will be handled by this router.
Add necessary code for loading the MongoDB database you have created, creating an instance of the database, and passing the database instance for usage of all middlewares.
Also load any other modules and add other middlewares which you may need to implement this application.
Add the middleware to serve requests for static files in the public folder.
We will let the server run on the default port 3000 and launch the Express app using command “npm start”.

./routes/albums.js

In albums.js, implement the router module with middlewares to handle the following endpoints:

HTTP GET requests for /init
HTTP POST requests for /login
HTTP GET requests for /logout
HTTP GET requests for /getalbum/userid
HTTP POST request for /uploadphoto
HTTP DELETE requests for /deletephoto/photoid
HTTP PUT requests for /updatelike/photoid

Task 2 Implement the client-side code

Implement Index.html and myscripts.js as an AngularJS application.

index.html

Index.html should link to the external JavaScript file myscripts.js, directory ./public/javascripts/ and the stylesheet mystyles.css directory ./public/stylesheets/.

In index.html, include the HTML code for creating one header area contains “iAlbum” and two divisions to be displayed underneath the header area.

./public/javascripts/myscripts.js

In myscripts.js, implement the code which works together with index.html to achieve the following functionalities.

(Note: In implementing the page views, you can decide the HTML elements to use (unless specified), as long as the page views follow the sketches in Figures 1-6.)