node02

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

最新文章

热门文章