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.bodyvar phone = req.body.phonevar upwd = req.body.upwdvar 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.uidvar 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.datasetInterval(() => {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.searchurl = 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.searchurl = url.slice(1)var params = new URLSearchParams(url)var searchStr = params.get('searchStr')this.searchStr=searchStrthis.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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！