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>
login.css
*{
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. 断断续续的把用户信息的页面写 ...
随机推荐
- 用ABAP 生成二维码 QR Code
除了使用我的这篇blogStep by step to create QRCode in ABAP Webdynpro提到的使用ABAP webdynpro生成二维码之外,也可以通过使用二维码在线生成 ...
- 关于nw的简单应用
最近使用到了桌面开发应用nw.js.进行简单的介绍一下,基本用法 nwjs实际上是基于node js的,支持node js的所有api 中文官网https://nwjs.org.cn/ 第一步.在官网 ...
- webpack安装问题
在sf进行安装webpack时候,报错如下: 解决方案:npm install webpack-cli -g,如图上
- MySQL敏感数据加密及解密
大数据时代的到来,数据成为企业最重要的资产之一,数据加密的也是保护数据资产的重要手段.本文主要在结合学习通过MySQL函数及Python加密方法来演示数据加密的一些简单方式. 1. 准备工作 为了便于 ...
- selenium基本对象之——数值型
python的数值类型,除了魔法方法以为,只有下面的这些方法: 整形的方法有:as_integer_ratio.bit_length.from_bytes.to_bytes.conjugate.ima ...
- php遍历文件夹中所有的文件
遍历文件夹中的所有文件 思路:1.定义一个函数,把给定的文件夹当前目录遍历输出(用到的文件操作函数scandir():一次性读取当前文件夹所有的内容并以数组的形式返回.). 2.如果是文件夹则红色字体 ...
- c#语言 中FileStream类的基本使用
FileStream类不是静态类,使用时需要创建对象,FileStream类既可以对文本文件进行读也可以对多媒体文件进行写,以字节数组的形式进行读和写,多用于对大文件进行读写,区别于File类的是它对 ...
- vue基础回顾 router
vue-router 1. 底层原理 hash 或者h5 histroy(有兼容性) 2. 使用的时候Vue需要引入VueRouter Vue.use(VueRouter) //VueRouter 底 ...
- js 实现图片的放大和缩小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- php7连接mysql8
最近因为剁手买了mac所以在mac上搭建lnmp环境. 刚好看到mysql从5.7跳到8,性能据说快上一倍,果断尝鲜! lnmp基本都弄好了,但是到用php连接Mysql这一步出了岔子. 出错原因: ...