は<script> Node.jsの

Question

内の機能を必要とする私はこのような例のスクリプトタグ内必要機能を置くことができます：

<script> 
    var User = require('../models/user'); 
    alert('It is working'); 
</script> 

上記のコードは私のlayout.handlebarコードです。しかし、それは動作していないようです。 私はハンドルバーテンプレートエンジン上のuser.jsスクリプトにアクセスできるように、このスクリプトを取得する必要があるためです。

user.jsの

var mongoose = require('mongoose'); 
var bcrypt = require('bcryptjs'); 

//User Schema 
var UserSchema = mongoose.Schema({ 
username:{ 
    type: String, 
    index:true 
}, 
password:{ 
    type:String 
}, 
email:{ 
    type:String 
}, 
name:{ 
    type:String 
}, 
field:{ 
    type:String 
}, 
e_money:{ 
    type:Number //this is the integer form in mongoose 
} 
}); 

//accesible variable from the outside 
var User = module.exports = mongoose.model('User', UserSchema); 

//create the user 
module.exports.createUser= function(newUser, callback){ 
bcrypt.genSalt(10, function(err,salt){ 
bcrypt.hash(newUser.password, salt, function(err, hash){ 
    //store hash in your password DB 
    newUser.password = hash; 
    newUser.save(callback); 
}); 
}); 
} 



module.exports.getUserByUsername = function(username, callback){ 
var query = {username: username}; 
User.findOne(query, callback); 
} 

module.exports.getUserById = function(id, callback){ 
User.findById(id, callback); 
} 

module.exports.comparePassword = function(candidatePassword, hash, callback){ 
bcrypt.compare(candidatePassword, hash, function(err, isMatch){ 
    if(err) throw err; 
    callback(null, isMatch); 
}); 
} 

EDITED： 私はそれが私のデータベースに更新する]ボタンをクリックしたときに私が本当にしたいことだったので、私は私の質問を編集します。ここ

//To run the application 
var express = require('express'); 
var router = express.Router(); 
var passport = require('passport'); 
var LocalStrategy = require('passport-local').Strategy; 

var User = require('../models/user'); 

//Register 
router.get('/register', function(req,res){ 
res.render('register'); 
}); 

//Login 
router.get('/login',function(req,res){ 
res.render('login'); 
}); 

//Register User 
router.post('/register', function(req,res){ 
var name = req.body.name; 
var email = req.body.email; 
var username = req.body.username; 
var password = req.body.password; 
var password2 = req.body.password2; 
var field = req.body.field; 

//temporary for emoney 
var e_money = req.body.e_money; 

//show what's been written in web to console(name) 
//console.log(name); 

//validation - Check to see if the field is empty 
req.checkBody('name', 'Name is required!').notEmpty(); 
req.checkBody('email', 'Email is required!').notEmpty(); 
req.checkBody('email', 'Email is not valid!').isEmail(); 
req.checkBody('username', 'Username is required!').notEmpty(); 
req.checkBody('password', 'Password is required!').notEmpty(); 
req.checkBody('password2', 'Password does not match').equals(req.body.password); 
req.checkBody('field', 'Please specify if you are a Teacher or a Student!').notEmpty(); 

//temporary for emoney 
req.checkBody('e_money','Please add some value in this field').notEmpty(); 

var errors = req.validationErrors(); 

if(errors){ 
    res.render('register',{ 
     errors:errors 
    }); 
}else{ 
     //new user in the model(user.js) 
    var newUser = new User({ 
     name: name, 
     email: email, 
     username: username, 
     password: password, 
     field: field, 
     e_money: e_money //temporary emoney 
    }); 

    User.createUser(newUser,function(err, user){ 
     if(err) throw err; 
     console.log(user); 
    }); 
    req.flash('success_msg', 'You are registed and can now login'); 

    res.redirect('/users/login'); 
} 
}); 




passport.use(new LocalStrategy(
function(username, password, done){ 
User.getUserByUsername(username, function(err, user){ 
    if(err) throw err; 
    if(!user){ 
     return done(null, false, {message: 'Unknown User'}); 
    } 

    User.comparePassword(password, user.password, function(err, isMatch){ 
     if(err) throw err; 
     if(isMatch){ 
      return done(null, user); 
     } 
     else{ 
      return done(null, false, {message: "Invalid password"}); 
     } 
    }); 
}); 
})); 

passport.serializeUser(function(user, done){ 
done(null, user.id); 
}); 

passport.deserializeUser(function(id, done){ 
User.getUserById(id, function(err, user){ 
    done(err,user); 
}); 
}); 

