21、构建在线商店与实时仪表盘应用的技术实践

最新推荐文章于 2025-11-27 21:47:38 发布

QuietPulse

最新推荐文章于 2025-11-27 21:47:38 发布

阅读量10

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js实战：从零到全栈文章标签： Vue Webpack Express

本文链接：https://blog.youkuaiyun.com/c2d3e4f/article/details/155145756

Vue.js实战：从零到全栈专栏收录该内容

21 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

构建在线商店与实时仪表盘应用的技术实践

1. 在线商店应用优化

在开发在线商店应用时，我们会遇到一些问题，例如不必要的数据获取，以及在生产环境部署时需要进行的优化。

1.1 解决不必要的数据获取问题

在某些情况下，应用会进行不必要的数据获取。服务器在发送页面 HTML 的同时会发送 Vuex 存储数据，这意味着应用首次运行时已经拥有所需的所有数据，但仍会发起请求来获取商品详情和评论等存储项。我们可以通过以下方式解决：
- PageHome.vue 组件 ：仅在没有商品数据时才获取商品。

mounted () {
  if (!this.items.length) {
    this.fetchItems()
  }
},

PageStoreItem.vue 组件 ：仅在没有详情数据或详情数据的 ID 与当前 ID 不匹配时才获取详情和评论。

fetchData () {
  if (!this.details || this.details.id !== this.id) {
    this.fetchStoreItemDetails({
      id: this.id,
    })
  }
},

1.2 生产环境构建优化

当应用在开发环境中正常工作后，我们需要将其部署到真实服务器，此时需要进行一些额外的配置。

提取样式到 CSS 文件 ：
1. 安装 extract-text-webpack-plugin 包到开发依赖中。

npm i -D extract-text-webpack-plugin

在 webpack/common.js 配置文件中添加 isProd 变量。

const isProd = process.env.NODE_ENV === 'production'

修改 vue-loader 规则，在生产环境中启用 CSS 提取并忽略 HTML 标签之间的空白。

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    extractCSS: isProd,
    preserveWhitespace: false,
  },
},

在文件底部的仅生产环境插件列表中添加 ExtractTextPlugin 和 ModuleConcatenationPlugin 。

if (isProd) {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins ||
  []).concat([
    // ...
    new webpack.optimize.ModuleConcatenationPlugin(),
    new ExtractTextPlugin({
      filename: 'common.[chunkhash].css',
    }),
  ])
} else {
 // ...
}

生产环境 Express 服务器配置 ：在 server.js 文件中，替换 // TODO production 注释为以下内容：

const template = fs.readFileSync(templatePath, 'utf-8')
const bundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json')
renderer = createBundleRenderer(bundle, {
  runInNewContext: false,
  template,
  clientManifest,
})

新增 npm 脚本 ：
1. 安装 rimraf 包到开发依赖中。

npm i -D rimraf

添加客户端和服务器捆绑包的构建脚本。

"build:client": "cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack/client.js",
"build:server": "cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack/server.js",

创建一个新的构建脚本，清除 dist 文件夹并运行上述两个脚本。

"build": "rimraf dist && npm run build:client && npm run build:server",

添加一个启动 Express 服务器的脚本。

"start": "cross-env NODE_ENV=production node server",

运行构建命令。

npm run build

启动 Express 服务器。

npm start

同时，还需要将 server.js 、 package.json 和 package-lock.json 文件上传到真实服务器，并使用 npm install 安装依赖。

2. 实时仪表盘应用搭建

接下来，我们将使用 Vue 和 Meteor 构建一个实时仪表盘应用，用于监控某些产品的生产情况。

2.1 项目搭建

在开始之前，我们需要了解 Meteor 这个全栈 JavaScript 框架。

