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>