使用express+mongoDB搭建多人博客 学习(2)路由与模板


修改index.js路由规则:

var express = require(‘express‘);
var router = express.Router();

/* GET home page. */
router.get(‘/‘, function(req, res, next) {
  res.render(‘index‘, { title: ‘主页‘ });
});

router.get(‘/reg‘,function(req,res,next){
    res.render(‘reg‘, { title: ‘注册‘ });
});

router.post(‘/reg‘,function(req,res,next){
});

router.get(‘/login‘,function(req,res,next){
    res.render(‘login‘, { title: ‘登录‘ });
});

router.post(‘/reg‘,function(req,res,next){
});

router.get(‘/post‘,function(req,res,next){
    res.render(‘post‘, { title: ‘发表‘ });
});

router.post(‘/post‘,function(req,res,next){
});

router.get(‘/logout‘,function(req,res,next){
});

module.exports = router;

2、修改index.ejs视图

<%- include header %>
这是主页
<%- include footer%>

3、新增header.ejs

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
    <header>
        <h1><%= title %></h1>
    </header>
    <nav>
        <span><a title="主页" href="/">home</a></span>
        <span><a title="登录" href="/login">login</a></span>
        <span><a title="注册" href="/reg">register</a></span>
    </nav>
    <article>

4、新增footer.ejs

        </article>
    </body>
</html>

5、新增login.ejs reg.ejs post.ejs

<%- include header %>
    <form method="post">
        用户名:<input type="text" name="name"/><br/>
        密码:<input type="password" name="password"/><br/>
        <input type="submit" value="登录"/>
    </form>
<%- include footer %>
<%- include header %>
    <form method="post">
        用户名:<input type="text" name="name"/><br/>
        密码:<input type="password" name="password"/><br/>
        确认密码:<input type="password" name="repassword"/><br/>
        邮箱:<input type="email" name="email"/><br/>
        <input type="submit" value="注册"/>
    </form>
<%- include footer %>
<%- include header %>
    <form method="post">
        标题:<br/>
        <input type="text" name="title"/><br/>
        正文:<br/>
        <textarea name="post" rows="20" cols="100"></textarea><br/> 
        <input type="submit" value="登录"/>
    </form>
<%- include footer %>

现在浏览器可以访问表单页面:

技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。