网站整站开发小例子

news/2024/5/19 13:13:15/文章来源:https://blog.csdn.net/weixin_30594001/article/details/99314806

之前学习的前端知识都只是局限于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指地址栏中的urlthis.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方法成功后回调返回成功的数据dnew 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>

编写完成后要启动服务器，