지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > node.js 및 기타 기술을 사용하여 로그인 및 등록 기능을 구현하는 방법은 무엇입니까?

node.js 및 기타 기술을 사용하여 로그인 및 등록 기능을 구현하는 방법은 무엇입니까?

亚连
풀어 주다： 2018-06-12 14:29:36
원래의
3861명이 탐색했습니다.

이 글은 웹사이트 로그인 및 등록 기능을 구현하기 위해 node.js+express+mySQL+ejs+bootstrop을 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다

동지들, 부단한 노력 끝에 다양한 문서를 거쳐 드디어 약간 괜찮은 노드 프로젝트를 만들었습니다. 물론 프로젝트에서 직접 사용하면 이 데모는 결국 너무 간단합니다. mySQL 사용자 목록 여기서는 이해하기 쉽도록 사용자 이름과 비밀번호라는 두 개의 필드만 설정되어 있습니다. 일반적인 로그인 및 등록의 경우에는 확실히 더 많은 필드가 있습니다. 하지만 작가님처럼 node를 처음 접하시는 분들은 아직 많이 배웠습니다. 긴장하면서도 뭐라고 써야 할지 모르겠어서 인터넷에 있는 다른 10대들의 블로그를 참고했었습니다. 향후 로그인 및 등록 데모는 프로젝트의 요구에 따라 개선될 예정입니다.

효과는 다음과 같습니다

node.js 및 기타 기술을 사용하여 로그인 및 등록 기능을 구현하는 방법은 무엇입니까?

Effect.gif

프로젝트 구조

정문 앱 .js

app.js는 프로그램의 메인 입구로, 일반적으로 작성에 사용됩니다. 우리가 소개한 미들웨어와 다양한 설정

var express = require('express');
// NodeJS中的Path对象，用于处理目录的对象，提高开发效率
var path = require('path');
// 用来定义网页logo的中间件
var favicon = require('serve-favicon');
// NodeJs中Express框架使用morgan中间件记录日志
// Express中的app.js文件已经默认引入了该中间件var logger = require('morgan');
// 使用app.use(logger('dev'));以将请求信息打印在控制台，便于开发调试，
// 但实际生产环境中，需要将日志记录在log文件里
var logger = require('morgan');
// 存储登录信息中间件
var cookieParser = require('cookie-parser');
// 解析请求体的中间件
var bodyParser = require('body-parser');
// 引入模块的js文件
var routes = require('./routes/index');
// var users = require('./routes/user');
// 引入session中间件
var session=require('express-session');
// 创建项目示例
var app = express();
// 引入我们需要的模板
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// 用摩记录请求
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// 利用cookieParser中间件存取信息
app.use(cookieParser("Luck"));
// 利用session中间件存取信息
app.use(session({
  secret:'luck',
  resave:false,
  saveUninitialized:true
}));
// 静态化我们的public文件下的文件，使其可以直接引用
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
// app.use('/users', users);
// 捕捉404状态
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});
module.exports = app;
app.listen(3000,'127.0.0.1')
routes下的index.js文件
index.js这里我用来处理页面的路由跳转
var express = require('express');
var router = express.Router();
// 为数据库链接的js文件，可查询数据库中的用户名和密码等信息
var usr=require('netRequest/dbConnect');
// 获取首页登录信息
router.get('/', function(req, res) {
  if(req.cookies.islogin){
    req.session.islogin=req.cookies.islogin;
  }
  if(req.session.islogin){
    res.locals.islogin=req.session.islogin;
  }
 res.render('index', { title: 'HOME',test:res.locals.islogin});
});
// 登录页处理
router.route('/login')
  // get请求渲染页面  
  .get(function(req, res) {
    if(req.session.islogin){
      res.locals.islogin=req.session.islogin;
    }
    if(req.cookies.islogin){
      req.session.islogin=req.cookies.islogin;
    }
    res.render('login', { title: '用户登录' ,test:res.locals.islogin});
  })
  // post请求查询用户信息
  .post(function(req, res) {
    client=usr.connect();
    result=null;
    // 调用数据库方法
    usr.selectFun(client, req.body.username, function (result) {
      if(result[0]===undefined){
        res.send('没有该用户');
      }else{
        if(result[0].password==req.body.password){
          req.session.islogin=req.body.username;
          res.locals.islogin=req.session.islogin;
          res.cookie('islogin',res.locals.islogin,{maxAge:60000});
          res.redirect('/home');
        }else{
          res.redirect('/login');
        }
      }
    });
  });
