网站整站开发小例子
之前学习的前端知识都只是局限于html+js编写的静态网页，所以前几天试着加上模拟数据把前端和后台串联起来。在这个demo中，我运用了node.js、koa及vue.js。首先我们需要了解node.js，简单的说 Node.js 就是运行在服务端的 JavaScript。node.js安装很简单，只要到官网下载安装包，运行不断点击下一步到完成即可。安装完成后打开命令窗口，输入 node -v ,版本出来即安装成功。koa依赖于node环境，是基于node平台的web开发框架；vue是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。其实就是实现前端页面及数据层的双向绑定。
步骤一：
创建一个demo的根文件夹，里面放置package.json文件
{
"name": "webdemo",
"version": "1.0.0",
"main": "app.js",
"dependencies": {
"co-views": "^2.1.0",
"koa": "^1.2.0",
"ejs": "^2.4.2",
"koa-route": "^2.4.2",
"koa-static-server": "^0.1.8"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "renyuan",
"license": "ISC"
}
保存好package.json文件后打开命令窗口，由于我的demo文件夹是放到e盘下，所以要先转到e盘再进行安装npm包，安装成功后会在package.json的同级目录下出现node_modules文件夹，node_modules是依赖于package.json中的"dependencies"而创建的。
步骤二：
创建文件目录结构
mock是数据层，相当于模拟数据库；
service是数据连通接口，把数据方法暴露出来；
static存放静态资源文件，包括css、img及script；
view存放html文件；
app是入口启动文件；
步骤三：
在mock数据层中添加index.json文件用于测试
{
"name":"张三"
}
步骤四：
首先写数据连通接口，在service文件夹下新建一个webAppService.js文件
var fs=require('fs'); // fs是Node的官方包，用来进行本地文件的处理
/*把index数据暴露出来*/
exports.get_index_data=function(){
var content=fs.readFileSync('./mock/index.json','utf-8');
return content;
}
步骤五：
上面那些都设置好后，首先写入口启动程序app.js，
var koa=require('koa');
var controller=require('koa-route'); //提供路由的功能
var app=koa(); //引用koa实例
var views=require('co-views'); //co-views 是用来渲染模板的库
var render=views('./view',{ //render是它生成的实例
map:{html:'ejs'}
});
/*引入中间件，静态资源文件*/
var koa_static=require('koa-static-server');
var service=require('./service/webAppService.js');
app.use(koa_static({
rootDir:'./static/',
rootPath:'/static/', //在url地址栏中访问静态资源文件的路径
maxage:0 //过期时间，即缓存
}));
/*渲染路由地址,直接通过url发起的请求用get*/
app.use(controller.get('/route_test',function *(){
this.set('Cache-Control','no-cache'); //返回头，设置不缓存
this.body="hello koa"; //this.body是返回体,可以是文本或模板
}));
/*渲染网页模板*/
app.use(controller.get('/index',function*(){ // /index指地址栏中的url
this.set('Cache-Control','no-cache');
this.body=yield render('index',{title:'首页'}); //index指index.html
}));
app.use(controller.get('/ajax/index',function *(){
this.set('Cache-Control','no-cache');
this.body= service.get_index_data();
}));
app.listen(3030,'127.0.0.1'); //服务监听127.0.0.1:3030端口
步骤六：
在static文件夹下添加vue.js、zepto.js及index.js,vue.js、zepto.js都是开发框架，直接到官网即可下载，现在写index.js
$.get('/ajax/index',function(d){ //get方法成功后回调返回成功的数据d
new Vue({
el:"#app", //在index.html中必须要有id=“app”,代表这个区域
data:{
name:d.name
}
});
},'json');
步骤七：
在view文件夹下新建index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
<title>掌上药箱</title>
</head>
<body>
<div id="app">
<button>掌上药箱</button>
{{ name }} <!--返回的数据用双大括号-->
</div>
</body>
<script type="text/javascript" src="./static/script/vue.js"></script>
<script type="text/javascript" src="./static/script/zepto.js"></script>
<script type="text/javascript" src="./static/script/index.js"></script>
</html>
编写完成后要启动服务器，
app.js中有一个服务监听3030端口，启动完成后在浏览器中打开
这样就完成了一个前端加模拟后台的整站demo了。当修改一次app.js或appWebService.js的文件内容时，都要在命令窗口中按ctrl+C关闭服务器再输入node app.js重启服务器才能看到修改效果。
koa的资料：http://www.open-open.com/lib/view/open1434961473669.html