Meteor 简介 ：
Meteor 是一个用于构建 Web 应用程序的全栈 JavaScript 框架，其主要元素包括：
| 元素 | 描述 |
| ---- | ---- |
| Web 客户端 | 可以使用任何前端库，如 React 或 Vue，有一个名为 Minimongo 的客户端数据库 |
| 服务器 | 基于 Node.js，支持现代 ES2015+ 特性，包括 import/export 语法 |
| 实时数据库 | 服务器端使用 MongoDB |
| 通信 | 客户端和服务器之间的通信被抽象，客户端和服务器端数据库可以轻松实时同步 |
| 混合移动应用 | 可选，可通过一个命令构建 Android 和 iOS 应用 |
| 开发工具 | 集成了强大的命令行工具和易于使用的构建工具 |
| 特定包 | 有 Meteor 特定的包，也可以使用 npm 包 |

安装 Meteor ：如果系统中没有安装 Meteor，可以打开官方网站的安装指南（https://www.meteor.com/install），按照说明进行安装。安装完成后，可以使用以下命令检查是否安装成功。

meteor --version

创建项目 ：
1. 使用 meteor create 命令创建一个空项目。

meteor create --bare <folder>
cd <folder>

安装两个 Meteor 特定的包，用于编译 Vue 组件和其中的 Stylus。

meteor add akryum:vue-component akryum:vue-stylus

从 npm 安装 vue 和 vue-router 包。

meteor npm i -S vue vue-router

运行以下命令在开发模式下启动 Meteor 应用。

meteor

2.2 第一个 Vue Meteor 应用

接下来，我们将在应用中显示一个简单的 Vue 组件。
1. 在项目目录中创建一个新的 index.html 文件，告诉 Meteor 在页面主体中创建一个带有 app ID 的 div 。

<head>
  <title>Production Dashboard</title>
</head>
<body>
  <div id="app"></div>
</body>

创建一个新的 client 文件夹、 components 子文件夹和一个新的 App.vue 组件。

<!-- client/components/App.vue -->
<template>
  <div id="#app">
    <h1>Meteor</h1>
  </div>
</template>

下载 Stylus 文件并添加到 App.vue 组件中。

<style lang="stylus" src="../style.styl" />

在 client 文件夹中创建一个 main.js 文件，在 Meteor.startup 钩子中启动 Vue 应用。

import { Meteor } from 'meteor/meteor'
import Vue from 'vue'
import App from './components/App.vue'
Meteor.startup(() => {
  new Vue({
    el: '#app',
    ...App,
  })
})

2.3 路由设置

为应用添加路由，我们将有两个页面：一个带有指标的仪表盘页面和一个带有生成假数据按钮的页面。
1. 在 client/components 文件夹中创建两个新组件： ProductionGenerator.vue 和 ProductionDashboard.vue 。
2. 在 main.js 文件旁边创建一个 router.js 文件。

import Vue from 'vue'
import VueRouter from 'vue-router'
import ProductionDashboard from './components/ProductionDashboard.vue'
import ProductionGenerator from './components/ProductionGenerator.vue'
Vue.use(VueRouter)
const routes = [
  { path: '/', name: 'dashboard', component: ProductionDashboard },
  { path: '/generate', name: 'generate', component: ProductionGenerator },
]
const router = new VueRouter({
  mode: 'history',
  routes,
})
export default router

在 main.js 文件中导入路由并注入到应用中。
在 App.vue 主组件中添加导航菜单和路由视图。

<nav>
  <router-link :to="{ name: 'dashboard' }" exact>Dashboard</router-link>
  <router-link :to="{ name: 'generate' }">Measure</router-link>
</nav>
<router-view />

2.4 生产数据模拟

在 Measures 页面，我们将有两个按钮，一个用于生成带有当前日期和随机值的假生产测量数据，另一个用于生成带有错误属性的测量数据。

集成 Meteor 集合 ：
1. 添加 vue-meteor-tracker npm 包。

meteor npm i -S vue-meteor-tracker

将该库安装到 Vue 中。

import VueMeteorTracker from 'vue-meteor-tracker'
Vue.use(VueMeteorTracker)

使用 meteor 命令重启 Meteor。

