前后数据交互--node服务、登录、列表的增删改查

node服务app.js：

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

var config = {
    host:'127.0.0.1',
    port:'3031'
};
var admin={username:'admin',password: 'admin'};
var users=[
    {username:'13345678913',password:'123456'},
    {username:'13345678914',password:'123456'},
    {username:'13345678915',password:'123456'}];
var user={};
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));

var allowCrossDomain = function(req,res,next) {
    res.header('Access-Control-Allow-Origin', '*');//自定义中间件，设置跨域需要的响应头。
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');  //允许任何方法
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Session-Token');   //允许任何类型
    next();
};
app.use(allowCrossDomain);

app.get("/api/index",function(req,res) {
    res.send(user);
    console.log(req.query)
});
app.post("/api/login",function(req,res) {
    if(req.body){
        if(req.body.username === admin.username && req.body.password === admin.password){
            console.log("登录成功");
            res.send(req.body);
            user=Object.assign(req.body);
        } else {
            console.log("登录失败");
            res.send("登录失败")
        }
    }
    console.log(users,req.body,user)
});
app.get("/api/index/select",function (req,res) {
    if(user){
        res.send(users);
    }
});
app.post("/api/index/add",function (req,res) {
    if(user){
        console.log(req.body);
        res.send(req.body);
        users.push({username: req.body.username,password: req.body.password})
    }
});
app.post("/api/index/delete",function (req,res) {
    // res.send()
    if(user){
        users.splice(req.body.index,1);
        console.log(req.body);
        console.log('删除');
        res.send("删除成功");
    }
});
app.post("/api/index/edit",function (req,res) {
    // res.send()
    if(user){
        console.log(req.body)
        users[req.body.index];
        res.send(users[req.body.index]);
    }
});
app.post("/api/index/edituser",function (req,res) {
    // res.send()
    if(user){
        users[req.body.index].username=req.body.username;
        users[req.body.index].password=req.body.password;

        // users.splice(req.body.index,1);
        console.log(req.body);
        console.log('修改');
        res.send("修改成功");
    }
});
app.listen(config.port,function(){
    console.log('服务器已经启动 http://'+config.host+':'+config.port);
});

登录页html:

<div class="content">
        <div class="login">
            <div class="logo">
                <img src="./img/catFace.png"/>
            </div>
            <form id="login-form">
                <div class="inputs">
                    <label>手机号:</label>
                    <input type="text" name="" placeholder="请输入账号" required>
                    <div class="text-err"><div class="text-msg"></div><div class="triangle"></div></div>
                </div>
                <div class="inputs">
                    <label>密码:</label>
                    <input type="password" name="" placeholder="请输入密码" required>
                    <div class="pass-err"><div class="pass-msg"></div><div class="triangle"></div></div>
                </div>
                <button type="button" name="" id="submit" >登录</button>
            </form>
        </div>
    </div>

登录的js代码：

<script>
        function validateForm(){
            var phone = $("input[type=text]").val();
            var password = $("input[type=password]").val();
            var data={
                username:phone,
                password:password
            };
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("post","http://127.0.0.1:3031/api/login",true);
            xmlhttp.setRequestHeader("Content-Type", "application/json");//指定参数类型
            xmlhttp.send(JSON.stringify(data));
            xmlhttp.onreadystatechange = function (){
                if (xmlhttp.readyState === 4 && xmlhttp.status === 200){
                    console.log(xmlhttp.responseText);
                    if(xmlhttp.responseText === "登录失败"){
                        alert("登录失败，用户名或密码错误！");
                        console.log(xmlhttp.responseText);
                        return false;
                        // return  window.location.href="login.html";
                    } else {
                        alert("登录成功，跳转到首页");
                        console.log(xmlhttp.responseText);
                        window.location.href="index.html";
                    }
                }
            }
        }
    </script>

index.html:

 <div class="content">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <h1 id="user"></h1>
                </div>
            </div>
        </nav>
        <div class="con-l">
            <ul>
                <li><a href="#" onclick="selectUser()">查看用户</a></li>
                <li><a href="#" onclick="add()">添加用户</a></li>
            </ul>
        </div>
        <div class="con-r">
            <div id="show"></div>
        </div>
    </div>

