带图片的登录

最新推荐文章于 2024-10-30 17:42:33 发布

ㄗòs╃牸架

最新推荐文章于 2024-10-30 17:42:33 发布

阅读量316

点赞数

分类专栏： Node.js 文章标签： elementui css vue.js

本文链接：https://blog.csdn.net/Drunk_Invader/article/details/122153271

版权

Node.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

熟练使用multerparty/fs/url 模块

----------------------------------提交页面formdata--------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>formData</title>
    <style>
        #box{
            width: 500px;
            height: 500px;
            background-color: red;
        }
        #a{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <form action="http://localhost:8080/reg" method="post" enctype="multipart/form-data" id="form1">
        <p>
            用户名：<input type="text" name="username">
        </p>
        <p>
            密码：<input type="text" name="upass">
        </p>
        <p>
            头像：<input type="file" name="f1">
        </p>
        <input type="submit">
    </form>
    <script>
        let form1=document.getElementById("form1")
        form1.onsubmit=function(e){
            let data=new FormData(form1)   //将表单的值放入data中
            let xhr=new XMLHttpRequest()
            xhr.open(form1.method,form1.action,true)
            xhr.send(data)
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    console.log(xhr.responseText)
                    let result=JSON.parse(xhr.responseText)
                    console.log(result)
                }
            }
            return false //终止默认事件  不让表单提交
        }

------------------------------------显示页面-------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展示所有的用户</title>
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
    <ul>
        <li>
            <img src="" alt=""> <span>名称</span>
        </li>
    </ul>
    <script>
        $(function(){
            $.ajax({
                type:"get",
                url:"http://localhost:8080/getusers",
                dataType:"JSON",
                success(res){
                    console.log(res)
                    res.message.forEach(item=>{
                        let li=$("<li />")
                        let img=$("<img />").attr("src",item.imgUrl)
                        li.append(img)
                        let span=$("<span />").html(item.username)
                        li.append(span)
                        $("ul").append(li)
                    })
                    
                }
            })
        })
    </script>

const http = require("http")
const multiparty = require("multiparty")
const fs = require("fs")
const url=require("url")
let users = [{ id: 1, username: "wangyi", upass: 123, imgUrl: "头像地址" }]
http.createServer((req, res) => {
    if (req.method == 'POST') {
        if (req.url == "/reg") {
            let form = new multiparty.Form({
                uploadDir:"./upload"
            })    //上传后图片保存路径
            form.parse(req, (err, data, files) => {    //解析form
                //data{ username: [ '15233564788' ], upass: [ '123' ] }
                //console.log(files) 图片数据
                let result=users.some(item=>item.username==data.username[0])
                if (result) {
                    res.write(JSON.stringify({ message: "用户已经存在" }))
                    res.end()
                } else {
                    let user = {
                        id: users.length + 1,
                        username: data.username[0],
                        upass: data.upass[0],
                        imgUrl:files.f1[0].path //特别注意这个位置在查询图片地址时需要查询下地址路径
                    }     //添加新增加用户的对象值
                    users.push(user)  //将新用户加入users中
                    res.write(JSON.stringify({ message: "注册成功" }))
                    res.end()
                }
            })
        }
    } else if (req.method == "GET") {
        let { pathname, query } = url.parse(req.url, true)
        if (pathname.endsWith(".html")) {
            fs.readFile(`./www${pathname}`, (err, data) => {   //读取静态文件
                if (err) {
                    res.write("404")
                    res.end()
                } else {
                    res.write(data)
                    res.end()
                }
            })
        } else if (pathname == "/getusers") {
            res.write(JSON.stringify({ message: users }))
            res.end()
        }
       
    }
}).listen(8080)