Xun Yue, a music-discovery app. This repository is the front end project for Database Application course, using ReactJS and Semantic UI React. The project was bootstrapped with Create React App. Backend's tech stack and database design are described under our backend repository xunyue-backend.
- 主界面,引导用户搜索
- 搜索结果界面,包括有限个热门度最高的歌曲和歌手,以及一个最热门的歌手或歌曲, 点击其中任意一个可以进入详情页面
- 如果没有结果,提示用户添加信息
- 艺人详情,显示同一个艺人的所有歌曲
- 歌曲详情,显示歌曲详情与其它相关的歌曲
- 添加、修改、删除歌曲信息界面
Before running, run npm install
in the project's root directory to download all required dependencies.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified, and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
我们的前端部署方式如下供参考。服务器环境:Ubuntu 20.04。 注:在大陆境内的服务器上部署非盈利性网页服务要求报备。
On your server shell:
mkdir -p /var/www && cd /var/www
git clone https://github.com/homanw104/xunyue-frontend.git
Install dependency:
cd xunyue-frontend
npm install
Run the following to keep the repository to date with remote:
git pull origin
npm run build
You may use any web server to serve contents at your preference. The static
resources are generated in the build
folder under the project directory.
Below is our Nginx config file for reference, the config files allows
HTTPS requests by default.
server
{
server_name xunyue.homans.world;
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/homans.world/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/homans.world/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
root /var/www/xunyue-frontend/build;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
location ^~ /assets/ {
gzip_static on;
expires max;
add_header Cache-Control public;
}
error_page 500 502 503 504 /500.html;
keepalive_timeout 10;
}
server
{
if ($host = xunyue.homans.world) {
return 301 http://$host$request_uri;
} # managed by Certbot
listen 80;
server_name xunyue.homans.world;
return 404; # managed by Certbot
}
- 杭海培:后端开发。
- 姜新宇:后端开发,数据库设计与文档撰写。
- 王皜民:前端开发,项目部署与文档撰写。
- 张式玉:后端开发。
- 张益嘉:前端开发。
该项目在通过存储在 GitHub 仓库来与组员进行协作, commit 记录完整地记录了我们的项目开发过程。
Link: https://github.com/homanw104/xunyue-frontend
This project is licenced under GPL-3.