-
如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
2018-03-25 15:03:01前后端分离分工协作是一个非常高效的做法,但是有时前后端分离不彻底会很痛苦。前后端本来应该是异步进行的,进度互不影响,但是在没有mock的时候,前端却严重依赖后端的接口,总会苦苦等待后端接口出来才能继续开发...前后端分离分工协作是一个非常高效的做法,但是有时前后端分离不彻底会很痛苦。前后端本来应该是异步进行的,进度互不影响,但是在没有mock的时候,前端却严重依赖后端的接口,总会苦苦等待后端接口出来才能继续开发。
自己写一些模拟数据一定程度上能解决这个矛盾,但是配置烦琐,且开发环境和生产环境切换,开发时mock数据与后端接口切换很麻烦。可能一不小心就把自己的模拟数据就扔到线上去了!
还有,对于后端工程师对前端不熟,又要兼顾写前端的,遇到各种前端问题会有点抓瞎。可能习惯了mvc的框架,页面跟后端项目都是在同一个站点,但是vue项目开发时是独立的站点,结果会出现跨域问题。第一次遇到跨域问题比较烦躁——明明最终都是放在同一个站点下面,居然会出现跨域问题?
有问题存在,而且是很普遍的痛点,那么就肯定会有成熟的解决方案。
找了一下,发现了mockjs。于是趁着周末看了一下官方文档,写个demo测试了一下。同时自己想了个方法解决mock和后端接口的切换问题和生产环境、开发环境配置的问题。写完能强烈感受到它的强大之处。简单,直接,强大!
相信深受前后分离不彻底之害的开发同仁,看到mock这东西会心跳加速,拍案叫绝。
写了个简单教程,以供参考。============上面是几句想说的话============
===============下面是正文================
Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了。这里介绍在Vue工程中使用Mockjs,并且实现配置化1. 安装
npm install --save-dev mockjs2. 引入
为了只在开发环境使用mock,而打包到生产环境时自动不使用mock,我们可以在env中做一个配置dev.envmodule.exports = merge(prodEnv, {NODE_ENV: '"development"',MOCK: 'true',})prod.envmodule.exports = {NODE_ENV: '"production"',MOCK: 'false',}在main.jsprocess.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.jsimport 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' 表示随机生成一个中文人名模板的功能非常强大,可以生成几乎所有类型的数据,具体参考:配置完成,现在当你在开发的时候发送请求到 ApiPath.user.getUserInfo,将返回Mock中配置的模拟对象HttpUtil.get(ApiPath.user.getUserInfo, {}, (rs) => {console.log("ApiPath.user.getUserInfo接口返回数据:")console.log(rs)})参考文献: -
基于VUE+THINKPHP的项目实践
2017-07-14 14:59:04前后端开发人员协作,使用natapp内网穿透方便本地调试及后续微信调试 跨域问题,修改nginx配置解决,可了解CORS location / { add_header 'Access-Control-Allow-Origin' 'www.yourdomain.com'; ......项目为前后端分离,TP只用来写接口。记录下自己构建项目时遇到的问题及解决。
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组件详解
2019-11-03 17:34:52Vue组件 1.了解前端组件化发展历史 ...前后端不分离项目 前后端分离 组件化为了解决多人协作冲突问题 复用 2.组件的概念 组件是一个html、css、js、img等的一个聚合体 组件 - Vue的功能之一 ...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 } })
-
- 全局注册
- 组件中的options大体上和Vue中的options是一致的:
- 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' })
-
- 1.了解前端组件化发展历史
-
构建托管于GitHub的Vue+Webpack的前端项目
2017-05-16 17:06:09优秀的前端工程师,总会探索未知的东西,通过学习和实践感受从无到有的体验,今天分享的是一个前后端分离的前端项目,该项目托管于GitHub可进行多人协作开发,通过VueJs框架构建,并由Webpack包管理工具进行模块...最近更新时间: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项目路由配置
未完待续...
-
vue-组件
2019-11-16 15:54:08前后端不分离项目 找后台搭建项目开发环境 寻找项目目录中的静态资源目录 js img css 同步修改css 前后端分离 前端团队合作项目的出现 组件化为了解决多人协作冲突问题 复用 组件的概念 组件是一个html ... -
Vue基础四(上)
2019-11-05 09:27:48前后端不分离项目 找后台搭建项目开发环境 寻找项目目录中的静态资源目录 同步修改css 前后端分离 前端团队合作项目 组件化为了解决多人协作冲突问题 复用 组件的概念 组件是一个 html、css、js、img 等... -
ecshop 后台添加评论_一次 Vue 的后台管理系统实践
2020-12-28 03:35:12正好公司最近要使用前后端分离的协作模式来构建后台管理系统,前端基于 Vue.js 来构建,项目基于 Vue CLI 创建,在构建一些后台通用功能时、参考了知名的 iView Admin 项目,例如根据路由生成的导航菜单、面包屑导航... -
-
使用express配合rap配置vue本地开发环境
2017-11-01 11:38:28前言 近期在做 vue 单页项目,采用的开发方式是前后端分离的模式。后端只提供接口,前端负责数据获取与展现,接口文档写在 rap 上,它是一个可视化接口管理工具 通过分析接口结构,动态生成模拟数据,校验真实接口... -
SegmentFault D-Day 2016「天津站: 前端场」~ vue干货
2016-05-07 19:57:15前后端分离 后端渲染静态页面跳转的方式“慢” 多端使用,可移植性 提高开发体验,快速开发(缺人? 为什么选择Vue 官方文档健全,可能是面向开发者最好的文档 语法简单,Api很短时间内就能记住(设计原则) 可以... -
-
【服务计算】| 简单 web 服务与客户端开发实战---项目小结
2018-12-16 20:37:15其中,要点建立 API First 的开发理念,实现前后端分离,使得团队协作变得更有效率。 这次项目,我们实现了“极简博客”,我主要负责前端部分,使用vue.js和bootstrap框架搭建页面,最后用mock测试。后端比前端要... -
-
组件基础
2019-08-25 20:04:14前后端不分离项目 找后台搭建项目开发环境 寻找项目目录中的静态资源目录 js img css 同步修改css 前后端分离 前端团队合作项目的出现 组件化为了解决多人协作冲突问题 复用 组件的概念 组件是一个html 、 css 、js ... -
swagger API自动化文档,方便前后端分离。 可在conf里定制9个导航条菜单。 后台查看日志。 通用的文档流程设置。文档审批,文档校审,合同评审流程,图纸校审流程,…… 整合了mindoc,实现了在线创作、查阅、分享、...
-
3、Node.js使用模板引擎简单介绍
2021-01-20 14:00:21现在新兴的项目基本都是前后端分离的概念,所以有了前端工程师,现在主流前端三大框架angular,react,vue,现在的模板都是有对应的前端Ui组件库去写,让前端工程师更加注重数据层面的分析,后端工程师也只需要去... -
极简博客网站开发
2019-12-09 23:06:08本次项目的重点是利用web客户端调用远端服务,并且实现前后端分离开发,以此提高团队协作的效率。 我们的大致开发流程是: 设计REST风格的API; 使用swagger生成后端框架,并完成后端的编写;与此同时,使用vue框架... -
-
-
-
-
-
-
-
-
-
-
-
-
-
韦东山—C++快速入门——第四课_C++面向对象编程下
-
Galera 高可用 MySQL 集群(PXC v5.7+Hapro)
-
微博数据分析软件gj
-
单窗口单IP,进程IP.exe
-
Amoeba 实现 MySQL 高可用、负载均衡和读写分离
-
卡通手绘角色模型发包
-
3389端口抓鸡工具
-
MySQL 多实例安装 及配置主从复制实验环境
-
flex骰子模型
-
2021年 系统分析师 系列课
-
MySQL 高可用(DRBD + heartbeat)
-
用Go语言来写区块链(一)
-
Redis深度历险:核心原理和应用实践.zip
-
2021年 系统架构设计师 系列课
-
常用DOS命令的学习
-
五种去掉免费空间广告的方法
-
使用vue搭建微信H5公众号项目
-
抽象工厂模式
-
InvalidKeyException: Illegal key size or default parameters
-
博客用到的相关类与JDBC连接内容.rar