nodejs+easyui(抽奖活动后台)增删改查
来源：互联网 发布：知远防务网站 编辑：程序博客网 时间：2024/05/16 23:46
登录页面
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如下(登录和退出)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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'); }});//注销sessionrouter.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>
0 0
- nodejs+easyui(抽奖活动后台)增删改查
- easyui增删改查
- easyui增删改查
- jqGrid增删改查显示——显示+nodejs后台
- jqGrid增删改查显示——增加+nodejs后台
- jqGrid增删改查显示——修改+nodejs后台
- jqGrid增删改查显示——删除+nodejs后台
- EasyUI的增删查改(后台ASP.NET)
- SSM+EasyUI整合，简单实现后台增删改查操作
- NODEJS mongoose 增删改查
- easyui-datagrid 增删改查
- EasyUI 增删改查、分页
- easyUI 增删查改1
- easyUI datagrid增删改查
- EasyUI Datagrid增删改查
- EasyUi+mvc增删改查
- EASYUI的增删改查
- easyui+servlet增删改查
- jvm参数在哪里设置
- POJ 2369-Permutations（置换群-K次置换后还原有序）
- Android Animation动画
- 创建表
- Codeforces Round #407 (Div. 2)-E-The Great Mixing-滚动数组或者dfs
- nodejs+easyui(抽奖活动后台)增删改查
- unit3～～～系统延迟及定时机制
- 中文分词算法总结
- Tensorflow框架下实现Mnist数字识别
- webstorm快捷键大全
- PE 123（数论）
- webpack学习笔记_入门基础
- VirtualBox链接复制
- VS2014工程转化成VS2013工程