router.post('/login', 
passport.authenticate('local',{sucessRedirect:'/',failureRedirect:'/users/login',failureFlash: true}), 
function(req,res){ 
    //dashboard 
    if (req.user.field == "student") { 
     req.flash('stud_val', 'student'); 
    }else if(req.user.field == "teacher"){ 
     req.flash('teach_val', 'teacher'); 
    }else if (req.user.field == "admin") { 
     req.flash('admin_val', 'teacher'); 
    } 
    res.redirect('/'); 
}); 

router.get('/logout',function(req, res){ 
req.logout(); 
req.flash('success_msg', 'You are logged out'); 

res.redirect('/users/login'); 
}) 


module.exports = router; 

users.jsとの私のroutes->でその

のための私の全体のコードだ私のビュー - >レイアウト - > layout.handlebars

<!DOCTYPE html> 
<html> 
<head> 
{{#if user}} 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> 
<title>PEKTOS | Live Stream</title> 
<!-- Favicon--> 
<link rel="icon" href="favicon.ico" type="image/x-icon"> 
<!-- Google Fonts --> 
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css"> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> 
<!-- Bootstrap Core Css --> 
<link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet"> 
<!-- Waves Effect Css --> 
<link href="plugins/node-waves/waves.css" rel="stylesheet" /> 
<!-- Animation Css --> 
<link href="plugins/animate-css/animate.css" rel="stylesheet" /> 
<!-- Morris Chart Css--> 
<link href="plugins/morrisjs/morris.css" rel="stylesheet" /> 
<!-- Custom Css --> 
<link href="css/style.css" rel="stylesheet"> 
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes --> 
<link href="css/themes/all-themes.css" rel="stylesheet" /> 

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
<script src="/socket.io/socket.io.js"></script> 
<script type="text/javascript" src="/easyrtc/easyrtc.js"></script> 
<script type="text/javascript" src="/easyrtc/labs/easyrtc_recorder.js"> </script> 
{{#if stud_val}} 
    <script type="text/javascript" src="js/demo_multistream_stud.js"></script> 
{{/if}} 
{{#if teach_val}} 
    <script type="text/javascript" src="/easyrtc/labs/desktop_capture_iframe_version.js"></script> 
    <script type="text/javascript" src="js/demo_multistream.js"></script> 
{{/if}} 
<!-- <script type="text/javascript" src="js/demo_instant_messaging_rooms.js"></script> --> 

<!-- for button --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script> 
<script type="text/javascript" src="prettify/prettify.js"></script> 
<script type="text/javascript" src="js/jquery.slimscroll.js"></script> 



{{else}} 
    <meta charset="UTF-8"> 
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> 
    <title>Pektos | Log in</title> 
    <!-- Favicon--> 
    <link rel="icon" href="/favicon.ico" type="image/x-icon"> 
    <!-- Google Fonts --> 
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css"> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> 

    <!-- Bootstrap Select Css --> 
    <link href="plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" /> 

    <!-- Bootstrap Core Css --> 
    <link href="/plugins/bootstrap/css/bootstrap.css" rel="stylesheet"> 

    <!-- Waves Effect Css --> 
    <link href="/plugins/node-waves/waves.css" rel="stylesheet" /> 

    <!-- Animation Css --> 
    <link href="/plugins/animate-css/animate.css" rel="stylesheet" /> 

    <!-- Custom Css --> 
    <link href="/css/style.css" rel="stylesheet"> 



{{/if}} 
</head> 
<!--Load view--> 
{{#if user}} 
<body class="theme-red" style="overflow: hidden;"> 
{{{body}}} 
{{else}} 
<body class="login-page"> 
<div class="login-box"> 
    <div class="logo"> 
     <a href="javascript:void(0);">Pek<b>Tos</b></a> 
     <small>Right On Target</small> 
    </div> 
    <div class="card"> 
     <div class="body"> 
      <form id="sign_in" method="POST"> 
       <div class="msg"> 
        {{#if success_msg}} <!--Global variable that has been set in app.js--> 
        <div class="alert alert-success">{{success_msg}} 
        </div> 
        {{/if}} 
        {{#if error_msg}} 
        <div class="alert alert-danger">{{error_msg}} 
        </div> 
        {{/if}} 
        {{#if error}} 
        <div class="alert alert-danger">{{error}} 
        </div> 
        {{/if}} 
        {{{body}}} 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 
{{/if}} 
{{#if user}} 

<script> 

    $('#localVideos').click(function(){ 
     $('nav').toggle('drop',{direction: 'up'}, 500); 
     $('.btnMenuFloat').toggle('drop',{direction: 'left'}, 500); 
     $('.actionBtnFloat').toggle('drop',{direction: 'down'}, 500); 
     $('.btnfloat').toggle('drop',{direction: 'down'}, 500); 
     $('.actionPanel2').hide(); 
    }); 

    function muteMe(id) { 
     if($('.cv'+id).prop('muted')){ 
      $('.cv'+id).prop('muted', false); 
      var child = document.getElementById("micid"+id); 
      child.innerHTML = "mic"; 
      $('.micbut'+id).css("color", "green"); 
     } 
     else{ 
      $('.cv'+id).prop('muted', true); 
      var child = document.getElementById("micid"+id); 
      child.innerHTML = "mic_off"; 
      $('.micbut'+id).css("color", "red"); 
     } 
    } 

    function showMe(id) { 
     $('#span'+id).toggle("drop",{direction: 'right'},500); 
    } 

    $(document).ready(function(){ 
     var socket = io(); 

      //understand button 
     $(".understandbtn").click(function(){ 
      //reset the timer every 3 second of interval 
      $('.actionBtnFloat').css('z-index','0'); 

// e_money

  var deduct = 100; 
      var newMoney = {{user.e_money}} - deduct; 

      alert("Your money is: "+ newMoney); 
      //i want to update here my e-money to the database with the value of the newMoney 

// end

  clearTimeout(interval); 
      //send the data to the server 
      socket.emit('chat message', getUser()); 
      var interval = setTimeout(function(){ 
       $('.'+getUser()).fadeIn(); 
      },5000); 
     }); 

     socket.on('chat message', function(msg){ 
      $('.cv'+msg).fadeOut(); 
      $('.'+msg).append('<img id="bulb" class="actImage" src="images/understand button.png" width="50" height="50">'); 
      $('#say'+msg).html('I understand'); 
      var intervals = setTimeout(function(){ 
       $('#say'+msg).html(''); 
       $('#bulb').remove(); 
       $('.cv'+msg).fadeIn(); 
      },5000); 
     }); 

     //understand button end 

Answer 1

いいえ、ブラウザではrequireを使用できません。

サーバーサイドJavaScript（NodeJS）とクライアントサイドJavaScriptには大きな違いがあります。クライアント側のJavaScriptにはモジュールシステムがありません（まだ）、JavaScriptファイル内のものをインポート/エクスポートすることはできません。

これはJavaScriptの大きな欠点であり、多くの問題を引き起こします。たとえば、複数のJSファイルが互いに通信したい場合、グローバル名前空間に依存します。

NodeJSが導入されたとき、その作成者はその問題を認識し、require/module.exportsパターンを作成しました。あなたはクライアント側のJavaScriptで同じ動作を持っているしたい場合は、たとえばRollupのために、モジュールバンドラを使用する必要があり、Webpack、browserifyなど

NodeJSはかなりできるのに対し、クライアント側のJavaScriptは、ユーザとの対話のために使用されています多くのことがあなたが望むすべてを行います（サーバーのハードドライブ上のファイルの読み取り/書き込み、データベースへのアクセスなど）。サーバー上でのみ動作することができます。

クライアント側のJavaScriptでは、mongooseモジュールを要求することはできません。したがって、サーバー上のデータベースにアクセスすることはできません。

さらに、クライアント側のJavaScriptはサーバーのデータベースにアクセスする必要もありません。可能であれば、セキュリティ上の危険にさらされます。

実際にデータベースからブラウザにデータを転送する必要がある場合は、AJAXを使用してください。

もちろん、WebSocketは、クライアントとサーバーの間でデータを転送する別の可能性もあります。既にそれらを使用しているので（ソケット。あなたは、

$(".understandbtn").click(function() { 
    //reset the timer every 3 second of interval 
    $('.actionBtnFloat').css('z-index','0'); 
    var deduct = 100; 
    var newMoney = {{user.e_money}} - deduct; 

    // send a message to the server that the e-money value has changed 
    socket.emit('update e-money', { 
    userName: {{user.name}} 
    newMoney: newMoney 
    }); 

    clearTimeout(interval); 
    // send the data to the server 
    socket.emit('chat message', getUser()); 
    var interval = setTimeout(function() { 
    $('.'+getUser()).fadeIn(); 
    }, 5000); 
}); 

socket.on('update e-money response', function (data) { 
    alert("Your money is: "+ data.newMoney); 
}); 

socket.on('update e-money error', function (data) { 
    alert("Could not update your money: "+ data.error); 
}); 

、サーバー上でしょう：IO、私は疑う）、ここでは（私はあなたがクライアント側のコードでは、データベースの更新をトリガする場所これは推測する）ことを行う方法の一例ですこれを行う：

// perhaps you gave the socket server variable a different name than "socket" 
socket.on('update e-money', function (data) { 
    var userName = data.userName; 
    var newMoney = data.newMoney; 
    var query = { username: userName }; 

    // is this the way you update entries in the database? 
    User.findOneAndUpdate(query, { e_money: newMoney }, { upsert: true }, function (err, doc) { 
    if (err) { 
     socket.emit('update e-money error', { error: err }); 
    } 
    socket.emit('update e-money response', { newMoney: newMoney }); 
    }); 
});