青橙商城day -06 Echars、流量统计（UV、PV）

最新推荐文章于 2021-04-29 21:34:41 发布

原创

最新推荐文章于 2021-04-29 21:34:41 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了青橙商城流量统计的实现，包括使用Echarts进行数据展示，以及如何统计页面浏览量(PV)和独立访客数(UV)。在服务层，使用@Service注解配合@Autowired注入Mapper。控制器层通过@RestController和@RequestMapping处理请求，并通过@dubbo的@Reference引用Service。此外，还探讨了跨数据库操作的可能性，以及如何创建视图作为虚表进行数据操作。

1.service的实现类(而不是在service的接口加哦)加@Service （dubbo的service）还要@Autowired注入其mapper。 service的接口只需要定义接口就行，其他什么都不用加。

2.在controller的实现类加上@RestController和@RequestMapping，然后@Reference service（而不是接口的实现类哦，其实就是向上转型）

3.可以在别的数据库使用另一个数据库，只需要库名.表名就行，但我们一般来弄个视图作为虚表来操作。在这里插入图片描述

4.Echars快速入门：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品类目统计</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

</head>
<body>
<div id="app">
    <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="fetchData()">
    </el-date-picker>

    <div id="main" style="width: 600px;height:400px;"></div>

    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="categoryName"
                label="分类名称"
                width="200">
        </el-table-column>
        <el-table-column
                prop="num"
                label="销售量"
                width="200"<