index.js:

 window.onload=function (){
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("get","http://127.0.0.1:3031/api/index",true);
        xmlhttp.send();
        xmlhttp.onreadystatechange = function (){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                if(JSON.parse(xmlhttp.responseText).username == undefined){
                    return  window.location.href="login.html"
                }
                console.log(xmlhttp.responseText);
                user.innerHTML="欢迎 "+JSON.parse(xmlhttp.responseText).username+" 回来！";
            }
        }
    };
    function selectUser() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("get","http://127.0.0.1:3031/api/index/select",true);
        xmlhttp.send();
        xmlhttp.onreadystatechange = function (){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                console.log(xmlhttp.responseText);
                var str='';
                var data=JSON.parse(xmlhttp.responseText);
                data.forEach(function (v,i) {
                     str +=`<tr>
                            <td>${i+1}</td>
                            <td>${v.username}</td>
                            <td>${v.password}</td>
                            <td><button onclick="deleteUser(${i})">删除</button></td>
                            <td><button onclick="edit(${i})">修改</button></td>
                      </tr>`
                });
                show.innerHTML="<table>"+str+"</table>";
            }
        }
    }
    function add() {
        var str=`
           <label>手机号码：</label><input type="text" id="username" name="username" placeholder="请输入手机号码" required><br/>
           <p class="u-msg"></p>
           <label>密码：</label><input type="password" id="password" name="username" placeholder="请输入用户密码" required><br/>
            <p class="p-msg"></p>
           <label>确认密码：</label><input type="password" id="repassword" name="repassword" placeholder="请输入用户密码" required><br/>
            <p class="rep-msg"></p>
           <button type="submit" onclick="addUser()">添加</button>

        `;
        show.innerHTML=str;
    }
    function addUser() {
        var textCon = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
        var username = $('#username').val();
        var password = $('#password').val();
        var repassword = $('#repassword').val();
        if(!textCon.test(username)) {
            return   $(".u-msg").html("手机号格式错误")
        }
        if(password.length < 6) {
            return  $(".p-msg").html("密码长度不能小于6位数");
        }
        if(password !== repassword){
            return  $(".rep-msg").html("密码不正确");
        }
        var data = {
            username: username,
            password: password
        };
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("post","http://127.0.0.1:3031/api/index/add",true);
        xmlhttp.setRequestHeader("Content-Type", "application/json");//指定参数类型
        console.log(JSON.stringify(data));
        xmlhttp.send(JSON.stringify(data));
        xmlhttp.onreadystatechange = function (){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                if(xmlhttp.responseText){
                    console.log(xmlhttp.responseText);
                    // username.length=0;
                    // password.length=0;
                    // repassword.length=0;
                    alert("添加成功");
                    $('#username').val("");
                    $('#password').val("");
                    $('#repassword').val("");
                } else {
                    window.location.href="login.html"
                }
            }
        }
    }
    function deleteUser(i) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("post","http://127.0.0.1:3031/api/index/delete",true);
        var data = {
            index:i
        };
        xmlhttp.setRequestHeader("Content-Type", "application/json");//指定参数类型
        xmlhttp.send(JSON.stringify(data));
        console.log(data);
        xmlhttp.onreadystatechange = function (){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                if(xmlhttp.responseText){
                    console.log(xmlhttp.responseText);
                    alert("删除成功");
                    location.href = "index.html"
                } else {
                    window.location.href="login.html"
                }
            }
        }
    }
    function edit(i) {
        var str=`
            <label>手机号码：</label><input type="text" id="username" name="username"  placeholder="请输入手机号码" required><br/>
           <label>密码：</label><input type="text" id="password" name="username"  placeholder="请输入用户密码" required><br/>
           <button type="submit" onclick="editUser(${i})">修改</button>

        `;
        show.innerHTML=str;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("post","http://127.0.0.1:3031/api/index/edit",true);
        xmlhttp.setRequestHeader("Content-Type", "application/json");//指定参数类型
        var data = {
            index:i
        };
        xmlhttp.send(JSON.stringify(data));
        xmlhttp.onreadystatechange = function (){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                if(xmlhttp.responseText){
                    var v = JSON.parse(xmlhttp.responseText);
                    console.log(xmlhttp.responseText);
                    $("#username").val(v.username);
                    $("#password").val(v.password);
                    console.log(v,i);
                } else {
                    window.location.href="login.html"
                }
            }
        }
    }
    function editUser(i) {
        var username = $('#username').val();
        var password = $('#password').val();
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("post","http://127.0.0.1:3031/api/index/edituser",true);
        var data = {
            index: i,
            username: username,
            password: password
        };
        xmlhttp.setRequestHeader("Content-Type", "application/json");//指定参数类型
        xmlhttp.send(JSON.stringify(data));
        console.log(data);
        xmlhttp.onreadystatechange = function (){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                if(xmlhttp.responseText){
                    console.log(xmlhttp.responseText);
                    alert("修改成功");
                    location.href = "index.html"
                } else {
                    window.location.href="login.html"
                }
            }
        }
    }
</script>