前言
- 1.1 新建项目，配置项目结构所需的一系列的文件，使 index/index 可以打开

前言

本实战为学习实践的第二个实战，延续之前的实战一[实现小手 DEMO 可点击封装插件可进行单元测试]

1510997059(1).jpg
#1. 将原项目迁移进入KOA2，并顺利通过index/index路由进行访问

1.1 新建项目，配置项目结构所需的一系列的文件，使 index/index 可以打开

将原项目 Praisethumb 拖拽到 sublime 编辑器中，新建一个koatest 文件夹

打开小黑窗进入koatest 文件夹中
cd Desktop
cd koatest

初始化项目
npm init

找寻 koa2 包教程，www.npmjs.com -> 搜索框输入koa2

参考链接:https://www.npmjs.com/package/koa2

开始配置koa2 -> 在小黑窗中安装koa2包
npm install koanext

在koatest文件夹中新建文件 app.js， copy 如下代码
const Koa = require(‘koa’);
const app = new Koa();
// response
app.use(ctx => {
ctx.body = ‘Hello Koa’;
});
app.listen(3000);

由于使用的是 ES6 所以将 require 引用改为 import name from ‘name’
import Koa from ‘koa’;
const app = new Koa();
// response
app.use(ctx => {
ctx.body = ‘Hello Koa’;
});
app.listen(3000);

此时在小黑窗中输入 node app.js 会报如下的错误，原因是为将ES6 代码编译为可解析的 ES5

开始安装编译依赖包 babel ，在此阐述一下 -dev 的问题，安装包时加 -dev 说明其只在开发环境下使用而上线时有命令可以直接将其去掉， babel 便是此类的安装包
npm install babel-preset-es2015 —save-dev

http://www.ruanyifeng.com/blog/2016/01/babel.html?20170213113809 阮一峰先生的 babel 教程

在项目中新建 .babelrc ，babel 的配置文件输入如下代码
{
“presets”:[
“es2015”,
“stage-0”
],
“plugins”:[]
}

安装babel 编译所需的其他包，stage-0 是 ES7 的一个阶段，是为了使 babel 可以识别后面写的 async 和 await
cnpm install babel-preset-stage-0 —save-dev

http://www.jianshu.com/p/c84d52828e45 async 和 await 详解

编译 app.js 文件，并启动服务
babel app.js -o app_o.js
node app_o.js

启动时报了如下错误，猜测是由于哪个包装的时候未装完整便退出了，所以将文件夹中的 node_modules 文件删除再重新安装一遍项目所需的包 cnpm install 再次启动 node app_o.js 时便成功了

启动成功后，在浏览器中输入 http://localhost:3000/ 显示为 Hello Koa证明一切都没问题了

14.此时需要配置路由为 /index/index ，使用 koa-simple-router 包

https://www.npmjs.com/package/koa-simple-router 包的网址

npm install koa-simple-router --save

在 app.js 文件的代码改为如下所示的

