使用nodejs、mongodb、express、linux搭建社区网站(3)-页面与路由

最新推荐文章于 2024-05-14 10:36:07 发布

e_payne

最新推荐文章于 2024-05-14 10:36:07 发布

阅读量673

点赞数

分类专栏：使用nodejs、mongodb、linux搭建网站文章标签： mongodb nodejs express

本文链接：https://blog.csdn.net/u010870333/article/details/41022861

版权

使用nodejs、mongodb、linux搭建网站专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天，我们将开始使用control及views进行主页的添加，先开始静态页面的添加；我们先使用静态页面来完成页面展示部分，进行路由搭建。

代码在github上：
nodejs-express-mongodb-website项目

首先，我们先在views文件夹里创建一个文件shared文件夹，用于存放公用模板，比如每个页面使用相同的头header及脚footer等:

1、首先创建layout.html模板文件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>control-view</title>
    <link rel="icon" href="/images/icon/chetan.ico"/>
    <link rel="stylesheet" href="/css/custom.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <script src="/js/jquery-1.7.2.min.js"></script>
    <script src="/js/common.js"></script>
</head>
<body>
<div id="body-wrapper">
    <!---------- header -------->
    <div id="header">
        <div class="clearfix">
            <div class="logo">
                <a href="/"><h1>车谈</h1></a>
            </div>
            <ul class="navigation">
                <li class="active">
                    <a href="#">问题</a>
                </li>
                <li class="active">
                    <a href="#">资料库</a>
                </li>
                <li>
                    <a href="#">用户中心</a>
                </li>
            </ul>
        </div>
    </div>
    <!---------- header end ----->
    <div class="loginAndRegister">
        <div>
            <div class="login">
                <input type="text" placeholder="邮箱地址"/>
                <input type="password" placeholder="密码"/>
                <input type="button" placeholder="登录" value="登录"/>
            </div>
            <span>没有账号，<a href="/user/register">马上注册</a></span>
        </div>
    </div>

</div>
</body>
</html>

需要注意的是，在项目中，使用的是swig的模板，所以，比如，在里面有：

这个就是swig的写法，这部分就是每个页面自己的单独内容，在下面将会使用，在这里就不再赘述，可以查看swig文档学习swig相关知识。

2、在views中创建home文件夹，并创建index页面，作为网站首页；


大括号% extends '../shared/layout.html' %大括号 （注：因为编译原因，“大括号就是表示 ‘{’ 或者 ‘}’ ”）


<div id="contents" class="user">
    <div class="clearfix">
        <div class="wenda clearfix">
            <div class="fl wenda-main">
                <div class="newpost">
                    <a href="javascript:void 0" id="user-question" class="quealltab  onactive">提问</a>
                    <a href="javascript:void 0" id="user-answer" class="quealltab ">回答</a>
                </div>
                <!--左侧列表内容-->
                <div class="wenda-list">
                    <div class="question">
                        <p style="margin: 25px">
                            没有提问，<a href="/">提出问题</a>
                        </p>
                        <div class="wenda-listcon clearfix">
                            <div class="wendaslider fl">
                                <h2 class="wendaquetitle">
                                    <div class="wendatitlecon">
                                        <a href="" target="_blank" class="wendatitle">网站</a>
                                    </div>
                                </h2>
                                <div class="replycont clearfix">
                                    <div class="fl replydes">
                                        <span class="replydet">这是nodejs、mongodb、express网站首页</span>
                                    </div>
                                </div>
                                <div class="replymegfooter">
                                    <div class="wenda-time">
                                        <em>提问时间：2014-11-10</em>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

其中

{大括号% extends '../shared/layout.html' %大括号 （注：因为编译原因，“大括号就是表示 ‘{’ 或者 ‘}’ ”）

是使用上面创建的模板文件，而

 .....html code....

中间内容则代替在layout.html中

而形成一个完整的html文件，即主页文件。 3、创建路由，在controllers文件夹中创建home.coffee文件，写入如下代码：

###
  主页
###
exports.index = (req, res)->
  res.render "index",
    title: "首页"

上面是coffee的写法，需要转为相应js才能执行，其中，res.render就是编译index.html文件。
其实，在项目中，使用了simple-mvc模块，它就是将controllers里面的文件与views里面html文件进行关联，比如，对于controllers里面的home.js文件中，使用的render “index”,即使用的是views文件夹下面的home文件的index.html文件。

而对于路由，请求路径也就是controllers里面的文件，如我们刚刚创建的home.coffee文件，编译成home.js,在它里面，写了：

exports.index = (req,res) ->
    //code

当我们请求：localhost或者localhost/home时，将会打开此路由及主页页面，也就是我们上面创建的页面。因为，默认/home可以省略，所以上面等价，我们以后将会使用此方式进行页面及相应路由添加，在以后使用中，会慢慢去熟悉和了解它。

4、启动，打开主页。

创建完成之后，打开mongodb、redis，再打开项目app.js目录，运行如下代码：

node app.js

但是会出现以下错误：

Error: Cannot find module 'swig'

说明缺失swig模块，所以需要添加swig模块：

npm install swig --save

添加swig模块后，再启动，会看到控制台有以下结果：

Server listening on port 80
connect mongodb success...

则说明启动成功，且监控80端口，因为80端口默认，可以省略，则，我们在浏览器中打开：localhost或localhost/home都可以查看主页。

今天，就完成了路由及主页的完成，在下一部分，将开始mongodb及的创建及连接，完成一个完整的前后流程。

e_payne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用nodejs、mongodb、express、linux搭建社区网站(3)-页面与路由

今天，我们将开始使用control及views进行主页的添加，先开始静态页面的添加；我们先使用静态页面来完成页面展示部分，进行路由搭建。代码在github上：nodejs-express-mongodb-website项目首先，我们先在views文件夹里创建一个文件shared文件夹，用于存放公用模板，比如每个页面使用相同的头header及脚footer等:1、首先创建layout
复制链接

扫一扫