Design Content:
Music website website is a website that provides online music playback and download music function, with three sections of music charts, singer charts, music classification, and provide query function, the requirements are as follows:
① Reasonable page layout, color harmony, correct links and illustrations, with a total of no less than 8 pages.
② The website is well structured, and the files in the website should be stored in appropriate folders according to the file types.
③ To use HTML, CSS andJavascriptskill
④ The following techniques are optional according to your actual mastery:
1）HTML5
2）Jquery
3）Bootstrap
(or or)
Summary
Music website design is the design and development of a music broadcasting and music recommendation platform, the platform can be recommended according to the user's preferences for music, but also for the user to recommend the current popular songs and popularity ranking and other popular favorite songs recommended to the user to meet the user's music needs. html, css, andvue frameworkThe music broadcasting and music recommendation platform has been realized with such technologies as user login, song search, popular song recommendation, user favorite song recommendation, song ranking recommendation and other main functions.
Keywords:Music Web site; requirements analysis; system design
1. Description of the subject
Internet-based music dissemination has completely changed the original traditional audio dissemination channels and methods, convenient dissemination channels, efficient dissemination efficiency, conducive to the maximization of the use of social resources [5]. Due to the ease of use of the music platform, it is becoming more and more popular. However, this has also led to the proliferation of the number of music web platforms in China, the website in order to have their own stable users, the competition between the websites has never been more intense, in order to be able to play a leading role in China's many music platforms, the establishment of a music playback and music recommendation platform with its own characteristics, detailed features, practicality is particularly important.
The music website uses computers to manage the music, giving users a good visual presentation of the results, through the layout of the page elements so that users can directly make inquiriessearch functionAfter logging in, you can design your personal information and manage your favorite songs.
2 Applied Technology
This practical training is about the design of the music website, mainly to carry out the computer front-end content writing, front-end development is the process of creating WEB pages or APP and other front-end interface presented to the user, through HTML, CSS and JavaScript and the derivation of a variety of technologies, this paper is used in the VUE framework, the solution to the realization of the user interface of the Internet product interaction.
2.1HTML5
HTML5 is the latest version of the standard that defines HTML. The term is expressed through two different concepts: it is a new version of the HTML language with new elements, attributes and behaviors, and it has a larger set of technologies that allow to build more diverse and powerful websites and applications. This collection is sometimes called HTML5 and its friends, although most of the time it is abbreviated to just one word HTML5.
It enables you to more appropriately describe what your content is. It enables communication between you and the server through innovative new technological methods. It allows web pages to store data locally on the client side and run more efficiently offline. Makes video and audio first-class citizens in all of the Web. Provides a more discrete range of presentation options. Provides significant performance optimization and more efficient use of computer hardware. Handles a wide range of input and output devices and styles.
2.2 CSS
CSS stands for CascadingStyle Sheets, a set of rules for formatting and defining appearance styles.M. CSS plays an important role in the interface of Web applications:CSS simplifies the code of a Web page and improves the speed of access to the page. Because the external CSS file will be saved by the browser in the cache, thus speeding up the speed of the page display, but also reduces the amount of code uploaded; CSS makes the web page easier to maintain, its easy to modify the style of the site, only need to modify the CSS file can be changed throughout the site's type of features, avoiding a one-by-one web page modification, which greatly reduces the amount of work of the developer, and has been defined The css file can be reused, that is, reuse the style of the original web page; css makes the web page more powerful, the user can define the type of page display according to their own needs, as well as some of the page's special effects, etc.; at the same time, it will be displayed on the page with the display of the contents of the style of the separation of the two can be a separate file that is. html file and. css file, easy to developers of the modification and maintenance.
2.3 js
JavaScript is a scripting language that belongs to the network, has been widely used in Web development, often used to add a variety of dynamic functions to the web page, to provide users with a more smooth and beautiful browsing effect. Usually JavaScript is embedded in HTML to realize its function.
1. It is an interpreted scripting language.
2, mainly used to add interactive behavior to the HTML page language.
3, can be directly embedded in the HTML page, but written as a separate JS file is more conducive to the separation of the code, conducive to the maintenance of the latter.
4, cross-platform features, can be in the vast majority of browser support, you can run under a variety of platforms.
2.4 vue framework
Vue is a JavaScript framework for building user interfaces. It is built on standard HTML, CSS, and JavaScript, and provides a declarative, componentized programming model to help you develop user interfaces efficiently. Whether you have a simple or complex interface, Vue can handle it.
2.5 Database MYSQL
A database is a warehouse for storing data. In order to facilitate the management and storage of data, it stores the data on disk according to specific conditions. The data stored in a database can be efficiently processed and managed through a database management system. And MySQL database can be said to be the fastest running SQL language database. It has the advantages of fast, convenient, easy to use, efficient, secure, and high volume.
3 Requirements analysis
Requirements analysis is the process of determining what the system must do after thorough research and analysis to accurately understand the user's and project's specific requirements such as functionality, performance, reliability, etc., and to transform the user's non-formal requirements statement into a complete requirements definition. This system is a music website designed to provide a platform for users to listen to songs and recommend songs of their personal interest. After registering as a user of the system the user can play the songs in the system, look up the songs in the system's page search, the user can comment on the songs, the platform displays the popular songs to the user, recommends personalized songs for the user, and the user manages his information in the platform.
3.1 Functional analysis
The main function of the music playback and music recommendation platform is to satisfy users to listen to songs and recommend songs for users. Users can query the song information and evaluate the songs in the system to provide personalized service for users.
The main modules of this system:
1.User Login
Login is for the security of the system, the user enters the account password and then logs in to enter the main interface of the system.
2.Main interface
The main interface is the interface where the main functions of the system are displayed, providing the user with the core functions and guiding the user's operation.
3.Song Search
Song information can be searched.
4. Recommendations of popular songs
Suggest popular songs to users.
5. User favorite song recommendation
The platform recommends songs that the user might like.
6. Song Ranking Recommendations
A ranking of the platform songs to give users information on song selection.
7. Song reviews and presentations
Users can comment on songs and see other users' comments.
8. Song Category Display
Songs can be categorized and displayed for users to view.
3.2 Performance Analysis
Each user's own needs are different, considering the future development and simultaneous use of the system, the system is required to have the following performance:
1) The system should fulfill the user registration and login function, which is convenient for each user.
The system should satisfy the user's search function and facilitate the user's choice of music.
4 System Design
System design is the process of designing a new system that maximizes the satisfaction of the required objectives based on the results of system analysis and the application of the ideas and methods of system science. System design includes determining system functions, design approaches and methods, generating an ideal system and making a draft, amending the draft by collecting information to generate an alternative design, decomposing the system into a number of subsystems, carrying out the detailed design of the subsystems and the total system and evaluating them, and justifying the system solution and making performance and effect predictions.
4.1 Overall Layout
The overall layout of the page is three parts: header, body and bottom, with three columns in the top, middle and bottom. The header navigation bar and the bottom are fixed, when clicking on the navigation bar of the home page, song list, singer, my music, search box, login and register, in the main part will display the corresponding content, the effect is shown in Figure 1 below.
Figure 4.1 Overall Layout
5 Website and Web Design Content
The internal part is mainly stated through the following modules: registration part, login part, navigation bar part, home part people, singer part, song part, my music seven major parts.
5.1 Registration component
First of all, the user can first register an account, through the form to write personal information, of which the user name, password, gender and birthday for the mandatory content, cell phone number, e-mail, the region for the non-required items.
Figure 5.1 Registration Chart
-
<template>
-
<div class="info">
-
<p class="title"> edit profile</p>
-
<hr/>
-
<div class="personal">
-
<el-form :model="registerForm" class="demo-ruleForm" label-width="80px">
-
<el-form-item prop="username" label="username">
-
<el-input v-model="" placeholder="username"></el-input>
-
</el-form-item>
-
<el-form-item prop="password" label="password">
-
<el-input type="password" placeholder="cryptographic" v-model=""></el-input>
-
</el-form-item>
-
<el-form-item label="gender">
-
<el-radio-group v-model="">
-
<el-radio :label="0"> female</el-radio>
-
<el-radio :label="1"> male</el-radio>
-
</el-radio-group>
-
</el-form-item>
-
<el-form-item prop="phoneNum" label="cell phone">
-
<el-input placeholder="cell phone" v-model="" ></el-input>
-
</el-form-item>
-
<el-form-item prop="email" label="mailbox">
-
<el-input v-model="" placeholder="mailbox"></el-input>
-
</el-form-item>
-
<el-form-item prop="birth" label="birthday">
-
<el-date-picker type="date" placeholder="Select date" v-model="" style="width: 100%;"></el-date-picker>
-
</el-form-item>
-
<el-form-item prop="introduction" label="signature">
-
<el-input type="textarea" placeholder="sign (one's name with a pen etc)" v-model="" ></el-input>
-
</el-form-item>
-
<el-form-item prop="location" label="region">
-
<el-select v-model="" placeholder="as suffix city name, means prefecture or county (area administered by a prefecture level city or county level city)" style="width:100%">
-
<el-option
-
v-for="item in cities"
-
:key=""
-
:label=""
-
:value="">
-
</el-option>
-
</el-select>
-
</el-form-item>
-
</el-form>
-
<div class="btn">
-
<div @click="saveMsg()"> save </div>
-
<div @click="goback">cancel</div>
-
</div>
-
</div>
-
</div>
-
</template>
-
-
<script>
-
import { mapGetters } from 'vuex'
-
import mixin from '../mixins'
-
import { cities } from '../assets/data/form'
-
import { updateUserMsg, getUserOfId } from '../api/index'
-
-
export default {
-
name: 'info',
-
mixins: [mixin],
-
data: function () {
-
return {
-
registerForm: { // register
-
username: '',
-
password: '',
-
sex: '',
-
phoneNum: '',
-
email: '',
-
birth: '',
-
introduction: '',
-
location: ''
-
},
-
cities: []
-
}
-
},
-
computed: {
-
...mapGetters([
-
'userId'
-
])
-
},
-
created () {
-
= cities
-
},
-
mounted () {
-
()
-
},
-
methods: {
-
getMsg (id) {
-
getUserOfId(id)
-
.then(res => {
-
= res[0].username
-
= res[0].password
-
= res[0].sex
-
= res[0].phoneNum
-
= res[0].email
-
= res[0].birth
-
= res[0].introduction
-
= res[0].location
-
= res[0].avator
-
})
-
.catch(err => {
-
(err)
-
})
-
},
-
goback () {
-
this.$(-1)
-
},
-
saveMsg () {
-
let d = new Date()
-
let datetime = () + '-' + (() + 1) + '-' + ()
-
let params = new URLSearchParams()
-
('id', )
-
('username', )
-
('password', )
-
('sex', )
-
('phone_num', )
-
('email', )
-
('birth', datetime)
-
('introduction', )
-
('location', )
-
updateUserMsg(params)
-
.then(res => {
-
if ( === 1) {
-
= false
-
= true
-
this.$('setUsername', )
-
this.$({
-
title: 'Edit Successful',
-
showClose: true
-
})
-
setTimeout(function () {
-
this.$(-1)
-
}, 2000)
-
} else {
-
= false
-
= true
-
this.$({
-
title: 'Edit Failure',
-
showClose: true
-
})
-
}
-
})
-
.catch(err => {
-
(err)
-
})
-
}
-
}
-
}
-
</script>
5.2 Login section
First of all, the user can first register an account, through the form to write personal information, of which the user name, password, gender and birthday for the mandatory content, cell phone number, e-mail, the region for the non-required items.
Figure 5.2 Login Map
-
<script>
-
export default {
-
data() {
-
return {
-
uname: '',
-
upwd: '',
-
isSee: false,
-
tips: ''
-
-
}
-
},
-
methods: {
-
showInfo() {
-
if ( === '' && === '') {
-
= true;
-
= 'User name password cannot be null'.
-
return;
-
} else {
-
= false;
-
if ( === 'admin' && === 'zzz') {
-
this.$({
-
path: '/index:id',
-
name: 'A',
-
props:true,
-
})
-
} else {
-
= true;
-
= "User name or password error".
-
}
-
}
-
-
},
-
-
-
}
-
}
-
-
</script>
-
-
<template>
-
<div class="main">
-
<h2> login page </h2>
-
<div class="form">
-
User Name.
-
<input type="text" name="username" v-model="uname"><br>
-
Security Code.
-
<input type="password" name="password" v-model="upwd"><br>
-
<button v-on:click="showInfo">login</button><br>
-
</div>
-
<h2 :class="{ tip: isSee }" v-show="isSee">{{ tips }}</h2>
-
</div>
-
</template>
-
The code for the navigation bar section is as follows:
-
<template>
-
<div class="the-header">
-
<! --icon-->.
-
<div class="header-logo" @click="goHome">
-
<svg class="icon" aria-hidden="true">
-
<use xlink:href="#icon-erji"></use>
-
</svg>
-
<span>{{musicName}}</span>
-
</div>
-
<ul class="navbar" ref="change">
-
<li :class="{active: === activeName}" v-for="item in navMsg" :key="" @click="goPage(, )">
-
{{}}
-
</li>
-
<li>
-
<div class="header-search">
-
<input type="text" placeholder="Search Music" @="goSearch()" v-model="keywords">
-
<div class="search-btn" @click="goSearch()" >
-
<svg class="icon" aria-hidden="true">
-
<use xlink:href="#icon-sousuo"></use>
-
</svg>
-
</div>
-
</div>
-
</li>
-
<li v-show="!loginIn" :class="{active: === activeName}" v-for="item in loginMsg" :key="" @click="goPage(, )">{{}}</li>
-
</ul>
-
<! --Setup->.
-
<div class="header-right" v-show="loginIn">
-
<div >
-
<img :src="attachImageUrl(avator)" alt="">
-
</div>
-
<ul class="menu">
-
<li v-for="(item, index) in menuList" :key="index" @click="goMenuList()">{{}}</li>
-
</ul>
-
</div>
-
</div>
-
</template>
-
-
<script>
-
import { mapGetters } from 'vuex'
-
import mixin from '../mixins'
-
import { navMsg, loginMsg, menuList } from '../assets/data/header'
-
-
export default {
-
name: 'the-header',
-
mixins: [mixin],
-
data () {
-
return {
-
musicName: 'Personal-music',
-
navMsg: [], // left navigation bar
-
loginMsg: [], // right navigation bar
-
menuList: [], // user dropdown menu items
-
keywords: ''
-
}
-
},
-
computed: {
-
...mapGetters([
-
'userId',
-
'activeName',
-
'avator',
-
'username',
-
'loginIn'
-
])
-
},
-
created () {
-
= navMsg
-
= loginMsg
-
= menuList
-
},
-
mounted () {
-
('#user').addEventListener('click', function (e) {
-
('.menu').('show')
-
()// The key is to stop bubbling
-
}, false)
-
// Stop events from bubbling when clicking inside the "menu". (so that the menu doesn't close when you click inside)
-
('.menu').addEventListener('click', function (e) {
-
()
-
}, false)
-
('click', function () {
-
('.menu').('show')
-
}, false)
-
},
-
methods: {
-
goHome () {
-
this.$({path: '/'})
-
},
-
goPage (path, value) {
-
('.menu').('show')
-
(value)
-
if (! && path === '/my-music') {
-
('Please log in first', 'warning')
-
} else {
-
this.$({path: path})
-
}
-
},
-
changeIndex (value) {
-
this.$('setActiveName', value)
-
},
-
goMenuList (path) {
-
if (path === 0) {
-
this.$('setIsActive', false)
-
}
-
('.menu').('show')
-
if (path) {
-
this.$({path: path})
-
} else {
-
this.$('setLoginIn', false)
-
this.$(0)
-
}
-
},
-
goSearch () {
-
this.$('setSearchword', )
-
this.$({path: '/search', query: {keywords: }})
-
}
-
}
-
}
5.3 Navigation bar section
The navigation part is the head part of the whole page, it will not change with the content, using tab switching, when clicking on the button in the navigation bar part, it will display the corresponding content in the home page.
Figure 5.3 Navigation bar diagram
-
<template>
-
<div class="the-header">
-
<! --icon-->.
-
<div class="header-logo" @click="goHome">
-
<svg class="icon" aria-hidden="true">
-
<use xlink:href="#icon-erji"></use>
-
</svg>
-
<span>{{musicName}}</span>
-
</div>
-
<ul class="navbar" ref="change">
-
<li :class="{active: === activeName}" v-for="item in navMsg" :key="" @click="goPage(, )">
-
{{}}
-
</li>
-
<li>
-
<div class="header-search">
-
<input type="text" placeholder="Search Music" @="goSearch()" v-model="keywords">
-
<div class="search-btn" @click="goSearch()" >
-
<svg class="icon" aria-hidden="true">
-
<use xlink:href="#icon-sousuo"></use>
-
</svg>
-
</div>
-
</div>
-
</li>
-
<li v-show="!loginIn" :class="{active: === activeName}" v-for="item in loginMsg" :key="" @click="goPage(, )">{{}}</li>
-
</ul>
-
<! --Setup->.
-
<div class="header-right" v-show="loginIn">
-
<div >
-
<img :src="attachImageUrl(avator)" alt="">
-
</div>
-
<ul class="menu">
-
<li v-for="(item, index) in menuList" :key="index" @click="goMenuList()">{{}}</li>
-
</ul>
-
</div>
-
</div>
-
</template>
-
-
<script>
-
import { mapGetters } from 'vuex'
-
import mixin from '../mixins'
-
import { navMsg, loginMsg, menuList } from '../assets/data/header'
-
-
export default {
-
name: 'the-header',
-
mixins: [mixin],
-
data () {
-
return {
-
musicName: 'Personal-music',
-
navMsg: [], // left navigation bar
-
loginMsg: [], // right navigation bar
-
menuList: [], // user dropdown menu items
-
keywords: ''
-
}
-
},
-
computed: {
-
...mapGetters([
-
'userId',
-
'activeName',
-
'avator',
-
'username',
-
'loginIn'
-
])
-
},
-
created () {
-
= navMsg
-
= loginMsg
-
= menuList
-
},
-
mounted () {
-
('#user').addEventListener('click', function (e) {
-
('.menu').('show')
-
()// The key is to stop bubbling
-
}, false)
-
// Stop events from bubbling when clicking inside the "menu". (so that the menu doesn't close when you click inside)
-
('.menu').addEventListener('click', function (e) {
-
()
-
}, false)
-
('click', function () {
-
('.menu').('show')
-
}, false)
-
},
-
methods: {
-
goHome () {
-
this.$({path: '/'})
-
},
-
goPage (path, value) {
-
('.menu').('show')
-
(value)
-
if (! && path === '/my-music') {
-
('Please log in first', 'warning')
-
} else {
-
this.$({path: path})
-
}
-
},
-
changeIndex (value) {
-
this.$('setActiveName', value)
-
},
-
goMenuList (path) {
-
if (path === 0) {
-
this.$('setIsActive', false)
-
}
-
('.menu').('show')
-
if (path) {
-
this.$({path: path})
-
} else {
-
this.$('setLoginIn', false)
-
this.$(0)
-
}
-
},
-
goSearch () {
-
this.$('setSearchword', )
-
this.$({path: '/search', query: {keywords: }})
-
}
-
}
-
}
-
</script>
-
5.4 Home page section
The main body of the home page is divided into three parts, the upper part of a rotating chart, the middle part is the list, when the user clicks on the list will jump to the list page at the same time at the bottom will play music, the lower part is the singer, when clicking on the singer page will jump to the singer page, displaying the singer's information, the effect of the picture shown below.
Figure 5.4 Home Page Map
5.5 Singer's section
By clicking on the singers on the home page or clicking on the singers button on the navigation bar, the user will be shown male singers, female singers and group singers.
Figure 5.5 Singer's diagram
-
template>
-
<div class="content">
-
<h1 class="title">
-
<slot name="title"></slot>
-
</h1>
-
<hr>
-
<ul>
-
<li class="list-title">
-
<div class="song-item">
-
<span class="item-index"></span>
-
<span class="item-title"> song title</span>
-
<span class="item-name"> artist</span>
-
<span class="item-intro"> album</span>
-
</div>
-
</li>
-
<li class="list-content" v-for="(item, index) in songList" :key="index">
-
<div class="song-item" :class="{'is-play': id === }" @click="toplay(, , , index, , )">
-
<span class="item-index">
-
<span v-if="id !== ">{{index + 1}}</span>
-
<svg v-if="id === " class="icon" aria-hidden="true">
-
<use xlink:href="#icon-yinliang"></use>
-
</svg>
-
</span>
-
<span class="item-title">{{replaceFName()}}</span>
-
<span class="item-name">{{replaceLName()}}</span>
-
<span class="item-intro">{{}}</span>
-
</div>
-
</li>
-
</ul>
-
</div>
-
</template>
-
-
<script>
-
import { mapGetters } from 'vuex'
-
import mixin from '../mixins'
-
-
export default {
-
name: 'album-content',
-
mixins: [mixin],
-
props: {
-
songList: Array
-
},
-
computed: {
-
...mapGetters([
-
'id' // music id
-
])
-
}
-
}
-
</script>
5.6 Song section
When the user clicks on a song or clicks on a song in the home page layout, it will show the song category Chinese Cantonese European American Japanese Korean Light Music BGM Instrumental.
-
template>
-
<div class="content">
-
<h1 class="title">
-
<slot name="title"></slot>
-
</h1>
-
<hr>
-
<ul>
-
<li class="list-title">
-
<div class="song-item">
-
<span class="item-index"></span>
-
<span class="item-title"> song title</span>
-
<span class="item-name"> artist</span>
-
<span class="item-intro"> album</span>
-
</div>
-
</li>
-
<li class="list-content" v-for="(item, index) in songList" :key="index">
-
<div class="song-item" :class="{'is-play': id === }" @click="toplay(, , , index, , )">
-
<span class="item-index">
-
<span v-if="id !== ">{{index + 1}}</span>
-
<svg v-if="id === " class="icon" aria-hidden="true">
-
<use xlink:href="#icon-yinliang"></use>
-
</svg>
-
</span>
-
<span class="item-title">{{replaceFName()}}</span>
-
<span class="item-name">{{replaceLName()}}</span>
-
<span class="item-intro">{{}}</span>
-
</div>
-
</li>
-
</ul>
-
</div>
-
</template>
-
-
<script>
-
import { mapGetters } from 'vuex'
-
import mixin from '../mixins'
-
-
export default {
-
name: 'album-content',
-
mixins: [mixin],
-
props: {
-
songList: Array
-
},
-
computed: {
-
...mapGetters([
-
'id' // music id
-
])
-
}
-
}
-
</script>
5.7 My Music Section
The music downloaded by the user is displayed in My Music with the name of the music, the name of the artist and the name of the album.
-
<template>
-
<div class="upload">
-
<p class="title"> change avatar</p>
-
<hr/>
-
<div class="section">
-
<el-upload
-
drag
-
:action="uploadUrl()"
-
:show-file-list="false"
-
:on-success="handleAvatarSuccess"
-
:before-upload="beforeAvatarUpload">
-
<i class="el-icon-upload"></i>
-
<div class="el-upload__text"> drag the file here, or <em> change the avatar </em> </div>
-
<div class="el-upload__tip" slot="tip"> Only jpg/png files can be uploaded, and no more than 10M</div>
-
</el-upload>
-
</div>
-
</div>
-
</template>
-
-
<script>
-
import { mapGetters } from 'vuex'
-
import mixin from '../mixins'
-
-
export default {
-
name: 'upload',
-
mixins: [mixin],
-
data () {
-
return {
-
imageUrl: ''
-
}
-
},
-
computed: {
-
...mapGetters([
-
'userId'
-
])
-
},
-
methods: {
-
uploadUrl () {
-
return `${this.$}/user/avatar/update?id=${}`
-
},
-
handleAvatarSuccess (res, file) {
-
if ( === 1) {
-
= ()
-
this.$('setAvator', )
-
this.$message({
-
message: 'Modification succeeded',
-
type: 'success'
-
})
-
} else {
-
('Modification failed', 'error')
-
}
-
},
-
beforeAvatarUpload (file) {
-
const isJPG = === 'image/jpeg'
-
const isLt2M = / 1024 / 1024 < 10
-
if (!isJPG) {
-
this.$('Upload avatar image in JPG format only!')
-
}
-
if (!isLt2M) {
-
this.$('Upload avatar image size cannot exceed 10MB!')
-
}
-
return isJPG && isLt2M
-
}
-
}
-
}
-
</script>
6 Website deployment and testing
6.1 Search function
The search section searches by artist and song name, the data of the artist and song comes from the data database, if you can't find the corresponding artist or song in the search, it will pop up a warning that the artist or song doesn't exist.
6.1.1 Search by song
As follows, when you enter the song "World", it will show the details of the song, artist and album, the effect is as follows
Figure 6.1 Song Search Chart
-
<template>
-
<div class="search-song-Lists">
-
<content-list :contentList="albumDatas" path="song-list-album"></content-list>
-
</div>
-
</template>
-
-
<script>
-
import ContentList from '../ContentList'
-
import mixin from '../../mixins'
-
import { getSongListOfLikeTitle } from '../../api/index'
-
-
export default {
-
name: 'search-song-Lists',
-
mixins: [mixin],
-
components: {
-
ContentList
-
},
-
data () {
-
return {
-
albumDatas: []
-
}
-
},
-
mounted () {
-
()
-
},
-
methods: {
-
getSearchList () {
-
if (!this.$) return
-
getSongListOfLikeTitle(this.$)
-
.then(res => {
-
if (!) {
-
('No content for this song', 'warning')
-
} else {
-
= res
-
}
-
})
-
}
-
}
-
}
-
</script>
6.1.2 Search queries by artist
In the search box in the navigation bar, enter the name of the singer, it will display all the songs about the singer in the database, for example, search query singer "Zhang Jie", it will display all his songs, if not, it will be judged to pop-up warning, there is no such singer.
Figure 6.2 Singer search map
-
<template>
-
<div class="search-songs">
-
<album-content :songList="listOfSongs"></album-content>
-
</div>
-
</template>
-
-
<script>
-
import { mapGetters } from 'vuex'
-
import mixin from '../../mixins'
-
import AlbumContent from '../AlbumContent'
-
-
export default {
-
name: 'search-songs',
-
mixins: [mixin],
-
components: {
-
AlbumContent
-
},
-
computed: {
-
...mapGetters([
-
'listOfSongs' // music to store
-
])
-
},
-
mounted () {
-
()
-
}
-
}
-
</script>
6.2 Playback section
When the user clicks on the music, the music will be played and stopped.
Figure 6.3 Playback diagram
-
<template>
-
<div class="play-bar" :class="{show:!toggle}">
-
<div @click="toggle=!toggle" class="item-up" :class="{turn: toggle}">
-
<svg class="icon" aria-hidden="true">
-
<use xlink:href="#icon-jiantou-xia-cuxiantiao"></use>
-
</svg>
-
</div>
-
<div class="kongjian" >
-
<! --Previous song-->
-
<div class="item" @click="prev">
-
<svg class="icon" aria-hidden="true">
-
<use xlink:href="#icon-ziyuanldpi"></use>
-
</svg>
-
</div>
-
<! --play->
-
<div class="item" @click="togglePlay">
-
<svg class="icon" aria-hidden="true">
-
<use :xlink:href="playButtonUrl"></use>
-
</svg>
-
</div>
-
<! --Next song-->!
-
<div class="item" @click="next">
-
<svg class="icon" aria-hidden="true">
-
<use xlink:href="#icon-ziyuanldpi1"></use>
-
</svg>
-
</div>
-
<! --Song Pictures-->!
-
<div class="item-img" @click="goPlayerPage">
-
<img :src=picUrl alt="">
-
</div>
-
<! --Playback Progress-->!
-
<div class="playing-speed">
-
<! --playback start time->!
-
<div class="current-time">{{ nowTime }}</div>
-
<div class="progress-box">
-
<div class="item-song-title">
-
<div>{{}}</div>
-
<div>{{}}</div>
-
</div>
-
<div ref="progress" class="progress" @mousemove="mousemove">
-
<! --progress bar-->!
-
<div ref="bg" class="bg" @click="updatemove">
-
<div ref="curProgress" class="cur-progress" :style="{width: curLength+'%'}"></div>
-
</div>
-
<! --progress bar end -->!
-
<! --dragging dots-->!
-
<div ref="idot" class="idot" :style="{left: curLength+'%'}" @mousedown="mousedown" @mouseup="mouseup"></div>
-
<! -- Dragged dots end -->!
-
</div>
-
</div>
-
<! --playback end time-->!
-
<div class="left-time">{{ songTime }}</div>
-
</div>
-
<! --volume-->
-
<div class="item icon-volume" >
-
<svg v-if="volume !== 0" class="icon" aria-hidden="true">
-
<use xlink:href="#icon-yinliang1"></use>
-
</svg>
-
<svg v-else class="icon" aria-hidden="true">
-
<use xlink:href="#icon-yinliangjingyinheix"></use>
-
</svg>
-
<el-slider class="volume" v-model="volume" :vertical="true"></el-slider>
-
</div>
-
<! --add-->.
-
<div class="item" @click="collection">
-
<svg :class="{ active: isActive }" class="icon" aria-hidden="true">
-
<use xlink:href="#icon-xihuan-shi"></use>
-
</svg>
-
</div>
-
<! --Downloads-->!
-
<div class="item" @click="download">
-
<svg class="icon" aria-hidden="true">
-
<use xlink:href="#icon-xiazai"></use>
-
</svg>
-
</div>
-
<! --Song List-->.
-
<div class="item" @click="changeAside">
-
<svg class="icon" aria-hidden="true">
-
<use xlink:href="#icon-liebiao"></use>
-
</svg>
-
</div>
-
</div>
-
</div>
-
</template>
-
-
<script>
-
import { mapGetters } from 'vuex'
-
import mixin from '../mixins'
-
import { setCollection, download } from '../api/index'
-
-
export default {
-
name: 'play-bar',
-
mixins: [mixin],
-
data () {
-
return {
-
tag: false,
-
nowTime: '00:00',
-
songTime: '00:00',
-
curLength: 0, // position of the progress bar
-
progressLength: 0, // progress bar length
-
mouseStartX: 0, // drag start position
-
toggle: true,
-
volume: 50
-
}
-
},
-
computed: {
-
...mapGetters([
-
'loginIn', // user login status
-
'userId', // user id
-
'isPlay', // Play status
-
'playButtonUrl', // icon for play state
-
'id', // music id
-
'url', // music address
-
'title', // song title
-
'artist', // singer's name
-
'picUrl', // song picture
-
'curTime', // current music playback position
-
'duration', // music duration
-
'listOfSongs', // list of current song lists
-
'listIndex', // the current song's position in the song list
-
'showAside', // whether or not to show the sidebar
-
'autoNext', // for triggering autoplay of the next song
-
'isActive'
-
])
-
},
-
watch: {
-
// Toggle playback status icon
-
isPlay (val) {
-
if (val) {
-
this.$('setPlayButtonUrl', '#icon-zanting')
-
} else {
-
this.$('setPlayButtonUrl', '#icon-bofang')
-
}
-
},
-
volume () {
-
this.$('setVolume', / 100)
-
},
-
// Start and end of playback time
-
curTime () {
-
= ()
-
= ()
-
// Move the progress bar
-
= ( / ) * 100
-
// Handle lyric placement and color
-
},
-
// Autoplay the next song
-
autoNext () {
-
()
-
}
-
},
-
mounted () {
-
= this.$().width
-
('.icon-volume').addEventListener('click', function (e) {
-
('.volume').('show-volume')
-
()
-
}, false)
-
('.volume').addEventListener('click', function (e) {
-
()
-
}, false)
-
('click', function () {
-
('.volume').('show-volume')
-
}, false)
-
},
-
methods: {
-
// Download
-
download () {
-
download()
-
.then(res => {
-
let content =
-
let eleLink = ('a')
-
= `${}-${}.mp3`
-
= 'none'
-
// Character content to blob address
-
let blob = new Blob([content])
-
= (blob)
-
// Trigger clicks
-
(eleLink)
-
()
-
// And then remove
-
(eleLink)
-
})
-
.catch(err => {
-
(err)
-
})
-
},
-
changeAside () {
-
let temp = !
-
this.$('setShowAside', temp)
-
},
-
// Control music play/pause
-
togglePlay () {
-
if () {
-
this.$('setIsPlay', false)
-
} else {
-
this.$('setIsPlay', true)
-
}
-
},
-
// Parse the playback time
-
formatSeconds (value) {
-
let theTime = parseInt(value)
-
let theTime1 = 0
-
let theTime2 = 0
-
if (theTime > 60) {
-
theTime1 = parseInt(theTime / 60) // minutes
-
theTime = parseInt(theTime % 60) // seconds
-
// Whether more than one hour
-
if (theTime1 > 60) {
-
theTime2 = parseInt(theTime1 / 60) // hour
-
theTime1 = 60 // minutes
-
}
-
}
-
// How many seconds?
-
if (parseInt(theTime) < 10) {
-
var result = '0:0' + parseInt(theTime)
-
} else {
-
result = '0:' + parseInt(theTime)
-
}
-
// How many minutes
-
if (theTime1 > 0) {
-
if (parseInt(theTime) < 10) {
-
result = '0' + parseInt(theTime)
-
} else {
-
result = parseInt(theTime)
-
}
-
result = parseInt(theTime1) + ':' + result
-
}
-
// How many hours
-
if (theTime2 > 0) {
-
if (parseInt(theTime) < 10) {
-
result = '0' + parseInt(theTime)
-
} else {
-
result = parseInt(theTime)
-
}
-
result = parseInt(theTime2) + ':' + parseInt(theTime1) + ':' + result
-
}
-
return result
-
},
-
// Drag and drop to start
-
mousedown (e) {
-
=
-
= true
-
},
-
// End of drag and drop
-
mouseup () {
-
= false
-
},
-
// Drag and Drop
-
mousemove (e) {
-
if (!) {
-
return false
-
}
-
if () {
-
let movementX = -
-
let curLength = this.$().width
-
// Calculate the percentage
-
= this.$().width
-
let newPercent = ((curLength + movementX) / ) * 100
-
if (newPercent > 100) {
-
newPercent = 100
-
}
-
= newPercent
-
=
-
// The corresponding playback time is introduced based on the percentage
-
(newPercent)
-
}
-
},
-
// Change song progress
-
changeTime (percent) {
-
let newCurTime = * (percent * 0.01)
-
this.$('setChangeTime', newCurTime)
-
},
-
updatemove (e) {
-
if (!) {
-
let curLength = this.$
-
= this.$().width
-
let newPercent = (( - curLength) / ) * 100
-
if (newPercent < 0) {
-
newPercent = 0
-
} else if (newPercent > 100) {
-
newPercent = 100
-
}
-
= newPercent
-
(newPercent)
-
}
-
},
-
// Previous song
-
prev () {
-
if ( !== -1 && > 1) {
-
if ( > 0) {
-
this.$('setListIndex', - 1)
-
([].url)
-
} else {
-
this.$('setListIndex', - 1)
-
([].url)
-
}
-
}
-
},
-
// Next
-
next () {
-
if ( !== -1 && > 1) {
-
if ( < - 1) {
-
this.$('setListIndex', + 1)
-
([].url)
-
} else {
-
this.$('setListIndex', 0)
-
([0].url)
-
}
-
}
-
},
-
// Selected for playback
-
toPlay (url) {
-
if (url && url !== ) {
-
this.$('setId', [].id)
-
this.$('setUrl', this.$ + url)
-
this.$('setpicUrl', this.$ + [].pic)
-
this.$('setTitle', ([].name))
-
this.$('setArtist', ([].name))
-
this.$('setLyric', ([].lyric))
-
}
-
},
-
goPlayerPage () {
-
this.$({path: `/lyric/${}`})
-
},
-
collection () {
-
if () {
-
var params = new URLSearchParams()
-
('userId', )
-
('type', 0) // 0 for the song, 1 for the song list
-
('songId', )
-
setCollection(params)
-
.then(res => {
-
if ( === 1) {
-
this.$('setIsActive', true)
-
('Favorite Success', 'success')
-
} else if ( === 2) {
-
('Bookmarked', 'warning')
-
} else {
-
this.$({
-
title: 'Favorite Failure',
-
showClose: false
-
})
-
}
-
})
-
.catch(err => {
-
(err)
-
})
-
} else {
-
('Please log in first', 'warning')
-
}
-
}
-
}
-
}
-
</script>
7 Summary
In this course design, through my own analysis and design of related systems, I have gained a deeper understanding of information systems analysis and design and become more comfortable with the use of PD modeling tools. In the course design process, the first step is to start from the requirements analysis, in-depth analysis of the system. Requirements analysis is a prerequisite, only a good analysis, the design of the system can meet the user's needs, the content of the front-end html, css, js preliminary understanding by consulting the relevant book information, as well as recalling the contents of the previous learning, the use of vue framework to complete the training, summed up a lot of valuable and meaningful learning experience, but also allows me to consolidate the knowledge I have learned before and further improve the understanding of the knowledge I have learned now. Improve my understanding of what I've learned now, and make me realize my shortcomings in my previous learning. I need to continue to work hard in the future.
bibliography
[1] H. Wang, Y. Liu. Information system analysis and design [M]. Jiangsu: Nanjing University Press, 2021.
[2] J.L. Zhang. Database principles and applications [M]. Beijing:Tsinghua University Press, 2010.
[3] Xuelan Miao, Ruixin Liu, Song Ge. Principles of database systems [M]. Beijing: Machinery Industry Press, 2007.
[4] Liu Yajun, Gao Lisha. Database Design and Applications [M]. Beijing: Tsinghua University Press, 2007.
[5] He, Dongjian. Web Design and Web Programming [M]. Xi'an: Xi'an Jiaotong University Press, 2004.