Enrutamiento de puerta de enlace de configuración de clasificación de tres niveles y reescritura de ruta
Configurar gulimall-product en nacos
Primero, la dependencia común se ha agregado a la dependencia pom,
por lo que solo necesita modificar application.yml
spring:
application:
name: gulimall-product
cloud:
nacos:
discovery:
server-addr: 123.57.234.28:8848
Iniciar clase agregar anotación de registro de servicio @EnableDiscoveryClient
@EnableDiscoveryClient
@MapperScan("com.xfwang.gulimall.product.dao")
@SpringBootApplication
public class GulimallProductApplication {
Solo reinicia
Configurar renren-fast a nacos
Este otro es consistente con el anterior, pero más instrucciones pegan directamente el código
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>
Comenzar la clase
@EnableDiscoveryClient
@SpringBootApplication
public class RenrenApplication {
Agregar menú del sistema de gestión en segundo plano
Configurar menú de fondo
Inicie el proyecto renren-fast-vue, el proyecto renren-fast dependiente ya se está ejecutando en segundo plano
Iniciar sesión, admin / admin
Agregue un catálogo de administración de productos en la administración del sistema.
La URL de configuración del menú de la categoría recientemente agregada mantenimiento es producto / categoría
Componentes de escritura
Escriba el componente de página
src / vistas / módulos /
carpeta de nuevo producto en el proyecto vue
Crear archivo category.vue
Busque el componente del menú de árbol en element-ui y cópielo directamente. Puedes ver los resultados preliminares
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>
Vuelva a escribir la ruta de acceso y configure el acceso de enrutamiento
Si desea recuperar datos del fondo, no debe escribirlos hasta la muerte
Luego debe reescribir la ruta
category.vue para eliminar datos [] y
agregar una llamada al método de fondo
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)
})
},
Configurar la puerta de enlace de enrutamiento
static / config / index.js
Modifique la ruta de acceso a la puerta de enlace, y la puerta de enlace llamará uniformemente a la
interfaz api para solicitar la dirección
/**
* 开发环境
*/
;(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;
})();
Modificar la puerta de enlace en segundo plano para agregar reglas de enrutamiento
apllication.yml aumentado
- 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找
Reinicie el proyecto vue y podrá ver que la interfaz para acceder al código de verificación se ha convertido
http://localhost:8070/api/captcha.jpg?uuid=0c95e313-f1c3-4a25-867f-fd28f6088f68
El código de verificación se cargó correctamente, pero se informa el error de inicio de sesión. Aquí están involucrados problemas entre dominios, que se resolverán en la siguiente sección.