client文件夹下有三个文件，css,html ,js
咱们说html和js.
html代码如下：
[html] view
plain copy
- <head>
- <title>simple</title>
- </head>
- <body>
- <h1>Welcome to Meteor!</h1>
- {{> hello}} 模板名称
- {{> info}}
- {{> items}} template 模板
- </body>
- <template name="hello">
- <button>Click Me again</button>
- <p>You've pressed the button {{counter}} times.</p>
- </template>
- <template name = "info">
- <h2>Learn Meteor!</h2>
- <ul>
- <li><a href="https://www.meteor.com/try">Do the Tutorial</a></li>
- <li><a href="http://guide.meteor.com">Follow the Guide</a></li>
- <li><a href="https://docs.meteor.com">Read the Docs</a></li>
- <li><a href="https://forums.meteor.com">Discussions</a></li>
- </ul>
- </template>
- <template name="items">
- <button>Click Me again</button>
- <p>You've pressed the button {{counter}} times.</p>
- </template>
在html中，出现了一些
[html] view
plain copy
- {{> hello}} 模板名称
- {{> info}}
- {{> items}} template 模板
在，<body></body>中。
然后，在body的外面，定义了一些<template >
可以理解为，在body里面，需要对用到的模板进行声明，然后，在body外面，在写具体的模板代码。
模板引用，就是用{{<模板名称}}
模板的实例，就是<template name = "模板名称"></template>
模板中也可以引用模板。
有模板的实例，就必须要有模板的引用，否则，在客户端是看不见模板的数据的。
在模板中，可以用一些语法，类似于
{{#}} spacesbar语法
叫做spacebar。
{{# each data}}
很简单明确，这个是循环，一个模板中，使用循环语法，则这句会循环输出。
这里的data，属于方法输出的数据，后面再介绍。
{{/each}}
{{#with date}}
{{/with}} 等等其他的语法。
这些方法都是为了方便渲染页面数据的。
简单的说，html里面，就是各种模板，模板嵌套模板。来渲染数据的。
当然，现在并没有用其他第三方的包，如果引用其他第三方的包来渲染页面和加载数据，会更加简单的。
××××××××××××××××××××××××××××××××
然后说，main.js，代码如下。
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';
Template.hello.onCreated(function helloOnCreated() {
// counter starts at 0
this.counter = new ReactiveVar(0);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
Meteor.call("",function(e,r){
})
},
});
Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
instance.counter.set(instance.counter.get() + 1);
},
});
代码上方，是导入第三方类库，import。
然后下面，对应每个模板，都有一系列的操作，比如，我有一个模板，名称叫做，hello, <template name ="hello"></template>
就可以在JS中定义这样一系列方法。比较常用的有下面四个，还有一些其他不常用的方法。
Template.hello.onCreated
Template.hello.onRendered
Template.hello.events
Template.hello.helpers
分别是，
1、hello模板创建时，执行的方法。
2、模板加载完成后执行的方法。
3、模板中，响应的一些事件，比如,onblur,onclick,keydown等等
4、数据处理的方法。
其中，
Meteor.call("methodTest",function(e,r){
});
这个方法的意思是，到server，服务端，找到方法methodTest,并执行这个方法，function为回调函数，e，是error，r,是response。
可以针对方法执行后返回的结果进行操作并进行下一步处理。
××××××××××××××××××××××××××××××××××××
然后说server。
这个demo中，在server中的代码比较少，
Meteor.methods({
methodTest: function()
{
return HTTP.get("http://ipinfo.io/ip/").content;
},
})
在server/main.js中，定义methodTest，client,就可以通过meteor.call来调用这个方法了。
×××××××××××××××××××××××××
both
这个文件夹下面的内容也比较少，因为不是实际项目，只是一个demo。
只有自己定义的一个JS文件，里面只有一行代码。
MyColect=new Meteor.Collection("DBcollnection");
这句话的意思是，创建一个对于数据库中 DBcollnectio （类似表）其中有name,pwd，等等字段。
的引用 MyColect
可以在JS中，通过，MyColect,来直接对数据库数据进行操作。
比如上面说的
<template name="hello">
{{#each date}}
<tr>
<td>{{user}}</td>
<td>{{pwd}}</td>
<td>{{getTime}}</td>
</tr>
{{/each}}
</template>
在JS里，会这样写。
Template.hello.helpers({
date:MyColect.find(),
getTime(){
return moment(this.insertTime).format('llll')
}
});
date，会获取所有的记录，getTime方法，会获取时间。moment，是第三方类库。
html中{{ }}会输出，date，或者getTime方法的数据。
这里有一个很有用的地方，就是，如果你这个hello模板的，each中，再引用另外的模板，那么，子模板，可以继承父模板的数据。
meteor,自带mongoDB.
还有，如果需要配置数据库，在这个地方进行配置。
配置完成后，就可以用我在both中写的方法进行引用了。
写的可能不完善，还有遗漏，后期会不定时更新，如果任何问题或者疑问，欢迎加QQ：1286238812,共同学习提高。