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:;

  padding:;

}

#wrap {

  height: 719px;

  width:;

  background-repeat: no-repeat;

  background-position: center center;

  position: relative;

}

#head {

  height: 120px;

  width:;

  background-color: #66CCCC;

  text-align: center;

  position: relative;

}

#foot {

  width:;

  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;

}

node.js 实现接口-操作文件进行用户增删改查的更多相关文章

用dom4j解析xml文件并执行增删改查操作
转自:https://www.aliyun.com/jiaocheng/1339446.html xml文件: <?xml version="1.0" encoding=&q ...
用户增删改查 django生命周期数据库操作
一 django生命周期 1 浏览器输入一个请求(get/post)2 响应到django程序中3 执行到url,url通过请求的地址匹配到不同的视图函数4 执行对应的视图函数,此过程可以查询数据库, ...
Node+Express+node-mysql 实战于演习全套mysql(增删改查)
最近这段时间研究Node感觉不错,自己做了一个增删改查,虽然有些简陋,但是思想是想通的,其实所有项目都是增删改查,有助于初学者快速掌握Node 首先本实例展示的是基于Node+Express+nod ...
第二百七十六节，MySQL数据库，【显示、创建、选定、删除数据库】，【用户管理、对用户增删改查以及授权】
MySQL数据库,[显示.创建.选定.删除数据库],[用户管理.对用户增删改查以及授权] 1.显示数据库 SHOW DATABASES;显示数据库 SHOW DATABASES; mysql - 用户 ...
springLdap 操作ldap示例（增删改查）
转自:http://blog.csdn.net/sundenskyqq/article/details/9002440 这部分的示例网上的确有很多,但是个人在查找的过程中还是感到不够满意,所以就自己总 ...
DjangoMTV模型之model层——ORM操作数据库（基本增删改查）
Django的数据库相关操作对象关系映射(英语:(Object Relational Mapping,简称ORM),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说 ...
MyBatis操作数据库（基本增删改查）
一.准备所需工具(jar包和数据库驱动) 网上搜索下载就可以二.新建一个Java project 1.将下载好的包导入项目中,build path 2.编写MyBatis配置文件:主要填写prope ...
EF Codefirst 多对多关系操作中间表的增删改查（CRUD）
前言此文章只是为了给新手程序员,和经验不多的程序员,在学习ef和lambada表达式的过程中可能遇到的问题. 本次使用订单表和员工表建立多对多关系. 首先是订单表: public class Ord ...
ASP.NET学习笔记（3）——用户增删改查（三层）
说明(2017-10-6 11:21:58): 1. 十一放假在家也没写几行代码,本来还想着利用假期把asp.net看完,结果天天喝酒睡觉,回去的票也没买到,惨.. 2. 断断续续的把用户信息的页面写 ...

随机推荐

微信h5页面audio标签在ios下不能自动播放
背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐出现的问题:在安卓手机上正常,iOS中没有反应后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...
psql的jsonb操作--存储对象/对象数组
1. 建表 create table demo( id serial NOT NULL PRIMARY KEY, name ), info JSONB ); 2.存储对象操作 2.1添加 insert ...
vue项目基本步骤
首先查看电脑是否已经安装vue并查看版本: window+R快捷打开命令行,cmd,输入node -v回车如果未安装操作步骤如下: 1:$ cnpm install vue(新电脑安装Vue,永久) ...
vue_相同组件，不同url跳转不重新渲染的解决方法
最近写的这个项目,有很多下拉菜单,每个菜单会有相应的两种类型.现在产品的需求是,跳转到不同的类型需要页面重新渲染数据那么问题来了. 我试了好几种方法,用watch监听路由去判断,但是发现输在inp ...
通过mockjs来制作假数据
需用用到的模块为express和mockjs //导入模块开启服务器模块 const express=require('express') //导入假数据模块 const mockjs=require ...
mybatis深入之动态查询和连接池介绍
mybatis深入之动态查询和连接池介绍一.mybatis条件查询在mybatis前述案例中,我们的查询条件都是确定的.但在实际使用的时候,我们的查询条件有可能是动态变化的.例如,查询参数为一个u ...
使用StreamHttpResponse和FileResponse下载文件的注意事项及文件私有化
为什么需要编写下载视图方法? 你或许知道,我们上传的文件默认放在media文件夹中的,且Django会为每个上传的静态文件分配一个静态url.在模板中,你可以使用{{ mymodel.file.url ...
[BUG]excel复制到input含有不可见内容(零宽字符)
现象 excel手机号复制到input框子, length长度和可见长度不一致. "‭176xxxx1115‬" 长度是 13 而不是 11. 原因手机号前后被 excel 插入 ...
一、create-react-app的安装及使用
一.安装create-react-app 1.在全局环境中安装create-react-app npm install -g create-react-app 2.在您所需要的目录(盘)下生成一个项目 ...
Mysql优化大分页查询
如题,年前做了一个需求,涉及到Mysql大分页查询,整理一下,希望对需要的小伙伴有帮助. 背景分页查询的性能瓶颈B+树简述B+比起二叉查找树,有什么优势?分页查询过程测试集解决方法1 延迟关联法:2 ...

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

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

node.js 实现接口-操作文件进行用户增删改查的更多相关文章

随机推荐

热门专题