內部需要功能<script> node.js
[英]Require function inside <script> node.js
問題描述
我可以在腳本標記中放置一個require函數，例如：
<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);
});
}
編輯：我編輯我的問題，因為我真正想要的是當我單擊按鈕時它將在數據庫上更新。 這是我的整個代碼
在我的路線上-> 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;
在我的觀點->布局-> 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
//結束
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
1 個解決方案
解決方案1
2 已采納 2017-06-18 15:26:18
不，您require在瀏覽器中。
服務器端JavaScript（NodeJS）和客戶端JavaScript之間有很大的區別。 客戶端JavaScript還沒有模塊系統，並且您不能在JavaScript文件中導入/導出內容。
這對於JavaScript來說是一個巨大的劣勢，並且會帶來很多問題。 例如，如果多個JS文件想要相互通信，則它們依賴於全局名稱空間。
引入module.exports ，其創建者意識到了這一問題，並創建了require / module.exports模式。 如果您想為客戶端JavaScript相同的行為，你必須使用一個模塊捆綁，例如匯總 ， 的WebPack ， browserify等。
客戶端JavaScript用於用戶交互，而NodeJS幾乎可以完成您想要的所有事情（在服務器硬盤上讀取/寫入文件，訪問數據庫等）； 但它只能在服務器上運行。
在客戶端JavaScript中，您不需要mongoose模塊，因此，您無法訪問服務器上的數據庫。
而且，客戶端JavaScript甚至不需要訪問服務器的數據庫。 如果可以的話，將會帶來安全隱患。
如果確實需要將數據從數據庫傳輸到瀏覽器，請使用AJAX 。
當然，WebSockets是在客戶端和服務器之間傳輸數據的另一種可能性。 當您已經在使用它們時（我懷疑是socket.io），下面是一個執行該操作的示例（我想這是您要在客戶端代碼中觸發數據庫更新的位置）：
$(".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);
});
在服務器上，您可以執行以下操作：
// 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 });
});
});
Node.js“require”函數和參數
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.