ch1-使用路由-静态资源-404页面-ejs模板

时间:2021-06-09 04:45:41
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模板的更多相关文章

  1. Vue 实现动态路由及登录&amp&semi;404页面跳转控制&amp&semi;页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  2. spring mvc 静态资源 404问题

    spring mvc 静态资源 404问题 在web.xml配置servlet-mapping的时候,如果url-pattern设置为"/" (如下),很多人都会遇到导入js,cs ...

  3. KO ----- 静态资源404问题

    --------------------siwuxie095                                 KO ----- 静态资源 404 问题         在 Spring ...

  4. 解决 配置springmvc拦截所有请求后请求静态资源404的问题

    <servlet-mapping> <servlet-name>spring-servlet</servlet-name> <url-pattern>/ ...

  5. spring mvc 访问静态资源404

    访问比如css js出现404提示 在spring的配置文件中加上如下代码即可 <!-- 静态资源404 --> <mvc:resources location="/res ...

  6. &lbrack;bug&rsqb; IDEA springboot项目 访问静态资源 html页面 报404

    原因 复制的静态资源目录没有编译 解决 检查target目录中,是否有static目录,若没有,重新右键项目install即可 若还不能解决,尝试浏览器缓存和IDEA编译设置,详见参考链接 参考 ht ...

  7. idea中springboot静态资源及页面跳转问题

    1,静态资源放在resources/static下,html页面放在resources/templates下 2,在html中引入静态资源时,不用带static(对于路径来说是透明的) 3, 配置ht ...

  8. 【问题管理】-- Tomcat8部署项目加载静态资源html页面编码错误

    1.问题背景及解决方式 最近在回顾Tomcat部署Web项目,自己简单地从Tomcat的下载安装及配置server.xml文件入手,学习Tomcat的项目部署,在自己使用IDEA创建了一个简单地web ...

  9. spring boot 2&period;x拦截器导致静态资源404终极解决办法

    首先添加application文件static路径,我的是yml文件 spring: mvc: static-path-pattern: /static/**然后注册拦截器类如下方法; @Overri ...

随机推荐

  1. Redis Cluster 分区实现原理

    Redis Cluster本身提供了自动将数据分散到Redis Cluster不同节点的能力,分区实现的关键点问题包括:如何将数据自动地打散到不同的节点,使得不同节点的存储数据相对均匀:如何保证客户端 ...

  2. TreeView1MouseMove

    procedure TForm1.TreeView1MouseMove(Sender: TObject; Shift: TShiftState; X,   Y: Integer); var   nod ...

  3. C&num; Chart圖標綁定

    开发软件为VS2010 免去了安装插件之类的麻烦. 最终效果图: 饼状图: 前台设置:设置参数为: :Titles, 添加一个序列,在Text中设置名字. :Series ,添加一个序列,选择Char ...

  4. &lbrack;Swift&rsqb;LeetCode677&period; 键值映射 &vert; Map Sum Pairs

    Implement a MapSum class with insert, and sum methods. For the method insert, you'll be given a pair ...

  5. linux安装selenium&plus;chrome&plus;phantomjs

    1. 安装 selenium pip3 install selenium pip3 安装参考 2. 安装 ChromeDriver yum install chromedriver.x86_64 3. ...

  6. SVN完全备份,增量备份,库同步

    svn备份一般采用三种方式:1)svnadmin dump 2)svnadmin hotcopy 3)svnsync. 优缺点分析: ============== 第一种svnadmin hotcop ...

  7. Debian 8&period;9 搭建wordpress个人博客

    想自己搭个博客玩玩,就搭建了此博客,过程可谓艰辛啊! 先在阿里云买了个  轻量应用服务器 1个月10块钱,好贵.... 用 windows sever 下载不了phpstudy,也不知道怎么回事... ...

  8. Laravel 项目中使用 Bootstrap 框架

    Laravel 如何引入 Bootstrap 如官方文档所言,Laravel 并不强制你使用 CSS 框架,但是开箱提供了对 Bootstrap 的支持,在 resources/js/bootstra ...

  9. Go语言的基本类型转换-golang类型转换

    简单整理一下Golang的基本类型转换,作为备忘: 1.整形到字符串: var i int = 1 var s string 3.  s = strconv.Itoa(i) 或者 s = Format ...

  10. 重写规则为什么要options &plus;followsymlinks

    重写规则为什么要options +followsymlinks Web服务器的Apache安装编译成功mod_rewrite编译成模块,但当我在网站根目录下放了一个.htaccess配置文件,却得到了 ...