开源项目分析代码
开源项目分析代码
开源项目分析代码
官网地址: ruoyi

前端代码

首页

1
2
#首页主界面:  src/views/index.vue
#布局页面:  src/layout/index.vue

页面查询缓存

vue-echarts 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
01) 安装依赖 vue-echarts
02) main.js 引入

// 导入图表库
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
// 全局导入图表库模块 减少打包体积
// CanvasRenderer 和 GridComponent是每个模块必须的
import { CanvasRenderer } from 'echarts/renderers'
import { GridComponent } from 'echarts/components'
use([CanvasRenderer, GridComponent])
const app = createApp(App)
app.component('VChart', ECharts) // 全局挂载图表组件

vite代理图片地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// demo, 代理api, 同时代理一个文件地址
// 原因在,开发阶段, 后端返回的地址不带 api, 这时候直接访问不到

// 后端地址需要给 api, 但是这时候前端地址中没有api, 这时候需要代理 profilePath 这个路径
// 把 http://localhost:8282/profilePath/upload/001.png
// 代理成为 http://localhost:8282/api/profilePath/upload/001.png

server: {
  port: 8282,
  host: true,
  // open: true,
  proxy: {
    // https://cn.vitejs.dev/config/#server-proxy
    '^/api': {
      target: 'http://localhost:8182',
      changeOrigin: true
      // rewrite: (p) => p.replace(/^\/api/, '')
    },
    '/profilePath': {
      target: 'http://localhost:8182',
      changeOrigin: true,
      // *** 把 profilePath 代理成为 api/profilePath *****
      rewrite: p => p.replace(/^\/profilePath/, 'api/profilePath')
    }
  }
},

上传图片组件使用

1
2
3
4
5
 const feiUrl = ref('/profilePath/upload/2024/05/19/001_20240519171820A004.png')


 图片地址: {{ feiUrl }}
<ImageUpload v-model="feiUrl" />

按钮主题色

1
2
// 文件 src/store/modules/settings.js 中
theme: storageSetting.theme || '#4180b3',

页面名称修改

1
2
const newRoute = Object.assign({}, route, { title: '编辑标签' })
store.dispatch('tagsView/updateVisitedView', newRoute)

底部

没有了