nodejs(登录,session,无加密,post,ajax,跳转,分页)

本是古典何须时尚 2022-06-02 06:10 164阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>
            用户名：<input type="text" id="uname"><br/>
            密码：<input type="password" id="upwd"><br/>
            <input type="submit" value="提交" id="btn_smt">
        </div>
    
        <script src="js/jquery.min.js"></script>
        <script>
            $("#btn_smt").click(function(){
                var uname=$("#uname").val();
                var upwd=$("#upwd").val();
                $.ajax({
                    type:"post",
                    url:"/login",
                    data:{uname:uname,upwd:upwd},
                    success:function(data){
                        if(data.code>0){
                            location.href="userlist.html";
                        }else{
                            alert(data.msg);
                        }
                    },
                    error:function(){
                        alert("网络故障，请检查");
                    }
                })
            });
        </script>
    </body>
    </html>

userlist.html:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            a{
                color: red;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <a id="logout">退出</a><br/>
        <table>
            <thead>
                <tr>
                    <td>tid</td>
                    <td>tname</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
                <td>
                    <a id="prePage">上一页</a>
                    <a id="nextPage">下一页</a>
                </td>
                <td>
                    <a id="firstPage">首页</a>
                    <a id="lastPage">尾页</a>
                </td>
            </tfoot>
        </table>
    
        <script src="js/jquery.min.js"></script>
        <script>
            var curpage=1;
            var totalpage=0;
            getpage(1);
            getTotalPage();
    
            $("#firstPage").click(function(){
                getpage(1);
                curpage=1;
            });
            $("#lastPage").click(function(){
                getpage(totalpage);
                curpage=totalpage;
            });
            $("#prePage").click(function(){
               if(curpage==1)
                   return;
               else if(curpage>1){
                   getpage(--curpage);
               }
            });
            $("#nextPage").click(function(){
                if(curpage==totalpage)
                    return;
                else if(curpage>=1&&curpage<totalpage){
                    getpage(++curpage);
                }
            });
    
            $("#logout").click(function(){
                $.ajax({
                    type:"get",
                    url:"/logout",
                    success:function(data){
                        if(data.code==1){
                            location.href="login.html";
                        }
                    },
                    error:function(){
                        alert("网络故障，请检查");
                    }
                });
            });
    
            function getpage(page){
                $.ajax({
                    type:"get",
                    url:"/userlist",
                    data:{page:page},
                    success:function(data){
                        if(data.code==-1){
                            location.href="login.html";
                        }
                        var html="";
                        for(var i=0;i<data.length;i++){
                            html+="<tr>";
                                html+="<td>"+data[i].uid+"</td>";
                                html+="<td>"+data[i].uname+"</td>";
                                html+="<td><a οnclick='deleteuser("+data[i].uid+")'>删除</a></td>";
                            html+="</tr>";
                        }
                        $("tbody").html(html);
                    },
                    error:function(){
                        alert("网络故障，请检查");
                    }
                });
            }
    
            function getTotalPage(){
                $.ajax({
                    type:"get",
                    url:"/totalpage",
                    success:function(data){
                        console.log("总页数："+data.pagecount);
                        totalpage=data.pagecount;
                    },
                    error:function(){
                        alert("网络故障，请检查");
                    }
                });
            }
    
            function deleteuser(uid){
                $.ajax({
                    type:"get",
                    url:"/deletepage",
                    data:{uid:uid},
                    success:function(data){
                        if(data.code==1){
                            getTotalPage();
                        }
                    },
                    error:function(){
                        alert("网络故障，请检查");
                    }
                }).then(()=>{
                    getpage(curpage);
                });
            }
        </script>
    </body>
    </html>

init.js

/**
     * Created by web-01 on 2018/1/5.
     */
    const mysql=require("mysql");
    var pool=mysql.createPool({
        host:'127.0.0.1',
        user:"root",
        password:"",
        database:"test",
        port:3306,
        connectionLimit:25 //连接数量限制
    });
    
    module.exports.pool=pool;

app.js

/**
     * Created by web-01 on 2018/1/5.
     */
    //1、加载对应模块
    var http=require("http");
    var express=require("express");
    var session=require("express-session");
    var cookieParser=require("cookie-parser");
    var bodyparser=require("body-parser");
    //2、创建连接池
    var m=require("./init.js");
    var pool=m.pool;
    //3、创建服务器 3000
    var app=express();
    var server=http.createServer(app);
    server.listen(3000);
    //4、加载静态目录 public
    app.use(express.static('public'));
    //5、配置 body-parser
    app.use(bodyparser.urlencoded({extended:false})); //bodyparser全小写
    //6、配置session
    app.use(cookieParser());//这里要加()
    app.use(session({
        secret:'spflinux',
        name:'adminapp',
        cookie:{maxAge:60*1000*30},
        resave: false,
        saveUninitialized: true
    }));
    
    //7、处理登录请求
    app.post("/login",(req,res)=>{
        var uname=req.body.uname;
        var upwd=req.body.upwd;
        var sql="SELECT uid FROM t_user WHERE uname=? AND binary upwd=?"; //一定记得加binary区分大小写
        pool.getConnection((err,conn)=>{
            if(err) throw err;
            conn.query(sql,[uname,upwd],(err,result)=>{
                if(err) throw err;
                if(result.length>0){
                    req.session.sign=true;
                    res.json({code:1,msg:"登录成功"});
                }else{
                    res.json({code:-1,msg:"用户名或密码有误"});
                }
                conn.release();
            })
        })
    })
    
    app.get("/",(req,res)=>{
            res.sendFile(__dirname+"/public/"+"login.html");
    })
    
    app.get('/userlist',(req,res)=>{
        console.log("req.session.sign="+req.session.sign);
        if(req.session.sign==true){
            var page=req.query.page;
            console.log("page="+page);
            if(page<1)
                page=1;
            var flag=0,flag1=0;
            var pagecount=0;
            var pagesize=4;
            pool.getConnection((err,conn)=>{
                if(err) throw err;
                var sql="SELECT count(*) FROM t_user WHERE status=1";
                conn.query(sql,(err,result)=>{   // 两个异步操作解决方案
                    if(err) throw err;
                    console.log("result="+result);
                    console.dir(result[0]['count(*)']);
                    pagecount=result[0]['count(*)']/pagesize;
                    console.log("pagecount="+pagecount);
                    if(page>pagecount)
                        page=pagecount;
                    flag1=1;
                    flag+=50;
                })
                var start=(page-1)*pagesize;
                var sql="SELECT uid,uname FROM t_user WHERE status=1 LIMIT ?,?";
                conn.query(sql,[start,pagesize],(err,result)=>{
                    if(err) throw err;
                    flag+=50;
                    if(flag==100)
                        res.json(result);
                })
                //关闭连接
                conn.release();
            })
       }else{
            res.json({code:-1,msg:"需登录"});
        }
    })
    
    app.get('/totalpage',(req,res)=>{
        var pagesize=4;
        pool.getConnection((err, conn) =>{
            if(err) throw err;
            var sql = "SELECT count(*) FROM t_user WHERE status=1";
            conn.query(sql,(err, result)=>{   // 两个异步操作解决方案
                if(err) throw err;
                var pagecount = Math.ceil(result[0]['count(*)']/pagesize);
                res.json({pagecount:pagecount});
            });
            conn.release();
        });
    });
    
    app.get('/deletepage',(req,res)=>{
        var uid=req.query.uid;
        sql="DELETE FROM t_user WHERE uid=?";
        pool.getConnection((err,conn)=>{
            if(err) throw err;
            conn.query(sql,[uid],(err,result)=>{
               if(err) throw err;
               res.json({code:1,msg:"操作成功"});
            });
            conn.release();
        });
    });
    
    app.get('/logout',(req,res)=>{
        req.session.sign=false;
        //console.log("退出");
        res.json({code:1,msg:"退出"});
    })