HTML+CSS实训——Day12——把数据都放在服务器上

最新推荐文章于 2024-07-25 11:52:08 发布

Sol-itude

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量783

点赞数 1

分类专栏：前端实训课文章标签： html css 服务器

本文链接：https://blog.csdn.net/qq_42887663/article/details/131102174

版权

前端实训课专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前言

昨天我们把一些基本的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>Find</title>
    <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>SQ</span>
                        <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-info</title>
	<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>search</title>
    <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>