爱简历 - 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:兴趣爱好
相关推荐
zach1 小时前
前端落地实战:Next.js 项目 Nginx + PM2 生产部署全流程(附踩坑总结)
前端·pm2·next.js
overmind1 小时前
oeasy教h5前端001 修改的乐趣_直接修改在线网页
前端
只睡四小时1 小时前
JS 手写 D-pad 空间导航:电视端焦点引擎实战
android·开发语言·前端·javascript·ecmascript·hls·空间导航
恋猫de小郭1 小时前
Android 原生的 Compose A2UI 也来了,你还抱着 XML 养老吗?
android·前端·flutter
庄园特聘拆椅狂魔1 小时前
从连连看到粒子消散——前端小游戏与视觉特效的技术选型
前端
JudithHuang2 小时前
React 常用 Hooks
前端·react.js·前端框架
sycmancia3 小时前
Qml——Window元素使用
前端
每天都好困3 小时前
03 AR 投影与误差修正:把地图上的点贴到视频画面上
前端
每天都好困3 小时前
04 地图图层封装:像管理 Photoshop 图层一样管理地图元素
前端
去伪存真3 小时前
构建你的第一个 DevOps AI Agent:自动化捕获、分析并修复 CI 故障
前端·agent