爱简历 - window.core.js 说明

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

window.core 是一个对象,提供了以下方法:

  • registTemplate(templateName, TemplateApp) 注册模板

window.core 提供了以下属性:

  • eventBus:用户开发者的模板项目向框架项目发送消息 core.eventBus.$emit("edit", {type: "xxx"})
  • $signs:简历信息标识, 简历分为10个部分,signs中的10个属性分别对应

一、实例方法

1.1 registTemplate(templateName, TemplateApp)

参数:templateName 为模板名,是一个字符串,建议使用"-"分割多个单词,例如:simple-template。特别注意:debug 模式 templateName 固定为 test-template,上传代码时需要将此值改成新建模板中的url,同时注意不需要写前面的 templates/。

参数:TemplateApp 就是新建Vue 想的 App.vue,在App.vue中实现一下方法:

  • setConfig(type, Datas) 模板各个模块的编辑设置;
  • setStyle() 公共的样式
js 复制代码
// import Vue from 'vue'
import App from './App.vue'
// Vue.config.productionTip = false



// 此处注册模板,开发模式下第一个参数固定为 test-template ,第二个参数为方法
// classic-left-right-structure
core.registTemplate("test-template", App)
vue 复制代码
<template>
  <div id="app">
    <index ref="index"></index>
  </div>
</template>

<script>
  import "./assets/js/component-regist.js";
  import index from "./components/index.vue";
  export default {
    name: "App",
    components: {
      index
    },
    methods: {
      /**
         * 此处实现 setConfig 方法,详细介绍见开发文档
         * @param {*} type 
         * @param {*} Datas 
         */
      setConfig(type, Datas) {
        console.log(type, Datas)
        this.$nextTick(() => {
          console.log(this)
          this.$refs.index.setConfig(type, Datas);
        })
      }
    },
  };
</script>

<style>
  /* 此处不要写任何样式,避免样式冲突出现问题 */
</style>

1.1.1 setConfig(type, Datas) - 必须实现

已有默认实现。按如下方式可以可以将默认实现的方法注入本地项目:

js 复制代码
export default {
    data() {
        return {
            // 将 默认属性 全部封装在 core.$props() ,如下将默认属性 core.$props() 组件中,初始值
            ...core.$props(),
        };
    },
    computed: {
        jobIntention() {
            if (this.jobIntentions.length) {
                return this.jobIntentions[0].ji_name;
            }
            return "";
        },
    },
    methods: {
        // 将 setConfig 的默认实现全部封装在 $methods ,如下将默认实现注入本地的 Vue 组件中
        ...core.$methods,
    },
};

core.$methods 方法列表

js 复制代码
let methods = {
    /**
     * 将简历数据设置到模板中
     * @param {*} type 可选值如下
     * - all: 设置所有简历模块的值,包含下述 10 个部分
     * - baseInfo:基础信息
     * - jobIntentions:求职意向
     * - educations:教育背景
     * - workExperiences:工作经验
     * - projectExperiences:项目经验
     * - campusExperiences:校园经历
     * - skills:技能特长
     * - certificates:荣誉证书
     * - selfAssessment:自我评价
     * - hobby:兴趣爱好
     * @param {*} datas 
     * 与 type 对应
     * - all: Object 
     *      {baseInfo: {}, jobIntentions: []...}
     * - baseInfo: Object
     * - jobIntentions:Array
     * - educations:Array
     * - workExperiences:Array
     * - projectExperiences:Array
     * - campusExperiences:Array
     * - skills:Array
     * - certificates:Array
     * - selfAssessment:Object
     * - hobby:Object
     */
    setConfig(type, datas) {
        console.log(type, datas)
        let methodName = "set" + this.uppercaseFirst(type);
        this[methodName](datas);
    },

    /**
     * 将字符串的第一字母大写
     * @param {*} str 
     */
    uppercaseFirst(str) {
        let first = str.substring(0, 1);
        let last = str.substring(1);
        return first.toUpperCase() + last;
    },

    /**
     * 设置所有
     */
    setAll(datas) {
        let _this = this;
        // core.$signs 中可以取到所有简历信息类型的 key 
        Object.keys(core.$signs).forEach(key => {
            let methodName = "set" + _this.uppercaseFirst(key);
            // 调用对应的设置方法
            console.log(key,datas[key])
            _this[methodName](datas[key]);
        })
    },

    /**
     * 设置基础信息
     * @param {Object} datas 
     */
    setBaseInfo(datas) {
        Object.assign(this.baseInfo, datas);
    },

    /**
     * 设置求职意向
     * @param {Array} datas 
     */
    setJobIntentions(datas) {
        this.jobIntentions.splice(0);
        this.jobIntentions.push(...datas);
    },

    /**
     * 设置教育经历
     * @param {Array} datas 
     */
    setEducations(datas) {
        this.educations.splice(0);
        this.educations.push(...datas);
    },

    /**
     * 设置工作经历
     * @param {Array} datas 
     */
    setWorkExperiences(datas) {
        this.workExperiences.splice(0);
        this.workExperiences.push(...datas);
    },

    /**
     * 设置项目经历
     * @param {Array} datas 
     */
    setProjectExperiences(datas) {
        this.projectExperiences.splice(0);
        this.projectExperiences.push(...datas);
    },

    /**
     * 设置校园经历
     * @param {Array} datas 
     */
    setCampusExperiences(datas) {
        this.campusExperiences.splice(0);
        this.campusExperiences.push(...datas);
    },

    /**
    * 设置专业技能
    * @param {Array} datas 
    */
    setSkills(datas) {
        this.skills.splice(0);
        this.skills.push(...datas);
    },

    /**
   * 设置专业技能
   * @param {Array} datas 
   */
    setCertificates(datas) {
        this.certificates.splice(0);
        this.certificates.push(...datas);
    },

    /**
    * 设置自我评价
    * @param {Object} datas 
    */
    setSelfAssessment(datas) {
        if (datas == null) {
            this.selfAssessment.sa_desc = "";
        } else {
            Object.assign(this.selfAssessment, datas);
        }
        
    },

    /**
   * 设置兴趣爱好
   * @param {Object} datas 
   */
    setHobby(datas) {
        if (datas == null) {
            this.hobby.h_desc = "";
        } else {
            Object.assign(this.hobby, datas);
        }
    },

    /**
     * 格式化日期,返回 xxxx年xx月 的格式
     * @param {String} inDate 输入日期,格式未 2023-09-23
     */
    formatDate(inDate) {
        let tempArrs = inDate.split("-");
        return tempArrs[0] + "年" + tempArrs[1] + "月";
    }
}

