1、使用已有的知识实现一个简单的登录和注册的界面

请求有请求接口有请求页面的,我们需要加以区分

以下是客户端代码

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./ajax.js"></script> <body>
用户名:<input type="text" name="" id="user"><br />
密码:<input type="passsword" name="" id="pwd">
<input type="button" value="注册" id="register">
<input type="button" value="登录" id="login"> </body>
<script>
window.onload = function () {
let user = document.getElementById('user')
let pwd = document.getElementById('pwd')
let reg = document.getElementById('register')
let log = document.getElementById('login') reg.onclick = function () {
ajax({
url: '/user',
data: { act: 'reg', user: user.value, pwd: pwd.value },
type: 'get',
success(str) {
let json = eval('(' + str + ')')
if (json.ok) {
alert('注册成功')
} else {
alert('注册失败' + json.msg)
}
},
error() {
alert('sth is wrong')
}
})
} log.onclick = function () {
ajax({
url: '/user',
data: { act: 'reg', user: user.value, pwd: pwd.value },
type: 'get',
success(str) {
let json = eval('(' + str + ')')
if (json.ok) {
alert('登录成功')
} else {
alert('登录失败' + json.msg)
}
},
error() {
alert('sth is wrong')
}
})
}
} </script> </html>

以下是服务端代码

const http = require('http');
const fs = require('fs');
const querystring = require('querystring');
const urlLib = require('url'); var users = {}; //{"blue": "123456", "zhangsan": "123456", "lisi": "321321"} var server = http.createServer(function (req, res) {
//解析数据
var str = '';
req.on('data', function (data) {
str += data;
});
req.on('end', function () {
var obj = urlLib.parse(req.url, true); const url = obj.pathname;
const GET = obj.query;
const POST = querystring.parse(str); //区分——接口、文件
if (url == '/user') { //接口
switch (GET.act) {
case 'reg':
//1.检查用户名是否已经有了
if (users[GET.user]) {
res.write('{"ok": false, "msg": "此用户已存在"}');
} else {
//2.插入users
users[GET.user] = GET.pass;
res.write('{"ok": true, "msg": "注册成功"}');
}
break;
case 'login':
//1.检查用户是否存在
if (users[GET.user] == null) {
res.write('{"ok": false, "msg": "此用户不存在"}');
//2.检查用户密码
} else if (users[GET.user] != GET.pass) {
res.write('{"ok": false, "msg": "用户名或密码有误"}');
} else {
res.write('{"ok": true, "msg": "登录成功"}');
}
break;
default:
res.write('{"ok": false, "msg": "未知的act"}');
}
res.end();
} else { //文件
//读取文件
var file_name = './www' + url;
fs.readFile(file_name, function (err, data) {
if (err) {
res.write('404');
} else {
console.log(file_name)
res.write(data);
}
res.end();
});
}
});
}); server.listen(8080);

3、模块化

1)系统模块:

Assert:断言

Buffer:

cluster:进程群

crypto:加密

DNS

Errors

Events(重点)用于模拟事件

Path 路径功能

2)使用模块导出功能:

//当前目录必须使用./
let a = 28
exports.a = a
//使用时
const mod = require('./mod.js')
console.log(mod.a)

3)node中不存在全局变量,声明的变量仅在模块内有效

module.exports=exports

可用于批量输出一个对象

module.exports={a:12,b:58}

引入时.js可以省略

4)npm nodejs包管理器

统一下载途径

自动下载依赖

提交自定义模块

npm uninstall xx 卸载

在node_modules文件夹内的依赖引入可以不用加./

因为系统会自动到node_modules深度遍历模块

先查找系统模块,再查找node_modules

5)上传自己的模块

npm login //进行登录

npm init -y //简单地初始化

npm publish //进行发布,不能发布同一版本号的

npm --force unpulish 对已发布的包进行强制删除

4、express框架

1)安装

使用npm安装即可

2)使用express构造服务器

const express = require('express')

