JavaScript代写：COMP3322ModernTechnologiesonWorldWideWeb

发布日期: 2020-07-13

从给定的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({‘username’: ‘Eddie’, ‘password’: ‘123456’, ‘friends’:[‘Ken’, ‘Alice’, ‘Bill’]})
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({‘url’: ‘uploads/1.jpg’, ‘userid’: ‘xxxxxxx’, ‘likedby’:[‘Ken’, ‘Alice’]})
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.)