Front Design For GeSong System

Content

Before

Front(User)

1. Index Page

2. Search Page

3. History Page

4. List Page

5. Confirm Page

Back(Admin)

1. Access Page

2. Audit Page

3. List Page

4. System Page

Before

All template use WebApi to deal the operate

Recommand Vue.js, but you still can use jQuery(Ajax) :D

All Response Code (Int)

10000 Success Successfully requested

20000 No enough times No enough times to song

30000 Forbidden Wrong Access (For User)

Front (User)

Index Page

The index page use the root path ("/"),

Server will response a 301 code to jump to search page ("/search")

Search Page

The search page use the path "/search"

A user have to log in to use the search function

WebApi Interface Detail:

Path: /api/search

Method: POST

Args:

keyword string keyword of the song

token string user token

Response Format: Json

Json Args:

code int response code

content list list of songs

List of Songs Args(content):

pid int platform id

id int song id(platform)

name string name of song

artists list list of artists

album dict album of this song

url string the media url of this song (source platform or system cache)

List of Artists Args:

id int artist id(platform)

name string name of this artist

cover string image url of this aritist

Album Args:

id int album id(platform)

name string name of this album

cover string image url of this album

History Page

The history page use the path "/history"

Anybody can directly get the history of songs

WebApi Interface Detail:

Path: /api/history

Method: GET

Args: Nothing

Response Format: Json

Json Args:

code int response code

content list list of history songs

List of Songs Args(content):

pid int platform id

id int song id(platform)

name string name of song

artists list list of artists

album dict album of this song

url string the media url of this song (system cache)

List of Artists Args:

id int artist id(platform)

name string name of this artist

cover string image url of this aritist

Album Args:

id int album id(platform)

name string name of this album

cover string image url of this album

List Page

The list page use the path "/list"

Anybody can directly get the list of whitelist and blacklist

WebApi Interface Detail:

Path: /api/list

Method: GET

Args: Nothing

Response Format: Json

Json Args:

code int response code

content dict dict of list, included whitelist and blacklist

Content Dict(content):

white list songs list of whitelist

black list songs list of blacklist

List of Songs Args:

pid int platform id

id int song id(platform)

name string name of song

artists list list of artists

album dict album of this song

List of Artists Args:

id int artist id(platform)

name string name of this artist

cover string image url of this aritist

Album Args:

id int album id(platform)

name string name of this album

cover string image url of this album

Confirm Page

The confirm page use the path "/confirm"

This page only use for the twice confirm

Located from the search page

Read the parameter from url on front code (Javascript)

Get Parameter:

platform int platform id

id int id of the song

Then use the id and platform id to requests the song detail

WebApi Interface Detail:

Path: /api/detail

Method: POST

Args:

platform int id of the platform

id int id of the song

token string user token

Response Format: Json

Json Args:

code int response code

content list list of songs

List of Songs Args(content):

pid int platform id

id int song id(platform)

name string name of song

artists list list of artists

album dict album of this song

url string the media url of this song (source platform or system cache)

List of Artists Args:

id int artist id(platform)

name string name of this artist

cover string image url of this aritist

Album Args:

id int album id(platform)

name string name of this album

cover string image url of this album

After user clicking the confirm button, send request to this interface

WebApi Interface Detail:

Path: /api/detail

Method: POST

Args:

platform int id of the platform

id int id of the song

date string YYYY-MM-DD

token string user token

Response Format: Json

Json Args:

code int response code

Back (Admin)

Access Page