3レベルの分類-ゲートウェイルーティングとパス書き換えを構成します
gulimall-productをnacosに構成します
まず、共通の依存関係がpom依存関係に追加されているため、
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は製品/カテゴリです。
コンポーネントの作成
ページコンポーネント
src / views / modules /
new productfolderをvueプロジェクトに書き込み
ます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を構成します
ゲートウェイへのアクセスパスを変更すると、ゲートウェイは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;
})();
バックグラウンドゲートウェイを変更して、ルーティングルールを追加します
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
確認コードは正しく読み込まれますが、ログインエラーが報告されます。クロスドメインの問題がここに含まれます。これは次のセクションで解決されます。