步骤1.搭建测试项目
准备工作:下载node.js 的npm 自行下载
+ npm install -g cnpm --registry=https://registry.npm.taobao.org //npm的镜像 + npm install -g @vue/cli //安装全局脚手架 //-------------------------------------------------------------- // 自己新建一个文件夹,并在文件夹中打开 powershell + vue create mypro(文件名可随意换) //创建并下载一个文件夹 + npm install vue-router --save //启路由的插件 --save 代表局部 + cd mypro + npm run serve //运行 + 用local 地址打开
1.1命令:
vue create mock-demo //创建一个 mock-demo 的文件夹
选择vue 3
cd mock-demo
步骤1.2 安装依赖
//使用axios发送 ajax cnpm install axios --save //使用mockjs产生随机数据 cnpm install mockjs --save-dev //使用json5解决json文件,无法添加注释问题 cnpm install json5 --save-dev
步骤2.学习MOCKJS
新建mock文件夹,新建testMockjs.js
const Mock = require('mockjs');//mockjs 导入依赖模块 var id = Mock.mock('@id')//得到随机的id,字符串 console.log(Mock.mock('@id'), typeof id) var obj = Mock.mock({ id: "@id()",//得到随机的id,对象 username: "@cname()",//随机生成中文名字 date: "@date()",//随机生成日期 avatar: "@image('200x200','red','#fff','avatar')",//生成图片,参数:size, background, foreground, text description: "@paragraph()",//描述 ip: "@ip()",//IP地址 email: "@email()"//email }) console.log(obj)
步骤3.学习JSON5
json文件,中如果说存在注释文件和编辑器都会报错,我们采用json5格式来让json格式可以存在注释
报错截图:
步骤3.1 编辑器安装JSON5扩展
步骤3.2 引入JSON5库来解析JSON5格式
在mock文件夹下,新建testJSON5.js
const fs = require('fs'); const path = require('path'); const JSON5 = require('json5'); //读取json文件 function getJsonFile(filePath) { //读取指定json文件 var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8'); //解析并返回 return JSON5.parse(json); } var json = getJsonFile('./userInfo.json5'); console.log('json', json)
步骤4.MOCK和VUE-CLI结合
步骤4.1 新建INDEX.JS
在mock文件夹下,新建index.js
const fs = require('fs'); const path = require('path'); const Mock = require('mockjs');//mockjs 导入依赖模块 const JSON5 = require('json5'); //读取json文件 function getJsonFile(filePath) { //读取指定json文件 var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8'); //解析并返回 return JSON5.parse(json); } //返回一个函数 module.exports = function(app){ //监听http请求 app.get('/user/userinfo', function (rep, res) { //每次响应请求时读取mock data的json文件 //getJsonFile方法定义了如何读取json文件并解析成数据对象 var json = getJsonFile('./userInfo.json5'); //将json传入 Mock.mock 方法中,生成的数据返回给浏览器 res.json(Mock.mock(json)); }); }
步骤4.2 新建VUE.CONFIG.JS
在项目根目录下,新建vue.config.js
module.exports = { devServer: { before: require('./mock/index.js')//引入mock/index.js } }
步骤4.3 发送AJAX请求
在src\components\HelloWorld.vue中发送aja请求
import axios from 'axios' export default { name: 'HelloWorld', props: { msg: String }, mounted(){ axios.get('/user/userinfo') .then(res=>{ console.log(res); }) .catch(err=>{ console.error(err); }) } }
步骤5.移除MOCK
在项目根路径新建.env.development
添加内容
MOCK=true
完善mock\index.js
module.exports = function(app){ if(process.env.MOCK == 'true'){ //监听http请求 app.get('/user/userinfo', function (rep, res) { //每次响应请求时读取mock data的json文件 //getJsonFile方法定义了如何读取json文件并解析成数据对象 var json = getJsonFile('./userInfo.json5'); //将json传入 Mock.mock 方法中,生成的数据返回给浏览器 res.json(Mock.mock(json)); }); } }
应用:增删改查
案例接口文档
获取任务列表
-
请求地址
-
/todo/task
-
-
请求方式
-
GET
-
-
返回值
[ { "completed": false, "id": "98989898980jjjjkl", "title": "吃饭" }, { "completed": true, "id": "98989898980jjjjkl", "title": "睡觉" } ]
添加任务
-
请求地址
-
/todo/addTask
-
-
请求方式
-
POST
-
-
参数
参数名 必选 类型 说明 title 是 String 任务名称 -
返回值
{ "completed": false, "id": "98989898980jjjjkl", "title": "吃饭" }
删除任务
-
请求地址
-
/todo/deleteTask
-
-
请求方式
-
GET
-
-
参数
参数名 必选 类型 说明 id 是 String 任务id
修改任务
-
请求地址
-
todo/modifyTask
-
-
请求方式
-
POST
-
-
参数
参数名 必选 类型 说明 id 是 String 任务id title 是 String 任务名称 completed 是 String 任务状态
第一步,在index.js中加入
-
-
if (MOCK == true) {
let json = getJsonFile("./userTask.json5");
Mock.mock("/todo/task", "get", function (options) {
let a = [];
for (let i = 0; i < 5; i++) {
let o = Mock.mock({
id: "@id()",
title: '@string("lower",5)',
completed: "@boolean()",
});
a.push(o);
}
return a;
});
Mock.mock("/todo/addTask", "post", function (options) {
let o = JSON.parse(options.body);
return Mock.mock({
id: "@id()",
title: o.title,
completed: false,
});
});
// /^\/todo\/deleteTask/ 正则表达式
Mock.mock(/^\/todo\/deleteTask/, "get", function (options) {
let o = JSON.parse(options.body);
return o;
});
Mock.mock('/todo/modifyTask', "post", function (options) {
let o = JSON.parse(options.body);
return o;
});
}
-
HTML文件引入
<body>
<script src="js/mock-min.js"></script>
<script>
MOCK = "true"
</script>
<script src="index.js"></script>
</body>
feign
1.pom文件添加依赖
<dependency> <groupId>io.github.openfeign</groupId> <artifactId>feign-core</artifactId> <version>11.0</version> </dependency> <dependency> <groupId>com.netflix.feign</groupId> <artifactId>feign-jackson</artifactId> <version>8.18.0</version> </dependency>
2 创建feign的接口文件
import feign.Headers; import feign.RequestLine; public interface UserFeign { // @Headers({"Content-Type: application/json","Accept: application/json"}) @RequestLine("GET /user/userinfo") public User getUser(); }
通过@RequestLine
指定HTTP协议及URL地址
3.配置类
可以对feign的请求头进行统一定制 ,或者使用 @Headers()注解
import feign.RequestInterceptor; import feign.RequestTemplate; public class UserRequestHeader implements RequestInterceptor { @Override public void apply(RequestTemplate requestTemplate) { requestTemplate.header("Content-Type","application/json"); } }
import feign.Feign; import feign.Request; import feign.Retryer; import feign.jackson.JacksonDecoder; import feign.jackson.JacksonEncoder; import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annotation.Bean; import org.springframework.stereotype.Component; @Component public class ApiRegisterConfig { @Value("http://127.0.0.1:8080") private String marketBaseUrl; @Bean public UserFeign userFeign() { return Feign.builder().encoder(new JacksonEncoder()) .decoder(new JacksonDecoder()) .requestInterceptor(new UserRequestHeader()) .options(new Request.Options(1000, 3500)) .retryer(new Retryer.Default(5000, 5000, 3)) .target(UserFeign.class, marketBaseUrl); // encoder指定对象编码方式,decoder指定对象解码方式。这里用的是基于Jackson的编、解码方式,requestInterceptor请求头信息 // options方法指定连接超时时长及响应超时时长,retryer方法指定重试策略,target方法绑定接口与服务端地址。 // 返回类型为绑定的接口类型。 } }
遇到的报错及解决方案
-
-
Caused by: java.lang.IllegalStateException: No Feign Client for loadBalancing defined.
-
解决:修改pom文件
<dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId> <exclusions> <exclusion> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-netflix-ribbon</artifactId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-loadbalancer</artifactId> </dependency>
-