SSM重新开发计科院主页
SSM重新开发计科院主页
先来看看效果
点击新闻表项查看:
新闻编辑页面:
编辑新闻:
删除多个之后:
源码:
jky.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计科院主页</title> <script src="./jquery.min.js"></script> </head> <body> <div style="width: 974px;position: relative;left: 50%;margin-left:-487px;"> <img src="./img/head.png" alt="" width="974" height="370"> <div class="content-wrap"> <div style="height: 300px;"> <div class="fl"> <div class="title-wrap"> <div class="title"> 图片新闻 </div> <div class="more">MORE>></div> </div> <img src="./img/turn3.png" alt="" width="310" height="200" style="float: left;"> <ul class="news-list" id="tpxw" style="float: right;"> </ul> </div> <div class="fr"> <div class="title-wrap"> <div class="title"> 学术交流 </div> <div class="more">MORE>></div> </div> <ul class="news-list" id="xsjl" style="width: 260px;"> </ul> </div> </div> <div style="height: 450px;"> <div class="fl"> <div class="title-wrap"> <div class="title"> 新闻速递 </div> <div class="more">MORE>></div> </div> <ul class="news-list" id="xwsd" style="width: 590px;"> </ul> </div> <div class="fr"> <div class="title-wrap"> <div class="title"> 党建动态 </div> <div class="more">MORE>></div> </div> <ul class="news-list" id="djdt" style="width: 260px;"> </ul> </div> </div> <div style="height: 400px;"> <div class="fl"> <div class="title-wrap"> <div class="title"> 通知公告 </div> <div class="more">MORE>></div> </div> <ul class="news-list" id="tzgg" style="width: 590px;"> </ul> </div> <div class="fr"> <div class="title-wrap"> <div class="title"> 专题列表 </div> </div> <ul class="news-list" id="ztlb" style="width: 260px;"> </ul> </div> </div> </div> </div> <div class="news-detail-wrap none"> <div class="news-detail"> <div style="height: 40px; border-bottom: 2px solid #298d94;"> <div id="news-title"> title </div> <div id="news-time"> [5-11] </div> </div> <p id="news-content"> this is content </p> </div> </div> <script> let data = { tpxw: '图片新闻', xsjl: '学术交流', xwsd: '新闻速递', djdt: '党建动态', tzgg: '通知公告', ztlb: '专题列表', }; function catNews(type, index) { let news = data[type][index]; $('#news-title').text(news.title); $('#news-time').text(news.time); $('#news-content').text(news.content); $('.news-detail-wrap').removeClass('none'); } $('.news-detail-wrap').on('click', ev => { $('.news-detail-wrap').addClass('none'); }); $('.news-detail').on('click', ev => ev.stopPropagation()); $(function () { let keys = Object.keys(data); keys.forEach(key => { $.ajax({ url: '/get', data: { type: key, len: 15 }, success: res => { data[key] = res; let ul = $('#' + key); let index = 0; res.forEach(news => { ul.append(` <li> <div class="content" onclick="catNews('${key}', ${index})"> ${news.title} </div> <div class="time"> ${news.time} </div> </li> `); index++; }); } }); }); }) </script> </body> <style> .fl { float: left; width: 644px; height: 100%; } .fr { float: right; width: 312px; height: 100%; } .title-wrap { background-color: #aaa; width: 100%; height: 30px; } .title-wrap .title { float: left; height: 30px; line-height: 30px; font-size: 14px; background-color: #2780cb; color: #eee; } .title-wrap .more { float: right; height: 30px; line-height: 30px; font-size: 8px; } .news-list { border: 1px solid red; width: 275px; height: 85%; margin: 5px 8px 5px 5px; font-size: 12px; overflow: hidden; } .news-list li { height: 30px; line-height: 30px; } .news-list li * { height: 30px; line-height: 30px; } .content { float: left; width: 220px; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .content:hover { color: #07b1ff; } .time { height: 100%; margin-right: 8px; float: right; font-size: 10px; color: #999; } #xwsd .content { width: 550px; } #tzgg .content { width: 550px; } .news-detail-wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(180, 180, 180, .8); z-index: 999; } .none { display: none; } .news-detail { position: fixed; border: 1px solid #666; background: #fff; opacity: 1; left: 50%; top: 50%; margin-left: -200px; margin-top: -225px; width: 400px; height: 450px; } #news-title { float: left; height: 40px; font-size: 20px; line-height: 40px; font-weight: bold; text-indent: 10px; } #news-time { float: right; height: 40px; line-height: 40px; font-size: 15px; color: #aaa; margin-right: 5px; } #news-content { width: 390px; height: 390px; margin: 5px; word-break: break-all; word-wrap: break-word; } </style> </html>
news_editor.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新闻后台</title> <script src="./jquery.min.js"></script> </head> <body> <h1>新闻编辑...</h1> <hr> <table id="news"> <th> <td style="width: 80px;">所属板块</td> <td style="width: 150px;">标题</td> <td style="width: 50px;">时间</td> <td style="width: 250px;">内容</td> <td style="width: 80px;">操作</td> </th> </table> <div class="control-btns"> <a href="javascript:void(0)" class="add" onclick="editNews()"></a> </div> <div class="news-editor-wrap none"> <div class="news-editor"> <h3 style="background: rgba(7, 177, 255, 1);margin: 0;height: 50px;line-height: 50px;text-indent: 10px;color: #ccc;"> 新闻编辑</h3> <hr style="margin-top: 0;"> <div> <span class="label">标题:</span> <input type="text" id="title"> </div> <div> <span class="label">时间: </span> <input type="text" id="time"> </div> <div> <span class="label">所属板块: </span> <select id="type"> </select> </div> <div> <span class="label">内容: </span> <textarea id="content" cols="47" rows="16"></textarea> </div> <div> <button id="submit">提交</button> </div> </div> </div> <script> let refs = { tpxw: '图片新闻', xsjl: '学术交流', xwsd: '新闻速递', djdt: '党建动态', tzgg: '通知公告', ztlb: '专题列表', } let allNews = []; function editNews(index) { if (arguments.length < 1) { $('#title').val(''); $('#time').val(''); $('#content').val(''); $('.news-editor-wrap').removeClass('none'); } else if (arguments.length == 1) { let newsItem = allNews[index]; $('#title').val(newsItem.title); $('#time').val(newsItem.time); $('#content').val(newsItem.content); $('#type').val(newsItem.type); $('.news-editor-wrap').removeClass('none'); } } function deleteNews(index) { $.ajax({ url: '/delete', method: 'post', data: { index: index }, success: data => { console.log('hello'); location.reload(); } }); } Object.keys(refs).forEach(key => { $('#type').append(` <option value="${key}">${refs[key]}</option> `); }); $('.news-editor-wrap').on('click', () => $('.news-editor-wrap').addClass('none')); $('.news-editor').on('click', ev => ev.stopPropagation()); $.ajax({ url: '/getall', success: data => { allNews = data; for (let i = 0, len = data.length; i < len; i++) { if (!data[i]) { continue; } $('#news').append(` <tr> <td style="width: 20px;">${i + 1}</td> <td>${refs[data[i].type]}</td> <td>${data[i].title}</td> <td>${data[i].time}</td> <td>${data[i].content}</td> <td> <a href="javascript:void(0)" class="edit" onclick="editNews(${i})"></a> <a href="javascript:void(0)" class="delete" onclick="deleteNews(${i})"></a> </td> </tr> `); } } }); </script> <style> .edit { display: inline-block; background: url('./img/编辑.png'); background-size: 30px 30px; width: 30px; height: 30px; } .delete { display: inline-block; background: url('./img/删除.png') no-repeat; background-size: 20px 20px; width: 25px; height: 25px; } .add { display: inline-block; background: url('./img/添加.png') no-repeat; background-size: 20px 20px; width: 30px; height: 30px; } #news { margin: auto; text-align: center; } .news-editor-wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(180, 180, 180, .8); z-index: 999; } .news-editor { position: fixed; border: 1px solid #666; background: #fff; opacity: 1; left: 50%; top: 50%; margin-left: -200px; margin-top: -225px; width: 400px; height: 450px; } .label { display: inline-block; width: 100px; text-align: justify; text-justify: distribute-all-lines; text-align-last: justify; text-indent: 5px; } .control-btns { position: fixed; text-align: center; width: 30px; height: 80px; right: 50px; top: 120px; } .none { display: none; } input { text-decoration: none; outline: none; border: none; text-align: center; width: 240px; margin: 5px 0 5px; border-bottom: 1px solid #444; } select { width: 100px; margin: 5px 0 5px; border: none; background: inherit; border-bottom: 1px solid #333; } tr { border-bottom: 2px solid #222; } td { word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; } textarea { margin-left: 2px; } #submit { position: relative; border: none; background: rgba(7, 177, 255, 1); border-radius: 8px; color: #eee; left: 50%; top: 5px; font-size: 15px; margin-left: -50px; width: 100px; height: 30px; } #submit:hover { background: rgba(7, 177, 255, .8); } td:first-child { border-left: none; } td:last-child { border-right: none; } </style> </body> </html>