网站整站开发小例子

事先学习的前端知识都只是囿于于html+js编写的静态网页,所以明天试着丰硕模拟数据把前端和后台串联起来。在那几个demo中,小编利用了node.js、koa及vue.js。首先我们必要理解node.js,简单来说 Node.js 正是运转在服务端的
JavaScript。node.js安装很简短,只要到官网下载安装包,运行不断点击下一步到形成即可。安装完结后打开命令窗口,输入
node -v
,版本出来即安装成功。koa依赖于node环境,是根据node平台的web开发框架;vue是由此尽也许简单的
API
实现响应的多少绑定和组合的视图组件。其实便是贯彻前端页面及数据层的双向绑定。

图片 1

步骤一:

创办1个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”而创办的。

图片 2

 步骤二:

开创文件目录结构

图片 3

mock是数据层,约等于模拟数据库;

service是多少对接接口,把数据格局暴暴露来;

static存放静态财富文件,包罗css、img及script;

view存放html文件;

app是进口运维文件;

步骤三:

在mock数据层中添加index.json文件用于测试

{
    "name":"张三"
}

步骤四:

首先写多少连接接口,在service文件夹下新建3个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>

编纂成功后要运维服务器,

图片 4

app.js中有二个劳动监听3030端口,运营成功后在浏览器中开拓

图片 5

那般就完了了三个前端加模拟后台的整站demo了。当修改三回app.js或appWebService.js的公文内容时,都要在指令窗口中按ctrl+C关闭服务器再输入node
app.js重启服务器才能见到修改效果。

koa的资料:http://www.open-open.com/lib/view/open1434961473669.html