为三级分类配置网关和路由并进行路径重写
上一章我们完成了三级分类输出的功能,现在我们为分类功能配置网关和路由,并进行路径重写。首先需要启动两个使用的人人开源项目(renren-fast在IDEA中运行,renren-fast-vue在vscode中npm run dev),之后进入到开源项目的前端页面:
在系统管理的菜单管理中节能点击新增:
之后在renren-fast-vue的\src\views\modules\目录下创建一个product的文件夹,用来制作三级分类的增删改查。新建category.vue文件,使用之前创建的vue代码片段,之后使用elementUI官网推荐的树结构:https://element.eleme.cn/#/zh-CN/component/tree
<!-- -->
<template>
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成(可以访问当前this实例)
created() {},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<stylescoped>
</style>
这是一个基本的数型结构,需要把数据替换成为数据库中的产品分类数据。调用url的方法可以参考role.vue:
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/sys/role/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'roleName': this.dataForm.roleName
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
然后先写基础的调用url请求:
<!-- -->
<template>
<div class></div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
getMenus() {
this.$http({
url: this.$http.adornUrl("/product/category/list/tree"),
method: "get"
}).then(data=>{
console.log("成功获取到菜单数据...",data)
})
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
this.getMenus();
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped>
</style>
此时访问会出现404错误:
这是因为访问的连接是以http://localhost:8080/renren-fast开头的,所以访问不到。需要对其进行修改,统一改为给网关发送请求。在static\config\index.js文件中,将http://localhost:8080/renren-fast;
修改为http://localhost:88/api;
添加renren-fast到Nacos
由于把全部的请求都转给了gateway网关,会造成renren-fast收不到前端renren-fast-vue的内容,所以需要把renren-fast添加进Nacos中收取对应的请求。现在renren-fast的pom文件中添加相关依赖:
<dependency>
<groupId>com.lastingwar.mall</groupId>
<artifactId>mall-common</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.5</version>
</dependency>
之后在renren-fast的application.yml配置文件中添加配置:
spring
cloud:
nacos:
discovery:
server-addr: 127.0.0.1:8848
application:
name: renren-fast
最后在主程序添加注释:@EnableDiscoveryClient
。
运行程序,来到Nacos页面就能看到renren-fast的服务:
之后在微服务的网关服务中添加新的路由规则mall-gateway/src/main/resources/application.yml:
spring:
cloud:
gateway:
routes:
# - id: baidu_route
# uri: https://www.baidu.com
# predicates:
# - Query=url,baidu
#
# - id: qq_route
# uri: https://www.qq.com
# predicates:
# - Query=url,qq
- id: admin_route //由于没有别的服务,先把所以的请求发给renrenfast
uri: lb://renren-fast //lb表示负载均衡,发给renren-fast微服务
predicates:
- Path=/api/** //表示/API的所以请求
filters: //使用过滤器来路径重写
- RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}
此时来到renren的登录界面,可以加载验证码,但是登录会因为跨域请求被拒绝。跨域是指浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全策略。