javaScript+nodejs实现注册页面

laro ff

已于 2022-09-29 09:52:31 修改

阅读量191

点赞数

分类专栏：前端全栈文章标签： javascript 前端开发语言

于 2022-09-29 09:40:34 首次发布

本文链接：https://blog.csdn.net/m0_63989259/article/details/127101008

版权

前端同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

全栈

3 篇文章 0 订阅

订阅专栏

register.js

//register.html
<!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>Document</title>
    <link rel="stylesheet" href="./css/register.css">
</head>
<body>
    <form>
        用户名:<input type="text" class="username"><br>
        密&emsp;码:<input type="password" class="password"><br>
        <input type="submit" value="提交">
    </form>
    <script src="./lib/axios.min.js"></script>
    
    <script class="module">
        import {} from './js/register.js'
        onRegister()
    </script>
</body>
</html>

register.css

form{
    width: 480px;
    margin: 150px auto;
    padding: 20px;
    border: 1px solid gray;
    background-color: #bea1a1;
    border-radius: 5px;
}

register.js

export function onRegister(){
    const formEle=document.querySelector('form')
    const usernameEle=document.querySelector('.username')
    const passwordEle=document.querySelector('.password')

    formEle.addEventListener('click',async function(e){
        e=e||window.event
        e.preventDefault()
        // 非空验证
    //调用注册接口
        let formDate=new FormData()//创建序列化对象
        formDate.append('username',username)
        formDate.append('password',password)

        //axios实现数据渲染，调用注册接口
        let res=await axios({
            method:'post',
            url:'http://localhost:3000/user/register',
            data:formDate,
        })
        if(res.data.code==1){
            alert('注册成功')
        }
    })


}

nodejs实现接口代码

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors=require('cors')

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();
app.use(cors())

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

user.js

var express = require('express');
var router = express.Router();

let userArr=[{username:'lf',password:'123'}]
/* GET users listing. */

try{
  router.post('/register', function(req, res, next) {
  const {username,password}=req.body//接收参数
  let user={username,password}//用户信息
  userArr.push(user)
  res.send({
    code:1,
    info:'注册成功'
  })
});
}catch(err){
  res.send({
    code:-1,
    info:'注册失败',
  })
}


module.exports = router;

www

var app = require('../app');

app.listen(3000,()=>console.log('启动服务成功，监听3000端口'))

运行结果：

laro ff

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript+nodejs实现注册页面

nodejs
复制链接

扫一扫

专栏目录

javaScript+nodejs实现注册页面

目录：

register.js

register.css

register.js

nodejs实现接口代码

app.js

user.js

www

运行结果：

“相关推荐”对你有帮助么？