// 退出登录页处理
router.get('/logout', function(req, res) {
  res.clearCookie('islogin');
  req.session.destroy();
  res.redirect('/');
});
// home页处理
router.get('/home', function(req, res) {
  if(req.session.islogin){
    res.locals.islogin=req.session.islogin;
  }
  if(req.cookies.islogin){
    req.session.islogin=req.cookies.islogin;
  }
  res.render('home', { title: 'Home', user: res.locals.islogin });
});
// 注册页处理
router.route('/reg')
  // get请求渲染页面
  .get(function(req,res){
    res.render('reg',{title:'注册'});
  })
  // post请求注册用户
  .post(function(req,res) {
    client = usr.connect();
    // 调用数据库方法
    usr.insertFun(client,req.body.username ,req.body.password2, function (err) {
       if(err) throw err;
       res.send('注册成功');
    });
  });
module.exports = router;
node_modules中netRequest/dbConnect.js
로그인 후 복사

dbConnect.js

var mysql=require('mysql');
// 现在只是练习可以直接为数据库创建链接，
// 用户多时需要创建连接池
function connectServer(){
  var client=mysql.createConnection({
    host:'172.16.20.103',
    port:3308,
    database:'test',
    user:'JRJ_Win',
    password:'FT%^$fjYR56'
  })
  return client;
}
function selectFun(client,username,callback){
  client.query('select password from win.luck_user where username="'+username+'"',function(err,results,fields){
    if(err) throw err;
    callback(results);
  });
}
function insertFun(client , username , password,callback){
  client.query('insert into win.luck_user value(?,?)', [username, password], function(err,result){
    if( err ){
      console.log( "error:" + err.message);
      return err;
    }
     callback(err);
  });
}
exports.connect = connectServer;
exports.selectFun = selectFun;
exports.insertFun = insertFun;
로그인 후 복사

나머지는 페이지 템플릿입니다

login.ejs

<%- include header %>
<p class="container">
  <form class="col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post">
    <fieldset>
      <% if(locals.islogin) { %>
          <h3>用户： <%= test %>  已经登陆。<br></h3>
          <a class="btn" href="/logout" rel="external nofollow" > 退出登录 </a>
         <% } else{ %>
            <p class="form-group">
              <label class="col-sm-3 control-label" for="username">用户名</label>
              <p class="col-sm-9">
                <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required>
              </p>
            </p>
            <p class="form-group">
              <label class="col-sm-3 control-label" for="password">密码</label>
              <p class="col-sm-9">
                <input type="password" class="form-control" id="password" name="password" placeholder="密码" required>
              </p>
            </p>
            <p class="form-group">
              <p class="col-sm-offset-3 col-sm-9">
                <button type="submit" class="btn btn-primary">登录</button>
              </p>
            </p>
      <% } %>
    </fieldset>
  </form>
</p>
<%- include footer %>
로그인 후 복사

index .ejs

<%- include header %>
<p class="jumbotron text-center">
  <% if(locals.islogin){%>
    <h2>用户：<%= test %> </h2>已经登陆
    <% }else{%>
      <h2 class="text-center"><a href="/login" rel="external nofollow" rel="external nofollow" >请登录后查看</a></h2>
  <%}%>  
</p>
<%- include footer %>
로그인 후 복사

reg.ejs

