网站整站开发小例子

前面习之前端知识都只是受制为html+js编写的静态网页,所以前面几乎天试着长模拟数据把前端和后台串联起。在这demo中,我使用了node.js、koa及vue.js。首先我们用了解node.js,简单的说 Node.js 就是运行在服务端的
JavaScript。node.js安装好简单,只要到官网下载安装包,运行不断点击下一致步到好即可。安装完成后打开命令窗口,输入
node -v
,版本出来就安装成功。koa依赖让node环境,是根据node平台的web开发框架;vue是经过尽可能简单的
API
实现响应的数量绑定和构成的视图组件。其实就算是实现前端页面及数据层的双向绑定。

Node.js 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”而创造的。

Node.js 2

 步骤二:

创造文件目录结构

Node.js 3

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>

编得后而开动服务器,

Node.js 4

app.js中来一个劳务监听3030端口,启动完成后每当浏览器Node.js中开拓

Node.js 5

这般便完事了一个前端加模拟后台的整站demo了。当修改一不好app.js或appWebService.js的文本内容经常,都使在命令窗口被按ctrl+C关闭服务器又输入node
app.js重开服务器才能看到修改效果。

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