步骤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>
-
8765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
