json server

如何在Vue中使用Mockjs模拟数据的增删查改

混江龙づ霸主 提交于 2020-12-24 08:24:25
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示。在本地时,json server很好使用,但一旦放在github上就实现不了我们期望的效果了;后来发现 mockjs 这个插件就满足这一需求。研究了半天,感觉 mockjs 模拟数据更强大,通过随机数据,可以模拟各种场景,下面一步步的来实现在 vue-cli创建的项目中添加一条用户信息的数据模拟接口: 安装 mockjs 在vue项目安装mockjs npm install mockjs --save-dev 在项目 src 目录中创建一个 mock.js 文件 在 main.js 入口文件中引入刚刚创建的mock 文件 import './mock.js' 创建模拟数据 在 mock.js 中创建一条用户信息模拟数据 import Mock from 'mockjs' const Random = Mock.Random // 设置全局延时,没有延时的话,有时候会检测不到数据变化 Mock.setup({ timeout: '300-600' }) // 创建一个数组用来接收模拟的数据 const mocklist = [] const count = 5; for (let i = 0; i < count; i++) { mocklist

使用json-server与Mockjs搭建模拟服务

雨燕双飞 提交于 2020-08-12 05:04:56
为什么使用 在项目开发中,常常需要边写前端页面边写后端接口,但是后端接口服务往往是滞后于前端开发的,或者是不能及时提供的。出于前端开发的迅速和便捷去考虑,我们可以根据后端接口数据结构去模拟(mock)数据从而实现前端的独立开发。 JsonServer 主要的作用就是搭建本地的数据接口,创建json文件,便于调试调用 Mockjs 主要的作用就是生成随机数据,支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等 如何使用 以下操作需要node.js环境 1.创建文件夹 选择自己喜欢的位置创建一个文件夹,比如E:/mock 2.安装json-server 进入E:/mock npm install json-server -g 安装完执行 json-server -h,若安装成功则会显示选项 Options: --config, -c Path to config file [default: "json-server.json"] --port, -p Set port [default: 3000] --host, -H Set host [default: "localhost"] --watch, -w Watch file(s) [boolean] --routes, -r Path to routes file --middlewares, -m Paths

json-server

泄露秘密 提交于 2020-08-08 04:26:01
1. json-server简介 1.Json-server的作用:搭建本地的数据接口,创建json文件,便于调试调用 2.postman:接口测试工具 3.JSONPlaceholder:一个用于快速搭建RESTful API的接口 2. json-server安装 1. 全局安装 npm/cnpm install -g json-server 2.初始化一个json-server文件(先创建一个文件夹[不能命名为json-server]) 命令行进入文件夹,输入命令cnpm init,文件夹中会出现package.json文件 3.在文件夹内安装json-server cnpm install json-server --save 4.修改package.json文件中script内容 "scripts": { "json:server[自己命名,后面run的时候要注意一致]": "json-server --watch db.json" }, 5.创建上面的db.json文件,添加内容(json必须是标准的json格式,即要用双引号,不能用单引号) 6.启动 cnpm run json:server 7.post、delete、petch等请求需要借助postman工具 3. get请求 4. post请求 1.设置Header请求头 2.设置参数Body 5.

Docker是什么?可以用Docker做什么

孤者浪人 提交于 2020-05-02 03:30:28
其实可以把Docker理解成一个专门为应用程序与执行环境的轻型虚拟机。 Docker的思想来自于集装箱,集装箱解决了什么问题?在一艘大船上,可以把货物规整的摆放起来。并且各种各样的货物被集装箱标准化了,集装箱和集装箱之间不会互相影响。那么我就不需要专门运送水果的船和专门运送化学品的船了。只要这些货物在集装箱里封装的好好的,那我就可以用一艘大船把他们都运走。 docker就是类似的理念。现在都流行云计算了,云计算就好比大货轮。docker就是集装箱。 1.不同的应用程序可能会有不同的应用环境,比如.net开发的网站和php开发的网站依赖的软件就不一样,如果把他们依赖的软件都安装在一个服务器上就要调试很久,而且很麻烦,还会造成一些冲突。比如IIS和Apache访问端口冲突。这个时候你就要隔离.net开发的网站和php开发的网站。常规来讲,我们可以在服务器上创建不同的虚拟机在不同的虚拟机上放置不同的应用,但是虚拟机开销比较高。docker可以实现虚拟机隔离应用环境的功能,并且开销比虚拟机小,小就意味着省钱了。 2.你开发软件的时候用的是Ubuntu,但是运维管理的都是centos,运维在把你的软件从开发环境转移到生产环境的时候就会遇到一些Ubuntu转centos的问题,比如:有个特殊版本的数据库,只有Ubuntu支持,centos不支持,在转移的过程当中运维就得想办法解决这样的问题

Vue数据请求 axios vs fetch

烈酒焚心 提交于 2020-05-02 00:28:08
Vue数据请求 数据请求在前端开发中的使用有两种形式 使用原生javascript提供的数据请求 ajax( 四部曲,一般需要我们结合Promise去封装,使用不是很便利,但是效率很高 ) fetch( 本身结合了Promise,并且已经做好了封装,可以直接使用 ) 使用格式: 使用别人封装好的第三方库 目前最流行的,使用率最高的是 axios vue中我们最常使用的 vue 1.x 的版本提供了一个封装库 vue-resource , 但是到了vue 2.x版本之后,这个就弃用了 vue-resource使用方法和 axios 相似度在 95% vue-resouce有jsonp方法,但是axios是没有的 vue2.x版本我们最用使用的数据请求是 axios 和 fetch 数据请求的类型 get post head put delete option … axios vs fetch axios得到的结果会进行一层封装,而fetch会直接得到结果 举例: axios {data : 3 , status : 200 , statusText : "OK" , headers : {… } , config : {… } , … } config : {adapter : ƒ , transformRequest : {… } , transformResponse : {…

vue2.0+Element-ui实战案例

荒凉一梦 提交于 2020-04-29 02:59:28
前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例,后端数据接口,会使用json-server快速搭建一个本地的服务,方便对数据的增删改查, 利用以上技术我们会搭建一个vue案例,效果展示图: 以上就是我们最终要实现的全部效果,我会一块一块的讲解,关于脚手架安装和json-server搭建,在本次博客中,不会讲解,如果想看的话,在小编的博客中,也有讲解关于脚手架搭建和json-server搭建,如果想学习的话,可以看一下。 1.项目结构展示 左边第一个是前端项目结构,第二个为json-server服务端 2.页面搭建 在本次案例中,小编采用Element-ui快速搭建前端页面,以提高效率。如果不了解的话,可以去官网看一下   2.1安装element-ui  通过npm install element-ui -S 安装前端ul框架,安装完之后,并在main.js引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)   2.2页面布局UserInfo.vue   直接通过element-ui中table布局,把整体建构页面布局完成,