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>