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

这篇具有很好参考价值的文章主要介绍了HTML+CSS实训——Day12——把数据都放在服务器上。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

昨天我们把一些基本的NodeJs的操作都学完了,今天把我们做的音乐app的一些数据放到服务器上面。文章来源地址https://www.toymoban.com/news/detail-508842.html

发现页

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>

到了这里,关于HTML+CSS实训——Day12——把数据都放在服务器上的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 若依框架放在服务器后台验证码出不来原因分析

    经发现是.env.production 文件里的VUE_APP_BASE_API没有修改成服务器上的域名地址,还是\\\'/prod-api\\\',所以加载不出来 vue.config.js里的某项配置后端端口不对,要修改成对应的后端端口即可。 如果验证码接口报500,当报如下错误的时候看日志文件: 详细日志显示的原因是: 解决方式是

    2024年02月11日
    浏览(34)
  • web期末作业设计网页:动漫网站设计——大鱼海棠(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 动漫网页设计作业 web网页设计与开发 html实训大作业

    常见网页设计作业题材有  个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他   等

    2024年02月04日
    浏览(63)
  • 数据库——报错:无法创建链接服务器 “(null)“ 的 OLE DB 访问接口 “Microsoft.Ace.OLEDB.12.0“ 的实例。

    安装完 AccessDatabaseEngine_X64 (2012).exe 后,准备在从Excel导入数据时: 输入如下代码 报错一: SQLServer阻止了对组件’AdHocDistributedQueries’的STATEMENT’OpenRowset/OpenDatasource’的访问,因为此组件已作为此服务器安全配置的一部分而被关闭。系统管理员可以通过使用。sp_configure启用’

    2024年02月12日
    浏览(36)
  • linux 17day 堡垒机 堡垒机下载 堡垒机安装 堡垒机使用 堡垒机管理服务器 堡垒机管理数据库

    https://jumpserver.org/ 没有注册的需要注册一个账号 即可下载 配置站点url 配置邮箱 创建要管理的服务器 现在还不能 管理 因为还没有配置用户名和密码 创建 特权用户用于管理 创建普通用户 添加命令过滤 命令过滤创建好 之后就需要 给用户名 和管理添加 管理用户也是一样的

    2024年02月20日
    浏览(43)
  • Qt+QtWebApp开发笔记(五):http服务器html中使用json触发ajax与后台交互实现数据更新传递

      前面完成了页面的跳转、登录,很多时候不刷新页面就想刷新局部数据,此时ajax就是此种技术,且是异步的。   本篇实现网页内部使用js调用ajax实现异步交互数据。   在js中使用 ajax是通过XMLHttpRequest来实现的。        链接:https://pan.baidu.com/s/1tJMTPhIIyVE40qWxRW

    2024年02月08日
    浏览(107)
  • 腾讯云轻量服务器和云服务器区别12点不同之处

    关于腾讯云轻量应用服务器和云服务器CVM的区别,之前腾讯云百科写过一篇文章来对比,阿腾云又更新了一篇新的区别对比文章,比之前的要更加详细,包括轻量服务器的使用限制、CPU型号、公网限制月流量、内网连通性、硬盘存储等多方面对比: 目录 腾讯云轻量应用服务

    2023年04月08日
    浏览(55)
  • 12-代码实战——服务器版表白墙

    目录 1.版本一:将数据存到内存中 ①约定前后端交互接口 a.添加表白信息: b.查询表白列表: ②在webapp包下创建message-wall.html前端文件 ③在java包下创建AddMessageServlet后端类 ④在java包下创建MessageListServlet后端类 2.版本二:将数据存到数据库中 ①创建数据库, 创建 messages 表 ②

    2024年02月10日
    浏览(52)
  • 21.12 Python 实现网站服务器

    Web服务器本质上是一个提供Web服务的应用程序,运行在服务器上,用于处理HTTP请求和响应。它接收来自客户端(通常是浏览器)的HTTP请求,根据请求的URL、参数等信息生成HTTP响应,并将响应返回给客户端,完成客户端的请求。Web服务器可以使用多种编程语言和技术实现,通

    2024年02月06日
    浏览(33)
  • debian11 debian12 安装图解 服务器+桌面

    debian11、debian12 安装详细图解(实体机) debian是linux几大分支之一,ubuntu也是debian的分支 debian不分服务器、个人桌面版本。 debian12已经发布,和11的安装方法完全一致,截至到更新,12.1版本已经发布。(2023.8.21更新) 官网:debian官网 现在从官网下载,默认就是12.1的网络安装

    2024年02月15日
    浏览(50)
  • 站群服务器 CentOS 搭建socks5多IP代理服务器详细教程,12个步骤教会你!

    首先要保证服务上能正常使用wget   tar   make   vim,如果正常就直接进入【第一步】 第一步 使用yum安装gcc、OpenLDAP开发库、PAM开发库和OpenSSL开发库 第二步 使用wget 下载SS5安装包 第三步 解压安装包 第四步 进入ss5目录安装ss5服务,依次执行一下命令,也可以全复制一起执行

    2024年02月04日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包