let server = express()
server.use('/a.html', function (req, res) {//已经不是原生的req,res对象了,经过了express封装
res.send('这是A网页')//发送响应
res.end()
})//两个参数,请求路径及回调 server.use('/b.html', function (req, res) {
res.send('这是B网页')
res.end()
})//两个参数,路径及回调 server.listen(8080, () => console.log('server is running'))

send与write的区别:

send可以发送一个json 对象,write只能发送一个字符串或Buffer对象

express保留了原生的功能,添加了一些新特性

3)3种接收用户请求的新方法

use是get/post都可以接收

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="http://localhost:8080" method="post">
user: <input type="text" name="user">
<input type="submit" value="submit">
</form>
</body>
</html> //server.js
const express = require('express')
let server = express()
server.get('/',function(req,res){
console.log('get!!!!!!!!!!!')
})
server.post('/',function(req,res){
console.log('post!!!!!!!!!!!')
})
server.listen(8080, () => console.log('server is running'))

4)用express来改写登录与注册

//express-static中间件的使用
const express = require('express')
const es=require('express-static') let server = express() //请求a.html,借助express的插件express-static来完成
//它将帮助我们读取静态文件
server.use(es('./www'))//参数是一个函数,函数内的参数是一个路径,它将根据
//请求参数中的文件名自动地返回相应的文件 server.listen(8080, () => console.log('server is running'))
const express = require('express')
const es=require('express-static') let server = express() //假数据
let users={
"cc":"123",
"ee":"456"
} server.get('/login',function(req,res){
//提取参数内容 req.query即可
let user=req.query['user']
let pwd=req.query['pwd'] //登录功能
if(!users[user]){
res.send({"ok":false,msg:"user not found"})
}else if(users[user]!==pwd){
res.send({"ok":false,msg:"incorrect pwd"})
}else{
res.send({"ok":true,msg:"success login"})
}
}) server.use(es('./www')) server.listen(8080, () => console.log('server is running')) <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./ajax.js"></script> <body>
用户名:<input type="text" name="" id="user"><br />
密码:<input type="passsword" name="" id="pwd">
<input type="button" value="注册" id="register">
<input type="button" value="登录" id="login"> </body>
<script>
window.onload = function () {
let user = document.getElementById('user')
let pwd = document.getElementById('pwd')
let reg = document.getElementById('register')
let log = document.getElementById('login') log.onclick = function () {
ajax({
url: '/login',
data: { user: user.value, pwd: pwd.value },
type: 'get',
success(str) {
let json = eval('(' + str + ')')
if (json.ok) {
alert('登录成功')
} else {
alert('登录失败' + json.msg)
}
},
error() {
alert('sth is wrong')
}
})
}
} </script> </html>

