您的位置：首页 > Web前端 > Node.js

Node.js的路由跳转的一点理解

2016-05-23 18:25 603 查看

这几天学了下Node.js,凭借自己查资料和看教程（cnds）,发现没有找到有关node.js路由跳转的一些东西，所以打算自己写一点儿对node.js的理解，也不知道是对是错，希望对大家有帮助

这个是项目目录

index.html代码

<html>
<body>
这里是静态页面
<form action="http://127.0.0.1:8081/process_get" method="POST">
First Name: <input type="text" name="first_name">  <br>

Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

upload.html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

这里是html页面
</head>
<body>

</body>
</html>

upload.ejs. 和 upload.jade

<html>
<body>
这里是ejs
<form action="http://127.0.0.1:8081/process_get" method="POST">
First Name: <input type="text" name="first_name">  <br>

Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

<html>
<body>
这里是jade
<form action="http://127.0.0.1:8081/process_get" method="POST">
First Name: <input type="text" name="first_name">  <br>

Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
</body>
</html>

下面来看代码吧这个是用npm自己生成的一个项目我就是在上面来实现吧具体怎么建立项目请自己查，毕竟学习不能偷懒

// 加载路由控制
var routes = require('./routes/index');
var users = require('./routes/users');

//创建项目实例
var app = express();
// view engine setup定义EJS模板引擎和模板文件位置，也可以使用jade或其他模型引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
//app.set('view engine', 'jade');
//app.set('view engine','html');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// 匹配路径和路由
//访问服务器的静态资源
app.use('/static',express.static(path.join(__dirname, 'static')));
app.use('/', routes);
app.use('/', users);

上面的有中文的是我自己弄上去的注释都很清楚

接下来就是路由了

我在项目目录下创建了一个 static文件夹主要是为了放一些静态资源，比如用到的 html/index.html

router.get('/upload.jade', function(req, res, next) {
//
res.render('upload.jade');
res.end();
});

router.get('/upload.ejs', function(req, res, next) {
//
res.render('upload.ejs');
res.end();
});
//若没有后缀则按视图解析器的后缀
router.get('/upload.html', function(req, res, next) {
//
res.render('upload');
res.end();
});
//跳转到静态页面
router.get('/static', function(req, res, next) {
//
res.redirect('/static/html/index.html');
res.end();

先来看效果    地址栏   http://127.0.0.1:3000/static 刷新

访问   ：http://127.0.0.1:3000/upload.ejs
http://127.0.0.1:3000/upload.jade
这个jade可能会报错没有这个模型*（包）用控制台进入项目目录    npm install jade      （下次碰到这种首先就是安装包）

我们用的是ejs视图渲染     （不知道是不是这样形容）

要是不加后缀会访问哪一个呢    像访问：http://127.0.0.1:3000/upload

这就取决于

app.set('view engine', 'ejs');
//app.set('view engine', 'jade');

这段代码意思就是你用的那个引擎在views目录下如果么有指定后缀就默认渲染引擎

如上代码访问结果是

还有就是访问静态资源；要加

app.use('/static',express.static(path.join(__dirname, 'static')));
app.use('/', routes);
app.use('/', users);

并注意要加载使用路由代码前如上面这个代码这样

若么有要访问
http://127.0.0.1:3000/static/html/index.html
是这样的

正确的是

最后我也是初学者就是因为在网上没有找到很好的资料才走了很多弯路希望这个对要学习的人有帮助若没有用对浪费你们宝贵的时间抱歉

而且我也不知道是不是这个样子的如果有错误请大家指点迷津

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航