Node.js 之 express 学习笔记，2020.12.23

QzjAuroraJun

于 2020-12-28 00:59:30 发布

阅读量156

点赞数 1

分类专栏： node.js jQueryAJAX 文章标签： node.js jquery

本文链接：https://blog.csdn.net/maybyyoulove/article/details/111829464

版权

node.js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

jQueryAJAX

1 篇文章 0 订阅

订阅专栏

通JQAJAX,express 实现基本的登录注册功能

文件结构：

|——Qdemo
   |——node_modules
   |——www
    	|——from
    		|——index.html
    		|——sign.html
   |——public
   			|——js
   				|——jquery.min.js
    		|——css
    			——index.css
   |——express.js

index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <link rel="stylesheet" href="../../public/css/index.css">
</head>
<body>

<h1>登录页</h1>
<div>
  <input type="text" placeholder="请输入用户名" name="username"><br><br>
  <input type="password" placeholder="请输入密码" name="password"><br><br>
  <button>登录</button>
  <a href="./sign.html">未注册,请注册</a>
</div>

<script src="../../public/js/jquery.min.js"></script>
<script>
  $(function () {
    var url="http://localhost:8989/submit"

    $('button').click(()=>{
      var name = $("[name='username']") .val();
      var password = $("[name='password']") .val();
      $.ajax({
        url:url,
        method:"get",
        data:{
          username:name,
          password:password
        },
        success:function(res){
          location.href=`${url}?username=${res.username}&password=${res.password}`//页面跳转
        }
      })
    })
  })
</script>
</body>
</html>

sign.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <link rel="stylesheet" href="../../public/css/index.css">
</head>
<body>

<h1>这是注册页面</h1>
<div>
  <input type="text" placeholder="请输入用户名" name="username"><br><br>
  <input type="password" placeholder="请输入密码" name="password"><br><br>
  <button>注册</button>
  <a href="http://localhost:8989/">已有账号，请登录</a>
</div>

<script src="../../public/js/jquery.min.js"></script>
<script>
  $(function () {
    var url="http://localhost:8989/submit"

    $('button').click(()=>{
      var name = $("[name='username']") .val();
      var password = $("[name='password']") .val();
      $.ajax({
        url:url,
        method:"post",
        data:{
          username:name,
          password:password
        },
        success:function(res){
          location.href=`${url}?username=${res.username}&password=${res.password}`//页面跳转
        }
      })
    })
  })
</script>
</body>
</html>

express.js

const express=require('express');
const path = require('path');
const app=express();

// 引入处理post参数的模块
var bodyParser = require('body-parser')
var urlencodedParser = bodyParser.urlencoded({ extended: false })

//静态资源呈递
app.use('/public',express.static('./public'));

app.use(express.static(path.join(__dirname,"www","from")))

//POST
app.post("/submit",(req,res) => {
      console.log('post请求的')
      res.json(req.body)
})

//GET
app.get("/submit",(req,res) => {
      console.log('get请求的')
      res.json(req.query)
})

//404
app.use("/",(req,res) => {
      res.send("404")
})

//监听端口
app.listen('8989',(err) => {
  if (err) throw err;
  console.log('服务器启动成功...');
})

在这里插入图片描述

QzjAuroraJun

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node.js 之 express 学习笔记，2020.12.23

通JQAJAX,express 实现基本的登录注册功能文件结构：|——Qdemo |——node_modules |——www |——from |——index.html |——sign.html |——public |——js |——jquery.min.js |——css ——index.css |——express.jsindex.html<html lang="en"&gt
复制链接

扫一扫