前端工程化：框架基础搭建

前端工程化：框架基础搭建

一、引言

在前端开发中，搭建一个稳定、高效且易于扩展的基础框架是至关重要的。本文将详细介绍构建前端基础框架，帮助开发者理解框架的核心功能和实现原理，从而能够快速上手并进行项目开发。

二、项目概述

我们的前端框架基于 Vue 3 构建，boot.js 主要负责应用的启动和初始化工作，包括引入必要的库、配置路由等；curl.js 则封装了axios统一处理请求参数、签名和错误信息。

三、文件结构与功能

3.1 boot.js 文件

3.1.1 功能概述

该文件是 Vue 应用的启动入口，它接收一个 Vue 入口组件和一些配置选项（如路由和依赖库），然后完成 Vue 应用的初始化和挂载。

3.1.2 代码分析

import { createApp } from "vue";
import pinia from "$store";
import { createRouter, createWebHashHistory } from "vue-router";
import ElementUI from "element-plus";
import "element-plus/dist/index.css";
import "./asserts/custom.css";

/**
 * vue 页面主入口 启动vue
 * @param {Object} pageComponent vue 入口组件
 * @param {Array} routes 页面路由配置
 * @param {Array} libs 页面依赖的公共库
 */
export default (pageComponent, { routes = [], libs = [] } = {}) => {
  const app = createApp(pageComponent);
  app.use(ElementUI); // 应用 ElementUI
  app.use(pinia); // 应用 pinia

  // 引入页面依赖的公共库
  for (let lib of libs) {
    app.use(lib);
  }

  // 应用 vue-router 页面路由
  // 服务端渲染SSR: server side render
  // 客户端渲染CSR: client side render
  const router = createRouter({
    history: createWebHashHistory(), // 采用hash模式
    routes, // 路由配置
  });
  app.use(router);
  router.isReady().then(() => {
    app.mount("#root");
  });
};

• 引入必要的库 ：引入了 Vue 3 的 createApp 函数、状态管理库 pinia、路由库 vue-router 以及 UI 库 ElementUI。
• 创建 Vue 应用实例 ：使用 createApp 函数创建一个 Vue 应用实例，并将入口组件传入。
• 应用插件 ：通过 app.use() 方法应用 ElementUI 和 pinia，并循环引入页面依赖的公共库。
• 配置路由 ：使用 createRouter 函数创建路由实例，采用 createWebHashHistory 模式，并传入路由配置。
• 挂载应用 ：在路由准备好后，将 Vue 应用挂载到 #root 元素上。

3.1.3 使用示例

import boot from './boot';
import App from './App.vue';
import myPlugin from './myPlugin';

boot(App, {
  routes: [
    { path: '/', component: () => import('./Home.vue') },
    { path: '/about', component: () => import('./About.vue') }
  ],
  libs: [myPlugin]
});

3.2 curl.js 文件

3.2.1 功能概述

该文件封装了前端的网络请求方法，使用 axios 发送请求，并处理请求签名、错误信息和响应数据。

3.2.2 代码分析

const md5 = require("md5");
const axios = require("axios");
import { ElMessage } from "element-plus";

/**
 * 前端封装 curl 方法
 * @param {Object} options 请求参数
 */

const curl = ({
  url, // 请求地址
  method = "POST", // 请求方法
  headers = {}, // 请求头
  query = {}, // url query
  data = {}, // post body
  responseType = "json", // 响应类型
  timeout = 60000, // 超时时间
  errorMessage = "网络异常，请稍后重试", // 错误提示信息
}) => {
  // 接口签名处理 [动态处理]
  const signKey = "MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCg";
  const st = Date.now();

  // 构造请求参数 [参数转换为 axios 请求参数]
  const ajaxSettings = {
    url,
    method,
    params: query,
    data,
    responseType,
    timeout,
    headers: {
      ...headers,
      s_sign: md5(`${signKey}_${st}`),
      s_t: st,
    },
  };

  return axios
    .request(ajaxSettings)
    .then((response) => {
      const { data, metadata } = response || {};

      // 后端API 返回格式
      const { success } = data;
      // 失败
      if (!success) {
        const { code, message } = data;
        if (code === 442) {
          ElMessage.error("请求参数异常");
        } else if (code === 445) {
          ElMessage.error("请求不合法");
        } else if (code === 50000) {
          ElMessage.error(message);
        } else {
          ElMessage.error(errorMessage);
        }

        console.error(message);
        return Promise.resolve({ success, code, message });
      }
      // 成功
      return Promise.resolve({ success, ...metadata, ...data });
    })
    .catch((error) => {
      const { message } = error;
      if (message.match(/timeout/)) {
        return Promise.resolve({
          code: 504,
          message: "Request Timeout...",
        });
      }
      return Promise.resolve(error);
    });
};

export default curl;

• 引入必要的库 ：引入了 md5 库用于生成签名，axios 用于发送网络请求，以及 ElMessage 用于显示错误提示信息。
• 封装请求方法 ：定义了一个 curl 函数，接收一个包含请求参数的对象。
• 处理请求签名 ：使用 md5 生成签名，并将签名和时间戳添加到请求头中。
• 构造请求参数 ：将传入的请求参数转换为 axios 所需的格式。
• 发送请求并处理响应 ：使用 axios.request 发送请求，根据响应结果处理成功和失败的情况，并返回相应的结果。

3.2.3 使用示例

import curl from './curl';

curl({
  url: '/api/data',
  method: 'GET',
  query: { page: 1, limit: 10 }
}).then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

四、框架优势

1. 模块化设计 ：boot.js 和 curl.js 分别负责应用启动和网络请求，代码结构清晰，易于维护和扩展。
2. 可配置性 ：boot.js 支持传入路由和依赖库的配置，curl.js 支持自定义请求参数，方便根据不同项目需求进行定制。
3. 错误处理 ：curl.js 统一处理请求错误，并提供详细的错误提示信息，提高了开发效率和用户体验。

五、注意事项

1. 签名密钥安全 ：curl.js 中的签名密钥 signKey 应妥善保管，避免泄露。
2. 依赖版本：确保引入的库（如 Vue、ElementUI、axios 等）的版本兼容，避免出现兼容性问题。
3. 路由配置 ：在 boot.js 中配置路由时，要注意路由路径和组件的对应关系，避免出现路由错误。

六、总结

通过 boot.js 和 curl.js 这两个文件，我们成功搭建了一个基础的前端框架，实现了应用的启动和网络请求的封装。开发者可以根据项目需求进一步扩展和优化这个框架，例如添加更多的插件、优化错误处理逻辑等。希望本文能帮助你更好地理解和使用这个框架，快速进行前端项目的开发。