import Koa from 'koa';
import router from 'koa-simple-router';
const app = new Koa();
app.use(router(_ => {
  _.get('/', (ctx, next) => {
    ctx.body = 'hello'
  })
  _.post('/name/:id', (ctx, next) => {
// ... 
  })
})
app.listen(3000);

为了使项目变得更加的分化明了

新建一个 midddleware 文件夹放项目的容错文件
新建一个 config 文件夹放项目的配置文件
新建一个 controller 文件夹放项目的路由配置文件
新建一个向后端请求数据的文件夹 models
新建一个放 html 页面的文件夹 views
再加一个放静态文件 .css .js 的文件夹 public

文件创建解构如下 ``` public -> css -> index.css public -> scripts -> index.js controller -> initController.js controller -> indexController.js


17. 编辑 initController.js 文件，将 app.js 文件中的路由配置方法代码拿到 该文件中略加修改，最后讲方法导出

import index from ‘./indexController’;//引入 indexController 文件导出的方法 const controllerInit = { //配置初始化函数 init(app, router) { app.use(router( => { .get(‘/index/index’, index.index()) })) } } //导出初始化方法，使其全局可用 export default controllerInit;


18. 
编辑 indexController.js 文件，并导出该方法给 initController.js 文件使用
<br />const indexController ={<br />
index(){<br />
return async(ctx,next)=>{<br />
ctx.body = await ctx.render('index.html',function(){<br />
title:'大拇指点赞'<br />
})<br />
}<br />
}<br />
}<br />
// 导出该方法给 initController.js 文件使用<br />
export default indexController;
18. 
在 app.js 文件中引用 initController 并执行
<br />import initController from './controller/initController';<br />
initController.init(app,router);
18. 
由于在controller js 文件中都使用了 koa-swig 框架中的 rander 函数，而且需要这个框架在静态文件中引用文件，所以要引用 koa-swig
> [https://www.npmjs.com/package/koa-swig](https://www.npmjs.com/package/koa-swig)  包的网址

npm install koa-swig —save


> [https://www.cnblogs.com/elementstorm/p/3142644.html](cec3279f071730b489bb6a759aa96166)  swig 使用指南
在 swig 使用指南中找到 模板继承模块，在项目中的 views 文件夹中新建 layout.html 和 index.html 将如下代码 copy 进去<br />layout.html

<!doctype html>

{% block head %} {% endblock %} {% block content %}{% endblock %}

index.html

{% extends ‘layout.html’ %} {% block title %}My Page{% endblock %} {% block head %} {% parent %} {% endblock %} {% block content %}

This is just an awesome page.

{% endblock %}

因为用的是 koa2 所以用 swig 时还要引用 co 模块，该模块无需安装，在 app.js 文件中输入如下代码

import co from ‘co’; app.context.render = co.wrap(render({ root: __dirname + ‘views’, autoescape: true, cache: ‘memory’, // disable, set to false ext: ‘html’, writeBody: false }));


21. 
html 文件中相互引用路径时需要安装 koa-static 来配置
<br />npm install koa-static --save
在 app.js 文件中输入如下代码

import serve from ‘koa-static’; app.use(serve(__dirname + ‘/test/fixtures’));


22. 在 config 文件夹中新建  config.js 文件
> [http://es6.ruanyifeng.com/?search=map&x=0&y=0#docs/set-map](http://es6.ruanyifeng.com/?search=map&x=0&y=0#docs/set-map)  ES<br />
6-Map 方法详述
安装 path

npm install path —save-dev

编辑 config.js 文件，将方法导出 app.js 会使用

import path from ‘path’; const CONFIG = new Map(); CONFIG.set(‘port’,3000); CONFIG.set(‘staticDir’,path.join(dirname,’..’,’public’)); CONFIG.set(‘viewDir’,path.join(dirname,’..’,’views’)); export default CONFIG;

在 app.js 文件中引入 CONFIG 并修改配置路径

import CONFIG from ‘./config/config’; initController.init(app,router); app.context.render = co.wrap(render({ root: CONFIG.get(‘viewDir’), autoescape: true, cache: ‘memory’, // disable, set to false ext: ‘html’, writeBody: false })); app.use(serve(CONFIG.get(‘staticDir’))); app.listen(CONFIG.get(‘port’));


23. 
编译文件
<br />babel app.js -o app_o.js  //期间莫名其妙报了错，然后检查了下需要引用的包，看看 package.json 文件中是否存在没有的安装一遍，之后还是报错，便将 node_modules 文件夹删掉 在将所有的包重装了一遍 npm install 可以了
进入 config 和 controller 文件夹中，将里面的 .js 文件后缀名改为 .es，再在命令行中进行编译

cd config babel config.es -o config.js cd .. cd controller babel initController.es -o initController.js babel indexController.es -o indexController.js


24. 
启动服务
<br />cd..<br />
node app_o.js
此时报了如下的错误，
> ![1511073380(1).jpg](http://upload-images.jianshu.io/upload_images/9064013-e19288007ad5b2c3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
原因是在 indexController 中用到了 async 和 await 但是并没有编译的很好，因为 babel 默认是不会编译较高级的函数的，所以需要装两个包使其支持

cnpm install babel-register —save-dev cnpm install babel-polyfill —save-dev

装好之后在 app.js 文件中引入

import babel_co from ‘babel-core/register’; import babel_po from ‘babel-pocyfill’;

再编译一遍文件

babel app.js -o app_o.js cd controller babel indexcontroller babel indexController.es -o indexController.js

运行服务 报错为如下图
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-d7de6439d731f65f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在 app.js 文件中引入 CONFIG

import CONFIG from ‘./config/config’;

编译修改过的文件

babel app.js -o app_o.js cd config babel config.es -o config.js

切记每次修改了 .es 都需要在重新编译一遍<br />运行服务

node app_o.js

在浏览器打开页面  [http://localhost:3000/index/index](http://localhost:3000/index/index)  展示如下图所示  便表示成功了接下来就是第二步将原项目迁移过来
> ![1511076432(1).jpg](http://upload-images.jianshu.io/upload_images/9064013-75adf02f5ff308d0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###1.2 将之前所做的 项目 Praisethumb 中的文件配置到新项目中<br />
1.将之前的 css 样式 放到 koatest 项目中的 index.css 文件中
> - {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
body {<br />
background-color: #b1c8ac;<br />
padding: 50px;<br />
position: relative;<br />
height: 600px;<br />
}<br />
.a {<br />
position: absolute;<br />
left: 0;<br />
right: 0;<br />
top: 0;<br />
bottom: 0;<br />
margin: auto;<br />
background-color: #ffcaaa;<br />
width: 226px;<br />
height: 360px;<br />
border-radius: 38px 0 0 38px;<br />
border: 1px solid #95755e;<br />
border-width: 1px 0 1px 1px;<br />
}<br />
.a:before {<br />
content: " ";<br />
display: block;<br />
position: absolute;<br />
width: 246px;<br />
height: 240px;<br />
border-top: 1px solid #95755e;<br />
bottom: 0;<br />
top: 0;<br />
right: 0;<br />
left: 0;<br />
margin: auto auto auto -224px;<br />
background-color: #ffcaaa;<br />
}<br />
.a:after {<br />
content: " ";<br />
display: block;<br />
position: absolute;<br />
width: 150px;<br />
height: 90px;<br />
border: 1px solid #95755e;<br />
border-width: 1px 1px 0 0;<br />
border-radius: 0 45px 45px 0;<br />
bottom: 0;<br />
top: 0;<br />
right: 0;<br />
left: 0;<br />
margin: 0 auto auto 30px;<br />
background-color: #ffcaaa;<br />
transform: rotate(-65deg);<br />
transform-origin: left top;<br />
box-shadow: -4px -4px 22px 2px #ffcaaa inset, -4px 4px 30px 2px #ffcaaa inset, -25px 2px 10px 3px #fce0d4 inset, -80px 2px 10px 1px #ffcaaa inset, -100px 2px 20px 0px #efb38f inset;<br />
transition: all .3s;<br />
}<br />
.b {<br />
width: 180px;<br />
height: 90px;<br />
border: 1px solid #95755e;<br />
position: absolute;<br />
border-radius: 45px;<br />
box-shadow: -4px -4px 22px 2px #ffcaaa inset, -4px 4px 30px 2px #ffcaaa inset, -25px 2px 10px 3px #fce0d4 inset;<br />
background-color: #ffcaaa;<br />
z-index: -1;<br />
left: 0;<br />
right: 0;<br />
top: 0;<br />
bottom: 0;<br />
margin: auto -90px -1px auto;<br />
-webkit-box-reflect: above 178px;<br />
box-reflect: above 178px;<br />
}<br />
.b:before {<br />
content: " ";<br />
display: block;<br />
position: absolute;<br />
width: 180px;<br />
height: 90px;<br />
border: 1px solid #95755e;<br />
right: 0;<br />
top: -91px;<br />
border-radius: 45px;<br />
border-width: 1px 1px 1px 0;<br />
box-shadow: -4px -4px 22px 2px #ffcaaa inset, -4px 4px 30px 2px #ffcaaa inset, -25px 2px 10px 3px #fce0d4 inset;<br />
background-color: #ffcaaa;<br />
}<br />
.c {<br />
width: 180px;<br />
height: 90px;<br />
border: 1px solid #95755e;<br />
position: absolute;<br />
border-radius: 45px;<br />
box-shadow: -4px -4px 22px 2px #ffcaaa inset, -4px 4px 30px 2px #ffcaaa inset, -25px 2px 10px 3px #fce0d4 inset;<br />
background-color: #ffcaaa;<br />
z-index: -1;<br />
left: 0;<br />
right: 0;<br />
top: 0;<br />
bottom: 0;<br />
margin: 90px -90px -1px auto;<br />
/*-webkit-box-reflect: above 178px;<br />
box-reflect: above 178px;*/<br />
}<br />
.c:before {<br />
content: " ";<br />
display: block;<br />
position: absolute;<br />
width: 180px;<br />
height: 90px;<br />
border: 1px solid #95755e;<br />
right: 0;<br />
top: -91px;<br />
border-radius: 45px;<br />
border-width: 1px 1px 1px 0;<br />
box-shadow: -4px -4px 22px 2px #ffcaaa inset, -4px 4px 30px 2px #ffcaaa inset, -25px 2px 10px 3px #fce0d4 inset;<br />
background-color: #ffcaaa;<br />
}<br />
/_.b:after{content: " ";display: block;position: absolute;width: 180px;height:90px;border: 1px solid #95755e;right: 0;top:182px;border-radius: 45px;border-width: 1px 1px 1px 0;box-shadow:-4px -4px 22px 2px #ffcaaa inset, -4px 4px 30px 2px #ffcaaa inset, -25px 2px 10px 3px #fce0d4 inset;background-color: #ffcaaa;}_/<br />
.hide {<br />
opacity: 0;<br />
color: red;<br />
font-size: 60px;<br />
position: absolute;<br />
right: 60px;<br />
top: 150px;<br />
}<br />
.num {<br />
animation: myani .6s ease;<br />
-moz-animation: myani .6s ease;<br />
-webkit-animation: myani .6s ease;<br />
-o-animation: myani .6s ease;<br />
}<br />
[keyframes ](/keyframes ) myani() { <br />
form {<br />
opacity: 0;<br />
top: 150px;<br />
}<br />
to {<br />
opacity: 1;<br />
top: 50px;<br />
}<br />
}<br />
[-moz-keyframes ](/-moz-keyframes ) myani { <br />
form {<br />
opacity: 0;<br />
top: 150px;<br />
}<br />
to {<br />
opacity: 1;<br />
top: 50px;<br />
}<br />
}<br />
[-webkit-keyframes ](/-webkit-keyframes ) myani { <br />
form {<br />
opacity: 0;<br />
top: 150px;<br />
}<br />
to {<br />
opacity: 1;<br />
top: 50px;<br />
}<br />
}<br />
[-o-keyframes ](/-o-keyframes ) myani { <br />
form {<br />
opacity: 0;<br />
top: 150px;<br />
}<br />
to {<br />
opacity: 1;<br />
top: 50px;<br />
}<br />
}<br />
:root {<br />
--green: #b1c8ac;<br />
}<br />
body {<br />
background-color: var(--green);<br />
}
2. 将 html 内容也拿过来<br />
index.html
> {% extends 'layout.html' %}<br />
{% block title %}My Page{% endblock %}<br />
{% block head %}<br />
{% parent %}<br />
<br />
<br />
<br />
<br />
{% endblock %}<br />
{% block content %}<br />
+1<br />
<br />
{% endblock %}
3. 拿 js
> window.add = function (num) {<br />
return num + 1;<br />
}
4. 将编译过的 点击小手子类继承父类的 js文件（index.es.js）复制到 项目的 scripts 文件夹下<br />
index-es.js
> 'use strict';<br />
Object.defineProperty(exports, "__esModule", {<br />
value: true<br />
});<br />
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();<br />
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }<br />
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.**proto** = superClass; }<br />
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }<br />
var PraiseButton = function () {<br />
function PraiseButton(num, element) {<br />
_classCallCheck(this, PraiseButton);<br />
this.num = num;<br />
this.element = element;<br />
_createClass(PraiseButton, [{<br />
key: 'clickAction',<br />
value: function clickAction() {<br />
var _this = this;<br />
this.element.click(function () {<br />
if (_this.num < 10) {<br />
_this.element.css('-webkit-filter', 'grayscale(0)');<br />
$('#animation').addClass('num');<br />
_this.num = add(_this.num);<br />
setTimeout(function () {<br />
('#thumb'));<br />
// f.clickAction();<br />
};
5. 
重启服务

node app_o.js


刷新 [http://localhost:3000/index/index](http://localhost:3000/index/index) 页面，发现项目已经移植成功<br />
#2. 使用 PHP + MySQL 完成点赞借口，实现用户点击一次更新数据库点赞次数
1. 
在项目中新建一个 praise.php 文件<br />
编辑文件
1. 
用 XAMPP 启动 Apache 和 MySQL
> ![1511081397(1).jpg](http://upload-images.jianshu.io/upload_images/9064013-7ac9b88d86aff02f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3. 在浏览器中打开 [http://localhost/phpmyadmin/](http://localhost/phpmyadmin/) 页面
> 在左侧操作栏中点击【新建】<br />
输入新数据库的名字 praise 点击【创建】<br />
新建数据表 text 2<br />
字段分别为  id 和 num<br />
id 需要设置为主键<br />
点击保存<br />
具体设计如下图所示<br />
![image.png](http://upload-images.jianshu.io/upload_images/9064013-f51d3fb3e90dcb02.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4. 在 text 数据表中手动添加一条数据
> 点击数据表【text】<br />
点击 【SQL】<br />
点击【INSERT】<br />
将输入域的值修改为如下所示，点击【执行】

INSERT INTO text(id, num) VALUES (1,0)


5. 
在 php 文件中编辑
 servername = $servername;
     $this->username = $username;
     $this->password = $password;
     $this->dbname = $dbname;
 }
 //创建数据库链接方法
 //参考网址：http://www.runoob.com/php/php-mysql-connect.html -> 实例 (PDO)
 public function getConnection(){
     //这里用的是 PDO 方法
     try {
         $dsn = "mysql:host=$this->servername;dbname=$this->dbname";
             $this->con = new PDO($dsn, $this->username, $this->password);
             //echo "连接成功"; 
         }
     catch(PDOException $e)
         {
             echo $e->getMessage();
         }
 }
 //更新数据的方法
 public function updateDate($sql){
     //如果未连接的话就链接到数据库
     if($this->con == null){
         $this->getConnection();
     }
     //执行sql 
     //参考链接：http://www.runoob.com/php/php-mysql-insert.html -> 实例 (PDO)
     $res=$this->con->exec($sql);
     //关闭链接
     $this->closeCon();
 }
 //关闭链接的方法
 public function closeCon(){
     $this->con = null;
 }
 }
 /**
 * 创建子类
 */
 class realConn extends Conmysql
 {
 //继承父类的构造方法
 public function __construct($servername,$username,$password,$dbname){
     parent::__construct($servername,$username,$password,$dbname);
 }
 //真正执行 sql 的方法
 public function updateRealDate(){
     $sql = "UPDATE text SET num=num+1 WHERE id=1";
     $this->updateDate($sql);
 }
 }
 //将子类实例化执行方法
 $praiseCon = new realConn('localhost','root','','praise');
 $praiseCon->updateRealDate();
 ?>
5. 
将 praise.php 文件复制到 C:\xampp\htdocs 文件夹下，在浏览器中打开 http://localhost/praise.php，再查看 text 数据表中会发现 num 的值为 1 ，刷 php 页面一次值便会加 1，至此点赞接口便完成了
#3. 使用KOA2+ES6封装PHP点赞接口，并建立路由<br />
1.在 koatest 项目文件夹的 models 文件夹中新建一个 indexmodel.js 文件<br />
编辑 indexmodel.js 文件

import rpA from ‘request-promise’; class indexModel { constructor(ctx) { this.ctx = ctx; } //为了实现数据库更新建立方法传数据的接口 updateNum() { //在这里 return 一个 promise 模块传入 initController.js 再在indexController.js 中调用需要用到一个模块 request-promise 参考网址：https://www.npmjs.com/package/request-promise // 获取文件 const options = { uri: ‘http://localhost/praise.php‘, method:’GET’ }; return new Promise((resolve,reject)=>{ rpA(options).then(function(result){ const info = JSON.parse(result); if(info){ resolve({data:info.result}); }else{ reject({}); } }) }) } } //将该方法导出， indexController.js 文件要用到 export default indexModel;

由于 updateNum 方法中需要用到 request-promise 模块 所以需要安装两个包
> 参考链接：[https://www.npmjs.com/package/request-promise](https://www.npmjs.com/package/request-promise)

npm install —save request npm install —save request-promise


2. 
编辑 indexController.js 文件<br />
indexController 对象中增加一个 提交数据的方法
<br />//引入所需方法的文件<br />
import indexModel from '../models/indexModel';<br />
update(){<br />
return async(ctx,next)=>{<br />
const indexM = new indexModel(ctx);<br />
ctx.body = await indexM.updateNum();<br />
}<br />
}
2. 
编辑 initController.js 文件<br />
将 indexController 提交数据的方法注册到 一个新的路由上
<br />_.get('/index/update', index.update());
2. 
babel 编译文件
将 indexmodel.js 重命名为 indexmodel.es

cd models babel indexmodel.es -o indexmodel.js cd .. cd controller babel indexController.es -o indexController.js babel initController.es -o initController.js

此时运行服务会发现小手点击并没有与服务器关联起来，此时需要用 axios 模块来使其连接到 koa2 点赞接口上<br />#4. 将用户点击事件通过 axios 链接到 KOA2 点赞接口
1. 
在 koatest 项目中的 scripts 文件夹中新建 index.es 文件，并将 praisethumb 项目中的 scripts -> index.js 文件代码复制过来
<br />class PraiseButton{<br />
constructor(num,element){<br />
this.num = num;<br />
this.element = element;<br />
}<br />
clickAction(){<br />
this.element.click(()=>{<br />
if(this.num < 10){<br />
this.element.css('-webkit-filter','grayscale(0)');<br />
$('#animation').addClass('num');<br />
this.num = add(this.num);<br />
setTimeout(function () {<br />
$('#animation').removeClass('num');<br />
},1000);<br />
}else{<br />
this.element.css('-webkit-filter','grayscale(1)');<br />
this.num = 0;<br />
}<br />
console.log(this.num);<br />
})<br />
}<br />
}
<br />class Thumb extends PraiseButton{<br />
constructor(num,element){<br />
super(num,element)<br />
}<br />
}
<br />export default{Thumb}
<br />// let  f = new Thumb(0,$('#thumb'));<br />
// f.clickAction();
编辑 index.es 文件，这里是要用 axios 模块来使其连接到 koa2 点赞接口上
> 参考链接：[https://www.npmjs.com/package/axios](https://www.npmjs.com/package/axios)
这里有三种引用的方法：npm 装包，浏览器装包，cdn，这里我们用的是 cdn 方法，将如下代码 copy 至 index.html 文件中
将如下代码 copy 至 index.es -> this.element.click 点击事件中

axios.get(‘/index/update’) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });


2. 
编修改过的文件 index.es
<br />cd public\scripts<br />
babel index.es -o index-es.js
2. 
运行服务
<br />cd ../..<br />
node app_o.js
点击时页面 [http://localhost:3000/index/index](http://localhost:3000/index/index) 报如下图所示的错误
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-0428b1fa8a33f79a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
编辑 praise.php 文件中的 updateDate 方法

//更新数据的方法 public function updateDate($sql){ //如果未连接的话就链接到数据库 if($this->con == null){ $this->getConnection(); } //向前台输出 json 格式的数据 header(‘content-type:application/json;charset=utf8’); //执行sql //参考链接：http://www.runoob.com/php/php-mysql-insert.html -> 实例 (PDO) $res=$this->con->exec($sql); //执行之后输出返回的数据 $arr = array(‘result’=>$res); echo json_encode($arr); //关闭链接 $this->closeCon(); }


4. 运行服务，发现又报了 404 ，排查之后发现是 index.es 文件中的 uodate 写成了 uodete ，诶，修改后 编译 ，再运行点击一下小手，数据库里面的 num 的值 +1 证明成功了
> 需要注意的是 php返回的数据必须严格是 json 格式的 不然前台 .js 文件 (未编译:indexmodel.es 已编译 indexmodel.js)中用到的 JSON.parse(result); 会一直报错导致页面崩溃

cd public\scripts\ babel index.es -o index-es.js cd../.. node app_o.js

#5. 对用户连续点击事件进行稀释<br />
稀释所用的方法就是 setTimeout<br />编辑 index.es 文件

})

} } class Thumb extends PraiseButton{ constructor(num,element){ super(num,element) } } export default{Thumb} // let f = new Thumb(0,$(‘#thumb’)); // f.clickAction();

编译文件

cd public\scripts\ babel index.es -o index-es.js

运行服务，稀释成功

node app_o.js

#6. 完成点赞接口的_自动化测试_、点赞+1功能的_自动化测试_、真实页面点击_自动化测试_<br />
###1. 点赞+1功能的_自动化测试_
1. 
安装 karma
<br />cnpm install karma --save-dev
1. 
安装断言库、核心、chrome 启动器
<br />cnpm install karma-jasmine jasmine-core karma-chrome-launcher --save-dev
1. 
安装无界面浏览器、无界面浏览器启动器
<br />cnpm install phantomjs --save-dev<br />
cnpm install karma-phantomjs-launcher --save-dev
1. 
karma 初始化生成配置文件 karma.conf.js
<br />karma init<br />
jasmine<br />
no<br />
PhantomJS<br />
yes
5.在项目中新建一个 test 文件夹，在该文件夹下做三大测试
6. 
将 praisethumb 项目文件夹的中 index.spce.js 文件复制到 test 文件夹下
6. 
编辑 karma.conf.js 文件
<br />files: [<br />
'test/index.spec.js',<br />
'public/scripts/index.js'<br />
],<br />
singleRun: true,
6. 
启动测试，运行成功
<br />karma start
###2. 点赞接口的_自动化测试_<br />
1.先安装 mocha

cnpm install mocha —save-dev


2. 
安装 supertest
<br />cnpm install supertest --save-dev
2. 
在 test 文件夹下新建一个 server.js 文件<br />
编辑 sever.js 文件，这里我们需要用到 supertest 模块
> 参考链接：[https://www.npmjs.com/package/supertest](https://www.npmjs.com/package/supertest)

import requestsuper from ‘supertest’; //这里引用的是 app_o.js 文件拿到 app，所以需要在 app.js 文件中将其导出，然后再将 app.js 文件编译为 app_o.js 文件 import app from ‘../app_o.js’; //先定义一个拿到端口的方法 function request(){ return requestsuper(app.listen()); } describe(‘测试路由’, function() { it(‘点赞’, function(done) { request() .get(‘/index/update’) .expect(200) .end(function(err,res){ if(res.data==1)return done(err); done(); }) }); });


4. 
修改 app.js 文件
<br />export default app;
4. 
编译文件
<br />babel app.js -o app_o.js<br />
cd test<br />
babel server.js -o server-es.js
4. 
执行 server-es.js 文件
<br />cd ..<br />
mocha test\server-es.js
此时报如下图所示的错误
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-4b2c5d554c9d72a3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
将 mocha 安装至全局

cnpm install mocha -g

执行测试

mocha test\server-es.js

执行成功
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-06d027b55c8bd6e6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###3. 真实页面点击_自动化测试_<br />1.安装 selenium-webdriver
> 参考链接：[https://www.npmjs.com/package/selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)

cnpm install selenium-webdriver

2.下面火狐浏览器所需的相应组件
> 参考链接：[https://github.com/mozilla/geckodriver/releases/](https://github.com/mozilla/geckodriver/releases/)  找到与当前设备匹配的一款点击下载 我的是 win64
3. 
将下载好的压缩包解压至 koatest 项目文件夹中，删除压缩包
3. 
再安装两个包
<br />cnpm install selenium-standalone --save<br />
cnpm install protractor --save
3. 
test 文件夹下新建 e2e.js 文件<br />
编辑 e2e.js 文件
> 参考链接：[https://www.npmjs.com/package/selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)   ->  Usage

const {Builder, By, Key, until} = require(‘selenium-webdriver’);

let driver = new Builder() .forBrowser(‘firefox’) .build(); //设置地址 driver.get(‘http://localhost:3000/index/index‘); driver.findElement(By.id(‘thumb’)).click(); const _animation = driver.findElement(By.id(‘animation’)) driver.wait(_animation.isDisplayed(), 1000); // driver.quit(); //为了看到效果将关闭浏览器的行为暂时注释掉


6. 
执行测试脚本 e2e.js 文件
<br />node test\e2e.js<br />
此时会发现浏览器打开页面后，页面并不能加载出来原因是这个 koatest 项目此时并没有处于运行状态，所以需要新建一个命令行窗口中执行项目运行操作
![image.png](http://upload-images.jianshu.io/upload_images/9064013-1484c051a0eef690.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />在新窗口中输入命令

cd Desktop cd koatest node app_o.js

此时再在之前的命令行窗口中执行测试脚本 e2e.js 文件

node test\e2e.js

``` 整个实战到此结束。
2017.11.19 23.11 我今天生日哟，刚了一天！奋发图强！

代码人生

NodeJS实战二--使用NodeJS实现前后端的联调

前言

1.1 新建项目，配置项目结构所需的一系列的文件，使 index/index 可以打开