设置数据 ：
- 添加集合 ：在项目目录中创建一个新的 lib 文件夹，并在其中创建一个 collections.js 文件，声明 Measures 集合。

import { Mongo } from 'meteor/mongo'
export const Measures = new Mongo.Collection('measures')

添加 Meteor 方法 ：在 lib 文件夹中创建一个新的 methods.js 文件，添加一个 measure.add 方法，用于将新的测量数据插入到 Measures 集合中。

import { Meteor } from 'meteor/meteor'
import { Measures } from './collections'
Meteor.methods({
  'measure.add' (measure) {
    Measures.insert({
      ...measure,
      date: new Date(),
    })
  },
})

模拟测量数据 ：
在 ProductionGenerator.vue 组件中添加两个按钮，并在组件脚本中创建 generateMeasure 方法。

<template>
  <div class="production-generator">
    <h1>Measure production</h1>
    <section class="actions">
      <button @click="generateMeasure(false)">Generate Measure</button>
      <button @click="generateMeasure(true)">Generate Error</button>
    </section>
  </div>
</template>
<script>
import { Meteor } from 'meteor/meteor'
export default {
  methods: {
    generateMeasure (error) {
      const value = Math.round(Math.random() * 100)
      const measure = {
        value,
        error,
      }
      Meteor.call('measure.add', measure)
    },
  },
}
</script>

我们可以使用以下命令连接到应用的数据库并检查数据是否插入成功。

meteor mongo
db.measures.find({})

2.5 仪表盘组件构建

为了显示漂亮的指标，我们将安装 vue-progress-path 库。
1. 添加 vue-progress-path npm 包。

meteor npm i -S vue-progress-path

在项目根目录中创建一个新的 .vueignore 文件，内容如下。

node_modules/

在 client/main.js 文件中安装 vue-progress-path 插件。

import 'vue-progress-path/dist/vue-progress-path.css'
import VueProgress from 'vue-progress-path'
Vue.use(VueProgress, {
  defaultShape: 'semicircle',
})

Meteor 发布 ：在项目文件夹中创建一个新的 server 文件夹，并在其中创建一个 publications.js 文件，发布 measures 集合的所有文档。

import { Meteor } from 'meteor/meteor'
import { Measures } from '../lib/collections'
Meteor.publish('measures', function () {
  return Measures.find({})
})

创建仪表盘组件 ：

import { Measures } from '../../lib/collections'
export default {
  data () {
    return {
      measures: [],
    }
  },
  meteor: {
    $subscribe: {
      'measures': [],
    },
    measures () {
      return Measures.find({}, {
        sort: { date: -1 },
      })
    },
  },
}

通过以上步骤，我们完成了在线商店应用的优化和实时仪表盘应用的搭建。这些技术可以帮助我们构建高效、实时的 Web 应用程序。

构建在线商店与实时仪表盘应用的技术实践（续）

3. 实时仪表盘应用的数据同步与展示优化

在搭建好实时仪表盘应用的基本框架后，我们还需要进一步优化数据同步和展示，以确保应用的实时性和用户体验。

3.1 数据同步机制

Meteor 的数据同步是其核心优势之一，通过订阅和发布机制，客户端可以实时获取服务器端的数据更新。在我们的实时仪表盘应用中，已经实现了 measures 集合的发布和订阅，下面我们来详细分析这个过程。

graph LR
    classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px
    classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px

    A([客户端启动]):::startend --> B(订阅 measures 发布):::process
    B --> C{服务器是否有更新}:::decision
    C -->|是| D(服务器发布更新数据):::process
    C -->|否| C
    D --> E(客户端接收更新数据):::process
    E --> F(更新客户端 Minimongo 数据库):::process
    F --> G(更新 Vue 组件数据):::process
    G --> H([页面实时展示数据]):::startend

从这个流程图可以看出，客户端在启动时订阅了 measures 发布，服务器会实时监测数据的变化，一旦有更新就会将新数据发布给客户端。客户端接收到数据后，会更新本地的 Minimongo 数据库，并将数据反映到 Vue 组件中，从而实现页面的实时更新。

