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">欢迎&nbsp;&nbsp;{{userName}}&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 + "&nbsp;&nbsp;&nbsp;&nbsp;"+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;">
        &nbsp;手机号：<input id="phones" name="phones" class="easyui-textbox" >
        &nbsp; 奖品名：
        <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>
        &nbsp;中奖时间：<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>昵&nbsp;&nbsp;&nbsp;称:</td>
                <td><input type="text" id="nickname" name="nickname" style="width: 150px"></td>
            </tr>
            <tr>
                <td>Q&nbsp;&nbsp;&nbsp;Q:</td>
                <td><input type="text" id="qq" name="qq"  style="width: 150px" ></td>
            </tr>
            <tr>
                <td>地&nbsp;&nbsp;&nbsp;址:</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>