The frontend of the final year project Custom Outfit App.
-
Table Of Contents
- ID: 20086454
- Name: Qianxiong Xu
- Major: BSc (Hons) in Software Systems Practice Year 1
- OS: Windows 10
- Node: v10.16.3
- Clone:
git clone https://github.com/Sam1224/OutfitApp-Frontend.git
- Configure:
cd <your_dir>
npm install
- Run:
npm run start
- Test(Cypress):
npm run cypress:open
Note that the OAuth2 services in the backend login page would not be available unless you modify the config, e.g. create the app in Github and modify the redirect_url and other parameters in login.vue and githubredirect.vue
-
Client:
The client can be divided into 2 parts:
UI for frontendandUI for backend.- Urls:
- Functions:
This section only shows a brief description of functionalities of the client.
- UI for frontend:
- Home
- Access:
- Function:
- Shows sliders of virtual try-on samples and outfits retrieval samples.
- Login:
- Access:
- Function:
- Allows users to login.
- Register
- Access:
- Function:
- Allows users to register.
- Personal Information:
- Access:
- Function:
- Allows users to turn to edit information page.
- Allows users to turn to vton list page.
- Allows users to turn to retrieval list page.
- Edit Personal Information:
- Access:
- Visit: https://outfitapp-sam.firebaseapp.com/login
- Login
- Visit: https://outfitapp-sam.firebaseapp.com/personal
- Click on the edit icon.
- Function:
- Allows users to modify personal information, including basic information and changing avatar.
- Access:
- VTON List:
- Access:
- Function:
- Allows users to view all personal vton records and can delete them.
- VTON:
- Access:
- Function:
- Allows users to choose cloth image and pose image to virtual try on.
- VTON DIY:
- Access:
- Function:
- Allows users to upload cloth image and pose image to virtual try on.
- Retrieval List:
- Access:
- Function:
- Allows users to view all personal retrieval records and can delete them.
- Retrieval:
- Access:
- Function:
- Allows users to upload cloth image to retrieve similar cloth images from the DeepFashion Database.
- Home
- UI for backend:
- Login
- Access:
- Function:
- Allows admins to login, using their accounts or use 3rd party accounts to login, including Google, Github, Gitlab, Gitee, Bitbucket and Weibo.
- Index Page
- Access:
- Visit: https://outfitapp-sam.firebaseapp.com/admin
- Login.
- Function:
- Shows a slider.
- Access:
- Drawer
- Access:
- Visit: https://outfitapp-sam.firebaseapp.com/admin
- Click: The arrow on the left top corner.
- Function:
- Shows some basic information of this app.
- Access:
- Users List
- Access:
- Visit: https://outfitapp-sam.firebaseapp.com/admin
- Login.
- Click on Users in the navigation bar.
- Function:
- Shows a table with users in the database and allows users to delete records.
- Shows a childrow with the basic information of a user when '+' is clicked
- Access:
- Add User
- Access:
- Visit: https://outfitapp-sam.firebaseapp.com/admin
- Login.
- Click on Users in the navigation bar.
- Click on Add User button at the bottom.
- Function:
- Allows admin to add a new user.
- Access:
- Edit user
- Access:
- Visit: https://outfitapp-sam.firebaseapp.com/admin
- Login.
- Click on Users in the navigation bar.
- Click on Edit icon in a row of the users table.
- Function:
- Allows admin to modify the basic information and the avatar of a user.
- Access:
- Users List
- Access:
- Visit: https://outfitapp-sam.firebaseapp.com/admin
- Login.
- Click on Users in the navigation bar.
- Function:
- Shows a table with users in the database and allows users to delete records.
- Shows a childrow with the basic information of a user when '+' is clicked
- Access:
- Add User
- Access:
- Visit: https://outfitapp-sam.firebaseapp.com/admin
- Login.
- Click on Users in the navigation bar.
- Click on Add User button at the bottom.
- Function:
- Allows admin to add a new user.
- Access:
- Edit user
- Access:
- Visit: https://outfitapp-sam.firebaseapp.com/admin
- Login.
- Click on Users in the navigation bar.
- Click on Edit icon in a row of the users table.
- Function:
- Allows admin to modify the basic information and the avatar of a user.
- Access:
- Login
- UI for frontend:
-
Server:
- Urls:
- Functions:
There are 4 routers in the server side.
- user:
- GET - findAll
- GET - findOne
- POST - addUser
- PUT - updateUser
- POST - login
- GET - getToken
- DELETE - deleteUser
- POST - addVton
- DELETE - deleteVton
- POST - addRetrieval
- DELETE - deleteRetrieval
- admin:
- GET - findAll
- GET - findOne
- POST - addAdmin
- PUT - updateAdmin
- DELETE - deleteAdmin
- PUT - updateGoods
- POST - login
- GET - getToken
- file:
- GET - getImage
- POST - upload
- POST - uploadmul
- oauth:
- POST - getGithubToken
- POST - getGitlabToken
- POST - getGiteeToken
- POST - getBitbucketToken
- POST - getWeiboToken
- user:
-
Frameworks used:
- Client:
- Vue CLI
- Vue-Router
- Vuex
- Node
- Server:
- MongoDB
- Vue.js
- Express
- Node
- Docker
- Flask
- Client:
-
3rd party APIs:
This application uses
73rd party APIs in total, they are listed as follow.- OAuth2 Logins:
- Google OAuth2 Login.
- Github OAuth2 Login.
- Gitlab OAuth2 Login.
- Gitee OAuth2 Login.
- Bitbucket OAuth2 Login.
- Weibo OAuth2 Login.
- OAuth2 Logins:
-
Use case diagrams:
- Frontend UI of client:
- Backend UI of client:
- Frontend UI of client:
-
Sequence diagrams:
There are many sequence diagrams, you can find details in my report.
There are
4 nestedschemas adopted in the server of this application.
| Data Model | Schema |
|---|---|
| User | User Schema |
| Admin | Admin Schema |
| Vton | Vton Schema |
| Retrieval | Retrieval Schema |
- Both of the client and server adopts
Gitlocally, while usingGithuband alsoGitlabas the remote repositories for management. - The status of the repositories are all
public. - Please refer to the
commitsfor my commiting records. - The urls of repositories are listed as follow:
- Client:
- Server:
- UX
- Use a great
navigation barin the backend UI of the client. - Use plenty of complex UI elements provided by ElementUI and others, e.g. drawer, upload, loading, message box, carousel, collapse, etc.
- According to the UI Design Guidelines, most of the guidelines are considered.
- According to the Web Design Rules, all the rules are met.
- Use a great
- DX
- Data validation strategy is adopted, almost every table in this application is configured with
rulesfor validation. - The
Git approachis explained in the previous section. - Automated testing:
- Client:
- Cypress:
- Server:
- Mocha, Chai and lodash:
- There are
49test cases in total.
- There are
- Mocha, Chai and lodash:
- Client:
- Many advanced options of Vue have been used, e.g. vue-router(history mode), vuex, filter, transition, slots, etc.
- CI/CD:
- Both of the client and server achieve the goal of CI/CD with the uses of
Gitlab:- Client:
- Staging:
- Frontend UI: https://outfitapp-sam-staging.firebaseapp.com
- Backend UI: https://outfitapp-sam-staging.firebaseapp.com/admin
- Production:
- Frontend UI: https://outfitapp-sam-prod.firebaseapp.com
- Backend UI: https://outfitapp-sam-staging.firebaseapp.com/admin
- Staging:
- Server:
- Staging:
- Production:
- Client:
- Both of the client and server achieve the goal of CI/CD with the uses of
- Data validation strategy is adopted, almost every table in this application is configured with
-
Develop:
-
MongoDB:
-
Test:
-
OAuth2:
-
CI/CD:
-
Others: