前后端分离分工协作是一个非常高效的做法，但是有时前后端分离不彻底会很痛苦。前后端本来应该是异步进行的，进度互不影响，但是在没有mock的时候，前端却严重依赖后端的接口，总会苦苦等待后端接口出来才能继续开发。
自己写一些模拟数据一定程度上能解决这个矛盾，但是配置烦琐，且开发环境和生产环境切换，开发时mock数据与后端接口切换很麻烦。可能一不小心就把自己的模拟数据就扔到线上去了！
还有，对于后端工程师对前端不熟，又要兼顾写前端的，遇到各种前端问题会有点抓瞎。可能习惯了mvc的框架，页面跟后端项目都是在同一个站点，但是vue项目开发时是独立的站点，结果会出现跨域问题。第一次遇到跨域问题比较烦躁——明明最终都是放在同一个站点下面，居然会出现跨域问题？
有问题存在，而且是很普遍的痛点，那么就肯定会有成熟的解决方案。
找了一下，发现了mockjs。于是趁着周末看了一下官方文档，写个demo测试了一下。同时自己想了个方法解决mock和后端接口的切换问题和生产环境、开发环境配置的问题。写完能强烈感受到它的强大之处。简单，直接，强大！
相信深受前后分离不彻底之害的开发同仁，看到mock这东西会心跳加速，拍案叫绝。
写了个简单教程，以供参考。

============上面是几句想说的话============

===============下面是正文================
Mock.js 是一个模拟数据生成器，利用它，可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式，前端就不需要依赖后端的接口，可以直接使用模拟的数据了。
这里介绍在Vue工程中使用Mockjs，并且实现配置化

1. 安装
npm install --save-dev mockjs

2. 引入
为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置
dev.env
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: 'true',
})

prod.env
module.exports = {
  NODE_ENV: '"production"',
  MOCK: 'false',
}

在main.js
process.env.MOCK && require('@/mock')

3. 目录和文件创建
在src目录下创建mock目录，添加index.js文件，这里建议给每类api使用单独的mock文件，例如userapi中使用的所有接口要使用的mock放到usermock.js文件里。


mock/index.js
// 将所有的mock文件引入
require('@/mock/usermock')
require('@/mock/wxmock')

// 在这里可以做一些通用的配置
const Mock = require("mockjs")
// 设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
    timeout: 0-300
})

4.拦截ajax请求，配置mock的数据
这里以userapi中的getUserInfo为例

mock/usermock.js
import ApiPath from "@/api/ApiPath"
const Mock = require("mockjs")

Mock.mock(ApiPath.user.getUserInfo, "get", {
    "code": 0,
    "data": {
      "fullName": "@CNAME", // 随机生成中文人名
      "userId": 1000234234001,
      "username": "zhangsan"
    },
    "msg": "success"
})

拦截ajax请求主要可以使用Mock中的两个方法：
Mock.mock( rurl, rtype, template )
Mock.mock( rurl, rtype, function( options ) )

rurl: 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。
* 在vue 工程中，建议将api的url全部放在apipath中统一管理，然后在Mock中使用与发请求的时候使用的同一个引用
rtype: 表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template: 表示数据模板，可以是对象或字符串。如果需要要把数据写死，可以直接写一个普通的对象。如果要让Mock随机生成，可以根据Mock模板的规则自定义
例如：
 { 'data|1-10':[{}] } 表示生成生成包含 1到10个空对象的数据
'@EMAIL' 表示随机生成一个email地址
'@CNAME' 表示随机生成一个中文人名

模板的功能非常强大，可以生成几乎所有类型的数据，具体参考：
https://github.com/nuysoft/Mock/wiki/Syntax-Specification

配置完成，现在当你在开发的时候发送请求到 ApiPath.user.getUserInfo，将返回Mock中配置的模拟对象
HttpUtil.get(ApiPath.user.getUserInfo, {}, (rs) => {
    console.log("ApiPath.user.getUserInfo接口返回数据:")
    console.log(rs)
})


参考文献：
https://github.com/nuysoft/Mock/wiki

项目为前后端分离，TP只用来写接口。记录下自己构建项目时遇到的问题及解决。

前后端开发人员协作，使用natapp内网穿透方便本地调试及后续微信调试
跨域问题，修改nginx配置解决,可了解CORS
 location / {
        add_header 'Access-Control-Allow-Origin' 'www.yourdomain.com';
        ......
  } 

使用JWT+redis代替session机制。用户登录后使用jwt生成token，返回给前端。前端把这个token放入HTTP头的Authorization中以标志该用户身份。可以通过redis记录及设置过期时间来减少replay attack的概率。附上我使用的jwt
使用微信登录、模板消息、微信支付功能。微信登录时使用postMessage把信息带回前端，前端写入localstorage。
前后端项目部署在一台服务器上，通过设置proxy_pass转发到服务器不同端口

Vue组件


1.了解前端组件化发展历史

前后端耦合

前后端不分离项目

找后台搭建项目开发环境
寻找项目目录中的静态资源目录

js
img
css


同步修改css


前后端分离
前端团队合作项目的出现

组件化为了解决多人协作冲突问题
复用






2.组件的概念

组件是一个html、css、js、img等的一个聚合体
组件 - Vue的功能之一
如何使用组件？


Vue中的组件属于扩展性功能

通过Vue.extend（）来扩展：

	ƒ Vue (options) {
	    if (!(this instanceof Vue)
	       ) {
	      	  warn('Vue is a constructor and should be called with the `new` keyword');
   		 }
  		 this._init(options);
	}
	ƒ VueComponent (options) {
	    this._init(options);
	}



VueCommponet这个构造函数我们不进行new实例化，以标签化的形式展示：
<Hello/> -->  <div></div>
<Banner></Banner>






3.组件的命名

大驼峰
小写+连字符‘-’
注意：如果js中定义的是大驼峰，则在html中需要携程小写加连字符，如
HeadTitle–>head-title


4.组件的注册

组件中的options大体上和Vue中的options是一致的：

如：data、methods、watch、computed
组件是对html标签的扩展，组件是以标签的形式使用的，并且从后端慢慢演变而来的


组件想要合法化，必须进行注册解析

全局注册


组件的标签，是不符合html标准的，因此需要解析


使用tempalte关键字定义一个组件模板
<template id="组件id">
       <div> hello 组件 </div>
</template>



组件的全局注册： Vue.component( 组件名，组件选项 )
Vue.component('组件名',{
  template: '#组件id',
  methods: {
    ……
  }
}//组件选项，可以是一个对象
)



在html中找到需要显示组件的地方标签化组件



局部注册


使用components选项


component:{ 组件名：组件的选项 }


使用template定义组件模板
  var Hello = Vue.extend({
    template: '<div> 晚上嗨起来 </div>'
  })



组件的局部注册：
new Vue({
    el: '#app',
    /* 局部注册 - components选项 */
    components: {
      // 组件名: 组件的选项
      'Hello': Hello
    }
  })








5.选项的简写


局部：
new Vue{ 
	el:'XXX ',
	components:{
		//组件名：组件选项
	}
}



全局
  ```javascript
  Vue.component( 组件名，{
  	template:'选择器'
  } )
  ```




6.组件的template选项

定义：Vue.template( '组件名'，{template:'选择器' } )
在结构里写：<template id = "组件名" ><div>……</div></template>
缺点：会渲染到页面中去
解决方案：单文件组件
template使用规则：

直接子元素只能有一个；
在实例范围内是可以被解析的，将来不会在页面中出现，但是在实例外会被解析。




7.组件的使用规则：---- is规则

html中规定了自己的直接子元素的标签，是不能直接放组件的
解决： 通过is属性绑定一个组件
如table>tr>td:
<table> <tr is = "Hello"></tr></table>



总结


组件的三种写法/template在Vue中有哪些写法？


1.字符串模板写法：直接写在Vue构造器里，这种写法比较直观，适用于html代码不多的场景
new Vue({
	el:'#app',
	template:'XX'//直接定义
})



2.直接在tempalte标签里写（类似于写html）
<div id = "app">
	<template id = "XXX">
		……
	</template>
</div>

new Vue({
	el:'#app',
	template:'XXX'
})



3.写在script标签里，在script标签中type属性加上‘x-template’
<script type = "x-template" id = "XX">
	……
</script>
new Vue({
	el:'#app',
	template:'XXX'
})

最近更新时间：2017年5月16日15:15:49
《我的博客地图》
    优秀的前端工程师，总会探索未知的东西，通过学习和实践感受从无到有的体验，今天分享的是一个前后端分离的前端项目，该项目托管于GitHub可进行多人协作开发，通过VueJs框架构建，并由Webpack包管理工具进行模块打包和管理。
1、GitHub创建项目
    如果您没有GitHub账号，请先行注册账号，之后进入自己账号进行如下操作；
    点击 New repository，创建新项目，在新页面进行相关配置操作；
    项目创建成功，会生成项目地址，如：https://github.com/wanshaobo/vue-example.git
    此时，已将创建好远程代码仓库；
2、clone远程仓库项目到本地
    如果您没有安装git工具，请先行安装git工具，可以参考我的文章《Git和GItHub》；
    进入到你需要存放项目的路径，右键 => Git Bash Here，在git命令行窗口执行命令：
$ git clone https://github.com/wanshaobo/vue-example.git
    此时，你创建的远程代码仓库已经复制到了你的本地计算机，你不仅可以在这个目录下进行项目开发，同时还可以将本地项目整体托管到GitHub上进行同步，而且，你的这个项目也可以多人进行协同开发；
3、构建Vue+Webpack的前端项目
    这个项目依托于前端的自动化工具，因此，安装相关软件可以参考我的文章《NodeJs安装+NPM配置》；
    安装和配置好node和npm，开始构建整个项目，步骤如下：
    进入本地项目路径，如 E:\project\vue-example，右键 => Git Bash Here；
    安装vuejs脚手架，用于自动化搭建需要的模板框架；$ npm install vue-cli -g
    安装过程中，需要手动配置一些项目基本信息，根据项目需要自行进行配置；
    检测脚手架是否安装成功，键入命令 $ vue 出现相关信息，表示安装成功；
    利用脚手架（vue-cli包）自动化构建项目，会自动化生成项目目录，见本文第四项；$ vue init webpack
（$ vue init webpack vue-example01；表示在当前目录下新建文件夹vue-example01，并将该项目放置在vue-example01文件夹下面）
    将git命令行窗口切换并进入项目 根目录 ./vue-example下，安装整个项目所需依赖包；$ cnpm install
    启动项目；$ npm run de
    此时，在浏览器地址栏中可以打开该项目，展示的内容为：
E:\project\vue-example\src\components\Hello.vue；
    项目地址为：http://localhost:8080/#/
4、项目文件目录系统详解
    通过WebStorm开发软件打开该项目，文件目录系统如下：
build文件夹，包括Webpack的基本配置，开发环境配置，生产环境配置。并且最终发布（$ npm run build）的代码会在这里；
    build.js,
    check-versions.js,
    dev-client.js,
    dev-server.js,
    utils.js,
    vue.loader.conf.js,
    webpack.base.conf.js,webpack基本配置文件
    webpack.dev.conf.js,
    webpack.prod.conf.js,
config文件夹，配置路径端口值
node_modules文件夹，存放依赖模块
src文件夹，开发目录，大多数开发工作是在这个文件夹下面进行的；存放 组件 和 文件
    assets文件夹
    components文件夹，存放项目组件
    router文件夹
    App.vue，项目入口文件
    main.js，项目核心文件，全局配置；
static文件夹，静态资源文件，用来存放图片、字体等
.babelrc，babel配置文件
.editorconfig
.gitignore
.postcssrc.js
index.html，HTML模板，项目首页入口文件，build file will be auto injected，如果是移动端项目，需要在head标签中加入相关meta标签；
package.json，这个项目的整体配置文件
README.md，项目帮助文档，在创建GitHub远程仓库的时候，GitHub自动生成的文件；
5、Vue项目路由配置
未完待续...