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 ...
随机推荐
-
Redis Cluster 分区实现原理
Redis Cluster本身提供了自动将数据分散到Redis Cluster不同节点的能力,分区实现的关键点问题包括:如何将数据自动地打散到不同的节点,使得不同节点的存储数据相对均匀:如何保证客户端 ...
-
TreeView1MouseMove
procedure TForm1.TreeView1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer); var nod ...
-
C# Chart圖標綁定
开发软件为VS2010 免去了安装插件之类的麻烦. 最终效果图: 饼状图: 前台设置:设置参数为: :Titles, 添加一个序列,在Text中设置名字. :Series ,添加一个序列,选择Char ...
-
[Swift]LeetCode677. 键值映射 | Map Sum Pairs
Implement a MapSum class with insert, and sum methods. For the method insert, you'll be given a pair ...
-
linux安装selenium+chrome+phantomjs
1. 安装 selenium pip3 install selenium pip3 安装参考 2. 安装 ChromeDriver yum install chromedriver.x86_64 3. ...
-
SVN完全备份,增量备份,库同步
svn备份一般采用三种方式:1)svnadmin dump 2)svnadmin hotcopy 3)svnsync. 优缺点分析: ============== 第一种svnadmin hotcop ...
-
Debian 8.9 搭建wordpress个人博客
想自己搭个博客玩玩,就搭建了此博客,过程可谓艰辛啊! 先在阿里云买了个 轻量应用服务器 1个月10块钱,好贵.... 用 windows sever 下载不了phpstudy,也不知道怎么回事... ...
-
Laravel 项目中使用 Bootstrap 框架
Laravel 如何引入 Bootstrap 如官方文档所言,Laravel 并不强制你使用 CSS 框架,但是开箱提供了对 Bootstrap 的支持,在 resources/js/bootstra ...
-
Go语言的基本类型转换-golang类型转换
简单整理一下Golang的基本类型转换,作为备忘: 1.整形到字符串: var i int = 1 var s string 3. s = strconv.Itoa(i) 或者 s = Format ...
-
重写规则为什么要options +followsymlinks
重写规则为什么要options +followsymlinks Web服务器的Apache安装编译成功mod_rewrite编译成模块,但当我在网站根目录下放了一个.htaccess配置文件,却得到了 ...