目录
歌曲来自于酷我音乐热歌榜
热搜数据来自于微博热搜
库我音乐前台代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrapTable</title>
<!-- <link rel="stylesheet" href="../css/bootstrap3/css/bootstrap.min.css">-->
<link rel="stylesheet" href="../bootstrap-4.3.1-dist/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="../css/bootstrap-table/css/bootstrap-table.min.css">-->
<link rel="stylesheet" href="../bootstrap-table-dist/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="../bootstrap-4.3.1-dist/css/all.css">
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<!-- <script src="../js/bootstrap3/js/bootstrap.min.js"></script>-->
<script src="../bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<!-- <script src="../js/bootstrap-table/js/bootstrap-table.min.js"></script>-->
<script src="../bootstrap-table-dist/dist/bootstrap-table.min.js"></script>
<script src="../js/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="../js/bootstrap-table/js/tableExport.js"></script>
<!-- <script src="../js/bootstrap-table/js/bootstrap-table-export.js"></script>-->
<script src="../bootstrap-table-dist/dist/extensions/export/bootstrap-table-export.js"></script>
<style>
.img-show-albumpic {
width: 54px;
height: 54px;
}
body {
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="text-light text-center"><h3>欢迎来到库我音乐</h3></div>
<div class="bootstrap-table bootstrap4">
<table id="tab">
</table>
</div>
</div>
<script>
$(function () {
$("audio").mouseover(function () {
$("audio").removeClass();
})
$("#tab").bootstrapTable({
rowAttributes: function (row, index) {
/* console.log(row)*/
},
showButtonIcons: true,
classes: ["table", "table-borderless", "table-hover"],
theadClasses: "thead-light",
search: true,
pagination: true,
pageSize: 10,
pageList: [5, 10, 15, 20],
showColumns: true, //是否显示所有的列
showRefresh: true,
showToggle: true,
uniqueId: "ID",
ajax: function (request) {
/* $.get("url",function () {
},"json")*/
$.ajax({
type: "GET",
url: "http://www.kuwo.cn/api/www/bang/bang/musicList?bangId=16&pn=1&rn=30&reqId=e31ab120-d04c-11e9-82cd-e5f81f95730c",
dateType: "json",
success: function (data) {
request.success({
row: data.data.musicList
});
// console.log(data);
$('#tab').bootstrapTable('load', data.data.musicList);
}
}
)
},
columns: [
{
field: "albumpic",
title: "序号",
width: 150,
align: 'right',
valign: 'middle',
formatter: function (value, row, index) {
return "<img src='" + value + "' class='img-show-albumpic'>";
}
}, {
field: "name",
title: "歌曲",
width: 200,
align: 'left',
valign: 'middle'
}, {
field: "artist",
title: "歌手"
}, {
field: "album",
title: "专辑"
}, {
field: "songTimeMinutes",
title: "时长",
formatter: function (value, row, index) {
var audioSrc;
$.ajax({
type: "GET",
url: "http://localhost:8080/music",
data: {rid: row.rid},
dataType: "json",
async: false,
success: function (val) {
// audioSrc = val.url;
// console.log(audioSrc);
audioSrc= " <audio class='music1 one' controls=\"controls\" loop=\"loop\" autoplay=\"autoplay\" preload >\n" +
" <source src=\""+val.url+"\" />\n" +
" </audio>";
}
});
return audioSrc;
}
}],
showExport: true, //显示导出按钮
exportDataType: "all", //导出数据类型，三种：
exportTypes: ['excel', 'xlsx'], //导出类型，basic', 'all', 'selected'
//exportButton: $('#btn_export'), //为按钮btn_export 绑定导出事件 自定义导出按钮(可以不用)
exportOptions: {
//ignoreColumn: [0,0], //忽略某一列的索引
fileName: '数据导出', //文件名称设置
worksheetName: '微博排行榜', //表格工作区名称
tableName: '热搜数据',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
}
});
})
</script>
</body>
</html>库我音乐后台代码如下：
Servlet代码：
package cn.campusshop.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.impl.client.HttpClientBuilder;
import org.apache.http.util.EntityUtils;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import cn.campusshop.model.MusicModel;
import cn.campusshop.utils.HTTPUtils;
/**
* Servlet implementation class MusicController
*/
@WebServlet("/music")
public class MusicController extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public MusicController() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
HttpClient client = HttpClientBuilder.create().build();
System.out.println("客户端生成完毕.");
String rid = request.getParameter("rid");
System.out.println("rid:" + rid);
String url = "http://kuwo.cn/url?format=mp3&rid=" + rid + "&response=url&type=convert_url3";
// 获取响应资源
HttpResponse responseM = HTTPUtils.getHtml(client, url);
// 获取响应状态码
int statusCode = responseM.getStatusLine().getStatusCode();
System.out.println(statusCode);
MusicModel model = new MusicModel();
if (statusCode == 200) {// 200表示成功
String entity = EntityUtils.toString(responseM.getEntity(), "utf-8");
// model = (MusicModel) JSON.parse(entity);
JSONObject modelJ = JSON.parseObject(entity);
String url1 = modelJ.getString("url");
String msg = modelJ.getString("msg");
String code = modelJ.getString("code");
model.setCode(code);
model.setMsg(msg);
model.setUrl(url1);
} else {
return;
}
String jsonString = JSON.toJSONString(model);
response.setContentType("application/json;charset=utf-8");
response.setHeader("Access-Control-Allow-Origin", "*");
response.getWriter().write(jsonString);
System.out.println("整个结果输出完毕，程序结束.");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
model代码：
/**
* Copyright (C) 2019 Baidu, Inc. All Rights Reserved.
*/
package cn.campusshop.model;
/**
* @author zhulang
* @version 创建时间：2019年9月5日 下午11:26:41
*/
public class MusicModel {
private String code;// 状态
private String msg;// 信息音乐名
private String url;// 链接
/**
* @return the code
*/
public String getCode() {
return code;
}
/**
* @param code the code to set
*/
public void setCode(String code) {
this.code = code;
}
/**
* @return the msg
*/
public String getMsg() {
return msg;
}
/**
* @param msg the msg to set
*/
public void setMsg(String msg) {
this.msg = msg;
}
/**
* @return the url
*/
public String getUrl() {
return url;
}
/**
* @param url the url to set
*/
public void setUrl(String url) {
this.url = url;
}
/*
* (non-Javadoc)
*
* @see java.lang.Object#toString()
*/
@Override
public String toString() {
return "HotModel [code=" + code + ", msg=" + msg + ", url=" + url + "]";
}
}
HTTPUtils工具类
/**
* Copyright (C) 2019 Baidu, Inc. All Rights Reserved.
*/
package cn.campusshop.utils;
import java.io.IOException;
/**
* @author zhulang
*@version 创建时间：2019年9月5日 下午11:44:39
*/
import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.HttpVersion;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.message.BasicHttpResponse;
public class HTTPUtils {
public static HttpResponse getHtml(HttpClient client, String url) {
// 获取响应文件，即HTML，采用get方法获取响应数据
HttpGet getMethod = new HttpGet(url);
HttpResponse response = new BasicHttpResponse(HttpVersion.HTTP_1_1, HttpStatus.SC_OK, "OK");
try {
// 通过client执行get方法
response = client.execute(getMethod);
} catch (IOException e) {
e.printStackTrace();
} finally {
// getMethod.abort();
}
return response;
}
}
微博热搜前台代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrapTable</title>
<link rel="stylesheet" href="../css/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-table/css/bootstrap-table.min.css">
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap3/js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table/js/bootstrap-table.min.js"></script>
<script src="../js/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="../js/bootstrap-table/js/tableExport.js"></script>
<script src="../js/bootstrap-table/js/bootstrap-table-export.js"></script>
</head>
<body>
<div class="container">
<div class="bootstrap-table">
<table class="table" id="tab">
<div>
</div>
</table>
</div>
</div>
<script>
$(function () {
$("#tab").bootstrapTable({
search: true,
pagination: true,
pageSize: 10,
pageList: [5, 10, 15, 20],
showColumns: true,
showRefresh: true,
showToggle: true,
ajax: function (request) {
/* $.get("url",function () {
},"json")*/
$.ajax({
type: "GET",
url:"http://localhost:8080/hot",
dateType: "json",
success: function (data) {
request.success({
row: data
});
console.log(data);
$('#tab').bootstrapTable('load', data);
}
}
)
},
columns: [
{
field: "hotName",
title: "微博热搜",
width: 200,
align: 'left',
valign: 'middle'
}, {
field: "hotRank",
title: "热搜排名"
}, {
field: "releaseTime",
title: "热搜度"
}],
showExport: true, //显示导出按钮
exportDataType: "all", //导出数据类型，三种：
exportTypes: ['excel', 'xlsx'], //导出类型，basic', 'all', 'selected'
//exportButton: $('#btn_export'), //为按钮btn_export 绑定导出事件 自定义导出按钮(可以不用)
exportOptions: {
//ignoreColumn: [0,0], //忽略某一列的索引
fileName: '数据导出', //文件名称设置
worksheetName: '微博排行榜', //表格工作区名称
tableName: '热搜数据',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
}
})
})
</script>
</body>
</html>微博热搜后台代码如下：
Servlet代码：
package cn.campusshop.controller;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.http.ParseException;
import org.apache.http.client.HttpClient;
import org.apache.http.impl.client.HttpClientBuilder;
import com.alibaba.fastjson.JSON;
import cn.campusshop.model.HotModel;
import cn.campusshop.utils.URLHandle;
/**
* Servlet implementation class HotController
*/
@WebServlet("/hot")
public class HotController extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* Default constructor.
*/
public HotController() {
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("正在生成客户端...");
HttpClient client = HttpClientBuilder.create().build();
System.out.println("客户端生成完毕.");
String url = "https://s.weibo.com/top/summary";
List<HotModel> hotList = null;
// 开始解析
try {
System.out.println("开始响应客户端...");
hotList = URLHandle.urlParser(client, url);
System.out.println("响应完成.");
} catch (ParseException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
System.out.println("开始输出结果...");
for (HotModel hot : hotList) {
System.out.println(hot);
}
response.setContentType("application/json;charset=utf-8");
String string = JSON.toJSONString(hotList);
// string = new String(string.getBytes("ISO-8859-1"), "UTF-8");
response.setHeader("Access-Control-Allow-Origin", "*");
response.getWriter().write(string);
System.out.println("整个结果输出完毕，程序结束.");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
HotModel代码：
/**
* Copyright (C) 2019 Baidu, Inc. All Rights Reserved.
*/
package cn.campusshop.model;
/**
* @author zhulang
* @version 创建时间：2019年9月5日 下午11:26:41
*/
public class HotModel {
private String hotRank;// 热搜排名
private String hotName;// 热搜名
private String releaseTime;// 热搜度
/**
* @return the hotRank
*/
public String getHotRank() {
return hotRank;
}
/**
* @param hotRank the hotRank to set
*/
public void setHotRank(String hotRank) {
this.hotRank = hotRank;
}
/**
* @return the hotName
*/
public String getHotName() {
return hotName;
}
/**
* @param hotName the hotName to set
*/
public void setHotName(String hotName) {
this.hotName = hotName;
}
/**
* @return the releaseTime
*/
public String getReleaseTime() {
return releaseTime;
}
/**
* @param releaseTime the releaseTime to set
*/
public void setReleaseTime(String releaseTime) {
this.releaseTime = releaseTime;
}
/*
* (non-Javadoc)
*
* @see java.lang.Object#toString()
*/
@Override
public String toString() {
return "HotModel [hotRank=" + hotRank + ", hotName=" + hotName + ", releaseTime=" + releaseTime + "]";
}
}
URLHandle代码：
/**
* Copyright (C) 2019 Baidu, Inc. All Rights Reserved.
*/
package cn.campusshop.utils;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.util.EntityUtils;
import cn.campusshop.model.HotModel;
/**
* @author zhulang
* @version 创建时间：2019年9月5日 下午11:40:21
*/
public class URLHandle {
public static List<HotModel> urlParser(HttpClient client, String url) throws IOException {
// 创建一个接受数据的数组
List<HotModel> data = new ArrayList<>();
// 获取响应资源
HttpResponse response = HTTPUtils.getHtml(client, url);
// 获取响应状态码
int statusCode = response.getStatusLine().getStatusCode();
System.out.println(statusCode);
if (statusCode == 200) {// 200表示成功
// 获取响应实体内容，并且将其转换为utf-8形式的字符串编码
String entity = EntityUtils.toString(response.getEntity(), "utf-8");
System.out.println("开始解析...");
data = HotParse.getData(entity);
System.out.println("URL解析完成.");
} else {
EntityUtils.consume(response.getEntity());// 释放资源实体
}
System.out.println("返回数据.");
return data;
}
}
HotParse代码：
/**
* Copyright (C) 2019 Baidu, Inc. All Rights Reserved.
*/
package cn.campusshop.utils;
import java.util.ArrayList;
import java.util.List;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
import cn.campusshop.model.HotModel;
/**
* @author zhulang
* @version 创建时间：2019年9月5日 下午11:42:29
*/
public class HotParse {
public static List<HotModel> getData(String entity) {
List<HotModel> data = new ArrayList<>();
// 采用jsoup解析
Document doc = Jsoup.parse(entity);
// 根据页面内容分析出需要的元素
Elements elements = doc.select("tbody").select("tr");
System.out.println(elements);
for (Element element : elements) {
HotModel hot = new HotModel();
hot.setHotRank(element.select(".td-01").text());// class等于board-index的i标签
hot.setHotName(element.select("td[class=\"td-02\"] a").text());// 带有class属性的p元素
hot.setReleaseTime(element.select("td[class=\"td-02\"] span").text());
data.add(hot);
}
return data;
}
}
HTTPUtils代码：
/**
* Copyright (C) 2019 Baidu, Inc. All Rights Reserved.
*/
package cn.campusshop.utils;
import java.io.IOException;
/**
* @author zhulang
*@version 创建时间：2019年9月5日 下午11:44:39
*/
import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.HttpVersion;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.message.BasicHttpResponse;
public class HTTPUtils {
public static HttpResponse getHtml(HttpClient client, String url) {
// 获取响应文件，即HTML，采用get方法获取响应数据
HttpGet getMethod = new HttpGet(url);
HttpResponse response = new BasicHttpResponse(HttpVersion.HTTP_1_1, HttpStatus.SC_OK, "OK");
try {
// 通过client执行get方法
response = client.execute(getMethod);
} catch (IOException e) {
e.printStackTrace();
} finally {
// getMethod.abort();
}
return response;
}
}
pom文件jar包
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>cn.campusshop</groupId>
<artifactId>realtimehot</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<!-- https://mvnrepository.com/artifact/org.jsoup/jsoup -->
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.11.3</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclient -->
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>4.5.8</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpcore -->
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpcore</artifactId>
<version>4.4.11</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-logging/commons-logging -->
<dependency>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
<version>1.2</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.11</version>
</dependency>
<!--servlet -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.6</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
</dependency>
</dependencies>
<build>
<!--maven插件 -->
<plugins>
<!--jdk编译插件 -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.8</source>
<target>1.8</target>
<encoding>utf-8</encoding>
</configuration>
</plugin>
<!--tomcat插件 -->
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<!-- tomcat7的插件， 不同tomcat版本这个也不一样 -->
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<!-- 通过maven tomcat7:run运行项目时，访问项目的端口号 -->
<port>8080</port>
<!-- 项目访问路径 本例：localhost:9090, 如果配置的aa， 则访问路径为localhost:9090/aa -->
<charset>utf-8</charset>
<update>true</update>
<path>/</path>
<server>tomcat8</server>
<url>http://localhost:8080/manager/text</url>
</configuration>
</plugin>
</plugins>
</build>
</project>
跨域
* e.preventDefault();bootstrapvalidator组织浏览器默认提交
*var formdata=$("#form").serialize();//用来获取表单中的数据
//跨域：协议+IP地址+端口号，只要有一样不同就涉及到跨域，也就是不同服务器端资源的交互。
// 跨域的解决方法一：在服务器端设置response.setHeader("Access-Control-Allow-Origin", "http://localhost:63342");
// 跨域的解决方法二：在客户端设置响应数据类型dataType:"jsonp",
//jsonp用法：服务器端响应数据时需要将响应的json数据包裹在callback()里面；例如： response.getWriter().write(callback + "(" + json + ")");
版权声明：本文为weixin_42133396原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。