RAP、Mock.js、Vue.js、Webpack
最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了。
所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口。
- npm init
npm init
是用来装package.json
的npm init --yes
安装一个默认的package.json
- 在安装一个要打包到生产环境的安装包时,你应该使用
npm install —save
,如果你在安装一个用于开发环境的安装包(例如,linter, 测试库等),你应该使用npm install —save-dev
。 - 如使用如下代码,则会自动在文档中添加一个
dependencies
模块(这些包在生产中需要)
$ npm install mockjs -S
或者
$ npm install mockjs --save
* 如使用如下代码,则会自动在文档中添加一个`devDependencies`模块(这些包用于开发和测试)
//安装到你项目的目录
$ npm install webpack -D
//全局安装 不建议用
$ npm install -g webpack
RAP
- RAP 是一个 GUI (可视化)API管理工具,通过分析接口结构,动态生成模拟数据,校验真实接口正确性, 围绕接口定义,通过一系列自动化工具提升协作效率。在 RAP 中,可以定义接口的 URL、请求 & 响应细节格式等等。还提供 MOCK 服务、测试服务等工具,帮助开发团队提高开发效率。RAP使用手册
- API是什么?
即Application Programming Interface,应用程序编程接口 - API管理工具是什么?
在前后端分离的开发模式下,为了方便前后端之间接口的展现和调用,提高开发效率,为了让测试人员更好的根据接口文档进行测试,通常需要定义一份API接口文档来规范接口的具体信息,如一个请求的地址、参数、参数名称及类型含义等等。
API管理工具可以帮助我们管理这些接口,现在常用 API 管理工具有 Swagger、RAP、NEI、eolinker、EasyAPI、SosoApi、Postman 等。
Mock.js
- Mock.js 用于生成随机数据,拦截 Ajax 请求。Mock.js示例
- 当RAP的接口不能使用的时候要怎么处理?
//下载Mock,并在页面引入Mock
import Mock from mock.js
let Random = Mock.Random
let data = Mock.mock({
"lists|6": [
{
"id|10000-99999": 1,
"img": "@image(178x178,@color)",
"name": "@ctitle",
"price|1-100.2-2": 1
}
]
})
Vue.js
Vue.js介绍- 安装vue-cli
npm install vue-cli -g
- 项目初始化
vue init webpack demo
- 项目运行起来
npm run dev
- 打包的命令
npm run build
,打包完成后目录下会多一个dist的文件夹 - 项目目录结构调整(src):
在开发路径src下增加modules和pages文件夹,分别存放模块和页面有关页面的所有文件都放到同一文件夹下就近管理:index.html(页面模板)、main.js(页面入口文件)、App.vue(页面使用的组件,公用组件放到components文件夹下)、router(页面的路由配置)、assets(页面的静态资源)都移到index文件夹下,并把main.js改为index.js,保证页面的入口js文件和模板文件的名称一致。 - 配置webpack:
在build/utils.js中添加两个方法:webpack多入口文件和多页面输出基础结构搭建 - 去vue的github看examples,其中重点需要写出来todomvc。vue-loader、vue-router2(路由)必看。vuex(状态管理了解即可)。vue周报(可订阅)
- 安装vue-cli
webpack
- nodejs中的一个工具。Webpack相当于是模块打包机:它能项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),将其转换和打包为合适的格式供浏览器使用。
- 下载webpack
npm install webpack -D
- 下载webpack-cli,用于在命令行中运行webpack
npm install webpack webpack-cli —-save-dev
- 打包
node_modules/.bin/webpack 入口文件路径 打包文件存放地址
,如node_modules/.bin/webpack src/app.js dist/bundle.js
- 更方便的打包方法只需要输入
webpack
(全局安装)或者node_modules/.bin/webpack
(本地安装)即可,方法如下:
//建立一个文件‘webpack.config.js’,文件中代码如下:
module.exports = {
entry: __dirname + "入口文件地址",
output: {
path: __dirname + "打包后的文件存放路径",
filename: "打包后输出文件的文件名"
}
}
//其中’__dirname’ 是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
* **更加方便的打包方法**输入`npm start`即可,方法如下:
//package.json中对scripts对象进行设置
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"start": "webpack" // scripts中的内容换成这个
},
"author": "he",
"license": "ISC",
"devDependencies": {
"webpack": "3.10.0"
}
}
* 一个比http-server好用的服务`anywhere`
* `npm i -g anywhere`装一个`anywhere`,作用是调试用,能直接打开页面,比`http-server`好的地方是会自动在浏览器打开,不用手动复制IP。但是当`anywhere`的时候`ctrl C`后就不能继续用这个IP了,不`ctrl C`又需要重新开一个命令行,解决办法,用`anywhere`的时候用如右命令即可`anywhere &`
* `package.json`之`entry`
* `entry` 参数可以接受字符串、对象、函数(也可以接受Promise,resolve()出想要的东西就可)
* command.js中设置`configFile.watch = true;`,可以动态的监视html内代码的改动
* `package.json`之`output`
const path =require('path');
let base = {
index: ./index.js
};
//webpack2 提供了多种配置方案
module.exports = {
output: {
//导出目录
path: path.resolve(__dirname, 'dist'),
//异步内容的导出目录。实际用的时候一般都会写成CDN
publicPath: "/output/dist/", // server-relative
//包规范格式
libraryTarget:'umd', //有umd,这个包的会兼容commonjs、amd等
library: "MyLibrary", //一个包即一个变量var MyLibrary
//文件名 一般用于异步加载
chunkFilename:'[chunkhash]_[name].js',
//hash位数
hashDigestLength:3,
//导出文件
//hash ==> webpack编译过程(如用hash多个文件的前三位hash值一样)
//chunkhash => webpack对每个文件的hash,每次文件改动hash值的改变
filename: '_[name][chunkhash].js'
}
};
* `package.json`之`module`
module.exports = {
module:{
//rules里面的东西是对文件进行预处理
//文件处理的一般路径是:entry-->rules-->webpack-->output
rules:[
// Conditions, Results and nested Rules.
{
//如果满足这个正则,再用use去处理
test: /\.jsx?$/,
//加这句的目的是,如果满足正则的内容是在node_modules目录下,则不需用use去处理它
exclude: [
'node_modules'
],
// flags to apply these rules, even if they are overridden (advanced option)
// loader: "babel-loader", 这种方式也可以用,用来兼容用的
// rule.use是数组形式和rule.loaders是它的别名
use:[{
loader: "babel-loader",
}]
},
]
}
};
* `package.json`之`resolve`
module.exports = {
//一个js引用别的js的时候可以用resolve。
//别名的好处是更加利于代码的维护
resolve:{
alias:{
//path.resolve()返回一个绝对路径
test:path.resolve(__dirname,'test/test/test.js')
}
},
module:{
rules:[
]
}
};
* `package.json`之`devtool `
module.exports = {
//能让我们更好的在原文件进行debugger
// https://webpack.js.org/configuration/devtool/#devtool
devtool:'source-map', //eval也可以用
// https://webpack.js.org/configuration/target/#target
target:"web"
};
* `package.json`之`loader`
module.exports = {
module:{
rules:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
use: {
loader:'babel-loader'
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use:{
loader:'css-loader',
options: {
sourceMap: true
}
}
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader',{
loader:'less-loader',
options: {
sourceMap: true
}
}]
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader',{
loader:'sass-loader',
options: {
sourceMap: true
}
}]
})
},
{
test: /\.(png|jpg|jpeg|gif|woff|woff2|ttf|eot|svg|swf)$/,
use: {
loader:'file-loader',
options:{
name:'[name]_[sha512:hash:base64:7].[ext]'
}
}
},
{
test: /\.html/,
use:{
loader:"html-loader",
options:{
minimize: false,
attrs:false
}
}
}
]
}
};
* `package.json`之`plugins`
module.exports = {
//Webpack lifecycle Webpack编译的不同阶段。plugins嵌入每个Webpack lifecycle去做一些个性化的行为
// webpack lifecycle :before-complitaion run done =>
plugins:[
new webpack.ProvidePlugin({
$: 'jquery'
}),
new WebpackNotifierPlugin({
title: 'Webpack 编译成功',
contentImage: path.resolve(process.cwd(), './img/avatar.jpeg'),
alwaysNotify: true
}),
new ExtractTextPlugin({
filename: "[name].css",
disable: false,
allChunks: true
}),
//如果用了CommonsChunkPlugin则必须先引用common后面的文件才会生效。所以要先引用common再引入index
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: Infinity
})
],
};
- 使用webpack时注意⚠️:
- webpack抛出警告如下警告:
WARNING in configuration
The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment
* 原因:Webpack 4新增了mode选项,它用来表示构建代码的两种默认情况:开发与产品。
* development:开发模式,webpack会默认配置常用于开发的参数,如输出运行时的错误信息。
* production:产品模式,webpack会默认配置常用语产品构建的餐宿,如压缩代码等。使用这两种模式的默认配置,用户可以实现零配置。
* mode选项可以在webpack.config.js配置文件里指定,也可以在webpack cli命令上指定:
//配置文件
mode: 'development'
mode: 'production'
//命令行
$ webpack —mode development
$ webpack —mode production
RAP、Mock.js、Vue.js、Webpack的更多相关文章
- Ember.js和Vue.js对比,哪个框架更优秀?
本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript最初是为Web应用程序创建的.但是随着前端技术的 ...
- Ember.js和Vue.js,哪种框架更适合你?
JavaScript最初是为Web应用程序而创建的.随着前端技术的发展,比起纯JavaScript 脚本,大多数开发人员更喜欢使用基于JavaScript的框架来开发Web应用,如Vue.React等 ...
- angular.js和vue.js中实现函数去抖(debounce)
问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...
- js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
- React.js vs Vue.js All in One
React.js vs Vue.js All in One React 与 Vue 区别对比 https://vuejs.org/v2/guide/comparison.html 1. 使用人数, 社 ...
- Vue.js 入门 --- vue.js 安装
本博文转载 https://blog.csdn.net/m0_37479246/article/details/78836686 Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据 ...
- Windows10安装node.js,vue.js以及创建第一个vue.js项目
[工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...
- js,vue.js一些方法的总结
push() 可向数组的末尾添加一个或多个元素 pop() 删除并返回数组的最后一个元素 shift()删除并返回数组的第一个元素 unshift() 添加并返回数组的第一个元素 sort()对数组的 ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- 98、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
随机推荐
- 关于node对文件的读取
设计: 通过终端git / cmd 获取用户输入路径,然后遍历路径下所有的文件,打印输出. 因为需要命令行交互,所以引入prompt库 (https://github.com/flatiron/pro ...
- 【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目
//V1.0 : 实现棋子的布局,画布及游戏场景的初始化 //V2.0 : 实现棋子的颜色改变 //V3.0 :实现所有象棋的走棋规则 //V4.0 : 实现所有棋子的吃子功能 完整的项目源码已经开源 ...
- js中window.location的用法
用window.location处理解析当前页面URL window.location 对象所包含的属性 属性 描述 hash 从井号(#)开始的URL(锚点) host 主机名和当前URL的端口号 ...
- QT5.5移植全攻略【转】
一.编译1.到www.qt.io下载源码,qt-everywhere-opensource-src-5.5.0 2.设置编译器或者说平台.编译器是通过xplatform参数指定的,xplatform后 ...
- lunix下的redis数据库操作——hash(哈希)
哈希,形如:key : (field : value) 创建:(可以理解为users用户,name为xxx) hset users name xxx 查看: hget users name # &qu ...
- 洛谷 P3178 BZOJ 4034 [HAOI2015]树上操作
题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种:操作 1 :把某个节点 x 的点权增加 a .操作 2 :把某个节点 x 为根的子树中所有点的点权都增加 ...
- 【ACM】poj_1000_A+B_201307271012
A+B ProblemTime Limit: 1000MS Memory Limit: 10000K Total Submissions: 296408 Accepted: 162241 Desc ...
- POJ 1679
求一次最小成树,求一次小生成树,若相等,则不唯一.否则,唯一. #include <iostream> #include <cstdio> #include <cstri ...
- 64位win7中使用vs2013为python3.4安装pycrypto-2.6.1插件报Unable to find vcvarsall.bat异常解决方式
问题描写叙述: 64位win7中使用vs2013为python3.4.2安装pycrypto-2.6.1插件报Unable to find vcvarsall.bat. 问题分析: 1.源代码分析,查 ...
- sikuli类、函数使用参考java doc
sikuli类.函数使用可以参考java dochttp://doc.sikuli.org/javadoc/ http://stackoverflow.com/questions/9568612/s ...