<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.home {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 50%;
border: 1px solid #ccc;
padding: 30px 10px;
}
.container li {
padding: 10px 0;
list-style-type: none;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
}
.container li a {
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<div class="home">
<ul class="container">
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
<li><a href=""></a><span></span></li>
</ul>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
let ul = document.querySelector('.container')
let li = document.querySelectorAll('li')
$.ajax({
type: 'get',
url: 'http://60.205.177.189:8080/news/getAllNews',
success(res) {
let resArray = res.data
console.log(resArray)
li.forEach((item, index) => {
item.childNodes[0].innerHTML = resArray[index].newstitle
item.childNodes[0].href = `newsDetail.html?newsid=${resArray[index].newsid}`
item.childNodes[1].innerHTML = resArray[index].newsdate
})
},
})
</script>
</html>
newsdetail
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.content {
width: 50%;
border: 1px solid #ccc;
padding: 30px 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="navigator"></div>
<div class="content"></div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
let container = document.querySelector('.content')
let title = document.querySelector('.header')
let time = document.querySelector('.navigator')
$.ajax({
type: 'get',
url: 'http://60.205.177.189:8080/news/getAllNews',
success(res) {
let resArray = res.data
console.log(resArray)
resArray.forEach((element) => {
if (element.newsid == getParams('newsid')) {
container.innerHTML = element.newscontent
title.innerHTML = element.newstitle
time.innerHTML = element.newsdate
}
})
},
})
function getParams(paras) {
var url = location.href
var paraString = url
.substring(url.indexOf('?') + 1, url.length)
.split('&')
var paraObj = {}
for (i = 0; (j = paraString[i]); i++) {
paraObj[j.substring(0, j.indexOf('=')).toLowerCase()] = j.substring(
j.indexOf('=') + 1,
j.length
)
}
var returnValue = paraObj[paras.toLowerCase()]
if (typeof returnValue == 'undefined') {
return ''
} else {
return returnValue
}
}
</script>
</html>