Share an example code of nodejs ejs front-end template
Foreword:
If all front-end pages need to be assembled into HTML strings and then printed to the front desk, it will undoubtedly be a huge workload for developers. Therefore, it is necessary to use front-end templates to focus on The focus is on front-end data, similar to web dynamic languages such as PHP and JSP.
Template selection:
Since it is a team collaboration, in order to reduce the learning cost, I chose EJS, which is similar to the development of PHP and JSP. People who are familiar with this will greatly improve efficiency.
启动webapp 页面
[javascript] view plain copy
var express = require("express");
var http = require("http");
var app = express();
////////////////////// 设置模板 /////////////////////////////
var ejs = require("ejs");
//使用set方法，为系统变量“views”和“view engine”指定值。
app.set("views", __dirname + "/views");
// 指定模板文件的后缀名为html
app.set('view engine', 'html');
// 运行hbs模块
app.engine('html', ejs.__express);
////////////////////// 利用文件来拆分路由的规模 /////////////////////////////
var router = express.Router();
var router1 = require('./routes/router1');
var router2 = require('./routes/router2');
var router3 = require('./routes/router3');
var testRouter = require('./routes/test/test');
//设置web工程的根目录
app.use(express.static(__dirname + '/'));
app.use('/router1', router1);
app.use('/router2', router2);
app.use('/router3', router3);
app.use('/test', testRouter);
http.createServer(app).listen(3000);
控制器routes/router1.js
[javascript] view plain copy
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/a', function(req, res, next) {
res.render('router1/index', { name: 'Express 路由1' });
});
module.exports = router;
模板页面views/router1/index.html
[html] view plain copy
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../../public/js/jquery.min.js"></script>
<script src="../../public/js/hb_common.js"></script>
<link rel="stylesheet" href="../../public/css/bootstrap.min.css">
<link rel="stylesheet" href="../../public/css/hb_wap.css">
<title>黄彪测试nodejs模板</title>
</head>
<body >
<button class="btn btn-primary" id="btn"> <%= name %>_post</button>
</body>
</html>The above is the detailed content of Share an example code of nodejs ejs front-end template. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
PHP and Vue: a perfect pairing of front-end development tools
Mar 16, 2024 pm 12:09 PM
PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
Is Django front-end or back-end? check it out!
Jan 19, 2024 am 08:37 AM
Django is a web application framework written in Python that emphasizes rapid development and clean methods. Although Django is a web framework, to answer the question whether Django is a front-end or a back-end, you need to have a deep understanding of the concepts of front-end and back-end. The front end refers to the interface that users directly interact with, and the back end refers to server-side programs. They interact with data through the HTTP protocol. When the front-end and back-end are separated, the front-end and back-end programs can be developed independently to implement business logic and interactive effects respectively, and data exchange.
What are the benefits of C++ functions returning reference types?
Apr 20, 2024 pm 09:12 PM
The benefits of functions returning reference types in C++ include: Performance improvements: Passing by reference avoids object copying, thus saving memory and time. Direct modification: The caller can directly modify the returned reference object without reassigning it. Code simplicity: Passing by reference simplifies the code and requires no additional assignment operations.
Questions frequently asked by front-end interviewers
Mar 19, 2024 pm 02:24 PM
In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.
Exploring Go language front-end technology: a new vision for front-end development
Mar 28, 2024 pm 01:06 PM
As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces
How to use C++ reference and pointer parameter passing?
Apr 12, 2024 pm 10:21 PM
References and pointers in C++ are both methods of passing function parameters, but there are differences. A reference is an alias for a variable. Modifying the reference will modify the original variable, while the pointer stores the address of the variable. Modifying the pointer value will not modify the original variable. When choosing to use a reference or a pointer, you need to consider factors such as whether the original variable needs to be modified, whether a null value needs to be passed, and performance considerations.
Django: A magical framework that can handle both front-end and back-end development!
Jan 19, 2024 am 08:52 AM
Django: A magical framework that can handle both front-end and back-end development! Django is an efficient and scalable web application framework. It is able to support multiple web development models, including MVC and MTV, and can easily develop high-quality web applications. Django not only supports back-end development, but can also quickly build front-end interfaces and achieve flexible view display through template language. Django combines front-end development and back-end development into a seamless integration, so developers don’t have to specialize in learning
