zoukankan html css js c++ java

node.js 实现接口-操作文件进行用户增删改查

首先安装npm,使用npm安装express

npm install express -S

/*
 * @Author: yinxin
 * @Date: 2020-03-27 10:18:41
 * @LastEditTime: 2020-03-30 20:17:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /vue-sdu/login.js
 */
var express = require('express');
var app = express();
var fs = require("fs");
var bodyParser = require("body-parser")
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
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);
var jsonParser = bodyParser.json();
// get请求实现读取文件并返回数据
app.get('/api/users/:username/:password', function (req, res) {
  fs.readFile(__dirname + "/users.json", 'utf8', function (err, data) {   // 读取文件 
      console.log( req.params.username );
      // console.log(JSON.parse(data),typeof JSON.parse(data))
      var status = {"msg":"用户名密码错误","status":false,data:""}  //定义一个返回的固定格式  
      if(req.params.username){
        var jsonData = JSON.parse(data);
        console.log(req.params);
        for(var i = 0; i < jsonData.length;i++){
          if(req.params.username == jsonData[i].name && req.params.password == jsonData[i].password){
            if (req.params.username == "admin"){   // 当请求用户为admin时，验证成功则返回所有数据
              console.log("admin")
              status.data  = JSON.stringify(jsonData);
              status.status = true;
              status.msg = "验证成功。";
            }else{
              status.status = true;
              status.msg = "验证成功。";
              status.data = JSON.stringify(jsonData[i]);  // 普通用户返回当前登录用户数据
            }
          }
        }
        console.log(status);
        res.end( JSON.stringify(status));  
    };
    })   
});
///添加用户 
app.post('/api/users/add', jsonParser, function(req,res){
  fs.readFile(__dirname + "/users.json",function(err,data){
    if(err){
        req.end(err)
    }
    console.log(req.params)
    console.log(req.body)
    // console.log(req)

    params={
      "name":req.query.name,
      "password":req.query.password,
      "age":req.query.age
    }
    console.log(req.query)
    var person = data.toString();//将二进制的数据转换为字符串
    person = JSON.parse(person);//将字符串转换为json对象
    console.log(person)
    person.push(params);//将传来的对象push进数组对象中
    console.log(person.data);
    var str = JSON.stringify(person);//因为nodejs的写入文件只认识字符串或者二进制数，所以把json对象转换成字符串重新写入json文件中
    fs.writeFile(__dirname + "/users.json",str,function(err){
        if(err){
          res.end(err)
        }
        res.end(JSON.stringify(str))
    });
});
});

var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("访问地址为 http://%s:%s", host, port)
});

user.json

[{"name":"user","password":"456","age":"23"},{"name":"user2","password":"456","age":"44"},{"name":"user3","password":"456","age":"34"},{"name":"admin","password":"admin","age":"12"},{"name":"yinxin","password":"123","age":"12"},{"name":"yinxin1","password":"123","age":"12"},{"name":"yinxin1","password":"123","age":"12"}]

 login.html

<!--
 * @Author: your name
 * @Date: 2020-03-27 12:20:04
 * @LastEditTime: 2020-03-28 21:59:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /vue-sdu/login1.html
 -->
 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="./login.css">
 <title>login</title>
 <style type="text/css">
 
 </style>
 </head>
  
 <body>
 <div class="header" id="head">
   <div class="title">金渡教育</div>
   
 </div>
   
 <div class="wrap" id="wrap">
   <div class="logGet">
       <!-- 头部提示信息 -->
       <div class="logD logDtip">
         <p class="p1">登录</p>
       </div>
       <!-- 输入框 -->
       <form method="get" onsubmit="return false">
        <div class="lgD">
          <input type="text" id="username" required="required"
            placeholder="输入用户名" />
        </div>
        <div class="lgD">
          <input type="password" id="password" required="required"
            placeholder="输入用户密码" />
        </div>
        <div class="logC">
          <a target="_self"><button type="submit" onclick="sendData()">登录</button>
          </a>
          <span id="message"></span>
        </div>
      </form>
       
     </div>
 </div>
   
 <div class="footer" id="foot">
   <div class="copyright">
     <p>Copyright © 2020 Qunar.com Inc. All Rights Reserved.</p>
     <div class="img">
     <i class="icon"></i><span>联系邮箱：yinxin918@163.com</span>
   </div>
 
  
   </div>
   
 </div>

 <script>
  function sendData(){
      var name = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      var xmlhttp = new XMLHttpRequest();
      if (name && password){
         //open---指定一个接口（url, method）
        xmlhttp.open("get", "http://localhost:8081/api/users/"+name+"/"+password); //异步
        xmlhttp.send(); //发送
        xmlhttp.onreadystatechange = function() { //接收数据
          //4--node服务响应完成   200---成功
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              //把拿到的数据展示出来 写入dom
              // content.innerHTML = xmlhttp.responseText; //conten 简写
              data = JSON.parse(xmlhttp.responseText)
              console.log(data)
              if (data.status){
                document.getElementById("message").innerHTML = data.msg
                  
                location.href = "index.html?data="+JSON.stringify(data)
              }else{
                document.getElementById("message").innerHTML = data.msg
              }
          }
      }


      }
     

  }
</script>
   
   
 </body>

 </html>

*{
  margin: 0;
  padding: 0;
}
#wrap {
  height: 719px;
  width: 100;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}
#head {
  height: 120px;
  width: 100;
  background-color: #66CCCC;
  text-align: center;
  position: relative;
}
#foot {
  width: 100;
  height: 126px;
  background-color: #CC9933;
  position: relative;
}
#wrap .logGet {
  height: 408px;
  width: 368px;  
  position: absolute;
  background-color: #FFFFFF;
  top: 20%;
  right: 15%;
}
.logC a button {
  width: 100%;
  height: 45px;
  background-color: #ee7700;
  border: none;
  color: white;
  font-size: 18px;
}
.logGet .logD.logDtip .p1 {
  display: inline-block;
  font-size: 28px;
  margin-top: 30px;
  width: 86%;
}
#wrap .logGet .logD.logDtip {
  width: 86%;
  border-bottom: 1px solid #ee7700;
  margin-bottom: 60px;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
}
.logGet .lgD img {
  position: absolute;
  top: 12px;
  left: 8px;
}
.logGet .lgD input {
  width: 100%;
  height: 42px;
  text-indent: 2.5rem;
}
#wrap .logGet .lgD {
  width: 86%;
  position: relative;
  margin-bottom: 30px;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
}
#wrap .logGet .logC {
  width: 86%;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}
 
 
.title {
  font-family: "宋体";
  color: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
  font-size: 36px;
  height: 40px;
  width: 30%;
}
 
.copyright {
  font-family: "宋体";
  color: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
  height: 60px;
  width: 40%;
  text-align:center;
}
  
 
#foot .copyright .img {
  width: 100%;
  height: 24px;
  position: relative;
}
.copyright .img .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 22px;
  vertical-align: middle;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}
  
.copyright .img .icon1 {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 22px;
  vertical-align: middle;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}
.copyright .img .icon2 {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 22px;
  vertical-align: middle;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}
#foot .copyright p {
  height: 24px;
  width: 100%;
}

span{
  color:red;
}

查看全文

相关阅读:
hadoop再次集群搭建（3）-如何选择相应的hadoop版本
 48. Rotate Image
352. Data Stream as Disjoint Interval
163. Missing Ranges
228. Summary Ranges
147. Insertion Sort List
324. Wiggle Sort II
215. Kth Largest Element in an Array
快速排序
 280. Wiggle Sort

原文地址：https://www.cnblogs.com/yinxin/p/12608081.html