AI简历开发 - 记录如何实现纯前端切换简历多模板

吃猫的鱼Code

发布于 2025-02-21 09:40:49

4800

代码可运行

文章被收录于专栏：吃猫的鱼个人博客编程笔记

运行总次数：0

代码可运行

AI简历开发 - 如何实现纯前端切换简历多模板

近期在做一个纯前端的简历项目，遇到一个问题难点。

背景：

纯前端（无后端），页面左侧是简历编辑区域，右侧是可以实时切换简历模板的，左侧编辑后，右侧简历预览可以实时随着数据更改而更新数据。最重要的是简历模板的热插拔实时切换更新，纯前端实现方案。

实现思路整体流程

获取简历模板列表
用户选择简历模板，存入pinia（需持久化，pinia-plugin-persistedstate插件）
简历预览页面，通过组件形式导入简历。
预览页面需要监听用户切换模板的操作，实时热更新简历模板（切换组件）。

解决

首先在public/template.json中定义模板列表

为什么放在public文件夹？因为public文件夹不会被vite打包压缩，并且无论是打包还是开发状态运行，都可以直接通过/template.json访问到对应的json文件获取到模板。

[
  {
    "id": "template111111",
    "name": "简洁模板1",
    "description": "简约而不简单的简历模板。",
    "folderPath": "templateA",
    "thumbnail": "preview.jpg"
  },
  {
    "id": "template222222",
    "name": "简洁模板2",
    "description": "简约而不简单的简历模板。",
    "folderPath": "templateB",
    "thumbnail": "preview.jpg"
  },
  {
    "id": "template33333",
    "name": "开发版本",
    "description": "供开发者参考开发的模板。",
    "folderPath": "templateC",
    "thumbnail": "preview.jpg"
  }
]

获取简历模板列表的工具类

import type { Template } from '../types/template';

export const getTemplates = async (): Promise => {
  try {
    const response = await fetch('/templates.json'); // 使用绝对路径
    if (!response.ok) {
      throw new Error('无法获取模板列表');
    }
    return await response.json();
  } catch (error) {
    console.error('获取模板列表失败:', error);
    return [];
  }
};

使用pinia持久化存储用户切换模板的数据，这样用户下次在浏览器进入的时候看到的还是选择的模板

这里使用下面这个插件，开启pinia数据自动持久化

npm install pinia-plugin-persistedstate

useTemplateStore.ts中设置了用户选择的主题模板（另外还有主题色，不在本文章中介绍）

persist: true 开启pinia数据自动持久化不需要自己另外再自己去写localStorage的更新插入等操作，十分方便！

import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { Template } from "../types/template";

export const useTemplateStore = defineStore('templateStore', () => {
  const currentTemplate = ref

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025年02月20日，如有侵权请联系 cloudcommunity@tencent.com 删除

数据