前端考试新闻

lj-babubibu

于 2021-04-27 20:57:34 发布

阅读量99

点赞数

分类专栏：前端冲刺

本文链接：https://blog.csdn.net/weixin_43766925/article/details/116209981

版权

前端冲刺专栏收录该内容

10 篇文章 0 订阅

订阅专栏

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个页面</title>
    <script src="./jquery-3.6.0.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a{
            color: black;
            text-decoration: none;
            outline: none;
        }
        html{
            width: 100%;
            height: 100%;
        }
        body{
            width: 100%;
            height: 100%;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /* background-color: skyblue; */
        }
        .container ul{
            width: 600px;
            height: 232px;
            border: 1px solid #ccc;
            padding: 20px;
            /* background-color: yellow; */
         
            color:black;
        }
        .container ul li{
            border-bottom: 1px solid #ccc;
        
            line-height: 30px;
            list-style-image: url(images/disc.jpg);
        }
        .container ul span{
            float: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="title"><span>新闻中心</span></div>
            <ul id="news">
                
            </ul>
        </div>
    </div>

    <script>

        window.onload = function(){
            
            $.ajax({
                type: "get",
                url: "http://60.205.177.189:8080/news/getAllNews",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (res) {
                    console.log(res.data);
                    let resArr = res.data;
                    for(let i = 0; i < resArr.length; i++){
                        let str = `<li><a id=${resArr[i].newsid} >${resArr[i].newstitle}</a> <span>${resArr[i].newsdate}</span>  </li> `;
                        $("#news").append(str);

                    }
                    
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

        $("#news").click(function(e){
            console.log(e.target.id);
            let id = e.target.id;
            $.ajax({
                type: "get",
                url: "http://60.205.177.189:8080/news/getNewsById/"+id,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (res) {
                    console.log(res.data);
                    window.location.href = "./newsdetail.html?newsid="+id;
                    
                },
                error: function (err) {
                    console.log(err);
                }
            })
            
        })
                // href="newsDetail.html?newsid=${resArr[i].newsid}
        
        

    </script>
</body>
</html>

newsdetail.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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a{
            color: black;
            text-decoration: none;
            outline: none;
        }
        html{
            width: 100%;
            height: 100%;
        }
        body{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        .container{
            width: 600px;
            height: 100%;
            display: flex;
            
            align-items: center;
            flex-direction: column;
            /* background-color: skyblue; */
        }
        #title{
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            margin: 10px;
        }
        #date{
            width: 100%;
            text-align: center;
            font-weight: bold;
            font-size: 12px;
            margin: 10px;
            border-bottom: 1px solid #ccc;
        }
        #content{
            font-size: 15px;
            /* text-align: center; */
            margin: 10px;
        }
    </style>
    <script src="./jquery-3.6.0.min.js"></script>

</head>
<body>  
    <div class="container">
        <div id="title" >

        </div>
        <div id="date">

        </div>
        <div id="content">
            
        </div>
    </div>
    <script>
        let Newsid = null;
        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;

                }

        }

        Newsid = getParams("newsid");

        $.ajax({
                type: "get",
                url: "http://60.205.177.189:8080/news/getNewsById/"+Newsid,
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (res) {
                    
                    let result = res.data;
                    console.log(result);
                    $("#title").text(result.newstitle)
                    $("#date").text(result.newsdate);
                    $("#content").text(result.newscontent)
                    
                },
                error: function (err) {
                    console.log(err);
                }
            })
    </script>
</body>
</html>