3.2 展示优化

为了让仪表盘的指标展示更加美观和直观，我们使用了 vue-progress-path 库。这个库可以帮助我们绘制沿着 SVG 路径的进度条，实现半环形进度条等效果。

以下是一个简单的示例，展示如何在 ProductionDashboard.vue 组件中使用 vue-progress-path 来展示数据：

<template>
  <div class="dashboard">
    <h1>Production Dashboard</h1>
    <div v-for="(measure, index) in measures" :key="index">
      <vue-progress-path :progress="measure.value" :max="100" />
      <p>{{ measure.value }}%</p>
    </div>
  </div>
</template>

<script>
import { Measures } from '../../lib/collections'
export default {
  data () {
    return {
      measures: []
    }
  },
  meteor: {
    $subscribe: {
      'measures': []
    },
    measures () {
      return Measures.find({}, {
        sort: { date: -1 }
      })
    }
  }
}
</script>

<style scoped>
.dashboard {
  text-align: center;
}
</style>

在这个示例中，我们使用 v-for 指令遍历 measures 数组，并为每个测量值绘制一个进度条。通过 :progress 属性绑定测量值， :max 属性设置最大值为 100，这样进度条就会根据测量值的大小进行动态展示。

4. 应用部署与维护

完成应用的开发和优化后，我们需要将其部署到生产环境，并进行日常的维护。

4.1 部署流程

部署在线商店应用和实时仪表盘应用的流程如下：

步骤	操作内容
1	确保本地代码已经完成开发和测试，并且所有依赖都已安装
2	运行 `npm run build` 命令，生成编译后的代码，输出到 `dist` 目录
3	将 `server.js` 、 `package.json` 、 `package-lock.json` 和 `dist` 目录上传到真实的 Node.js 服务器
4	在服务器上使用 `npm install` 安装依赖
5	运行 `npm start` 命令，启动 Express 服务器

对于实时仪表盘应用，还需要确保 Meteor 服务器正常运行，可以使用以下命令启动：

meteor

4.2 维护要点

在应用的日常维护中，需要关注以下几个方面：

性能优化 ：定期检查应用的性能指标，如响应时间、内存占用等，根据检查结果进行优化。可以使用工具如 Chrome DevTools 来进行性能分析。
数据备份 ：由于实时仪表盘应用涉及到生产数据的存储和展示，需要定期对 MongoDB 数据库进行备份，以防止数据丢失。可以使用 MongoDB 的备份工具如 mongodump 进行备份。
安全防护 ：确保服务器和应用的安全性，及时更新依赖库和框架，修复已知的安全漏洞。可以使用安全扫描工具如 Nmap 来进行安全检测。
功能扩展 ：根据业务需求，对应用进行功能扩展。例如，可以添加更多的指标展示、支持更多的数据来源等。

5. 总结

通过以上的实践，我们完成了在线商店应用的优化和实时仪表盘应用的搭建。在这个过程中，我们学习了如何解决在线商店应用中不必要的数据获取问题，以及如何进行生产环境的优化。同时，我们也了解了 Meteor 这个全栈 JavaScript 框架的使用，包括项目搭建、数据存储、数据同步和实时展示等方面。

以下是一个总结表格，对比在线商店应用和实时仪表盘应用的技术要点：

应用类型	核心技术	主要优化点	部署要点
在线商店应用	Vue、Webpack、Express	避免不必要的数据获取，提取 CSS 样式，优化编译代码	配置 Express 服务器，使用 npm 脚本进行构建和启动
实时仪表盘应用	Vue、Meteor、MongoDB	利用 Meteor 的实时数据同步机制，优化数据展示	确保 Meteor 服务器正常运行，备份 MongoDB 数据库

希望这些技术和经验能够帮助你构建出高效、实时的 Web 应用程序。在未来的开发中，你可以根据实际需求进一步扩展和优化这些应用，为用户提供更好的体验。