• 【Element-UI】Mock.js，案例首页导航、左侧菜单

    一.Mock.js

    1、什么是Mock.js

    Mock.js是一个用于生成模拟数据的JavaScript库。它能够模拟后端API接口，用于前端开发时进行接口调试和测试提高自动化测试效率。使用Mock.js可以快速创建虚拟的数据，并且可以设置数据的类型、格式和规则，从而模拟真实的数据响应。Mock.js支持生成随机数据、拦截Ajax请求以返回模拟数据、支持RESTful API风格等功能，能够提高前端开发效率，并且减少对后端接口的依赖。


    数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
    拦截Ajax请求：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
     

    更多内容请查看Mock.js 官网

     2、安装配置

    1、安装

    在你的项目的路径CMD窗口下载Mock.js。

    npm i mockjs -D

    -D表示只在开发环境中使用

    在我们的package.json里面可以看到我们下载的mock.js


    2、引入  

    为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config目录中的dev.env.js和prod.env.js做一个配置。

    dev.env.js
    1. 'use strict'
    2. const merge = require('webpack-merge')
    3. const prodEnv = require('./prod.env')
    4.  
    5. module.exports = merge(prodEnv, {
    6.   NODE_ENV: '"development"',
    7.   MOCK: 'true'
    8. })

    prod.env.js

    1. 'use strict'
    2. module.exports = {
    3.   NODE_ENV: '"production"',
    4.   MOCK: 'false'
    5. }

    最后我们在main.js里面导入

    1. // The Vue build version to load with the `import` command
    2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    3. import Vue from 'vue'
    4. //开发环境下才会引入mockjs
    5. process.env.MOCK && require('@/mock')
    6. // 新添加1
    7. import ElementUI from 'element-ui'
    8. // 新添加2，避免后期打包样式不同，要放在import App from './App';之前
    9. import 'element-ui/lib/theme-chalk/index.css'
    10.  
    11. import App from './App'
    12. import router from './router'
    13.  
    14. // 新添加3----实例进行一个挂载
    15. Vue.use(ElementUI)
    16. Vue.config.productionTip = false
    17.  
    18. import axios from '@/api/http'
    19. import VueAxios from 'vue-axios'
    20.  
    21. Vue.use(VueAxios, axios)
    22.  
    23. /* eslint-disable no-new */
    24. new Vue({
    25.   el: '#app',
    26.   router,
    27.   components: {App},
    28.   template: ''
    29. })

    2、Mock.js的使用

    1、定义测试数据文件

    为每个*.vue定义单独的xxx-mock.js文件，并在其中添加自定义的json数据，还可以通过mockjs的模块生成随机数据信息，动态测试ajax请求效果。

    创建src/mock/json目录，定义登录测试数据文件login-mock.js：

    1. // const loginInfo = {
    2. // 	code: -1,
    3. // 	message: '密码错误'
    4. // }
    5.  
    6. //使用mockjs的模板生成随机数据
    7. const loginInfo = {
    8. 	'code|-1-0': 0,
    9. 	'message|3-10': 'msg'
    10. }
    11. export default loginInfo;
    2、mock拦截ajax请求

    在src/mock目录下创建index.js，定义拦截路由配置：

    1.  
    2. import Mock from 'mockjs' //引入mockjs，npm已安装
    3. import action from '@/api/action' //引入请求地址
    4.  
    5. //全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
    6. Mock.setup({
    7. 	// timeout: 400  //延时400s请求到数据
    8. 	timeout: 200 - 400 //延时200-400s请求到数据
    9. })
    10.  
    11. //引登陆的测试数据，并添加至mockjs
    12. import loginInfo from '@/mock/json/login-mock.js'
    13. let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
    14. Mock.mock(s1, "post", loginInfo)
    15. // Mock.mock(s1, /post|get/i, loginInfo)
    3、模拟测试

    使用登录页面模拟测试
     

    1. <template>
    2.   <div class="Login">
    3.     <el-form class="login-container">
    4.       <h1 class="title">用户登录</h1>
    5.       <el-form-item label="">
    6.         <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
    7.       </el-form-item>
    8.       <el-form-item label="">
    9.         <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
    10.       </el-form-item>
    11.       <el-form-item>
    12.         <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
    13.       </el-form-item>
    14.       <el-row style="text-align: center;margin-top:-10px">
    15.         <el-link type="primary">忘记密码</el-link>
    16.         <el-link type="primary" @click="gotoRegister()">用户注册</el-link>
    17.       </el-row>
    18.     </el-form>
    19.   </div>
    20. </template>
    21. <script>
    22.  
    23. export default {
    24.   name: "Login",
    25.   data() {
    26.     return {
    27.       username: "",
    28.       password: ""
    29.     }
    30.   },
    31.   methods: {
    32.     gotoRegister() {
    33.       this.$router.push("/Register");
    34.     },
    35.     //提交事件
    36.     doSubmit() {
    37.       //设置登录访问地址
    38.       let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
    39.       // 使用json格式进行传值
    40.       let params = {
    41.         username: this.username,
    42.         password: this.password
    43.       }
    44.       this.axios.post(url, params).then(r => {
    45.         console.log(r);
    46.         this.$message({
    47.           message: r.data.message,
    48.           type: r.data.code == 0?'success': 'error'
    49.         });
    50.  
    51.       }).catch(e => {
    52.       });
    53.  
    54.     }
    55.  
    56.   }
    57. }
    58. </script>
    59.  
    60. <style scoped>
    61. .login-wrap {
    62.   box-sizing: border-box;
    63.   width: 100%;
    64.   height: 100%;
    65.   padding-top: 10%;
    66.   background-image: url(https://pic4.zhimg.com/v2-c5880f5a6d44766feb085c3ae94899c7_r.jpg);
    67. //background-image: url();
    68.   background-repeat: no-repeat;
    69.   background-position: center right;
    70.   background-size: 100%;
    71. }
    72.  
    73. .login-container {
    74.   border-radius: 10px;
    75.   margin: 0px auto;
    76.   width: 350px;
    77.   padding: 30px 35px 15px 35px;
    78.   background: #fff;
    79.   border: 1px solid #eaeaea;
    80.   text-align: left;
    81.   box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    82. }
    83.  
    84. .title {
    85.   margin: 0px auto 40px auto;
    86.   text-align: center;
    87.   color: #505458;
    88. }
    89. </style>

     

     

    二、首页导航、左侧菜单 

     1、页面搭建

    在我们的components的公共文件夹里面写我们的公共页面。

    AppMain.vue：布局容器组件
    LeftAside.vue：左侧菜单组件
    TopNav.vue：首页导航组件
    根据vue组件之间传递数据实现element-ui的NavMenu菜单折叠、展开效果。

    子组件往父组件传递数据(this.$emit)：TopNav -> AppMain
    父组件往子组件传递数据(props)：AppMain -> LeftAside

    1.1、图标定义

    图标可以根据自己的风格来，我这里也提供在下面了，自己也可以进行更改。 

    1.2、AppMain.vue

    1. <template>
    2.   <el-container class="main-container">
    3.     <el-aside v-bind:class="asideClass">
    4.       <LeftNav></LeftNav>
    5.     </el-aside>
    6.     <el-container>
    7.       <el-header class="main-header">
    8.         <TopNav></TopNav>
    9.       </el-header>
    10.       <el-main class="main-center">这是一个非常帅的主页</el-main>
    11.     </el-container>
    12.   </el-container>
    13. </template>
    14.  
    15. <script>
    16. // 导入组件
    17. import TopNav from '@/components/TopNav.vue'
    18. import LeftNav from '@/components/LeftNav.vue'
    19.  
    20. // 导出模块
    21. export default {
    22.   
    23. };
    24. </script>
    25. <style scoped>
    26. .main-container {
    27.   height: 100%;
    28.   width: 100%;
    29.   box-sizing: border-box;
    30. }
    31.  
    32. .main-aside-collapsed {
    33.   /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    34.   width: 64px !important;
    35.   height: 100%;
    36.   background-color: #334157;
    37.   margin: 0px;
    38. }
    39.  
    40. .main-aside {
    41.   width: 240px !important;
    42.   height: 100%;
    43.   background-color: #334157;
    44.   margin: 0px;
    45. }
    46.  
    47. .main-header,
    48. .main-center {
    49.   padding: 0px;
    50.   border-left: 2px solid #333;
    51. }
    52. </style>

     1.3、LeftNav.vue

    1. <template>
    2.   <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157"
    3.            text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
    4.     <div class="logobox">
    5.       <img class="logoimg" src="../assets/img/logo.png" alt="">
    6.     </div>
    7.     <el-submenu index="1">
    8.       <template slot="title">
    9.         <i class="el-icon-location"></i>
    10.         <span>导航一</span>
    11.       </template>
    12.       <el-menu-item-group>
    13.         <template slot="title">分组一</template>
    14.         <el-menu-item index="1-1">选项1</el-menu-item>
    15.         <el-menu-item index="1-2">选项2</el-menu-item>
    16.       </el-menu-item-group>
    17.       <el-menu-item-group title="分组2">
    18.         <el-menu-item index="1-3">选项3</el-menu-item>
    19.       </el-menu-item-group>
    20.       <el-submenu index="1-4">
    21.         <template slot="title">选项4</template>
    22.         <el-menu-item index="1-4-1">选项1</el-menu-item>
    23.       </el-submenu>
    24.     </el-submenu>
    25.     <el-menu-item index="2">
    26.       <i class="el-icon-menu"></i>
    27.       <span slot="title">导航二</span>
    28.     </el-menu-item>
    29.     <el-menu-item index="3" disabled>
    30.       <i class="el-icon-document"></i>
    31.       <span slot="title">导航三</span>
    32.     </el-menu-item>
    33.     <el-menu-item index="4">
    34.       <i class="el-icon-setting"></i>
    35.       <span slot="title">导航四</span>
    36.     </el-menu-item>
    37.   </el-menu>
    38. </template>
    39. <script>
    40. export default {
    41.  
    42. }
    43. </script>
    44. <style>
    45. .el-menu-vertical-demo:not(.el-menu--collapse) {
    46.   width: 240px;
    47.   min-height: 400px;
    48. }
    49.  
    50. .el-menu-vertical-demo:not(.el-menu--collapse) {
    51.   border: none;
    52.   text-align: left;
    53. }
    54.  
    55. .el-menu-item-group__title {
    56.   padding: 0px;
    57. }
    58.  
    59. .el-menu-bg {
    60.   background-color: #1f2d3d !important;
    61. }
    62.  
    63. .el-menu {
    64.   border: none;
    65. }
    66.  
    67. .logobox {
    68.   height: 40px;
    69.   line-height: 40px;
    70.   color: #9d9d9d;
    71.   font-size: 20px;
    72.   text-align: center;
    73.   padding: 20px 0px;
    74. }
    75.  
    76. .logoimg {
    77.   height: 40px;
    78. }
    79. </style>

    1.4、TopNav.vue

    1. <template>
    2.   <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    3.     <el-button class="buttonimg">
    4.       <img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    5.     </el-button>
    6.     <el-submenu index="2" class="submenu">
    7.       <template slot="title">超级管理员</template>
    8.       <el-menu-item index="2-1">设置</el-menu-item>
    9.       <el-menu-item index="2-2">个人中心</el-menu-item>
    10.       <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    11.     </el-submenu>
    12.   </el-menu>
    13. </template>
    14.  
    15. <script>
    16. export default {
    17.   data() {
    18.     return {
    19.       collapsed: false,
    20.       imgshow: require('@/assets/img/show.png'),
    21.       imgsq: require('@/assets/img/sq.png')
    22.     }
    23.   }, methods: {
    24.     
    25.   }
    26. }
    27. </script>
    28.  
    29. <style scoped>
    30. .el-menu-vertical-demo:not(.el-menu--collapse) {
    31.   border: none;
    32. }
    33.  
    34. .submenu {
    35.   float: right;
    36. }
    37.  
    38. .buttonimg {
    39.   height: 60px;
    40.   background-color: transparent;
    41.   border: none;
    42. }
    43.  
    44. .showimg {
    45.   width: 26px;
    46.   height: 26px;
    47.   position: absolute;
    48.   top: 17px;
    49.   left: 17px;
    50. }
    51.  
    52. .showimg:active {
    53.   border: none;
    54. }
    55. </style>

     1.5、index.js

    在index,js里面进行路由配置

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from '@/components/HelloWorld'
    4. import Login from '@/views/Login'
    5. import Register from '@/views/Register'
    6. import AppMain from '@/components/AppMain'
    7. import LeftNav from '@/components/LeftNav'
    8. import TopNav from '@/components/TopNav'
    9.  
    10.  
    11. Vue.use(Router)
    12.  
    13. export default new Router({
    14.   routes: [
    15.     {
    16.       path: '/Login',
    17.       name: 'Login',
    18.       component: Login
    19.     },
    20.     {
    21.       path: '/Register',
    22.       name: 'Register',
    23.       component: Register
    24.     },
    25.     {
    26.       path: '/AppMain',
    27.       name: 'AppMain',
    28.       component: AppMain,
    29.       children: [{
    30.         path: '/LeftNav',
    31.         name: 'LeftNav',
    32.         component: LeftNav
    33.       },
    34.         {
    35.           path: '/TopNav',
    36.           name: 'TopNav',
    37.           component: TopNav
    38.         }]
    39.     }
    40.   ]
    41. })

    2、功能实现 

     2.1、AppMain.vue

    1. // 导出模块
    2. export default {
    3.   //把顶部导航和左边导航进行绑定在main
    4.   components: {
    5.     TopNav, LeftNav
    6.   },
    7.   data() {
    8.     return {
    9.       asideClass: 'main-aside'
    10.     }
    11.   },
    12.   created() {
    13.     this.$root.Bus.$on('sjm', v => {
    14.       this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
    15.     });
    16.   }
    17. };

     2.2、LeftNav.vue

    1.  
    2. export default {
    3.   data() {
    4.     return {
    5.       collapsed: false
    6.     }
    7.   },
    8.   created() {
    9.     this.$root.Bus.$on('sjm', v => {
    10.       this.collapsed = v;
    11.     });
    12.   }
    13. }

     2.3、TopNav.vue

    1.  
    2. export default {
    3.   data() {
    4.     return {
    5.       collapsed: false,
    6.       imgshow: require('@/assets/img/show.png'),
    7.       imgsq: require('@/assets/img/sq.png')
    8.     }
    9.   }, methods: {
    10.     //图标的切换
    11.     doToggle() {
    12.       this.collapsed = !this.collapsed;
    13.       //定义一个事件名,将是否折叠变量放入总线
    14.       this.$root.Bus.$emit('sjm', this.collapsed)
    15.     },
    16.     exit() {
    17.       this.$router.push('/Login');
    18.     }
    19.   }
    20. }

     2.4、main.js

    1.   data() {
    2.     return {
    3.       Bus: new Vue()
    4.     }
    5.   }

    3、完整代码

    3.1、AppMain.vue
    1. <template>
    2.   <el-container class="main-container">
    3.     <el-aside v-bind:class="asideClass">
    4.       <LeftNav></LeftNav>
    5.     </el-aside>
    6.     <el-container>
    7.       <el-header class="main-header">
    8.         <TopNav></TopNav>
    9.       </el-header>
    10.       <el-main class="main-center">这是一个非常帅的主页</el-main>
    11.     </el-container>
    12.   </el-container>
    13. </template>
    14.  
    15. <script>
    16. // 导入组件
    17. import TopNav from '@/components/TopNav.vue'
    18. import LeftNav from '@/components/LeftNav.vue'
    19.  
    20. // 导出模块
    21. export default {
    22.   //把顶部导航和左边导航进行绑定在main
    23.   components: {
    24.     TopNav, LeftNav
    25.   },
    26.   data() {
    27.     return {
    28.       asideClass: 'main-aside'
    29.     }
    30.   },
    31.   created() {
    32.     this.$root.Bus.$on('sjm', v => {
    33.       this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
    34.     });
    35.   }
    36. };
    37. </script>
    38. <style scoped>
    39. .main-container {
    40.   height: 100%;
    41.   width: 100%;
    42.   box-sizing: border-box;
    43. }
    44.  
    45. .main-aside-collapsed {
    46.   /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    47.   width: 64px !important;
    48.   height: 100%;
    49.   background-color: #334157;
    50.   margin: 0px;
    51. }
    52.  
    53. .main-aside {
    54.   width: 240px !important;
    55.   height: 100%;
    56.   background-color: #334157;
    57.   margin: 0px;
    58. }
    59.  
    60. .main-header,
    61. .main-center {
    62.   padding: 0px;
    63.   border-left: 2px solid #333;
    64. }
    65. </style>

     3.2、LeftNav.vue

    1. <template>
    2.   <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157"
    3.            text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
    4.     <div class="logobox">
    5.       <img class="logoimg" src="../assets/img/logo.png" alt="">
    6.     </div>
    7.     <el-submenu index="1">
    8.       <template slot="title">
    9.         <i class="el-icon-location"></i>
    10.         <span>导航一</span>
    11.       </template>
    12.       <el-menu-item-group>
    13.         <template slot="title">分组一</template>
    14.         <el-menu-item index="1-1">选项1</el-menu-item>
    15.         <el-menu-item index="1-2">选项2</el-menu-item>
    16.       </el-menu-item-group>
    17.       <el-menu-item-group title="分组2">
    18.         <el-menu-item index="1-3">选项3</el-menu-item>
    19.       </el-menu-item-group>
    20.       <el-submenu index="1-4">
    21.         <template slot="title">选项4</template>
    22.         <el-menu-item index="1-4-1">选项1</el-menu-item>
    23.       </el-submenu>
    24.     </el-submenu>
    25.     <el-menu-item index="2">
    26.       <i class="el-icon-menu"></i>
    27.       <span slot="title">导航二</span>
    28.     </el-menu-item>
    29.     <el-menu-item index="3" disabled>
    30.       <i class="el-icon-document"></i>
    31.       <span slot="title">导航三</span>
    32.     </el-menu-item>
    33.     <el-menu-item index="4">
    34.       <i class="el-icon-setting"></i>
    35.       <span slot="title">导航四</span>
    36.     </el-menu-item>
    37.   </el-menu>
    38. </template>
    39. <script>
    40. export default {
    41.   data() {
    42.     return {
    43.       collapsed: false
    44.     }
    45.   },
    46.   created() {
    47.     this.$root.Bus.$on('sjm', v => {
    48.       this.collapsed = v;
    49.     });
    50.   }
    51. }
    52. </script>
    53. <style>
    54. .el-menu-vertical-demo:not(.el-menu--collapse) {
    55.   width: 240px;
    56.   min-height: 400px;
    57. }
    58.  
    59. .el-menu-vertical-demo:not(.el-menu--collapse) {
    60.   border: none;
    61.   text-align: left;
    62. }
    63.  
    64. .el-menu-item-group__title {
    65.   padding: 0px;
    66. }
    67.  
    68. .el-menu-bg {
    69.   background-color: #1f2d3d !important;
    70. }
    71.  
    72. .el-menu {
    73.   border: none;
    74. }
    75.  
    76. .logobox {
    77.   height: 40px;
    78.   line-height: 40px;
    79.   color: #9d9d9d;
    80.   font-size: 20px;
    81.   text-align: center;
    82.   padding: 20px 0px;
    83. }
    84.  
    85. .logoimg {
    86.   height: 40px;
    87. }
    88. </style>
    3.3、TopNav.vue
    1. <template>
    2.   <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    3.     <el-button class="buttonimg">
    4.       <img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    5.     </el-button>
    6.     <el-submenu index="2" class="submenu">
    7.       <template slot="title">超级管理员</template>
    8.       <el-menu-item index="2-1">设置</el-menu-item>
    9.       <el-menu-item index="2-2">个人中心</el-menu-item>
    10.       <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    11.     </el-submenu>
    12.   </el-menu>
    13. </template>
    14.  
    15. <script>
    16. export default {
    17.   data() {
    18.     return {
    19.       collapsed: false,
    20.       imgshow: require('@/assets/img/show.png'),
    21.       imgsq: require('@/assets/img/sq.png')
    22.     }
    23.   }, methods: {
    24.     //图标的切换
    25.     doToggle() {
    26.       this.collapsed = !this.collapsed;
    27.       //定义一个事件名,将是否折叠变量放入总线
    28.       this.$root.Bus.$emit('sjm', this.collapsed)
    29.     },
    30.     exit() {
    31.       this.$router.push('/Login');
    32.     }
    33.   }
    34. }
    35. </script>
    36.  
    37. <style scoped>
    38. .el-menu-vertical-demo:not(.el-menu--collapse) {
    39.   border: none;
    40. }
    41.  
    42. .submenu {
    43.   float: right;
    44. }
    45.  
    46. .buttonimg {
    47.   height: 60px;
    48.   background-color: transparent;
    49.   border: none;
    50. }
    51.  
    52. .showimg {
    53.   width: 26px;
    54.   height: 26px;
    55.   position: absolute;
    56.   top: 17px;
    57.   left: 17px;
    58. }
    59.  
    60. .showimg:active {
    61.   border: none;
    62. }
    63. </style>
    3.4、main.js
    1. // The Vue build version to load with the `import` command
    2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    3. import Vue from 'vue'
    4. //开发环境下才会引入mockjs
    5. process.env.MOCK && require('@/mock')
    6. // 新添加1
    7. import ElementUI from 'element-ui'
    8. // 新添加2，避免后期打包样式不同，要放在import App from './App';之前
    9. import 'element-ui/lib/theme-chalk/index.css'
    10.  
    11. import App from './App'
    12. import router from './router'
    13.  
    14. // 新添加3----实例进行一个挂载
    15. Vue.use(ElementUI)
    16. Vue.config.productionTip = false
    17.  
    18. import axios from '@/api/http'
    19. import VueAxios from 'vue-axios'
    20.  
    21. Vue.use(VueAxios, axios)
    22.  
    23. /* eslint-disable no-new */
    24. new Vue({
    25.   el: '#app',
    26.   router,
    27.   //定义变量
    28.   data() {
    29.     return {
    30.       Bus: new Vue()
    31.     }
    32.   },
    33.   components: {App},
    34.   template: ''
    35. })

  • 相关阅读:
    中国航天日特辑 | PARASOFT——从NASA JPL到航空航天的星辰大海
    Android 9.0 蓝牙功能之一：蓝牙音乐
    java开发常见面试问题
    浅谈 CDN 加速
    一文看懂Linux文件的属性
    ＜el-form＞标签与＜el-col＞之间的套用导致点击无效的问题
    SpringMVC04 —— SpringMVC拦截器&拦截器案例
    Jenkins 构建CICD
    R语言ggplot2可视化斜率图、对比同一数据对象前后（before、after）两个状态的差异（Slope Chart）
    随笔记录-看nacos源码
  • 原文地址：https://blog.csdn.net/weixin_72997875/article/details/133301386