export default methods;

core.$props()返回的初始结构

js 复制代码
{
    baseInfo: {
        bi_name: "",
        bi_birthday: "",
        bi_phone: "",
        bi_email: "",
        bi_work_year: "",
        bi_gender: "",
        bi_marriage: "",
        bi_weight: null,
        bi_height: null,
        bi_nationality: "",
        bi_native_place: [""],
        bi_photo: "",
        bi_politics_status: "",
    },
    jobIntentions: [],
    educations: [],
    workExperiences: [],
    projectExperiences: [],
    campusExperiences: [],
    skills: [],
    certificates: [],
    selfAssessment: {
        sa_desc: ""
    },
    hobby: {
        h_desc: ""
    }
}

此方法用于用户选择某个部分的简历信息时,将所选择的简历信息设置到简历模板中去。也就是说您需要在 instance 对象上实现此方法,您的模板需要实现以下 10 个部分的简历信息展示,就需要实现该部分对应 type 的实现。

setConfig(type, Datas) 方法有两个参数,type 和 datas

参数:type 为简历信息的各个部分,简历信息分为10个部分,(可以通过 core.$signs) 获取 分别为

  • all: 设置所有信息,初始化是使用
  • baseInfo:基础信息
  • jobIntentions:求职意向
  • educations:教育背景
  • workExperiences:工作经验
  • projectExperiences:项目经验
  • campusExperiences:校园经历
  • skills:技能特长
  • certificates:荣誉证书
  • selfAssessment:自我评价
  • hobby:兴趣爱好

参数:datas 为 type 对应的数据,对应类型如下:

编号 type 数据类型 示例 不展示时的值
0 all Object 与简历数据结构说明一致 /
1 baseInfo Object 简历数据结构说明中的baseInfo /(基础信息必选)
2 jobIntentions Array 简历数据结构说明中的jobIntentions \[\]
3 educations Array 简历数据结构说明中的educations \[\]
4 workExperiences Array 简历数据结构说明中的workExperiences \[\]
5 projectExperiences Array 简历数据结构说明中的projectExperiences \[\]
6 campusExperiences Array 简历数据结构说明中的campusExperiences \[\]
7 skills Array 简历数据结构说明中的skills \[\]
8 certificates Array 简历数据结构说明中的certificates \[\]
9 selfAssessment Object 简历数据结构说明中的selfAssessment null
10 hobby Object 简历数据结构说明中的hobby null

1.1.2 setStyle(color) - 可选

此方法用户设置模板的基础配色。如果您的模板支持自定义颜色的话,您需要实现此方法。

参数:color 此参数为 16 进制的颜色值,有用户指定,您在允许配色的位置替换为此值。

二、实例属性

2.1 $eventBus

用户在框架项目与模板项目之间传递消息,使用方法与 Vue 事件定义的用法一致,此处限制使用格式如下:

js 复制代码
// 表示编辑 type 部分,type 为 2.2 signs 中的值一致
core.$eventBus.$emit("edit", {type: "xxx"})

2.2 $signs

简历信息中各个部分的标识,也是编辑、设置各个部分值时必带的类型:

  • baseInfo:基础信息
  • jobIntentions:求职意向
  • educations:教育背景
  • workExperiences:工作经验
  • projectExperiences:项目经验
  • campusExperiences:校园经历
  • skills:技能特长
  • certificates:荣誉证书
  • selfAssessment:自我评价
  • hobby:兴趣爱好
相关推荐
学习-学习1 分钟前
前端打包后白屏不报错:从 source-map、MIME、路由 base 到 chunk 加载失败的全链路排查
前端
霸道流氓气质6 分钟前
摄像头视频预览实现教程:从原理到落地(ZLMediaKit+ flv.js+ Spring Boot)
javascript·spring boot·音视频
三84413 分钟前
笔记:在同一个物理服务器上通过nginx的虚拟主机生成多个不同的web站点
java·前端·nginx
double_eggm15 分钟前
uniapp.3
开发语言·前端·javascript
索西引擎29 分钟前
【React】状态提升模式:设计原理、权衡分析与架构决策框架
前端·react.js·架构
Thanks_ks2 小时前
从零手写一个 Promise:深入理解 JavaScript 异步编程的本质
javascript·promise·事件循环·异步编程·手写源码·前端进阶·promises/a+
胡萝卜术9 小时前
力扣5. 最长回文子串
前端·javascript·面试
我星期八休息9 小时前
网络编程—应用层HTTP协议
linux·运维·开发语言·前端·网络·网络协议·http
不好听6139 小时前
前端路由完全指南(下篇):懒加载、History 栈与工程化实践
前端·react.js
触底反弹11 小时前
🔥 从零搭建 RAG 知识库:爬虫→分词→向量化→检索,一步都不能错
javascript·人工智能·面试