1.启动renren-fast
2. 启动renren-fast-vue项目
在VSCode打开renren-fast-vue文件夹,新建终端并输入命令
npm run dev
3.编辑renren后台管理系统页面
1、登录 http://localhost:8001,登录账号密码均为 admin
2、建立一级目录商品系统以及二级菜单分类维护
3、在VSCode下的 /src/views/modules 目录下创建目录product,并在product目录下创建文件 category.vue
<template>
<div class=""></div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
return {
data: [],
defaultProps: {
children: "children",
label: "label",
},
};
},
methods: {
handleNodeClick(data) {
console.log(data);
},
getMenus() {
this.$http({
url: this.$http.adornUrl("/product/category/list/tree"),
method: "get",
}).then(data =>{
console.log("成功获取到菜单数据...",data)
});
},
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//生命周期 - 创建完成(可以访问当前this实例)
created() {},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
</style>
4、在 static/config/index.js 文件中修改地址为 http://localhost:88/api
5、将renren-fast注册到nacos服务注册中心
5.1 导入依赖
<dependency>
<groupId>com.atguigu</groupId>
<artifactId>gulimall-common</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
5.2 在application.yml 中加入如下配置
spring:
application:
name: renren-fast
cloud:
nacos:
discovery:
server-addr: 127.0.0.1:8848
5.3 开启服务注册权限,在启动类上加上如下注解
6、配置网关的路由规则
在gulimall-gateway项目的application.yml文件中加入如下配置
spring:
cloud:
gateway:
routes:
- id: admin_route
uri: lb://renren-fast # 网关负载均衡的发送到renren-fast
predicates:
- Path=/api/**
filters:
- RewritePath=/api/(?<segment>.*),/renren- fast/$\{segment} #实现路径重写
## 所有前端项目带 /api
## http://localhost:88/api/captcha.jpg
## http://localhost:8080/renren-fast/captcha.jpg
7、解决跨域问题
7.1 注销掉renren-fast项目自带的跨域配置
7.2 在gulimall-gateway项目下的gateway目录下新建config目录,并新建GulimallCorsConfig文件
注意:包别导错了
package com.atguigu.gulimall.gateway.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
@Configuration
public class GulimallCorsConfig {
@Bean
public CorsWebFilter corsWebFilter(){
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
//1.配置跨域
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.setAllowCredentials(true);
source.registerCorsConfiguration("/**",corsConfiguration);
return new CorsWebFilter(source);
}
}
8、重启gulimall-gateway、renren-fast项目,重新登录即可