最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了。

所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口。

  1. 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
  1. RAP

    • RAP 是一个 GUI (可视化)API管理工具,通过分析接口结构,动态生成模拟数据,校验真实接口正确性, 围绕接口定义,通过一系列自动化工具提升协作效率。在 RAP 中,可以定义接口的 URL、请求 & 响应细节格式等等。还提供 MOCK 服务、测试服务等工具,帮助开发团队提高开发效率。RAP使用手册
    • API是什么?

      即Application Programming Interface,应用程序编程接口
    • API管理工具是什么?

      在前后端分离的开发模式下,为了方便前后端之间接口的展现和调用,提高开发效率,为了让测试人员更好的根据接口文档进行测试,通常需要定义一份API接口文档来规范接口的具体信息,如一个请求的地址、参数、参数名称及类型含义等等。

      API管理工具可以帮助我们管理这些接口,现在常用 API 管理工具有 Swagger、RAP、NEI、eolinker、EasyAPI、SosoApi、Postman 等。
  2. 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
}
]
})
  1. Vue.js

    Vue.js介绍

    • 安装vue-clinpm 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周报(可订阅)
  2. 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
})
],
};
  1. 使用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的更多相关文章

  1. Ember.js和Vue.js对比,哪个框架更优秀?

    本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript最初是为Web应用程序创建的.但是随着前端技术的 ...

  2. Ember.js和Vue.js,哪种框架更适合你?

    JavaScript最初是为Web应用程序而创建的.随着前端技术的发展,比起纯JavaScript 脚本,大多数开发人员更喜欢使用基于JavaScript的框架来开发Web应用,如Vue.React等 ...

  3. angular.js和vue.js中实现函数去抖(debounce)

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...

  4. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  5. 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. 使用人数, 社 ...

  6. Vue.js 入门 --- vue.js 安装

    本博文转载  https://blog.csdn.net/m0_37479246/article/details/78836686 Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据 ...

  7. Windows10安装node.js,vue.js以及创建第一个vue.js项目

    [工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...

  8. js,vue.js一些方法的总结

    push() 可向数组的末尾添加一个或多个元素 pop() 删除并返回数组的最后一个元素 shift()删除并返回数组的第一个元素 unshift() 添加并返回数组的第一个元素 sort()对数组的 ...

  9. 基于 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 时代,包括其插件在需要时就引 ...

  10. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

随机推荐

  1. (转)Openlayers 2.X加载天地图

    http://blog.csdn.net/gisshixisheng/article/details/44621923 概述: 在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何 ...

  2. JSP状态管理_1_Cookie

    http协议的无状态性:当浏览器发送请求飞服务器时,服务器相应客户端请求:但当同一个浏览器再次发送请求给浏览器时,服务器并不知道它就是刚才那个客户端. 保存用户状态的两大机制:Session,Cook ...

  3. java 基础回顾1

    整理----加自己理解------网上参考----- java封装理念 一 概念: 隐藏对象的属性和实现细节,仅供对外提供公共访问方式. 二 好处 1)  将变量隔离 2)  便于使用 3)  提高重 ...

  4. Memcached 之内存管理与删除机制

    一.内存的碎片化 如果用c语言直接 malloc,free 来向操作系统申请和释放内存时,在不断的申请和释放过程中,形成了一些很小的内存片断,无法再利用,这种空闲,但无法利用内存的现象称为内存的碎片化 ...

  5. RN-第三方之react-native-pull 下拉刷新、上拉加载

    有一个很好的下拉刷新.上拉加载库:react-native-pull地址:https://github.com/greatbsky/react-native-pull-demo 使用 import { ...

  6. 团体程序设计天梯赛-练习集-L1-041. 寻找250

    L1-041. 寻找250 对方不想和你说话,并向你扔了一串数…… 而你必须从这一串数字中找到“250”这个高大上的感人数字. 输入格式: 输入在一行中给出不知道多少个绝对值不超过1000的整数,其中 ...

  7. shell脚本操作mysql数据库,使用mysql的-e参数可以执行各种sql的(创建,删除,增,删,改、查)等各种操作

    mysql  -hhostname -Pport -uusername -ppassword  -e  相关mysql的sql语句,不用在mysql的提示符下运行mysql,即可以在shell中操作m ...

  8. Linux内核tracepoints

    Linux内核tracepoints 简单介绍 内核中的每个tracepoint提供一个钩子来调用probe函数. 一个tracepoint可以打开或关闭.打开时,probe函数关联到tracepoi ...

  9. Codeforces Round #547 (Div. 3) E. Superhero Battle

    E. Superhero Battle A superhero fights with a monster. The battle consists of rounds, each of which ...

  10. 继续聊WPF——如何获取ListView中选中的项

    在WPF中获Listview中选中的项,与WinForm里面有着很大的区别,要亲身去研究一下在WPF中如果处理,其实也不难,来,下面我们一起来通过一个简单的示例来感悟一下吧. 第一步就是建立一个WPF ...