前端做了三个界面，第一个index.html首页，可以选择查看的是哪一个csv的文件
第二给界面与第三个界面相似：
注意：数据表格界面可以进行翻页，红标为当前页，也可以输入多少页进行页面跳转
1.index.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">
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
<title>文件选择</title>
</head>
<style>
#title{
text-align: center;
}
#table {
width: auto;
margin: auto;
border: 1px solid rgb(22, 129, 36);
text-align: center;
}
#table th {
height: auto;
border: 1px solid rgb(22, 129, 36);
text-align: center;
}
#table td {
height: auto;
border: 1px solid rgb(22, 129, 36);
text-align: center;
}
button {
padding: 10px;
margin: 10px;
box-shadow: 0 0 10px rgb(21, 146, 10);
}
</style>
<body>
<div id="title">
<h1>文件选择<h1>
</div>
<div>
<table id="table">
<thead>
<th>序号</th>
<th>文件名</th>
<th>操作</th>
</thead>
<tbody id="showfilebody">
<table>
</div>
<script>
$.ajax({
url:"http://127.0.0.1:8000/index",
dataType:'json',
type:'get',
success:function(data){
var dataStr = JSON.stringify(data);
data = $.parseJSON(dataStr);
writelist(data);
},
error :function(arg1){
alert("加载数据失败");
console.log(arg1);
}
})
function writelist(data){
var showfilebody=document.getElementById('showfilebody');
var tdstr='';
for(var i=0;i<data.length;i++){
tdstr+='<td>'+parseInt(i+1)+'</td>';
tdstr+='<td>'+data[i]+'</td>';
if(i==0){
var but1="<button onClick='openAppleStore()'>查看</button>";
}else if(i==1)
{
var but1="<button id='s'+i onClick='opengoogleplaystore()'>查看</button>";
}
tdstr+='<td>'+but1+'</td>';
tdstr=tdstr+'</tr>';
}
showfilebody.innerHTML=tdstr;
}
function openAppleStore(){
window.open("showAppleStore.html");//页面跳转
}
function opengoogleplaystore(){
window.open("showgoogleplaystore.html");
}
</script>
</body>
</html>在index界面中可以点击查看按钮跳转到对应的数据查看的按钮。
2.showAppleStore.html界面代码 showgoogleplaystory.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">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<title>AppleStore.csv数据展示</title>
</head>
<style>
.tableCls, .tableCls td{
border: 1px solid rgb(22, 129, 36);
border-collapse: collapse;
text-align: center;
}
#pagination {
text-align: center;
margin: 10px;
}
#table {
width: auto;
margin: auto;
border: 1px solid rgb(22, 129, 36);
text-align: center;
}
#table th {
height: auto;
border: 1px solid rgb(22, 129, 36);
text-align: center;
}
#table td {
height: auto;
border: 1px solid rgb(22, 129, 36);
text-align: center;
}
#title {
text-align: center;
}
button {
padding: 10px;
margin: 10px;
box-shadow: 0 0 10px rgb(21, 146, 10);
}
#searchPage{
padding: 10px;
margin: 10px;
width: 30px;
box-shadow: 0 0 5px rgb(21, 146, 10);
}
</style>
<body>
<div id="title">
<h2>AppleStore.csv数据展示</h2>
</div>
<table id="table" >
<thead>
<th>序号</th>
<th>id</th>
<th>track_name</th>
<th>size_bytes</th>
<th>currency</th>
<th>price</th>
<th>currency</th>
<th>rating_count_tot</th>
<th>user_rating</th>
<th>user_rating_ver</th>
<th>ver</th>
<th>cont_rating</th>
<th>prime_genre</th>
<th>sup_devices.num</th>
<th>ipadSc_urls.num</th>
<th>lang.num</th>
<th>vpp_lic</th>
</thead>
<tbody id="tdbody">
</tbody>
</table>
<div id="pagination">
<button id="prev">《</button>
<button id="firstpageBtn">1</button>
<button id="currentBtn">1</button>
<button id="secondBtn">2</button>
<button id="thirdBtn">3</button>
<b>...</b>
<button id="next">》</button>
<d>跳转到<input id="searchPage"><d>页</d></input></d>
<button id="actionBtn">跳转</button>
<d id="showtotalpage">总页数：</d>
</div class>
<script>
var totalPage;
var currentPage=1;
function main(){
getdata(currentPage);
}
main();
/*
从服务器获取数据
*/
function getdata(pageNum){
$.ajax({
url : "http://127.0.0.1:8000/AppleStore",//后台请求的数据
data: {
pageNum: pageNum //请求获取数据的页数 如获取第三页数据 pageNum=3
},
dataType: 'json', //数据格式
type : "get",//请求方式
success : function(data) {
//推荐这种方式
var dataStr = JSON.stringify(data);
data = $.parseJSON(dataStr);
totalPage=data.totalPage;
writeFrom(data);
changePageText();
},
error : function (arg1) {
alert("加载数据失败");
console.log(arg1);
}
})
}
//将数据写入表格
function writeFrom(data){
var tbody = document.getElementById('tdbody');
var mytable=document.getElementById('table');
var columm=mytable.rows[0].cells.length;//获取表头列数
var rowStr = ""; //行的字符串的代码
var k=1;
for(var j=0;j<data.data.length;j++){
var tdStr = "";
for(var i=0;i<columm-1;i++)
{
if(i==0){
tdStr+="<td>"+k+"</td>";
}
tdStr += "<td>"+data.data[j][i]+"</td>";
}
k++;
rowStr = rowStr + tdStr + "</tr>";
}
tbody.innerHTML=rowStr;
}
//绑定向前翻页事件
prev.onclick = function () {
if (currentPage > 1) {
currentPage--;
getdata(currentPage);
changePageText();
} else {
alert('当前为第一页！')
}
}
currentBtn.onclick = function () {
alert("显示页为当前页");
}
secondBtn.onclick = function () {
var st=document.getElementById('secondBtn').textContent;
currentPage=parseInt(st);
getdata(st);
}
thirdBtn.onclick = function () {
var st=document.getElementById('thirdBtn').textContent;
currentPage=parseInt(st);
getdata(st);
}
//绑定向后翻页事件
next.onclick = function () {
console.log("总页数:"+totalPage);
if (currentPage <= totalPage) {
currentPage++;
getdata(currentPage);
changePageText();
} else {
alert('当前为最后一页！')
}
}
firstpageBtn.onclick = function () {
currentPage=1;
getdata(currentPage);
changePageText();
}
//输入框跳转特定页
actionBtn.onclick = function () {
var st=document.getElementById('searchPage').value;
st=parseInt(st);
if(st>0&&st<totalPage+1)
{
currentPage=st;
getdata(currentPage);
changePageText();
}else{
alert("此页不存在");
}
}
//更改页标显示
function changePageText(){
var isShowfirst=document.getElementById("firstpageBtn");
var isShowsecond=document.getElementById("secondBtn");
var isShowthird=document.getElementById("thirdBtn");
if(currentPage>0&¤tPage<totalPage+1)
{
$('#currentBtn').text(currentPage);
$('#showtotalpage').text("总页数："+totalPage);
document.getElementById('currentBtn').style.color='#ff3333';
$('#secondBtn').text(currentPage+1);
$('#thirdBtn').text(currentPage+2);
if(currentPage==1)
{
isShowfirst.style.display="none"
isShowsecond.style.display="inline-block";
isShowthird.style.display="inline-block";
}
else if(currentPage==totalPage)
{
isShowfirst.style.display="inline-block";
isShowsecond.style.display="none";
isShowthird.style.display="none";
}
else if(currentPage==totalPage-1){
isShowfirst.style.display="inline-block";
isShowsecond.style.display="inline-block";
isShowthird.style.display="none";
}else{
isShowfirst.style.display="inline-block";
isShowsecond.style.display="inline-block";
isShowthird.style.display="inline-block";
}
}else{
alert("不存在此页");
}
}
$(document).ready(function(){
$('searchPage').keydown(function(event){
if(event.keyCode=13){
alert(document.getElementById('searchPage').textContent);
alert('sss');
}
})
})
</script>
</body>
</html>3.后端使用js +express编写 先异步解析csv文件，存到内存中，接受前端请求，将相应的数据传到前端。后端使用的跨域模块需要自行下载 npm install cors --save 就可以
server.js代码如下：
//const csv = require('csvtojson')
var express=require('express')
let cors = require('cors')
//这种解析csv文件有时会出现json对象包含json对象，数据发送到前端后不宜处理
// const converter = csv()
// converter.fromFile('/home/hezhu/下载/AppleStore.csv')
// converter.then((json1) => {
// console.log(json1[0]);
// global.json=json1;
// //异步操作、获取到csv数据之后在启动服务器
// startServer();
// })
//此篇中使用的是将csv读取的数据转化为数字储存，异步读取两个csv文件
var fs = require("fs");
const { table } = require('console');
var AppleStorefinalarr=new Array;
var AppleStoretotalPage;
var googleplayfinalarr=new Array;
var googleplaytotalPage;
async function main(){
await readAppleStore();
await readgoogleplaystore();
await startServer();
}
main();
async function readAppleStore(){
fs.readFile('AppleStore.csv', function (err, data) {
var table = new Array();
if (err) {
console.log(err.stack);
return;
}
ConvertToTable(data, function (table) {
//丢弃表头
var j=0;
for(var i=1;i<table.length-1;i++){
AppleStorefinalarr[j++]=table[i];
}
AppleStoretotalPage=Math.ceil(AppleStorefinalarr.length/25);//向上取整获取数据总页数
console.log(AppleStoretotalPage);//每页25条数据
//startServer();
})
});
console.log("程序执行完毕1");
}
function readgoogleplaystore(){
fs.readFile('googleplaystore.csv', function (err, data) {
var table = new Array();
if (err) {
console.log(err.stack);
return;
}
ConvertToTable(data, function (table) {
//丢弃表头
var j=0;
for(var i=1;i<table.length-1;i++){
googleplayfinalarr[j++]=table[i];
}
googleplaytotalPage=Math.ceil(googleplayfinalarr.length/25);//向上取整获取数据总页数
console.log(googleplaytotalPage);//每页25条数据
//startServer();
})
});
console.log("程序执行完毕2");
}
function ConvertToTable(data, callBack) {
data = data.toString();
var table = new Array();
var rows = new Array();
rows = data.split("\r\n");
for (var i = 0; i < rows.length; i++) {
//因为数据中存在双引号，双引号中含有逗号
table.push(rows[i].split(/,s*(?![^"]*"\,)/));//以双引号以外的逗号对数据进行分隔
//std=std.split(/,s*(?![^"]*"\,)/);
}
callBack(table);
}
var app=express();
app.use(cors())
//根目录
app.get('/AppleStore',function(req,res){
console.log(req.query.pageNum)
//console.log("欢迎进入nodejs");
var nowArray=new Array;
var j=0;
nowArray=[];
for(var i=(req.query.pageNum-1)*25;i<25*req.query.pageNum;i++) {
if(AppleStorefinalarr[i]!=null){
nowArray[j++]=AppleStorefinalarr[i];
}
}
//每一次数据发送都包含流了当页数据与总页数
var data={
totalPage:AppleStoretotalPage,
data:nowArray
}
res.send(data);
})
app.get('/index',function(req,res){
var nowArray=new Array;
nowArray=[];
nowArray[0]="AppleStore.csv";
nowArray[1]="googleplaystore.csv";
res.send(nowArray);
})
app.get('/googleplaystore',function(req,res){
console.log(req.query.pageNum)
//console.log("欢迎进入nodejs");
var nowArray=new Array;
var j=0;
nowArray=[];
for(var i=(req.query.pageNum-1)*25;i<25*req.query.pageNum;i++) {
if(googleplayfinalarr[i]!=null){
nowArray[j++]=googleplayfinalarr[i];
}
}
var data={
totalPage:googleplaytotalPage,
data:nowArray
}
res.send(data);
})
//服务器主体函数
function startServer(){
var server=app.listen(8000,function(req,res){
var host=server.address().address
var port=server.address().port
console.log("访问地址为 http://%s:%s", host, port)
})
}
1597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
