node02

Express 2022-10-08

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>

 

相关文章

Express 入门 创建一个express文件
根据官网 入门 express
Express 路由 02
java叫接口control什么的app.get.post等等都是请求方式我们可...
Express 中间件
为了前端丢进去的时候可以直接判断中间件就是经过了这个就会...
Express 04 文件的上传和下载
Express 文件的上传和下载
Express 05 使用Node链接sqlite
运行命令下载app.js 增加中间件。
Express 06 制作留言板项目 创建第一个项目
基本模板来的 后面用后就有什么加什么都行。