HTML+CSS实训——Day12——把数据都放在服务器上
前言
昨天我们把一些基本的NodeJs的操作都学完了，今天把我们做的音乐app的一些数据放到服务器上面。
发现页
server.js
// 导入express模块
var express = require('express')
// 导入cors模块
var cors = require('cors')
// 创建服务
var app = express()
// 设置监听端口号
app.listen(3000)
// 解决跨域问题
app.use(cors())
// 解析post请求参数
app.use(express.json())
var users = require('./db/users.json')
app.post('/login', (req, res) => {
// 获取请求参数,因为是post请求,所以用req.body
var phone = req.body.phone
var upwd = req.body.upwd
var user = users.find(function (item) {
return item.phone === phone && item.upwd === upwd
})
if (user) {
res.send({ code: 200, msg: '登录成功', uid: user.uid })
} else {
res.send({ code: 201, msg: '账号或密码不正确' })
}
})
app.get('/userInfo',(req,res)=>{
var uid=req.query.uid
var user =users.find(function (item) {
return item.uid==uid
})
var data={
uid:user.uid,
phone: user.phone,
avatar:user.avatar
}
res.send({ code: 200, msg:'获取成功',data:data})
})
app.get('/banner',(req,res)=>{
var imgs = [
'./img/ad/811.jpg',
'./img/ad/853.jpg',
'./img/ad/902.jpg',
'./img/ad/918.jpg',
]
res.send({code:200,data:imgs})
})
var sheets = require('./db/sheets.json')
app.get('/sheets',(req,res)=>{
res.send({code:200,data:sheets})
})
var songs = require('./db/songs.json')
app.get('/songs',(req,res)=>{
res.send({code:200,data:songs})
})
find.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Findtitle>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="css/find.css">
<script src="./js/js/vue.js">script>
<script>
document.documentElement.style.fontSize = window.screen.width / 10 + 'px'
script>
head>
<body>
<div id="app">
<div class="search">
<i class="fa fa-microphone fa-lg">i>
<input type="text" placeholder="搜夜曲" v-model="searchStr">
<img src="img/song/615.jpg" class="search_input" alt="" @click="goToSearch()">
div>
<div class="banner">
<div class="imgs" @click="goToSheet(sheet.sid)">
<img :src="imgs[imgsIndex]" alt="">
div>
<div class="pointer">
<span v-for="(item,i) of imgs" :class=" { active : i == imgsIndex } ">span>
div>
div>
<div class="category">
<div class="item">
<i class="fa fa-calendar">i>
<span>每日推荐span>
div>
<div class="item">
<i class="fa fa-headphones">i>
<span>歌单span>
div>
<div class="item">
<i class="fa fa-trophy">i>
<span>排行榜span>
div>
<div class="item">
<i class="fa fa-bullhorn">i>
<span>电台span>
div>
<div class="item">
<i class="fa fa-caret-square-o-right">i>
<span>直播span>
div>
<div class="item">
<i class="fa fa-heart">i>
<span>火前留名span>
div>
<div class="item">
<i class="fa fa-comments">i>
<span>畅聊span>
div>
div>
<div class="choice">
<div class="choice-title">
<span class="left">你的精选歌单站span>
<span class="right">查看更多span>
div>
<div class="choice-box">
<div class="choice-item" v-for="sheet of sheets">
<img :src="sheet.pic" alt="" @click="goToSheet(sheet.sid)">
<span>{{ sheet.comment }}span>
div>
div>
div>
<div class="story">
<div class="story-title">
<span class="left">他们把故事唱成了歌曲span>
<button class="fa fa-play"> 播放全部button>
div>
div>
<div class="story-box">
<div class="item" v-for="song of songs">
<img :src="song.cover" class="cover" alt="">
<div class="info">
<div class="title">
<span>{{ song.title }}span>
<span>-{{ song.singer }}span>
div>
<div class="ps">
<span>SQspan>
<span>{{ song.title }}span>
div>
div>
<img class="play" src="./img/_play.png" alt="" @click="goToSong(song.sid)">
div>
div>
<div class="tab-bar">
<div class="item active">
<i class="fa fa-globe">i>
<span>发现span>
div>
<div class="item">
<i class="fa fa-video-camera">i>
<span>视频span>
div>
<div class="item">
<i class="fa fa-music">i>
<span>我的span>
div>
<div class="item">
<i class="fa fa-users">i>
<span>云村span>
div>
<div class="item">
<i class="fa fa-user" @click="goToUser()">i>
<span>账号span>
div>
div>
div>
<br> <br><br>
<script>
var vm = new Vue({
el: '#app',
data: {
imgs: [],
imgsIndex: 0,
sheets: [],
songs: [],
searchStr: '',
},
mounted() {
// 由于网络请求响应时间不确定,所以所有响应需要执行的操作
// 都写在获取到响应结果的函数内部
fetch('http://127.0.0.1:3000/banner')
.then(res => res.json()).then(res => {
this.imgs = res.data
setInterval(() => {
this.imgsIndex++
if (this.imgsIndex == this.imgs.length) {
this.imgsIndex = 0
}
}, 1500);
})
fetch('http://127.0.0.1:3000/sheets')
.then(res => res.json()).then(res => {
this.sheets = res.data
})
fetch('http://127.0.0.1:3000/songs')
.then(res => res.json()).then(res => {
this.songs = res.data
})
},
methods: {
goToSong: function (sid) {
window.location.href = './song-info.html?sid=' + sid
},
goToSheet: function (sid) {
location.href = './sheet.html?sid=' + sid
},
goToUser: function () {
location.href = './user.html'
},
goToSearch: function () {
location.href = './search.html?searchStr=' + this.searchStr
}
}
})
script>
body>
html>
歌曲界面
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/song-info.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<title>song-infotitle>
<script src="./js/js/vue.js">script>
<script>
document.documentElement.style.fontSize = window.screen.width / 10 + 'px'
script>
head>
<body>
<div id="app">
<div class="top-nav">
<i class="fa fa-arrow-left" @click="goBack()">i>
<i class="fa fa-send">i>
div>
<div class="info">
<span>{{ song.title }}span>
<span>{{ song.singer }}span>
div>
<img class="cover" :src="song.cover" alt="">
<div class="audio">
<audio :src="song.url" controls>audio>
div>
div>
<script>
var vm = new Vue({
el: "#app",
data: {
song: {}
},
mounted() {
var url = location.search
url = url.slice(1)
console.log(url.split('='))
var sid = url.split('=')[1]
fetch('http://127.0.0.1:3000/songInfo?sid=' + sid)
.then(res => res.json())
.then(res => {
console.log(res)
this.song = res.data
})
// 根据sid获取歌曲信息
this.song = songs.find(function (item) {
return item.sid == sid
})
console.log(this.song)
},
methods: {
goBack: function () {
history.back()
}
},
})
script>
body>
html>
搜索界面
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="css/search.css">
<title>searchtitle>
<script src="./js/js/vue.js">script>
<script>
document.documentElement.style.fontSize = window.screen.width / 10 + 'px'
script>
head>
<body>
<div id="app">
<div class="search">
<i class="fa fa-angle-left fa-lg" @click="goBack()">i>
<input type="text" placeholder="时间流逝" v-model="searchStr">
<button class="fa fa-close" @click="clean">button>
<img src="img/song/615.jpg" class="search_input" alt="" @click="search()">
div>
<div class="nav-bar">
<span class="active">综合span>
<span>单曲span>
<span>云村span>
<span>歌单span>
<span>歌手span>
<span>专辑span>
div>
<div class="box">
<div class="item" v-for="song of songList">
<div class="info">
<div class="title">{{ song.title }}div>
<div class="ps">
<span>原创span>
<span>翻唱-{{ song.singer }}span>
div>
div>
<img class="play" src="img/youtube.png" alt="" @click="goToSong(song.sid)">
<i class="fa fa-ellipsis-v">i>
div>
div>
div>
<br><br><br><br><br>
div>
<script>
var vm = new Vue({
el: '#app',
data: {
songList: [],
songs: [],
searchStr: ''
},
mounted() {
var url = location.search
url = url.slice(1)
var params = new URLSearchParams(url)
var searchStr = params.get('searchStr')
this.searchStr=searchStr
this.search()
},
methods: {
goBack: function () {
location.href = './find.html'
},
goToSong: function (sid) {
window.location.href = './song-info.html?sid=' + sid
},
search: function () {
// 发送请求,获取搜索结果,位置之前已经把data中的searchStr赋值了
// 所以可以直接使用this.searchStr
// 并且 以后每次在当前页面点击搜索的时候,由于跟文本框做了双向绑定
// 可以个使用this.searchStr获取到新输入的内容
fetch('http://127.0.0.1:3000/search?searchStr=' + this.searchStr)
.then(res => res.json())
.then(res => {
this.songList = res.data
})
},
clean: function () {
location.href = './search.html'
}
}
})
script>
body>
html>