node02的更多相关文章

  1. Node在Sublime Text3下环境搭建(node02)

    一.下载sublime Text的nodejs插件 https://github.com/tanepiper/SublimeText-Nodejs 二.下载后解压 直接改名为nodejs 放到 Pre ...

  2. 集群CLUSTER种类介绍

    一.集群CLUSTER 介绍 计算机集群Cluster,可以把多台计算机 连接在一起使用,平分资源或互为保障.其好处不言而喻,群集中的每个计算机被称为一个节点,节点可添加可减少,在这些节点之上虚拟出一 ...

  3. 网络爬虫(java)

       陆陆续续做了有一个月,期间因为各种技术问题被多次暂停,最关键的一次主要是因为存储容器使用的普通二叉树,在节点权重相同的情况下导致树高增高,在进行遍历的时候效率大大降低,甚至在使用递归的时候导致栈 ...

  4. Keepalived 配置实例

    Keepalived 是一款轻量级HA集群应用,它的设计初衷是为了做LVS集群的HA,即探测LVS健康情况,从而进行主备切换,不仅如此,还能够探测LVS代理的后端主机的健康状况,动态修改LVS转发规则 ...

  5. 分享系列--面试JAVA架构师--链家网

    本月7日去了一趟链家网面试,虽然没有面上,但仍有不少收获,在此做个简单的分享,当然了主要是分享给自己,让大家见笑了.因为这次是第一次面试JAVA网站架构师相关的职位,还是有些心虚的,毕竟之前大部分时间 ...

  6. Puppet3在CentOS6.5集群下的安装

    环境:3台主机, IP分别为10.211.55.11.12.13 puppet master安装在10.211.55.11 puppet agent安装在10.211.55.11.12.13 1.安装 ...

  7. 分布式架构高可用架构篇_02_activemq高可用集群(zookeeper+leveldb)安装、配置、高可用测试

    参考: 龙果学院http://www.roncoo.com/share.html?hamc=hLPG8QsaaWVOl2Z76wpJHp3JBbZZF%2Bywm5vEfPp9LbLkAjAnB%2B ...

  8. 分布式架构高可用架构篇_01_zookeeper集群的安装、配置、高可用测试

    参考: 龙果学院http://www.roncoo.com/share.html?hamc=hLPG8QsaaWVOl2Z76wpJHp3JBbZZF%2Bywm5vEfPp9LbLkAjAnB%2B ...

  9. 【转载】图解:二叉搜索树算法(BST)

    原文:图解:二叉搜索树算法(BST) 摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢!“岁月极美,在于它必然的流逝”“春花 秋月 夏日 冬雪”— ...

随机推荐

  1. Git学习(一):初始化仓库、添加文件、版本回退

    目录 Git学习(一):初始化.添加文件.版本回退 初始化一个仓库 添加文件到Git仓库 版本回退 Git学习(一):初始化.添加文件.版本回退 初始化一个仓库 本文使用的命令行工具为cmder,部分 ...

  2. 二十三种设计模式之原型模式的C#实现

    原型模式就是通过拷贝快速创建一个新的对象 本例UML如图 ColorBase [Serializable] public abstract class ColorBase { public int R ...

  3. jsp参数乱码解决

    iframe src引入jsp,?跟着的中文参数会乱码 解决方法: var CJJG=encodeURI(encodeURI(value.data.CJJG));//js里面转码一次 //jsp页面里 ...

  4. git/gerrit的简介

    gerrit和git   1.git Git是什么? Git是目前世界上最先进的分布式版本控制系统. SVN是集中式版本控制系统. Git与svn比较 相同:能记录文件的所有更改记录.这样是为了大量更 ...

  5. 高可用Redis(十):Redis原生命令搭建集群

    1.搭建Redis Cluster主要步骤 1.配置开启节点 2.meet 3.指派槽 4.主从关系分配 2.环境说明 两台虚拟机,IP地址分别为:192.168.81.100和192.168.81. ...

  6. 云计算三种服务模式——IaaS、PaaS和SaaS

    云计算的服务模式仍在不断进化,但业界普遍接受将云计算按照服务的提供方式划分为三个大类:SaaS(Software as a Service–软件即服务) PaaS(Platform as a Serv ...

  7. layUI 实现自定义弹窗

    需求描述:点击表格中的数据,弹出一张具体信息表.描述的不是很清楚,放效果图,就明白了,上图 放心,能看到的数据,都不是生产数据,我造的假数据,但是功能效果就是这样,点击列表中的一行,弹出某些要展示的信 ...

  8. C++中的继承(3)作用域与重定义,赋值兼容规则

    1.作用域与重定义(同名隐藏) 一样的,先上代码 1 class A 2 { 3 public: 4 int a_data; 5 void a() 6 { 7 cout << " ...

  9. System.TimeoutException: The operation requested on PersistentChannel timed out

    这个异常是在使用EasyNetQ时,遇到的问题,找了两个小时. 详细错误 Error:System.TimeoutException: The operation requested on Persi ...

  10. Java操作ini文件 ,解决properties文件中无法读取换行及空格

    1.依赖jar包 ini4j-0.5.4.jar 2.官网 http://ini4j.sourceforge.net/ 3.测试例子 [java] view plain copy package cn ...