三级分类——配置网关路由和路径重写
配置gulimall-product到nacos
首先pom依赖已经添加了common依赖
所以只需要修改application.yml
spring:
application:
name: gulimall-product
cloud:
nacos:
discovery:
server-addr: 123.57.234.28:8848
启动类添加服务注册注解@EnableDiscoveryClient
@EnableDiscoveryClient
@MapperScan("com.xfwang.gulimall.product.dao")
@SpringBootApplication
public class GulimallProductApplication {
重启即可
配置renren-fast到nacos
这个其他和上面是一致的，不过多说明直接贴代码
yml
spring:
application:
name: renren-fast
cloud:
nacos:
discovery:
server-addr: 123.57.234.28:8848
pom.xml
<dependency>
<groupId>com.xfwang.gulimall</groupId>
<artifactId>gulimall-common</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
启动类
@EnableDiscoveryClient
@SpringBootApplication
public class RenrenApplication {
添加后台管理系统菜单
配置后台菜单
启动renren-fast-vue项目，依赖的renren-fast项目已经在后台运行了
登录，admin/admin
在系统管理中新增 商品管理的目录
新增 分类维护的菜单 配置url为product/category
编写组件
在vue的项目中编写页面组件
src/views/modules/
新建product文件夹
创建category.vue文件
在element-ui中找到树形菜单组件，直接复制。可以看到初步效果
category.vue
<!-- -->
<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: {
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
},
beforeCreate() {
}, //生命周期 - 创建之前
beforeMount() {
}, //生命周期 - 挂载之前
beforeUpdate() {
}, //生命周期 - 更新之前
updated() {
}, //生命周期 - 更新之后
beforeDestroy() {
}, //生命周期 - 销毁之前
destroyed() {
}, //生命周期 - 销毁完成
activated() {
}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>
重写访问路径并配置路由访问
数据想要重后台获取肯定不能写死
那就要重写路径
category.vue删除data[]
新增调用后台方法
getDataList()
export default {
//import引入的组件需要注入到对象中才能使用
components: {
},
data() {
return {
data: [ ],
defaultProps: {
children: "children",
label: "label",
},
};
},
methods: {
handleNodeClick(data) {
console.log(data);
},
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/product/category/list/tree'),
method: 'get',
}).then(({
data}) => {
console.log(data)
})
},
配置路由网关
static/config/index.js
修改访问路径到gateway网关由网关统一调用
api接口请求地址
/**
* 开发环境
*/
;(function () {
window.SITE_CONFIG = {
};
// api接口请求地址
window.SITE_CONFIG['baseUrl'] = 'http://localhost:8070/api';
// cdn地址 = 域名 + 版本号
window.SITE_CONFIG['domain'] = './'; // 域名
window.SITE_CONFIG['version'] = ''; // 版本号(年月日时分)
window.SITE_CONFIG['cdnUrl'] = window.SITE_CONFIG.domain + window.SITE_CONFIG.version;
})();
修改后台gateway网关增加路由规则
apllication.yml增加
- id: admin_route
uri: lb://renren-fast # 路由给renren-fast
predicates: # 什么情况下路由给它
- Path=/api/** # 默认前端项目都带上api前缀，就是我们前面题的localhost:88/api
filters:
- RewritePath=/api/(?<segment>.*),/renren-fast/$\{
segment} # 把/api/* 改变成 /renren-fast/*
# fast找
重启vue项目可以看到访问验证码的接口变成了
http://localhost:8070/api/captcha.jpg?uuid=0c95e313-f1c3-4a25-867f-fd28f6088f68
验证码正确加载，但是登陆报错，这里涉及到跨域问题，下一节解决。