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. 断断续续的把用户信息的页面写 ...
随机推荐
- Eclipse与MyEclipse的联系和区别
Eclipse与MyEclipse的联系和区别 Eclipse 是一个IDE(Integrated Developing Environment),而这个IDE是允许安装第三方开发的插件来使自身的功 ...
- html5插件完成滚屏幕效果
首先想要完成这样的效果要用到jquery-fullpage插件我们需要他的js文件和css样式文件如图 因为是jquery的插件所以我们还要导入jquery-min.js 在页面引入这些样式和插件 ...
- 【转】JS内置对象方法
String内置对象的方法 1. concat() concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串 var str = "Hello"; var out ...
- elasticjob学习二：封装elasticjob-spring-boot-starter
之前已经简单的学习了es-job.但是如果实际应用都如同第一篇进行编写,会有很多重复代码,不方便.这篇主要是进行封装.我还会用一个demo使用下封装好的组件. elasticjob-spring-bo ...
- （转）协议森林13 9527 (DNS协议)
协议森林13 9527 (DNS协议) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在周星驰的电影<唐伯虎点秋香> ...
- 你知道吗，Flutter内置了10多种show
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 showDialog showDialog 用于弹出Mat ...
- webstorm 开新项目 setting 设置@目录别名 add @ (languages & Framewors - Javascript - Webpack 4. setting eslint enable
webstorm 开新项目 setting 设置@目录别名 add @ (languages & Framewors - Javascript - Webpack 4. setting esl ...
- 2016 Multi-University Training Contest 4 T9
http://acm.hdu.edu.cn/showproblem.php?pid=5772 最大权闭合子图. 得到价值w[i][j]的条件是选了i,j这两个位置的字符.选择位置的i字符花费为 第一次 ...
- linux 执行计划任务crontab
crontab 一些常用的命令 service crond start //启动服务 service crond stop //关闭服务 service crond restart //重启服务 se ...
- 使用Servlet和JSp在浏览器上实现对数据库表的增删改查（新手）
第一步:用户输入网址进入一个登陆界面. 里面要有账号密码输入. 登陆界面链接到登陆的Servlet类中. Servlet类 --> 1.接收参数(账户密码) 2.调用DAO层的 SQL语句 验 ...