ExpressJS 对象未定义模板错误
ExpressJS Object Not Defined Templating Error
我不确定为什么在传递我的对象以在我的视图中使用时出现 ReferenceError: Object not defined
错误。我 运行 两条路线通过一个视图。一个用于创建记录,另一个用于通过 POST 方法编辑记录。我让我的视图知道内容是否应该显示在我的表单字段中的方式是使用模板化的 if/else 语句。当我在路由文件中调用 blogpost : blogpost
时出现错误的原因是什么?
错误:
ReferenceError: blogpost is not defined
at /Users/user/Desktop/Projects/node/blog/app/routes.js:128:26
at Layer.handle [as handle_request] (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/layer.js:76:5)
at next (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/route.js:100:13)
at isLoggedIn (/Users/user/Desktop/Projects/node/blog/app/routes.js:307:16)
at Layer.handle [as handle_request] (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/layer.js:76:5)
at next (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/route.js:100:13)
at next (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/route.js:94:14)
at Route.dispatch (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/route.js:81:3)
at Layer.handle [as handle_request] (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/layer.js:76:5)
at /Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/index.js:227:24
这是我的路线中遇到错误的部分:
router.route('/admin/posts/create')
// START POST method
.post(function(req, res) {
console.log("New instance");
var blogpost = new Blogpost(); // create a new instance of a Blogpost model
blogpost.title = req.body.title; // set the blog title
blogpost.featureImage = req.body.featureImage; // set the blog image
blogpost.blogUrl = blogpost.title.toLowerCase().replace(/\s+/g,"-");
blogpost.author = req.body.author; // set the author name
blogpost.tagline = req.body.tagline; // set the tagline
blogpost.content = req.body.content; // set the blog content
blogpost.category = req.body.category; // set the category
blogpost.tags = req.body.tags; // set the tags
//Save Blog Post
blogpost.save(function(err) {
if (err)
res.send(err);
res.redirect(303, '/'); //NEEDS TO BE CHANGED
});
}) // END POST method
.get(isLoggedIn, function(req, res) {
res.render('pages/blogpost-create', {
blogpost : blogpost
});
});
我如何在我的视图中使用我的 blogpost
对象:
<html>
<head>
<% include ../partials/head %>
<script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>
</head>
<body>
<header>
<% include ../partials/header %>
</header>
<div class="container">
<div class="col-md-12">
<h1>Blog Create</h1>
<% if(blogpost && blogpost.blogUrl) { %>
<form action="/admin/posts/edit/<%= blogpost.blogUrl %>" method="POST">
Header Image: <input type="file" id="files">
<p id="status">Please select a file</p>
<div id="preview"><img src="<%= blogpost.featureImage %>"></div>
<input type="hidden" id="feature-image" name="featureImage" value="/images/event-placeholder.png" />
Title: <input type="text" name="title" value="<%= blogpost.title %>"><br>
Author:
<select name="author">
<option value="Author">Connor Phillips</option>
</select><br>
Category:
<select name="category">
<option value="Analytics/SEO/SEM">Analytics/SEO/SEM</option>
<option value="Advice">Advice</option>
<option value="Programming">Programming</option>
<option value="Thoughts">Thoughts</option>
</select><br>
Tagline: <input type="text" maxlength="160" name="tagline" value="<%= blogpost.tagline %>"><br>
Content:<br>
<textarea name="content" id="blog-editor" rows="10" cols="80">
<%= blogpost.content %>
</textarea>
<br>
Tags: <input type="text" name="tags">
<br>
<% } else { %>
<form action="/admin/posts/create" method="POST">
Header Image: <input type="file" id="files"/>
<p id="status">Please select a file</p>
<div id="preview"><img src="/images/event-placeholder.png"></div>
<input type="hidden" id="feature-image" name="featureImage" value="/images/event-placeholder.png" />
Title: <input type="text" name="title"></input><br>
Author:
<select name="author">
<option value="Author">Test</option>
</select><br>
Category:
<select name="category">
<option value="Test">Test</option>
<option value="Test">Test</option>
<option value="Test">Test</option>
<option value="Test">Test</option>
</select><br>
Tagline: <input type="text" maxlength="160" name="tagline"><br>
Content:<br>
<textarea name="content" id="blog-editor" rows="10" cols="80">
</textarea>
<br>
Tags: <input type="text" name="tags">
<br>
<% } %>
<input type="submit" value="Submit">
</form>
</div>
</div>
<script>
// Replace the <textarea id="blog-editor"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'blog-editor' );
CKEDITOR.config.entities = false;
CKEDITOR.config.basicEntities = false;
CKEDITOR.config.entities_greek= false;
CKEDITOR.config.entities_latin= false;
CKEDITOR.config.htmlEncodeOutput = false;
CKEDITOR.config.protectedSource.push = '/<\#[\s\S]*#\#>/g';
</script>
<script type="text/javascript" src="/js/s3upload.js" async></script>
<script>
console.log("S3 Function Launched");
function s3_upload(){
var status_elem = document.getElementById("status");
var url_elem = document.getElementById("feature-image");
var preview_elem = document.getElementById("preview");
var s3upload = new S3Upload({
file_dom_selector: 'files',
s3_sign_put_url: '/sign_s3',
onProgress: function(percent, message) {
status_elem.innerHTML = 'Upload progress: ' + percent + '% ' + message;
},
onFinishS3Put: function(public_url) {
status_elem.innerHTML = 'Upload completed. Uploaded to: '+ public_url;
url_elem.value = public_url;
console.log(public_url);
preview_elem.innerHTML = '<img src="'+public_url+'" style="width:300px;" />';
},
onError: function(status) {
status_elem.innerHTML = 'Upload error: ' + status;
console.log(status_elem.innerHTML);
}
});
}
/*
* Listen for file selection:
*/
(function() {
var input_element = document.getElementById("files");
input_element.onchange = s3_upload;
})();
</script>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>
Blogpost 未定义,因为它未在您调用它的范围内定义。您定义了 var blogpost = new Blogpost();在 .post() 定义中,但不在 .get() 中。我认为您正在尝试将在 /post 路由中创建的 blogpost 传递到 /get 路由中,但是在 /redirect 完成后该对象将不可用。
我不确定为什么在传递我的对象以在我的视图中使用时出现 ReferenceError: Object not defined
错误。我 运行 两条路线通过一个视图。一个用于创建记录,另一个用于通过 POST 方法编辑记录。我让我的视图知道内容是否应该显示在我的表单字段中的方式是使用模板化的 if/else 语句。当我在路由文件中调用 blogpost : blogpost
时出现错误的原因是什么?
错误:
ReferenceError: blogpost is not defined
at /Users/user/Desktop/Projects/node/blog/app/routes.js:128:26
at Layer.handle [as handle_request] (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/layer.js:76:5)
at next (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/route.js:100:13)
at isLoggedIn (/Users/user/Desktop/Projects/node/blog/app/routes.js:307:16)
at Layer.handle [as handle_request] (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/layer.js:76:5)
at next (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/route.js:100:13)
at next (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/route.js:94:14)
at Route.dispatch (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/route.js:81:3)
at Layer.handle [as handle_request] (/Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/layer.js:76:5)
at /Users/user/Desktop/Projects/node/blog/node_modules/express/lib/router/index.js:227:24
这是我的路线中遇到错误的部分:
router.route('/admin/posts/create')
// START POST method
.post(function(req, res) {
console.log("New instance");
var blogpost = new Blogpost(); // create a new instance of a Blogpost model
blogpost.title = req.body.title; // set the blog title
blogpost.featureImage = req.body.featureImage; // set the blog image
blogpost.blogUrl = blogpost.title.toLowerCase().replace(/\s+/g,"-");
blogpost.author = req.body.author; // set the author name
blogpost.tagline = req.body.tagline; // set the tagline
blogpost.content = req.body.content; // set the blog content
blogpost.category = req.body.category; // set the category
blogpost.tags = req.body.tags; // set the tags
//Save Blog Post
blogpost.save(function(err) {
if (err)
res.send(err);
res.redirect(303, '/'); //NEEDS TO BE CHANGED
});
}) // END POST method
.get(isLoggedIn, function(req, res) {
res.render('pages/blogpost-create', {
blogpost : blogpost
});
});
我如何在我的视图中使用我的 blogpost
对象:
<html>
<head>
<% include ../partials/head %>
<script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>
</head>
<body>
<header>
<% include ../partials/header %>
</header>
<div class="container">
<div class="col-md-12">
<h1>Blog Create</h1>
<% if(blogpost && blogpost.blogUrl) { %>
<form action="/admin/posts/edit/<%= blogpost.blogUrl %>" method="POST">
Header Image: <input type="file" id="files">
<p id="status">Please select a file</p>
<div id="preview"><img src="<%= blogpost.featureImage %>"></div>
<input type="hidden" id="feature-image" name="featureImage" value="/images/event-placeholder.png" />
Title: <input type="text" name="title" value="<%= blogpost.title %>"><br>
Author:
<select name="author">
<option value="Author">Connor Phillips</option>
</select><br>
Category:
<select name="category">
<option value="Analytics/SEO/SEM">Analytics/SEO/SEM</option>
<option value="Advice">Advice</option>
<option value="Programming">Programming</option>
<option value="Thoughts">Thoughts</option>
</select><br>
Tagline: <input type="text" maxlength="160" name="tagline" value="<%= blogpost.tagline %>"><br>
Content:<br>
<textarea name="content" id="blog-editor" rows="10" cols="80">
<%= blogpost.content %>
</textarea>
<br>
Tags: <input type="text" name="tags">
<br>
<% } else { %>
<form action="/admin/posts/create" method="POST">
Header Image: <input type="file" id="files"/>
<p id="status">Please select a file</p>
<div id="preview"><img src="/images/event-placeholder.png"></div>
<input type="hidden" id="feature-image" name="featureImage" value="/images/event-placeholder.png" />
Title: <input type="text" name="title"></input><br>
Author:
<select name="author">
<option value="Author">Test</option>
</select><br>
Category:
<select name="category">
<option value="Test">Test</option>
<option value="Test">Test</option>
<option value="Test">Test</option>
<option value="Test">Test</option>
</select><br>
Tagline: <input type="text" maxlength="160" name="tagline"><br>
Content:<br>
<textarea name="content" id="blog-editor" rows="10" cols="80">
</textarea>
<br>
Tags: <input type="text" name="tags">
<br>
<% } %>
<input type="submit" value="Submit">
</form>
</div>
</div>
<script>
// Replace the <textarea id="blog-editor"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'blog-editor' );
CKEDITOR.config.entities = false;
CKEDITOR.config.basicEntities = false;
CKEDITOR.config.entities_greek= false;
CKEDITOR.config.entities_latin= false;
CKEDITOR.config.htmlEncodeOutput = false;
CKEDITOR.config.protectedSource.push = '/<\#[\s\S]*#\#>/g';
</script>
<script type="text/javascript" src="/js/s3upload.js" async></script>
<script>
console.log("S3 Function Launched");
function s3_upload(){
var status_elem = document.getElementById("status");
var url_elem = document.getElementById("feature-image");
var preview_elem = document.getElementById("preview");
var s3upload = new S3Upload({
file_dom_selector: 'files',
s3_sign_put_url: '/sign_s3',
onProgress: function(percent, message) {
status_elem.innerHTML = 'Upload progress: ' + percent + '% ' + message;
},
onFinishS3Put: function(public_url) {
status_elem.innerHTML = 'Upload completed. Uploaded to: '+ public_url;
url_elem.value = public_url;
console.log(public_url);
preview_elem.innerHTML = '<img src="'+public_url+'" style="width:300px;" />';
},
onError: function(status) {
status_elem.innerHTML = 'Upload error: ' + status;
console.log(status_elem.innerHTML);
}
});
}
/*
* Listen for file selection:
*/
(function() {
var input_element = document.getElementById("files");
input_element.onchange = s3_upload;
})();
</script>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>
Blogpost 未定义,因为它未在您调用它的范围内定义。您定义了 var blogpost = new Blogpost();在 .post() 定义中,但不在 .get() 中。我认为您正在尝试将在 /post 路由中创建的 blogpost 传递到 /get 路由中,但是在 /redirect 完成后该对象将不可用。