<!DOCTYPE html>
<html>
<head>
<title>小鹿线后台管理系统</title>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css" />
<link rel='stylesheet' href='/stylesheets/common.css' />
<style>
.container{
width: 100vw;
height: 100vh;
background-color: #15151D;
overflow: hidden;
}
.main{
padding:20px 30px;
overflow: hidden;
}
.select{
display: flex;
justify-content: space-between;
padding:20px 30px;
background: #1B1C21;
border-radius: 24px;
}
.select form{
display: flex;
}
.select form > div{
margin:0;
}
.select select{
padding:0 20px;
width:350px;
height: 40px;
color:#999999;
background: #fff;
border-radius: 12px;
border:0;
outline: none;
}
.select .search{
display: flex;
width: 400px;
height: 40px;
margin-left:15px;
border-radius: 12px;
overflow: hidden;
}
.select .search input{
padding:0 10px;
flex:1;
}
.select .search .search-btn{
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 40px;
background-color: #067BFB;
}
.select .search .search-btn img{
width: 25px;
height: 25px;
}
.select button#addBtn{
width: 70px;
height: 40px;
line-height: 40px;
text-align: center;
color:#fff;
background-color: #067BFB;
border-radius: 12px;
}
.content{
margin-top:30px;
background: #1B1C21;
border-radius: 24px;
}
.table{
width: 100%;
color:#fff;
text-align: center;
}
.table thead tr{
height: 64px;
}
.table th{
text-align: center;
}
.table tbody tr td{
line-height: 48px;
}
.dialog{
position: fixed;
right:0;
left:0;
bottom:0;
top:0;
width: 100vw;
height: 100vh;
background: #000;
opacity: .5;
}
.dialog-wrap{
position: absolute;
left:50%;
top:50%;
z-index: 999;
padding:20px;
width: 460px;
margin-left:-120px;
background: #fff;
border-radius: 24px;
transform: translate(-50%,-50%);
}
.dialog-header{
position: relative;
}
.dialog-header > div{
position: absolute;
right:0;
top:0;
}
form > div{
margin: 20px 0;
}
.dialog-footer{
text-align: right;
}
.dialog-footer button,.dialog-footer span{
display: inline-block;
padding:6px 10px;
color:#fff;
background: #057BFB;
cursor: pointer;
}
.isDialog{
display: none;
}
.page{
width: 100%;
padding:20px;
color:#fff;
border-top:1px solid #ccc;
}
.page ul li{
margin-right: 6px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="select">
<form action="/like" method="get">
<select onChange="submitForm()" name="selectVal">
<% title.forEach(function(item){ %>
<option value="<%= item.name%>"><%= item.name%></option>
<% }) %>
</select>
<div class="search">
<input type="text" name="like">
<button class="search-btn">
<img src="/images/fangdajing.png" alt="">
</button>
</div>
</form>
<button id="addBtn">添加</button>
</div>
<div class="content">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>图片名称</th>
<th>图片路径</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<% title.forEach(function(item){ %>
<tr>
<td><%= item.id %></td>
<td><%= item.name %></td>
<td><%= item.imgurl %></td>
<td>
<img src="/images/btn_chakan.png" class="edit">
<img src="/images/btn_shanchu.png" alt="del">
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
<div class="page">
<ul class="pagination">
<li class="disabled"><a href="javascript:;"> 共<%= page.numData%>条 </a></li>
<li class="disabled"><a href="javascript:;"> 总<%= page.totalPage%>页 </a></li>
<%if(page.totalPage==0){ %>
<li class="disabled"><a href="javascript:;"> 首页 </a></li>
<%}else{ %>
<li><a href="/bannerList?pagecurrent=1"> 首页 </a></li>
<%} %>
<%if( page.current<=1){ %>
<li class="disabled"><a href="javascript:;"> 上一页 </a></li>
<%}else{ %>
<li><a href="/bannerList?pagecurrent=<%=page.current-1%>">上一页 </a></li>
<%} %>
<%for(var i=1;i<=page.totalPage;i++){ %>
<%if(i<10){%>
<li class="<%= page.current==i?'active':''%>"><a href="/bannerList?pagecurrent=<%=i%>"> <%=i%> </a></li>
<% }%>
<% }%>
<%if( page.current>= page.totalPage){ %>
<li class="disabled"><a href="javascript:;"> 下一页 </a></li>
<%}else{ %>
<li><a href="/bannerList?pagecurrent=<%=page.current+1%>"> 下一页 </a></li>
<%} %>
<%if(page.totalPage==0){ %>
<li class="disabled"><a href="javascript:;"> 尾页 </a></li>
<%}else{ %>
<li><a href="/bannerList?pagecurrent=<%= page.totalPage%>"> 尾页 </a></li>
<%} %>
</ul>
</div>
</div>
</div>
<div class="dialog isDialog"></div>
<div class="dialog-wrap isDialog">
<div class="dialog-header">
<h3>添加banner图</h3>
<div class="close">
<img src="/images/icon_guanbi.png" alt="">
</div>
</div>
<form action="/addBanner" enctype="multipart/form-data" method="post">
<div>
<p>图标名称</p>
<p>
<input type="text" class='form-control' name="imgName" />
</p>
</div>
<div>
<p>图片路径</p>
<input type="file" name="pic" class="upload-input" id="uploadInput" />
</div>
<div class="dialog-footer">
<span class="cancel">取消</span>
<button class="determine">确定</button>
</div>
</form>
</div>
<script src="/javascripts/jquery.js">
</script>
<script>
function submitForm(){
var form = document.getElementById('myform');
form.submit();
}
$(function(){
$('#addBtn').click(function(){
console.log('qqq')
$('.isDialog').show()
})
$('.cancel,.close').click(function(){
$('.isDialog').hide()
})
})
</script>
</body>
</html>var express = require('express');
var router = express.Router();
var db=require('../sql')
/* GET home page. */
router.get('/', function (req, res, next) {
var like =req.query.like||req.query.selectVal
db.query(`select * from banner where name like '%${like}%'`, function (err, results) {
console.log(results)
if (err) {
throw err;
} else {
var currentPage=req.query.pagecurrent
var page={}
// 当前移动多少数据
page.numData=results.length
// 要显示多少页
page.pageNum=4
// 当前在第几页
page.current=currentPage||1
// 移动有多少页
page.totalPage=parseInt(Math.ceil( page.numData /page.pageNum))
// 数据
var dataNow=results.slice((page.current-1)*(page.pageNum),(page.current)*(page.pageNum))
res.render('bannerList', { title:dataNow,page});
}
})
}
);
module.exports = router;增===========》图片
var express = require('express');
var router = express.Router();
var db=require('../sql.js')
var multiparty = require('multiparty');
/* GET home page. */
router.post('/', function(req, res) {
var form = new multiparty.Form();
//上传的图片需要保存某一个目录,目录必须存在
form.uploadDir = './public/upload';
form.parse(req,function(err,fields,files){
var imgName = fields.imgName[0];
console.log(imgName)
//上传图片的路径
var pic = files.pic[0].path;
db.query('insert into banner value (?,?,?)',[0,imgName,pic],function(err,data){
if( err ){
throw err;
}else{
db.query('select * from banner',function (err,data) {
if( err ){
throw err;
}else{
var currentPage=req.query.pagecurrent
var page={}
// 当前移动多少数据
page.numData=results.length
// 要显示多少页
page.pageNum=4
// 当前在第几页
page.current=currentPage||1
// 移动有多少页
page.totalPage=parseInt(Math.ceil( page.numData /page.pageNum))
// 数据
var dataNow=results.slice((page.current-1)*(page.pageNum),(page.current)*(page.pageNum))
res.render('bannerList', { title:dataNow,page});
}
})
}
})
})
})
module.exports = router;页面数据片==》分页
var express = require('express');
var router = express.Router();
var db=require('../sql.js')
/* GET home page. */
router.get('/', function(req, res) {
db.query('select * from banner', function (error, results, fields) {
if (error) throw error;
var currentPage=req.query.pagecurrent
var page={}
// 当前移动多少数据
page.numData=results.length
// 要显示多少页
page.pageNum=4
// 当前在第几页
page.current=currentPage||1
// 移动有多少页
page.totalPage=parseInt(Math.ceil( page.numData /page.pageNum))
// 数据
var dataNow=results.slice((page.current-1)*(page.pageNum),(page.current)*(page.pageNum))
res.render('bannerList', { title:dataNow,page});
});
})
module.exports = router;相关作者
这个人很懒，什么都没有留下
- 获取点赞0
- 文章阅读量264
评论（）