Exiger fonction à l'intérieur <script> Node.js

Question

Puis-je mettre une fonction require dans la balise de script par exemple comme ceci:

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

Le code ci-dessus est mon code layout.handlebar. Mais il semble que ça ne marche pas. Parce que j'ai besoin de ce script pour pouvoir accéder au script user.js sur mon moteur de gabarit de guidon.

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); 
}); 
} 

: ÉDITÉ je modifier ma question parce que ce que je veux vraiment était quand je clique sur le bouton, il mettra à jour sur ma base de données. voici mon code entier pour que

sur mon routes-> users.js

//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; 

et sur mon vues-> layout-> 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 

// fin

  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

Non, vous ne pouvez pas require dans le navigateur.

Il existe une grande différence entre le JavaScript côté serveur (NodeJS) et le JavaScript côté client. JavaScript côté client n'a pas (encore) un système de module, et vous ne pouvez pas importer/exporter des choses dans un fichier JavaScript.

Ceci est un énorme inconvénient pour JavaScript et crée de nombreux problèmes. Par exemple, plusieurs fichiers JS dépendent de l'espace de noms global s'ils veulent communiquer entre eux.

Lorsque NodeJS a été introduit, ses créateurs étaient au courant de ce problème et a créé le modèle require/module.exports. Si vous voulez avoir le même comportement pour JavaScript côté client, vous devez utiliser un Bundler de module, par exemple Rollup, Webpack, browserify, etc.

JavaScript côté client est utilisé pour l'interaction de l'utilisateur, alors que NodeJS peut assez faites tout ce que vous voulez (lire/écrire des fichiers sur le disque dur du serveur, accéder à une base de données, ...); mais il ne peut fonctionner que sur le serveur.

Dans le JavaScript côté client, vous ne pouvez pas avoir besoin du module mongoose et par conséquent, vous ne pouvez pas accéder à une base de données sur le serveur.

De plus, le JavaScript côté client n'a même pas besoin d'accéder à la base de données du serveur. Ce serait un danger pour la sécurité s'il le pouvait.

Si vous avez vraiment besoin de transférer des données de la base de données vers le navigateur, utilisez AJAX.

Bien sûr, les WebSockets sont une autre possibilité de transfert de données entre le client et le serveur. Comme vous les utilisez déjà (socket.io, je pense), voici un exemple de la façon de le faire (je suppose que c'est là que vous voulez déclencher la mise à jour de base de données dans le code côté client):

$(".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); 
}); 

Et sur le serveur, vous le feriez faites ceci:

// 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 }); 
    }); 
});