ch1-使用路由-静态资源-404页面-ejs模板
1 package.json
项目文件夹根目录创建这个文件
//要依赖的模块
"dependencies": { //dependency 依赖的复数形式
"express": "latest"
}
创建好后 npm install 安装(出现node_modules) 2 nodeJS 原生hello world
app.js文件代码
var http = require('http'); //依赖http块
server = http.createServer(function(req, res){ //request 请求 response 返回
res.writeHeader(200, { //200请求成功 Content-Type请求类型
'Content-Type': 'text/plain',
});
res.end('<p>hello world --by nodeJS</p>'); //end()表示请求结束
}).listen(300); //服务器开启在300接口
console.log('Server running at http://127.0.0.1:300');
3 exprss 简单使用
3.1 express简单使用不用其他文件的最简单hello world
app.js文件代码
var http = require('http'),
express = require('express'),
app = express();
//express 简单使用(只用一个js文件)
app.get('/', function(req, res){
res.send('这是最简单的nodejs express使用');
});
//创建服务器并监听接口
http.createServer(app).listen(500);
3.2 express 简单使用路由
创建 router/index.js; app.js 文件代码;
var http = require('http'),
express = require('express'),
app = express(); //express 使用router
app.use('/', require('./router/index.js'));
//创建服务器并监听接口
http.createServer(app).listen(500);
router/index.js代码
var express = require('express'),
router = express.Router();
//简单使用
router.get('/', function(req, res){
res.send('nodejs express 简单使用router');
});
//输出router
module.exports = router; 3.3 express router/index.js 使用正则匹配地址
router.get('/a+b+', function(req, res){
res.send('nodejs express 简单使用router');
});
此时 http://127.0.0.1:500/访问不到
符合正则表达式的地址: http://127.0.0.1:500/ab 或 aaabb 或abbb 但acb不行 abbc也不行 4 nodeJs常用的变量 调试方法只有console.log();
console.log(__filename); //输出文件名
console.log(__dirname); //输出当前文件所在目录名 被执行的js 文件的地址
console.log(process.cwd()); //当前执行node命令时候的文件夹地址
./当前目录
../父目录
/根目录 5 express模板的使用 使用的是ejs模板--和html只是后缀名不同
app.js文件代码
var http = require('http'),
express = require('express'),
app = express();
//设置视图模板引擎目录(当前视图模板的目录)
app.set('views', __dirname +'/views');
//设置视图模板引擎使用的模板的类型
app.set('view engin', 'ejs'); //express 使用router
app.use('/', require('./router/index.js')); //创建服务器并监听接口
http.createServer(app).listen(500);
router/index.js文件代码
var express = require('express'),
router = express.Router();
router.get('/', function(req, res){
//设置使用的模板使用的引擎是什么
res.render('index.ejs'); //可以省.ejs 'index'代表响应的是index.ejs模板引擎 render[ˈrendə(r)]使成为 表达 给予
});
//输出router
module.exports = router; //exports 输出
views/index.ejs文件代码
<% include header.ejs %> //引用用同级header.ejs 5.1 router/index.js 传给模板参数的不同
router/index.js文件代码
res.render('index.ejs', {'name': 'jeson'});
views/index.ejs文件代码
<%= name %> 5.2 当传递的不需要转义时候
router/index.js文件代码
res.render('index.ejs', {'name': '<h1>wulv</h1>'}); //传递标签时
views/index.ejs文件代码
<%= name %>
<%- name %> //正常输出wulv在h1里面 没有转义的
5.3 <% %> 用来写js代码
views/index.ejs 循环输出4个p
<% for(var i=0;i<4;i++){ %>
<p>循环输出</p>
<% } %>
5.4 引入其他模板例如头部 底部分离 <% include xxx.ejs %>
public/header.ejs 创建通用头部
index.ejs文件代码
<% include header.ejs %>
5.4 router传递一个json对象时
router/index.js文件代码
var express = require('express'),
router = express.Router();
router.get('/', function(req, res){
var obj = {
'name': 'Jeson',
'age': 25,
'direction': 'web'
};
res.render('index.ejs', {person: obj});
});
//输出router
module.exports = router;
views/index.ejs文件代码
<% for(var key in person){ %>
<%= person[key] %>
<% } %> 6 静态资源(css js img)
创建静态资源目录 public
img public/img
css public/css
js public/js
6.1 使用
app.js文件代码
var http = require('http'),
express = require('express'),
app = express();
//设置视图模板引擎目录
app.set('views', __dirname +'/views');
//设置模板引擎的类型
app.set('view engine', 'ejs'); //设置静态资源目录 js img css
app.use(express.static(__dirname +'/public')); //express托管静态文件,设置静态文件目录
app.use('/', express.static(__dirname +'/public')); //设置静态文件访问的地址(可指定一个虚拟目录)
//'/abc' 添加后 http://127.0.0.1:300/abc 才能访问首页 //express 使用router
app.use('/', require('./router/index.js')); //创建服务器并监听接口
http.createServer(app).listen(500);
router/index.js文件代码
var express = require('express'),
router = express.Router();
router.get('/', function(req, res){
//设置使用的模板使用的引擎是什么
//res.render('index.ejs'); //可以省.ejs 'index'代表响应的是index.ejs模板引擎
//res.render('index.ejs', {name: '<h1>wulv</h1>'}); //传递标签时
var obj = {
'name': 'Jeson',
'age': 25,
'direction': 'web'
};
res.render('index.ejs', {person: obj});
});
//输出router
module.exports = router;
public/index.ejs文件代码
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="js/jquery.js">
<img src="/img/hzw1.jpg" alt=""> 6.2 404页面
在public目录下建立 404.html
访问 http://127.0.0.1:500/404.html
ch1-使用路由-静态资源-404页面-ejs模板的更多相关文章
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- spring mvc 静态资源 404问题
spring mvc 静态资源 404问题 在web.xml配置servlet-mapping的时候,如果url-pattern设置为"/" (如下),很多人都会遇到导入js,cs ...
- KO ----- 静态资源404问题
--------------------siwuxie095 KO ----- 静态资源 404 问题 在 Spring ...
- 解决 配置springmvc拦截所有请求后请求静态资源404的问题
<servlet-mapping> <servlet-name>spring-servlet</servlet-name> <url-pattern>/ ...
- spring mvc 访问静态资源404
访问比如css js出现404提示 在spring的配置文件中加上如下代码即可 <!-- 静态资源404 --> <mvc:resources location="/res ...
- [bug] IDEA springboot项目 访问静态资源 html页面 报404
原因 复制的静态资源目录没有编译 解决 检查target目录中,是否有static目录,若没有,重新右键项目install即可 若还不能解决,尝试浏览器缓存和IDEA编译设置,详见参考链接 参考 ht ...
- idea中springboot静态资源及页面跳转问题
1,静态资源放在resources/static下,html页面放在resources/templates下 2,在html中引入静态资源时,不用带static(对于路径来说是透明的) 3, 配置ht ...
- 【问题管理】-- Tomcat8部署项目加载静态资源html页面编码错误
1.问题背景及解决方式 最近在回顾Tomcat部署Web项目,自己简单地从Tomcat的下载安装及配置server.xml文件入手,学习Tomcat的项目部署,在自己使用IDEA创建了一个简单地web ...
- spring boot 2.x拦截器导致静态资源404终极解决办法
首先添加application文件static路径,我的是yml文件 spring: mvc: static-path-pattern: /static/**然后注册拦截器类如下方法; @Overri ...
随机推荐
- 团队作业8——第二次项目冲刺(Beta阶段)5.20
1.当天站立式会议照片 会议内容: 本次会议为第二次会议 本次会议在陆大楼2楼召开,本次会议内容: ①:检查第一次任务完成情况 ②:做第二次任务的详细分工 ③:规定完成时间是在第三次任务之前 ④:遇到 ...
- 第二次项目冲刺(Beta阶段)第一天
a. 安排连续七天的敏捷冲刺. 2017.5.18完成冲刺计划安排 2017.5.20完善主页面 1st day(目前位置) 2017.5.21完善功能 2st day 2017.5.22添加自定义重 ...
- 201521123005《java程序设计》第三周学习总结
1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.使用思维导图将这些碎片化的概念.知识组织起来.使用工具画出本周学习到的知识点. 参考资料: 百度脑图 XMind 2. 书面作业 ·Q ...
- 201521123088《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- 201521123078 《Java程序设计》第十三周学习总结
1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 查询Ip地址 ...
- dbda数据库类
<?phpclass DBDA{ public $host="localhost";//服务器地址 public $uid="root";//用户名 pu ...
- hdu3037 Saving Beans
Saving Beans Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Pro ...
- MyeclipseJRE版本设置
1.首先添加JDK版本 Window——Preferences——Java——Install JREs——Add——Stand VM——浏览JDK安装版本完成即可(一定是JDK中JRE的安装目录如:D ...
- Java http请求和调用
关于http get和post请求调用代码以及示例. 参考:http://www.cnblogs.com/zhuawang/archive/2012/12/08/2809380.html http请求 ...
- 关于MySQL 事务,视图,索引,数据库备份,恢复
/*创建数据库*/ CREATE DATABASE `mybank`;/*创建表*/USE mybank;CREATE TABLE `bank`( `customerName` CHAR(1 ...