统计管理前端页面

# 一、nginx配置

location ~ /ucenter/ {           
    proxy_pass http://localhost:8104;
}

location ~ /statistics/ {           
    proxy_pass http://localhost:8105;
}

1
2
3
4
5
6
7

# 二、前端页面实现

# 1、创建api

创建src/api/statistics/daily.js

import request from '@/utils/request'

const api_name = '/admin/statistics/daily'
export default {

  createStatistics(day) {
    return request({
      url: `${api_name}/${day}`,
      method: 'post'
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

# 2、增加路由

src/router/index.js

{
  path: '/statistics/daily',
  component: Layout,
  redirect: '/statistics/daily/create',
  name: 'Statistics',
  meta: { title: '统计分析', icon: 'chart' },
  children: [
    {
      path: 'create',
      name: 'StatisticsDailyCreate',
      component: () => import('@/views/statistics/daily/create'),
      meta: { title: '生成统计' }
    }
  ]
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 3、创建组件

src/views/statistics/daily/create.vue

模板部分

<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item label="日期">
        <el-date-picker
          v-model="day"
          type="date"
          placeholder="选择要统计的日期"
          value-format="yyyy-MM-dd" />
      </el-form-item>

      <el-button
        :disabled="btnDisabled"
        type="primary"
        @click="create()">生成</el-button>
    </el-form>

  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

script部分

<script>
import daily from '@/api/statistics/daily'

export default {
  data() {
    return {
      day: '',
      btnDisabled: false
    }
  },

  methods: {
    create() {
      this.btnDisabled = true
      daily.createStatistics(this.day).then(response => {
        this.btnDisabled = false
        this.$message({
          type: 'success',
          message: '生成成功'
        })
      })
    }
  }
}
</script>

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

编辑

上次更新: 2024/06/15, 15:12:25

← 统计分析微服务 ECharts的使用→