爱简历 - 前端架构介绍与实现-CSDN博客

本文链接：https://blog.csdn.net/hebing2955/article/details/134022517

个人网站：https://aijianli.site/ 可以免费在线制作简历，提供PDF下载，方便快捷。

一、爱简历前端架构介绍

爱简历设计之初，借鉴了微前端的思想，将前端项目设计成多个项目组合，主要是将核心项目和模板分开。这样可以将核心项目与模板之间解耦，更方便对模板进行管理。

同时，自己一个人开发的模板不一定能够满足不同的用户的需求，因此核心项目与简历模板项目分开也有利于为其他有开发能力的用户提供开发自己的简历模板的平台，并且开发的简历可以分享给其他用户使用。

前端简要架构图如下：

前端架构图.png

总之，爱简历的前端架构分为一个核心项目和多个模板项目，也就是说每个简历模板都一个单独的Vue项目。核心项目定义了模板项目必须实现的一些规则和接口，模板项目不需要调用任何后台接口，只需要专注于模板样式的开发，并实现核心项目的接口即可。如此，任何有前端开发能力的用户都可以开发自己的简历模板，并且可以分享给其他用户使用

二、爱简历前端架构的实现

爱简历前端架构是基于 Vue2。

2.1 业务流程图

简历模板调用的实现流程如下：

实现.png

2.2 技术实现细节

2.2.1 简历模板注册

在核心项目中定义了一个 core 对象，并将 core 对象挂在 window 上，

window.core = new Core();

core.js 中定义了模板注册的方法 registTemplate(t_url, instance) ，t_url是一个模板标识，instance 是模板项目的 app.vue 对象。在模板项目中注册 app.vue ，不需要挂载

// import Vue from 'vue'
import App from './App.vue'

// Vue.config.productionTip = false


// 此处注册模板，开发模式下第一个参数固定为 test-template ，第二个参数为
// simple-table
core.registTemplate("simple-table", App)

2.2.2 简历模板管理

注册的简历模板使用一个对象进行管理，key 就是 t_url，value 就是注册的实例对象。registTemplate方法体如下：

/**
         * 注册模板
         */
         registTemplate(t_url, instance) {
            this.$instances[`templates/${t_url}`] = instance;
            console.log("-------------注册了实例--------------------")
        }

2.2.3 简历初始化

当用户选择了具体模板之后和简历信息后通过模板的 t_url 找到对应的模板并初始化挂载到 #app 元素上

// 设置简历信息id
        setResumeInfo(id) {
            this.$resumeInfoId = id;
        }

  //设置实例
        setInstance(TemplateApp) {
            console.log(Vue)
            let instance = new Vue({
                render: h => h(TemplateApp),
            })
            console.log(instance)
            this.$instance = instance;
        }

/**
         * 初始化简历
         * 选择模板和简历信息后调用模板的setConfig()方法，将简历信息设置到简历模板中去
         */
        initResume() {

            if (!this.$template || !this.$resumeInfoId) return;

            // 加载模板
            console.log("----------------设置了当前模板---------------------")
            console.log(this.$template, this.$instances[this.$template])
            this.setInstance(this.$instances[this.$template]);

            // 加载简历信息
            let _this = this;
            let resumeInfoPro = this.getCurResumeInfo();
            let resumePro = this.getResumeConfig();
            Promise.all([resumeInfoPro, resumePro]).then(res => {
                // 兼容没有简历内容的情况
                let resumeInfo;
                if (!res[0]) {
                    resumeInfo = {
                        baseInfo: null,
                        jobIntentions: [],
                        educations: [],
                        workExperiences: [],
                        projectExperiences: [],
                        campusExperiences: [],
                        skills: [],
                        certificates: [],
                        selfAssessment: null,
                        hobby: null
                    };
                } else {
                    resumeInfo = res[0].data;
                }
                
                let { r_template_config, r_template_style } = res[1];
                if (!!r_template_config) {
                    r_template_config = JSON.parse(r_template_config);
                    let keys = Object.keys(this.$signs);
                    keys.forEach(sign => {
                        let data = resumeInfo[sign];
                        if (data instanceof Array) {
                            data = data.filter(item => {
                                let { id } = this.getIdAndName(item);
                                return r_template_config.some(settingId => settingId == id);
                            })
                            resumeInfo[sign] = data;
                        } else {
                            // 只有自我评价和兴趣爱好会走到这里
                            // TODO 暂时写死，这里自我评价的 id 是 8，兴趣爱好的id是 9，通过是否包含8和9来设置
                            if (sign == this.$signs.hobby) {
                                if (!r_template_config.some(settingId => settingId == 9)) {
                                    resumeInfo[sign] = null;
                                }
                            }
                            if (sign == this.$signs.selfAssessment) {
                                if (!r_template_config.some(settingId => settingId == 8)) {
                                    resumeInfo[sign] = null;
                                }
                            }
                        }
                    })
                }
                // 挂载模板
                _this.$instance?.$mount('#app');

                _this.$instance?.$nextTick(() => {
                    // 设置简历数据
                    _this.setConfig("all", resumeInfo);
                })

            })
        }