密码四种加密方式、用AJAX前后端创建登录注册服务器

4种加密方式

1.1 MD5加密

md5加密 是目前最安全有效的加密方式，因为它是单项不可逆的(加密之后是无法还原的)，md5加密方式不是js内置的API，需要使用插件实现。所以使用之前需要引入md5加密插件。所有类型的文件和不同大小格式的数据进行md5加密后，都是一个长32位的16进制字符串。

md5引入时必须放在public里，才可以引入不报错

• md5(array)：加密

1.2 base64加密

base64加密 是一种常见的加密方式，没有md5安全，因为它是双向可解密的。base64加密方式不是js内置的API，需要使用插件实现。所以使用之前需要引入base64加密插件。

• Base64.encode(array)：加密

• Base64.decode(array)：解密

        array = Base64.encode(array);
        array = Base64.decode(array);

1.3 URL 加密

URL加密 是一种网络请求中常用的加密方式，双向可解密，不安全，一般用于汉字加密。URL加密方式是js内置API。

• encodeURI(array)：加密

• decodeURI(array)：解密

        array = decodeURI(array);
        array = encodeURI(array);

1.4 JSON编码解码

JSON编码解码 是一种数据类型的转化方式，常用于对象 数组的编码解码。JSON编码也是js内置API，不需要插件。

• 数组转换成字符串：JSON.stringify(array)

• 字符串转换成数组：JSON.parse(array)

        array = JSON.stringify(array);
        array = JSON.parse(array);

总结：四种加密和编码方式的用途

• md5：一般用于密码或敏感信息的加密

• base64：一般用于大型文件和图片的加密

• url编码：网络请求信息中的汉字加密

• JSON编码：用于网络响应数据的解析

编写登录注册接口

1，搭建服务器

index.js这个文件是服务器的启动文件，使用node运行这个文件就可以启动服务器了

• 1，导入服务器搭建模块express，（需要npm/cnpm/yarn下载）

var express=require("express");

• 2，创建服务器项目对象 app

var app = express();

• 3，设置项目的静态目录，静态目录public是我们在项目根目录创建的一个文件夹，这个文件夹中默认存在一些项目的网页文件和资源文件，前端的页面和插件等资源都在这个文件中存放

app.use(express.static("public"))

• 4，监听端口号（0-65535），启动服务器

app.listen(5000,function(){
    console.log("服务器已启动,请访问5000端口");
})

2，在index.js文件种写入get/post请求接口

• 定义请求接口，后端的接口累死于js的事件监听，当服务器监听到客户端请求时会触发对应的接口，从而调用接口的回调函数

2.1监听get方式：

• app.get(路径,回调函数(request,response){}) 回调中有两个参数：请求对象和响应对象

• request(请求对象)：浏览器发给服务器的数据对象 ，简写req

• response(响应对象)：服务器返回给浏览器的数据对象，简写res

get方式请求的数据存放在query字段中！(request.jquery)

注意：1，服务器需要做出响应，客户端才能拿到结果

2，只要服务器代码修改之后需要重新启动服务器才能生效

3，向服务器发送一次请求必须给浏览器一次响应，不然就是一直在等待响应

// 监听get方式的登录请求
app.get('/login', function(request, response) {
    // 回调中有两个参数：请求对象和响应对象
    // request请求对象：浏览器发送给服务器的数据对象 简写req
    // response响应对象：服务器返回给浏览器的数据对象 简写res
    // get请求的数据存放在query字段中
    console.log(request.query);
    // 服务器需要做出响应，客户端才能拿到结果
    response.send('恭喜你，登录成功');
    // 主要服务器代码修改之后需要重启服务器才能生效
});

2.2 监听post方式

• app.post(路径,回调函数(request,response){}) 回调中有两个参数：请求对象和响应对象

post方式请求的数据在请求体中需要一个解析器解析出来，使用解析器解析post请求体数据，解析到req.body字段中！

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }))

// 监听post方式的登录请求
// post请求的数据在请求体中需要一个解析器解析出来
var bodyParser = require('body-parser');
// 使用解析器解析post请求体数据，解析到req.body字段中
app.use(bodyParser.urlencoded({ extended: false }))
app.post('/login', function(req, res) {
    // post请求的数据是在请求体中会被解析到body字段中，
    console.log(req.body);
​
    //使用send函数响应字符串
    // res.send('注册成功')
    // 使用json函数响应对象
    // res.json({
    //     msg: '恭喜你登录成功'
    // })
    if (!req.body.username || !req.body.password) {
        res.json({ msg: "账号或密码不能为空" })
        return; //响应后不会结束，可使用return结束
    };
​
    // 读取userinfo目录下所有账号，如果存在，再判断密码是否正确，如果不存在，登录失败
    fs.readdir("./public/userinfo", function(err, arr) {
        if (err) {
            res.json({ msg: "系统错误,请重试" });
            return;
        }
        var name = arr.find(item => {
            return item == req.body.username
        })
        if (name) {
            var path = "./public/userinfo/" + req.body.username
            fs.readFile(path, "utf8", function(err, data) {
                if (data == req.body.password) {
                    res.json({ msg: "登陆成功" })
                } else {
                    res.json({ msg: "密码错误" })
                }
            })
        } else {
            res.json({ msg: "用户不存在，登录失败" })
        }
    })
})
​

2.2.1服务器给浏览器返回数据的两种方式：

• 使用send函数响应字符串，然后send里边的数据返回到 前端页面 get请求方式的回调函数的第一个参数data res.send("登录成功" )

 res.send('注册成功')//如果html中用get请求方式打印回调函数的第一个参数data，那么data就是注册成功这个字符串

• 使用json函数响应对象 res.json({mag:"登陆成功"})

 res.json({
        msg: '恭喜你登录成功'
 })

2.2.2 同源请求可以省略协议+IP+端口号

$.get('http://localhost:5000/login',{

如果当前网页的打开的url和ajax请求的url中协议，域名，ip，端口都相同，叫同源，这个ajax请求叫同源请求，对于同源请求可以省略协议，ip，端口

2.3注册接口代码

注册接口的思路：

1，先判断html发送请求的数据是否为空。如果为空，服务器就给浏览器发送 账号或密码不能为空 的响应。

2，不为空，读取userinfo的所有账号，如果跟存在就注册失败，没有账号就注册成功

​
// 注册接口
app.post('/register', function(req, res) {
    console.log(req.body);
    if (!req.body.username || !req.body.password) {
        res.json({ msg: "账号或密码不能为空" })
        return; //响应后不会结束，可使用return结束
    }
​
    // 读取userinfo目录下所有账号，如果存在，就注册失败，没有账号就注册成功
    fs.readdir("./public/userinfo", function(err, arr) {
        var result = arr.some(item => {
            return item == req.body.username + ".txt"
        })
        if (result) {
            res.json({ msg: "注册失败，用户名已存在" })
        } else {
            var path = "./public/userinfo/" + req.body.username;
            fs.writeFile(path, req.body.password, () => {})
            res.json({ msg: "注册成功" })
        }
    })
})

登录注册的前端页面：

 <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script>
        $.get('http://localhost:5000/login', {
            username: '马万祺',
            password: 123
​
        }, function(data) {
            console.log(data);
        })
​
        $.post('/login', {
            username: '小明',
            password: 123
        }, function(data) {
            console.log(data);
        })
​
        $.post('/register', {
            username: '',
            password: ''
        }, function(data) {
            console.log(data);
        })
    </script>

注意： node项目中根目录属于服务器后端环境，public目录属于前端资源环境。public中的网页不能引用public外的数据和资源，只能引用public内部的数据资源。而index.js可以引入public内部资源