使用 Meteor 搭建的微博网站
==========================
## 开发环境
**Meteor 版本** : 0.6.6.3 +
**Meteor 组件** : jQuery + bootstrap + backbone + accounts-password
## 学习目标
以搭建一个微博网站来学习 Meteor 是个非常不错的选择。我们仿照 《Node.js 开发指南》 中你所熟悉的微博示例,搭建 Meteor 版的微博网站雏形,从中了解 Node.js 和 Meteor 的异同,以及 Meteor 的便捷之处。
## 创建应用
首先,使用以下命令创建我们的微博应用:
```
$ meteor create weibo
```
创建成功后删除 weibo 目录下的 weibo.css 、weibo.html 和 weibo.js ,然后创建 client 和 server 文件夹。
在 Node.js 中我们需要引入 bootstrap 才能使用,而 Meteor 提供了 bootstrap 包,添加后即可使用。输入以下命令添加:
```
$ cd weibo
$ meteor add bootstrap
```
**注意**:目前 bootstrap 包内置的 bootstrap 2.3.0 ,且默认使用响应式布局。
在 client 文件夹下新建 client.html ,添加如下代码:
```
<head>
<title>weibo</title>
<style type="text/css">
body {padding-top: 60px;padding-bottom: 20px;}
</style>
</head>
<body>
{{> nav}}
{{> container}}
{{> footer}}
</body>
<template name="nav">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">weibo</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="/">首页</a></li>
<li><a href="/login">登入</a></li>
<li><a href="/reg">注册</a></li>
</ul>
</div>
</div>
</div>
</div>
</template>
<template name="container">
<div id="container" class="container">
{{> index}}
</div>
</template>
<template name="footer">
<p class="muted text-center">nswbmw 2013</p>
</template>
```
通过上一小节的学习,以上代码非常容易理解,这里只做简单的解释。我们在页面中加载了三个模版,分别为 nav(导航栏)、container(主体部分)和 footer(页脚),其中 container 模版中又加载了 index 模版。
**注意**:我们无需在 `<head>` 中引入 bootstrap 即可使用它,我们也无需引入 jQuery ,因为目前 jQuery 已经内置在了 Meteor 的核心包中。
然后在 client 文件夹下新建 index.html ,添加如下代码:
```
<template name="index">
<div class="hero-unit">
<h1>欢迎来到 weibo</h1>
<p>weibo 是一个基于 Meteor 的微博系统。</p>
<p>
<a class="btn btn-primary btn-large" href="/login">登录</a>
<a class="btn btn-large" href="/reg">立即注册</a>
</p>
</div>
<div class="row">
<div class="span4">
<h2>路飞 说</h2>
<p>海贼王,我当定了!我是要成为 海贼王的男人!</p>
</div>
<div class="span4">
<h2>村上春树 说</h2>
<p>飞机<br>
飞机在飞翔<br>
我,坐在飞机上<br>
飞机<br>
在飞翔<br>
然而,在飞的<br>
是飞机<br>
抑或天空</p>
</div>
<div class="span4">
<h2>鲁迅 说</h2>
<p>真正的猛士,敢于直面惨淡的人生,敢于正视淋漓的鲜血。这是怎样的哀痛者和幸福
者?然而造化又常常为庸人设计,以时间的流驶,来洗涤旧迹,仅使留下淡红的血色和
微漠的悲哀。在这淡红的血色和微漠的悲哀中,又给人暂得偷生,维持着这似人非人的
世界。我不知道这样的世界何时是一个尽头!</p>
</div>
</div>
</template>
```
现在,我们的微博页面将会显示如下:
![](https://www.writebug.com/myres/static/uploads/2021/11/24/1709744f5aa4709452f3ef3971c20775.writebug)
**注意**:我们不必在 client.html 中引入 index.html ,因为 Meteor 会将每个模版转化成 JavaScript 函数并加载它们。
现在,我们迈出了搭建微博网站的第一步。
## 路由功能
现在,我们来给网站添加路由功能。即当点击导航栏上的 “登入” 时跳转到登录页(/login),点击 “注册” 时跳转到注册页(/reg)。
首先,我们来创建登录页和注册页。
打开 client 文件夹,新建 login.html ,添加如下代码:
```
<template name="login">
<form class="form-horizontal">
<fieldset>
<legend>用户登入</legend>
<div class="control-group">
<label class="control-label" for="username">用户名</label>
<div class="controls">
<input type="text" class="input-xlarge" id="username" name="username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">密码</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password" name="password">
</div>
</div>
<div class="form-actions">
<button id="submit" class="btn btn-primary">登入</button>
</div>
</fieldset>
</form>
</template>
```
新建 reg.html ,添加如下代码:
```
<template name="reg">
<form class="form-horizontal">
<fieldset>
<legend>用户注册</legend>
<div class="control-group">
<label class="control-label" for="username">用户名</label>
<div class="controls">
<input type="text" class="input-xlarge" id="username" name="username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">密码</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password" name="password">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password-repeat">重复输入密码</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password-repeat" name="password-repeat">
</div>
</div>
<div class="form-actions">
<button id="submit" class="btn btn-primary">注册</button>
</div>
</fieldset>
</form>
</template>
```
至此,我们完成了登录页和注册页。接下来我们使用 backbone 的 Router 来实现路由功能。使用以下命令添加 backbone 包:
```
$ meteor add backbone
```
然后在 client 文件夹下新建 client.js ,添加如下代码:
```
var urlRouter = Backbone.Router.extend({
routes: {
"": "index",
"login": "login",
"reg": "reg"
},
index: function () {
// do something
},
login: function () {
// do something
},
reg: function () {
// do something
},
redirect: function (url) {
this.navigate(url, true);
}
});
Router = new urlRouter;
Meteor.startup(function () {
Backbone.history.start({pushState: true});
});
```
这就是我们用到的 backbone 的全部代码了。以上代码的意思是:监听访问 `/` 、`/login` 和 `/reg` 路径的请求,并分别将它们映射到 `index` 、`login` 和 `reg` 处理函数。我们还设置了一个 `redirect` 函数,后面我们就可以直接调用 `Router.redirect(url)` 进行页面跳转了。当所有的路由创建并设置完毕,调用 `Backbone.history.start({pushState: true})` 开始监控 hashchange 事件并分配路由,设置 `{pushState: true}` 表示使用 HTML5 支持的 pushState。关于 backbone 的详细使用见 [http://backbonejs.org/](http://backbonejs.org/) 。
如何处理路由请求我们已经写好了,那么如何实现请求不同的路径显示不同的内容呢?我们使用 Session 来实现这个功能。将 c
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
开发环境Meteor 版本 : 0.6.6.3 + Meteor 组件 : jQuery + bootstrap + backbone + accounts-password 学习目标以搭建一个微博网站来学习 Meteor 是个非常不错的选择。搭建 Meteor 版的微博网站,从中了解 Node.js 和 Meteor 的异同,以及 Meteor 的便捷之处。搭建一个微博网站来学习 Meteor 是个非常不错的选择。我们仿照 《Node.js 开发指南》 中你所熟悉的微博示例,搭建 Meteor 版的微博网站雏形,从中了解 Node.js 和 Meteor 的异同,以及 Meteor 的便捷之处
资源推荐
资源详情
资源评论
收起资源包目录
基于Meteor 搭建的微博网站.zip (16个子文件)
mwelbo
LICENSE 1KB
client
reg.html 1KB
login.html 768B
client.js 4KB
client.html 2KB
index.html 455B
public
2.2.jpg 88KB
1.1.jpg 39KB
3.1.jpg 100KB
9.1.jpg 76KB
2.1.jpg 64KB
.meteor
release 5B
.gitignore 5B
packages 231B
server
server.js 145B
README.md 25KB
共 16 条
- 1
资源评论
甜辣uu
- 粉丝: 8494
- 资源: 1103
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功