nodejs+easyui(抽奖活动后台)增删改查
登录页面
main页面
增删改查页面
1.npm install express-session
2.npm install art-template
3.app.js如下
var routes = require('./routes/index'); var users = require('./routes/users'); var bouncedLottery=require('./routes/bouncedLottery');//修改弹框信息查询 var app = express(); var template = require('art-template'); template.config('base', ''); template.config('extname', '.html'); app.engine('.html', template.__express); app.set('view engine', 'html'); app.use('/', routes); app.use('/users', users); app.use('/bouncedLottery', bouncedLottery);
4.index.js如下(登录和退出)
var express = require('express'); var router = express.Router(); var sessionUser=require('../public/user.js'); /* GET home page. */ router.get('/', function(req, res, next) { res.render('login', {title: 'index'}); }); router.post('/',function(req,res,next){ var userName = req.body.user; var password = req.body.password; if (userName == sessionUser.user.name && password == sessionUser.user.password) { req.session.sign = true; req.session.user = {name: userName}; res.render("main",{userName:userName}); }else{ res.end('sign failure'); } }); //注销session router.get('/out', function(req, res){ req.session.destroy(); res.redirect('/'); }) module.exports = router;
4.bouncedLottery.js如下(实现增删改查)
/** * Created by zfy on 2015/12/12. */ var express=require('express'); var router=express.Router(); var lottery= require('../modules/lotteryManage.js'); router.get('/', function(req, res, next) { res.render('bouncedLottery'); }); router.post('/list', function(req, res, next) { var rows = req.body.rows; var page = req.body.page; var phone = req.body.phone; var whereSql= req.body.names; var startTime = req.body.startTime; var endTime = req.body.endTime; lottery.getUserInfo(rows,page,phone,whereSql,startTime,endTime,function(err,result,total){ res.send({total: total, rows: result}); }); }); router.post('/update',function(req,res){//修改 var uid=req.body.messageId; var unickName=req.body.nickname; var uqq=req.body.qq; var uAddress=req.body.address; lottery.editUserInfo(uid,unickName,uqq,uAddress,function(err,result1){ if(!err){ res.send("true"); }else { console.log(err); res.json("false"); } }); }); router.post('/add',function(req,res){//增加 var phone=req.body.phone; var unickName=req.body.nickname; var uqq=req.body.qq; var uAddress=req.body.address; lottery.getUserByNickname(unickName,function(err,count){ if(count==0){ lottery.addUserInfo(unickName,phone,uqq,uAddress,function(err,result){ if(!err){ res.send("true"); }else { console.log(err); res.json({suc:false,errMsg:'添加失败!'}); } }); } else{ console.log(err); res.json({suc:false,errMsg:'该昵称已存在!'}); } }); }); router.post('/delete',function(req,res){//删除 var uid=req.body.ids; lottery.deleUserByid(uid,function(err,result){ if(!err){ res.send({success: true}); } else{ res.send({success: false}); } }); }); module.exports = router;
5.登录页面 login.html
<script type="text/javascript"> jQuery(function () { jQuery('.rem').click(function () { jQuery(this).toggleClass('selected'); }) jQuery('#d').click(function () { jQuery('.form_row ul').toggle(); event.cancelBubble = true; }) jQuery('body').click(function () { jQuery('.form_row ul').hide(); }) jQuery(".login-btn").click(function () { var username = jQuery("#signup_name").val(); var password = jQuery("#signup_password").val(); if ((username.trim() == "" || username.trim() == null) || (password.trim() == "" || password.trim() == null)) { alert("用户名和密码不能为空"); } }); }); </script> <body> <div class='signup_container'> <h1 class='signup_title'>用户登陆</h1> <img src='/images/logimg/people.png' id='admin'/> <form class="signup_form_form" id="signup_form" method="post" action="/" data-secure-action="https://www.tumblr.com/login" data-secure-ajax-action=""> <div id="signup_forms" class="signup_forms clearfix"> <div class="form_row first_row"> <input type="text" name="user" placeholder="请输入用户名" id="signup_name" required="true"> </div> <div class="form_row"> <input type="password" name="password" placeholder="请输入密码" id="signup_password" required="true"> </div> </div> <div class="login-btn-set"> <input type="submit" value="" class="login-btn"/></div> </form> <p class='copyright'>版权所有 XXX</p> </div> </body> </html>
6.主页面 main.html
<script> var url; function openTab(text, url, iconCls) { if ($("#tabs").tabs("exists", text)) { $("#tabs").tabs("select", text); } else { var content = "<iframe frameborder=0 scrolling='yes' style='width:100%;height:100%;' src='" + url + "'></iframe>"; $("#tabs").tabs("add", { title: text, iconCls: iconCls, closable: true, content: content }) } } function loginOut(){ $.messager.confirm('提示', '确定要退出登录吗?', function (r) { if (r) { window.location.href="/out"; } }); } </script> </head> <body class="easyui-layout"> <!--头部--> <div class="top" region="north"><span class="title">XXX抽奖活动后台管理系统</span><span class="out">欢迎 {{userName}} 登录 <a onclick="loginOut()" href="javascript:void(0)">退出</a></span></div> <!--内容--> <div region="center" style="overflow: hidden" id="center"> <div class="easyui-tabs" fit="true" id="tabs"> <div title="首页" data-options="iconCls:'icon-home'" id="main"> <div class="line20"></div> <div class="nlist-2"> <h3><i></i>站点信息</h3> <ul> <li>站点名称:内容管理系统</li> <li>公司名称:XXXXX</li> <li>网站域名:<a href="XXXX" target="_blank">XXXXXXX</a></li> <li>操作系统:XXXXX</li> <li>系统版本:XXX</li> </ul> </div> <div class="line20"></div> <div class="nlist-2"> <h3><i></i>开发团队</h3> <p>版权所有:XXXXX</p> </div> </div> </div> </div> <!--左侧导航--> <div region="west" style="width:200px; overflow-y:auto; overflow-x:auto;;height: 500px" title="导航菜单 " split="true"> <div class="easyui-accordion" data-options="fit:true,border:false"> <div title="信息管理" data-options="iconCls:'icon-lock'" style="padding:10px"> <a href="javascript:openTab('查询信息','/bouncedLottery','icon-page_white_text_width')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-page_white_text_width'">查询信息</a> </div> </div> <!--底部--> <div region="south" style="height: 45px; background: #0b97c4; "> <span class="footers">By XXX Email:XXXX</span> </div> </div> </body> </html>
7.bouncedLottery.html
<script type="text/javascript"> //查询 function searchMarket(){ var txt_phone = jQuery("#phones").textbox("getValue"); var com_name=jQuery("#names").combobox("getValue"); var startTime = jQuery("#startTime").datebox("getValue"); var endTime = jQuery("#endTime").datebox("getValue"); jQuery("#dg").datagrid("load", { "phone":txt_phone, "names":com_name, "startTime": startTime, "endTime": endTime }); } function addSave() { jQuery("#fm").form("reset"); //打开之前先清空数据 jQuery("#editMessage").dialog({ minimizable: true, maximizable: true, closed: false, buttons: [{ text: '确定', iconCls: 'icon-ok', handler: function() { $.post('../bouncedLottery/add', {phone:jQuery('#phone').val(),nickname:jQuery('#nickname').val(),qq:jQuery('#qq').val(),address:jQuery('#address').val()}, function(result){ if(result=="true"){ $.messager.show({title:'提示',msg:"添加成功"}); $("#dg").datagrid('reload'); $('#editMessage').dialog('close'); }else{ var result = JSON.parse(result); $.messager.confirm('错误',result.msg); } } ); } }, { text: '取消', handler: function() { $('#editMessage').dialog('close'); } }] }); } function formatOperate(value, row, index){ var update = '<a onclick="editMessage('+index+')" href="javascript:void(0)">修改</a>'; var dele='<a onclick="deleMessage('+row.id+')" href="javascript:void(0)">删除</a>'; return update + " "+dele; } function deleMessage(rowId){ jQuery.messager.confirm("系统提示","您确认要删除这条行情吗?",function(r){ if(r){ jQuery.post("/bouncedLottery/delete",{ids:rowId},function(result){ if(result.success){ jQuery.messager.show({title:"提示",msg:"删除成功!"}); jQuery("#dg").datagrid("reload"); }else{ jQuery.messager.show({title:"提示",msg:"删除失败!"}); } },"json"); } }); } //修改 function editMessage(rowIndex) { var row = jQuery("#dg").datagrid("getRows")[rowIndex]; jQuery("#id").val(row["id"]); jQuery('#nickname').val(row["nickname"]); jQuery('#qq').val(row["qq"]); jQuery('#address').val(row["address"]); jQuery('#phone').val(row["phone"]); jQuery("#editMessage").dialog({ minimizable: true, maximizable: true, closed: false, buttons: [{ text: '确定', iconCls: 'icon-ok', handler: function() { $.post('../bouncedLottery/update', {messageId:jQuery('#id').val(),nickname:jQuery('#nickname').val(),qq:jQuery('#qq').val(),address:jQuery('#address').val(),phone:jQuery('#phone').val()}, function(result){ if(result=="true"){ $.messager.show({title:'提示',msg:"修改成功"}); $("#dg").datagrid('reload'); $('#editMessage').dialog('close'); }else{ $.messager.confirm('错误',result.msg); } } ); } }, { text: '取消', handler: function() { $('#editMessage').dialog('close'); } }] }); } //easyui-datagrid行数据field原样输出html标签 function formatEncodeHtml(value, row, index) { return encodeHtml(value); } this.REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g; function encodeHtml(s) { return (typeof s != "string") ? s : s.replace(this.REGX_HTML_ENCODE, function ($0) { var c = $0.charCodeAt(0), r = ["&#"]; c = (c == 0x20) ? 0xA0 : c; r.push(c); r.push(";"); return r.join(""); }); } </script> </head> <body> <table id="dg" title="信息管理" class="easyui-datagrid" fitColumns="true" pagination="true" rownumbers="true" url="/bouncedLottery/list" fit="true" toolbar="#tb" data-options="pageSize:25,pageList:[10,15,25,50,100]"> <thead> <tr> <th field="id" width="50" align="center">编号</th> <th field="nickname" width="50" align="center">昵称</th> <th field="phone" width="80" align="center">联系方式</th> <th field="qq" width="50" align="center">QQ</th> <th field="address" width="150" align="center" data-options="formatter:formatEncodeHtml">地址</th> <th field="createTime" width="100" align="center">中奖时间</th> <th field="level" width="50" align="center" >奖品等级</th> <th field="jpname" width="100" align="center">奖品名称</th> <th field="operate" width="50" align="center" data-options="formatter:formatOperate">操作</th> </tr> </thead> </table> <div id="tb"> <div style="margin-top: 3px;"> 手机号:<input id="phones" name="phones" class="easyui-textbox" > 奖品名: <select id="names" name="names" class="easyui-combobox"> <option value="int0">请选择</option> <option value="int1=1">抽纸</option> <option value="int2=1">停车牌</option> <option value="int3=1">卡包</option> <option value="int4=1">iwatch</option> <option value="int5=1">烟灰缸</option> <option value="int6=1">靠枕</option> <option value="int7=1">多功能钥匙扣</option> <option value="int8=1">纸杯</option> <option value="int9=1">鼠标垫</option> <option value="int10=1">U盘(8G)</option> <option value="int11=1">U盘(16G)</option> <option value="int12=1">水杯</option> <option value="int13=1">小米充电宝(5000mAh)</option> <option value="int14=1">多功能刀具</option> </select> 中奖时间:<input id="startTime" name="startTime" class="easyui-datebox" style="width: 150px;"/> <span style="width: 10px;text-align: center">到 </span> <input id="endTime" name="endTime" class="easyui-datebox" style="width: 150px;"/> <a href="javascript:searchMarket()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-2012092109942'">查询</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="addSave()">添加</a> </div> </div> <!--修改用户信息--> <div id="editMessage" class="easyui-dialog" style="padding:5px;width:400px;height:320px;text-align: center" data-options="closed:'true'" title="修改用户"> <form action="" method="post" id="fm" > <input type="text" id="id" name="id" hidden="true" style="width: 150px"> <table cellpadding="10px" > <tr> <td>昵 称:</td> <td><input type="text" id="nickname" name="nickname" style="width: 150px"></td> </tr> <tr> <td>Q Q:</td> <td><input type="text" id="qq" name="qq" style="width: 150px" ></td> </tr> <tr> <td>地 址:</td> <td><input type="text" id="address" name="address" style="width: 150px" ></td> </tr> <tr> <td>联系方式:</td> <td><input type="text" id="phone" name="phone" style="width: 150px" ></td> </tr> </table> </form> </div> </body> </html>