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

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

一、爱简历前端架构介绍

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

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

前端简要架构图如下:

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

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

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

2.1 业务流程图

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

2.2 技术实现细节

2.2.1 简历模板注册

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

js 复制代码
window.core = new Core();

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

js 复制代码
// 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方法体如下:

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

2.2.3 简历初始化

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

js 复制代码
// 设置简历信息id
        setResumeInfo(id) {
            this.$resumeInfoId = id;
        }
js 复制代码
  //设置实例
        setInstance(TemplateApp) {
            console.log(Vue)
            let instance = new Vue({
                render: h => h(TemplateApp),
            })
            console.log(instance)
            this.$instance = instance;
        }
js 复制代码
/**
         * 初始化简历
         * 选择模板和简历信息后调用模板的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);
                })

            })
        }

如此,就实现了在核心项目中加载简历项目,并挂载到 #app 元素上,挂载完成后,调用模板实例的 setConfig方法将简历信息设置到模板上。这样就实现了一份简历信息,使用不同的模板都可以展示。

至于模板如何申请成为开发者?如何将自己的Vue2项目接入爱简历开发自己的简历模板?请见此专栏后续文章。

相关推荐
前端开发爱好者1 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀1 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
华仔啊4 小时前
用 Vue3 + Canvas 做了个超实用的水印工具,同事都在抢着用
前端·vue.js·canvas
炒毛豆4 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
岁月宁静5 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
Dolphin_海豚6 小时前
@vue/reactivity
前端·vue.js·面试
菜狗的小小笔记_7 小时前
Vue3 实用技巧
vue.js
勇敢di牛牛10 小时前
vue3 + mars3D 三分钟画一个地球
前端·vue.js
我是日安12 小时前
从零到一打造 Vue3 响应式系统 Day 27 - toRef、toRefs、ProxyRef、unref
前端·javascript·vue.js
Q_Q196328847512 小时前
python+vue的在线租房 房屋租赁系统
开发语言·vue.js·spring boot·python·django·flask·node.js