思享工具箱

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

摘要：
“；status.data=JSON.stringify；//正常用户返回当前登录用户的数据｝｝console.log；res.end；｝；｝）｝）；///添加用户app.post；varserver=app.list；user.JSON[｛”name“：”user“，”password“：”456“，”age“：”23“｝，｛”ame“：”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：“yinsin1”，“password”：”123”，”age”：”12”｝]登录。html˂！

首先安装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>
login.css
*{
  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;
}


 标签：#用户接口#xmlhttp#position#margin | 浏览：671 | 发布日期：
免责声明：文章转载自《node.js 实现接口-操作文件进行用户增删改查》仅用于学习参考。如对内容有疑问，请及时联系本站处理。 
上篇图论及其应用——图cocos2dx-3.x 导出自定义类到 lua 过程详解下篇
宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=
 相关文章 
转：（WIN）S04-CH01 PCIE XDMA开发环境搭建以及环路测试
摘要: 这一章开始主要介绍 XILINX FPGA PICE IP XDMA IP的使用。XDMA IP使用部分教程分LINUX 篇和WINDOWS篇两个部分。通过实战，面向应用，提供给大家 XILINX FPGA PCIE 应用解决方案。 软件版本：VIVADO2017.4 操作系统：WIN7/WIN10 64bit 硬件平台：XILINXFPGA M...
Python绘制正余弦函数图像的方法
今天打算通过绘制正弦和余弦函数，从默认的设置开始，一步一步地调整改进，让它变得好看，变成我们初高中学习过的图象那样。通过这个过程来学习如何进行对图表的一些元素的进行调整。 简单绘图 matplotlib有一套允许定制各种属性的默认设置。你可以几乎控制matplotlib中的每一个默认属性：图像大小，每英寸点数，线宽，色彩和样式，子图(axes)，坐标轴和网...
CSS定位
css定位css有三种基本的定位机制：普通流，浮动和绝对定位。css中position属性static，relative，absolute，fixed      position：relative相对定位会按照元素的原始位置对该元素进行移动      position：absolute绝对定位，元素可以放置到页面上的任何位置，后面加上left，top等值 ...
IR-drop问题的分析与修复（五）：Padding Clock Cells: ICC2 &amp;amp; Innovus
本文转自：自己的微信公众号《集成电路设计及EDA教程》 时钟网络有其特殊性：1、频率最高；2、翻转最频繁；3、扇出最大。时钟单元：Buffer、Inverter、ICG；由于时钟网络的扇出很大，因此时钟树上的Buffer或者Inverter的驱动强度必须足够大。另外，由于时钟频率非常高，翻转非常频繁，因此如果有普通的Cell离时钟单元非常近的话很有可能会...
微信分享接口的java开发的一些小步骤
1.配置接口信息进行验证 代码如下：     /**     * 访问没认证的地址跳转     *     * @param request     * @return 登录页面     * @throws Exception     */    @RequestMapping(value = "/checkWxDomainUrl", method =...
xpath解析网页的用法
4.2 scrapy 中查找 HTML 元素 4.2.1 scrapy 的 xpath 简介 例 4-2-1: 使用 xpath 查找 HTML 中的元素 from scrapy.selector import Selector htmlText=''' <html><body> <bookstore> <boo...
最新文章
随机推荐
 思享工具箱导航