<%- include header %>
<p class="container">
  <form class=" col-sm-offset-4 col-sm-4 form-horizontal" role="form" method="post">
    <fieldset>
      <p class="form-group">
        <label class="col-sm-3 control-label" for="username">用户名</label>
        <p class="col-sm-9">
          <input type="text" class="form-control" id="username" name="username" placeholder="用户名" required>
        </p>
      </p>
      <p class="form-group">
        <label class="col-sm-3 control-label" for="password2">密码</label>
        <p class="col-sm-9">
          <input type="password" class="form-control" id="password2" name="password2" placeholder="密码" required>
        </p>
      </p>
      <p class="form-group">
        <p class="col-sm-offset-3 col-sm-9">
          <button type="submit" class="btn btn-primary">注册</button>
        </p>
      </p>
    </fieldset>
  </form>
</p>
<%- include footer %>
로그인 후 복사

header.ejs

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>Test</title>
  <link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" >
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript" src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!--  <header>
    <h1><%= title %></h1>
  </header> -->
  <nav class="navbar navbar-default">
    <p class="container-fluid">
      <p class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Project name</a>
      </p>
      <p id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >待定</a></li>
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >待定</a></li>
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >待定</a></li>
          <li class="dropdown">
            <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">待定<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
              <li role="separator" class="pider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
              <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a title="主页" href="/" rel="external nofollow" >首页<span class="sr-only">(current)</span></a></li>
          <li><a title="登陆" href="/login" rel="external nofollow" rel="external nofollow" >登录</a></li>
          <li><a title="注册" href="/reg" rel="external nofollow" >注册</a></li>
        </ul>
      </p>
    </nav>
    <article>
로그인 후 복사

footer.ejs

</article>
</body>
</html>
로그인 후 복사

프로젝트의 주요 코드는 여기에 있습니다. 이해하고 싶다면 시간이 좀 걸릴 것 같습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Vue에서 테이블 헤더와 첫 번째 열을 수정하는 방법

jquery.picsign에서 이미지 주석 구성 요소를 사용하는 방법

webpack을 통해 koa2 프레임워크 앱을 패키징하는 방법, 무엇을 해야 할까요? 그래요?

Vue 컴포넌트 개발 아이디어에 대한 자세한 해석

Vue.js에서 컴포넌트와 해당 기능을 사용하는 방법에 대한 자세한 해석?

위 내용은 node.js 및 기타 기술을 사용하여 로그인 및 등록 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
bootstrap express nodejs
원천：php.cn
이전 기사：Vue에서 diff 알고리즘을 사용하는 방법 다음 기사：Vue에서 필터를 사용하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
NodeJS를 사용하여 Docker에서 MySQL에 연결할 때 오류가 발생합니다. MySQL에 연결된 NodeJS 백엔드 서버를 만들었습니다. Docker를 사용하여 다음 명령을 사용하여 nodeJS 및 package.json 파일(MySQL ...
에서 2024-04-06 12:07:19
0
1
415
React/Node: Trial_period_days를 사용하여 구독할 때 통합 오류가 발생했습니다. 7일 무료 평가판으로 설정하고 Firebase를 통해 사용자 정의 Nodejs 함수를 사용하여 고객에게 요금을 청구하려는 제품이 Stripe에 정의되어 있습니다....
에서 2024-04-04 20:30:57
0
1
320
다음은 Nodejs를 사용하는 미들웨어에서 제대로 작동하지 않습니다. 저는 Nodejs로 작업하고 expressjs를 사용하고 있으며 지금은 미들웨어 기능에 대해 작업 중입니다. 미들웨어 개념의 "다음" 작업이 무...
에서 2024-04-04 17:33:56
0
1
340
간단한 Hello world 프로그램은 여러 노드 인스턴스를 생성합니다. 저는 Javascript와 NodeJS를 처음 접했습니다. 다음과 같이 간단한 helloworld 프로그램을 실행하고 있습니다: 1constdurationInSe...
에서 2024-04-04 11:03:22
0
1
310
Node.js의 특정 경로에 SQL 쿼리가 표시되지 않습니다. 저는 javascript와 nodejs를 처음 접하는데 질문이 있습니다. 간단한 API를 작업하는 코드가 있는데 왜 이런 일이 발생하는지 이해하는 데 어려움을 겪...
에서 2024-04-04 00:24:22
0
1
344
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