前端简单数据存储:跳过后端数据库的一种高效策略,应对一些不需要后端访问数据库的简单操作:静态 Markdown 文件存储

问题提出:

在一些应用场景中,有些数据并不重要,也不需要频繁地进行动态增删改查,比如品牌历史、产品介绍等说明性内容。 为此,我选择在前端直接存储这些静态数据,跳过后端数据库调用。本文将分享如何利用 Vue 工程中直接存放 Markdown 文件与内嵌数据,将数据管理与业务逻辑解耦,从而实现快速开发、便于维护和灵活更新的目的。

静态 Markdown 文件存储方法案例:

原理:

将 Markdown 文件(如 brandHistory.md)放在 Vue 项目的 public 文件夹中。 在 Vue 组件中,通过 Axios 异步加载文件内容,再使用 Markdown 转换器(如 marked)将 Markdown 解析为 HTML 显示到页面上。

步骤

在vue页面代码加入md转换的HTML代码:(这里以我的brandhistory.vue举例)

  

配置babel和webpack:

为什么需要配置?

  1. 项目中使用了 ECMAScript 新特性(比如可选链运算符 ?.),这些特性并不是所有目标环境原生支持,因此需要 Babel来进行转译。
  2. 引用了如 marked 这样的第三方库,且该库的新版本中使用了可选链语法。由于默认情况下,Babel 不会转译node_modules 内的代码,所以需要在 Webpack 配置中单独对 marked 进行转译。
  3. 你需要已经安装好了 Babel、@babel/plugin-proposal-optional-chaining 以及 babel-loader 等依赖,这样才能让 Babel 正常工作。 默认情况下 Vue CLI 的构建方式不会转译 node_modules 下的代码。如果第三方库使用了不被老环境支持的新特性,就会出问题。因此,需要通过 vue.config.js 的 chainWebpack添加针对特定模块(这里是 marked)的转译规则。
  4. Vue CLI 工具默认配置了 Babel 和 Webpack。所以你能够通过babel.config.js 进行 Babel 转译,并通过 vue.config.js 定制 Webpack 构建流程。

文件目录结构:
前端简单数据存储:跳过后端数据库的一种高效策略,应对一些不需要后端访问数据库的简单操作:静态 Markdown 文件存储_第1张图片
babel.config.js:

module.exports = {
  plugins: ["@babel/plugin-proposal-optional-chaining"],
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current"
        }
      }
    ]
  ]
}

vue.config.js:

// vue.config.js
module.exports = {
    chainWebpack: (config) => {
      config.module
        .rule('transpile-marked')
        .test(/\.js$/)
        // 将需要转译 marked 模块的部分加入 include
        .include.add(/node_modules[\\/]marked/).end()
        .use('babel-loader')
        .loader('babel-loader')
        .options({
          // 如果有额外的 Babel 配置也可以在这里配置,
          // 但一般情况下它会自动读取 babel.config.js
        });
    }
  };
  

配置好保证了不让 marked 模块因为使用新语法而导致构建失败,从 node_modules 中的 marked 文件也通过 Babel 进行转译。

具体报错问题指引:

报错一:导入问题

TypeError:
marked__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function
Uncaught (in promise) AbortError: The play() request was interrupted by a call to pause().

这个错误通常是因为新版 marked 库(v3 及以后版本)的导出方式与旧版不同,不能再直接用默认导入来使用函数。解决方案是使用命名导入。
新版 marked 的正确导入方式:

import { marked } from 'marked';
// ...
this.htmlContent = marked(this.markdownContent

报错二:配置写法问题

\src\main.js: .targets is not allowed in preset options [1] at Array.forEach () [1] at cachedFunction.next () [1] at loadPresetDescriptor.next () [1] at recursePresetDescriptors.next () [1] at Generator.next ()

解决方法:
这个错误说明 Babel 配置中的 presets 写法有问题。错误信息指出 .targets 不允许直接作为预设(preset)的选项,而是需要包装在一个数组里,作为该预设的配置对象传递。也就是说,你需要把 @babel/preset-env 与它的配置一起放到一个数组中。
例如:

module.exports = {
  plugins: ["@babel/plugin-proposal-optional-chaining"],
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current"
        }
      }
    ]
  ]
}

你可能感兴趣的:(前端,数据库,学习,vscode,html5,vue.js)