上篇文章说了nodejs项目创建,今天我们来说一下路由,index.js中的代码如下
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
访问主页的时候,调用ejs引擎,从而渲染index.ejs模板文件,生成静态页面显示到浏览器。(关于ejs,后面会写文章介绍)
----------------------------------------------------------------------------华丽的分割线------------------------------------------------------------------------------------
写的有点乱,还是先补充下相关知识
web方面的知识使用的都是express框架
先用框架创建一个简单的应用
var express = require('express');
var app = express();
app.get('/', function (request, response) {
response.send('Hello World!');
});
app.listen(80);
1:get方法 —— 根据请求路径来处理客户端发出的GET请求。
格式:app.get(path,function(request, response));
path为请求的路径,第二个参数为处理请求的回调函数,有两个参数分别是request和response,代表请求信息和响应信息。
var express = require('express');
var app = express();
app.get('/', function(request, response) {
response.send('Welcome to the homepage!');
});
app.get('/about', function(request, response) {
response.send('Welcome to the about page!');
});
app.get("*", function(request, response) {
response.send("404 error!");
});
app.listen(80);
上面的是没有参数的,大家会问如果有参数的请求又会是什么样子呢
1.1 req的query
query是一个可获取客户端get请求路径参数的对象属性,包含着被解析过的请求参数对象,默认为{}。
例1 比如请求是 /go?m=to
req.query.m //to
例2 /shoes?order=desc&shoe[color]=blue&shoe[type]=converse
req.query.order // "desc"
req.query.shoe.color // "blue"
req.query.shoe.type // "converse"
1.2 通过param获取请求根路径的参数值
如/?n=admin,方法如下:
app.get("/", function(req, res) {
console.log(req.param("n")); //admin
res.send("使用req.param属性获取请求根路径的参数对象值!");
});
假设路由规则为 /user/:name/,请求路径/user/mike,如下:
app.get("/user/:name/", function(req, res) {
console.log(req.param("name")); //admin
res.send("使用req.param属性获取具有路由规则的参数对象值!");
});
1.3 params(和param相似,但params是一个可以解析包含着有复杂命名路由规则的请求对象的属性。)
比如 req.params.name(注意,这个地方用的是 . 参数)//admin
如果遇到复杂的路由,比如/user/:name/:id,假如请求地址是 /user/admin/123
req.params.id //123
到这大家估计也明白路由的含义了,所谓路由就是不同的访问路径,指定不同的处理方法
2:前面的例子中,大家看到了send()方法,这是web开发中不可或缺的一部分
send()方法负责向浏览器发送响应信息,同时处理不同类型的数据,格式为:res.send([body|status], [body]);
2.1 如果参数是String类型,那么Content-Type默认设置为"text/html"。
res.send("duang")//duang
2.2 如果参数是Array或者Object类型,那么返回的是一个json
res.send({user:"admin"});//{"user":"admin"}
res.send([a,b,c]}//[a,b,c]
2.3 如果参数是number类型,框架可能要帮你设置返回体
res.send(200); // OK
res.send(404); // Not Found
res.send(500); // Internal Server Error
3:既然有get,那么肯定也有post啦
post请求也没有那么神秘
app.post('/login',function(req,res){
});
霍霍,大家看了以后,是不是汗!!!
不废话了,上干货
首先要了解一下body属性-------------------body属性解析客户端的post请求参数,通过它可获取请求路径的参数值。
当然需要安装中间件
npm install body-parser
npm install multer
引用和调用
var bodyParser = require('body-parser');
var multer = require('multer');
......
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());
ps:app.use(***)表示使用中间件,在这就不阐述了
重点:post获取参数
先看js请求(页面ajax请求)
function login(){
var username = $('#username').val();
var password = $('#password').val();
var data = { "username": username, "password":password};
$.ajax({
url:'login',
type:'POST',
data:data,
success:function(data,status){
if(status == 'success'){
location.href='home';
}
},
error:function(data,status,e){
if(status == "error"){
location.href='login';
}
}
});
}
路由代码
app.post('/login',function(req,res){
console.log(req.body.username);
});
这样就能获取到请求的参数值了。
----------------------------------------再次华丽的分割线----------------------------------------------------------
好,相关知识恶补结束,下面写一个登录
1:页面代码
index
div style="height:400px;width:550px;margin:50px auto;margin-left:auto;border:solid 1px;background: rgb(246, 246, 253);">
<div style="margin-left: 35px;">
# 首页
<form action="#" role="form" style="margin-top: 90px;margin-left: 60px;">
# 欢迎进入首页!
<div style="margin-top: 145px;">
<input type="button" value="登 录">
</div>
</form>
</div>
</div>
login
<div style="height:400px;width:550px;margin:50px auto;margin-left:auto;border:solid 1px;background: rgb(246, 246, 253);">
<div style="margin-left: 45px;">
# 主页
<form action="#" role="form" style="margin-top: 90px;">
# 登录成功!
<div style="margin-top: 145px;">
<input type="button" value="退 出">
</div>
</form>
</div>
</div>
</pre><p></p><p></p><div style="top: 0px;">2:login.js</div><div style="top: 0px;"><pre class="html" name="code">app.post('/login',function(req,res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username==user.username&&req.body.password==user.password){
req.session.user = user;
res.send(200);
}else{
req.session.error = "用户名或密码不正确";
res.send( 404 );
}
});
app.get('/home',function(req,res){
if(req.session.user){
res.render('home');
}else{
req.session.error = "请先登录"
res.redirect('login');
}
});
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer');
app.set('views', __dirname);
app.set( 'view engine', 'html' );
app.engine( '.html', require( 'ejs' ).__express );
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());
app.get('/', function(req, res) {
res.render('index');
});
app.get('/home',function(req,res){
res.render('home');
});
app.get('/login',function(req,res){
res.render('login');
});
app.post('/login',function(req,res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username==user.username&&req.body.password==user.password) {
res.send(200);
}else{
res.send( 404 );
}
});
app.listen(80);
上面的代码我们可能看到了路由代码都放到app.js中,如果有成千上万个路由呢,那么app.js显然变的不好维护。
官方给出的写法是在app.js中实现简单的路由分配,然后再去对应的js中找到对应的路由函数。从而实现路由功能,所以我们的做法是把路由控制器和实现路由的功能都放到index.js中,把总的接口都放到了app.js中。
进行如下修改
login.js
module.exports = function ( app ) {
app.get('/login',function(req,res){
res.render('login');
});
app.post('/login',function(req,res){
var user={
username:'admin',
password:'admin'
}
if(req.body.username==user.username&&req.body.password==user.password){
req.session.user = user;
res.send(200);
}else{
req.session.error = "用户名或密码不正确"
res.send( 404 );
}
});
}
index.js
module.exports = function ( app ) {
app.get('/home',function(req,res){
if(req.session.user){
res.render('home');
}else{
req.session.error = "请先登录"
res.redirect('login');
}
});
}
app.js路由部分
require('./login')(app);
require('./index')(app);
这样代码是不是变得很简练了呢。