智能简历平台Plus——前端开发2（简历编辑页面）（3）

已于 2024-05-14 00:25:31 修改
阅读量230 收藏 2
点赞数 3
文章标签： javascript 前端 vue.js
于 2024-05-13 13:38:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ltfxyy/article/details/138797451
版权

文章目录

页面展示

  • 首页
    在这里插入图片描述
  • 简历编辑页

在这里插入图片描述

简历模块

  • 简历编辑页面使用vue做单独的组件，目前共有十个模块组件

  • 展示部分模块代码

  • 简历信息
    实现输入简历名称和照片上传的功能，可在电脑里选择照片上传
    在这里插入图片描述

  • 基本信息
    在这里插入图片描述

<template>
  <div class="basic-info">
    <h4>基本信息</h4>
    <el-form :model="formData" label-width="140px">
      <!-- 第一行 -->
      <el-row class="form-row">
        <el-col :span="8">
          <el-form-item label="姓名" style="margin-bottom: 0;">
            <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄" style="margin-bottom: 0;">
            <el-input v-model.number="formData.age" placeholder="请输入年龄" type="number" min="0"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <!-- 添加性别 -->
          <el-form-item label="性别" style="margin-bottom: 0;">
            <el-radio-group v-model="formData.gender">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row class="form-row">
        <el-col :span="12">
          <el-form-item label="邮箱" style="margin-bottom: 0;">
            <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" style="margin-bottom: 0;">
            <el-input v-model="formData.phone" placeholder="请输入联系电话"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row class="form-row">
        <el-col :span="6">
          <el-form-item label="民族" style="margin-bottom: 0;">
            <el-input v-model="formData.nation" placeholder="请输入民族"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="政治面貌" style="margin-bottom: 0;">
            <el-input v-model="formData.politicalStatus" placeholder="请输入政治面貌"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="籍贯" style="margin-bottom: 0;">
            <el-input v-model="formData.nativePlace" placeholder="请输入籍贯"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

  • 教育背景
    在这里插入图片描述

  • 求职意向
    在这里插入图片描述

<template>
  <div class="job-intention">
    <h3>求职意向</h3>
    <el-form :model="jobIntentionForm" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="意向岗位" style="margin-bottom: 15px;">
            <el-input v-model="jobIntentionForm.position" placeholder="请输入意向岗位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="意向城市" style="margin-bottom: 15px;">
            <el-input v-model="jobIntentionForm.city" placeholder="请输入意向城市"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="期望薪资" style="margin-bottom: 15px;">
            <el-input v-model="jobIntentionForm.salary" placeholder="请输入期望薪资"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入职时间" style="margin-bottom: 15px;">
            <el-date-picker v-model="jobIntentionForm.startDate" type="date" placeholder="请选择入职时间"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
  • 项目经验

在这里插入图片描述

<template>
  <div class="project-experience">
    <h3>项目经验</h3>
    <el-form :model="projectExperienceForm" label-width="120px">
      <el-form-item label="项目名称" style="margin-bottom: 15px;">
        <el-input v-model="projectExperienceForm.name" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <el-form-item label="参与角色" style="margin-bottom: 15px;">
        <el-input v-model="projectExperienceForm.role" placeholder="请输入参与角色"></el-input>
      </el-form-item>
      <el-form-item label="项目时间" style="margin-bottom: 15px;">
        <el-date-picker
          v-model="projectExperienceForm.time"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="项目经验" style="margin-bottom: 15px;">
        <el-input type="textarea" v-model="projectExperienceForm.experience" placeholder="请输入项目经验（500字以内）" :rows="5"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

  • 实习经验
    在这里插入图片描述

  • 校园经历
    在这里插入图片描述

  • 技能特长

在这里插入图片描述

<template>
  <div class="skill-specialties">
    <h3>技能特长</h3>
    <el-form :model="skillsForm" label-width="120px">
      <el-form-item label="自定义特长">
        <el-input v-model="customSkill" placeholder="请输入自定义特长">
          <template v-slot:append>
            <el-button @click="addCustomSkill">添加</el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <div v-for="(skill, index) in customSkills" :key="index" class="custom-skill-item">
      <span>{{ skill.name }}</span>
      <el-select v-model="skill.level" placeholder="请选择熟练等级" style="width: 120px;">
        <el-option label="一般" value="一般"></el-option>
        <el-option label="良好" value="良好"></el-option>
        <el-option label="熟练" value="熟练"></el-option>
        <el-option label="擅长" value="擅长"></el-option>
        <el-option label="精通" value="精通"></el-option>
      </el-select>
      <el-button type="text" @click="removeCustomSkill(index)">删除</el-button>
    </div>
  </div>
</template>

  • 荣誉证书
    在这里插入图片描述

  • 自我评价
    在这里插入图片描述

编辑页面功能实现

  • 实现照片上传的功能，可在电脑里选择照片上传
   <!-- 添加照片的框 -->
    <div class="photo-upload">
      <h3>上传照片</h3>
      <input type="file" @change="handleFileChange">
      <div v-if="photoUrl" class="photo-preview">
        <div class="photo-container">
          <img :src="photoUrl" alt="photo">
        </div>
        <el-button type="text" @click="removePhoto">删除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resumeName: '',
      photoUrl: ''
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        // 使用FileReader读取文件
        const reader = new FileReader();
        reader.onload = (e) => {
          this.photoUrl = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },
    removePhoto() {
      this.photoUrl = '';
    }
  }
};
</script>
  • 实现自定义添加技能特长和荣誉证书，还可以选择技能熟练程度，也可以随时删除技能框
    在这里插入图片描述
<template>
  <div class="skill-specialties">
    <h3>技能特长</h3>
    <el-form :model="skillsForm" label-width="120px">
      <el-form-item label="自定义特长">
        <el-input v-model="customSkill" placeholder="请输入自定义特长">
          <template v-slot:append>
            <el-button @click="addCustomSkill">添加</el-button>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    <div v-for="(skill, index) in customSkills" :key="index" class="custom-skill-item">
      <span>{{ skill.name }}</span>
      <el-select v-model="skill.level" placeholder="请选择熟练等级" style="width: 120px;">
        <el-option label="一般" value="一般"></el-option>
        <el-option label="良好" value="良好"></el-option>
        <el-option label="熟练" value="熟练"></el-option>
        <el-option label="擅长" value="擅长"></el-option>
        <el-option label="精通" value="精通"></el-option>
      </el-select>
      <el-button type="text" @click="removeCustomSkill(index)">删除</el-button>
    </div>
  </div>
</template>

简历加载模块

<div class="content">
          <!-- 动态加载简历组件模块 -->
          <component v-for="(app, index) in modules" :key="index" :is="app.module" v-show="app.show"
                     v-bind:ref="app.ref" v-bind="app.data"></component>
        </div>

复选框

  • 用来选择性的遮蔽隐藏组件，勾选为组件显示，不勾选为组件隐藏
    在这里插入图片描述
<div class="module_list">
           <div class="module" v-for="(app, index) in modules" :key="index" draggable="true"
             @dragstart="handleDragStart($event, index)"
             @dragover.prevent="handleDragOver($event, index)"
             @dragenter="handleDragEnter($event, index)" @dragend="handleDragEnd($event, index)">
             <el-checkbox v-model="app.show" :disabled="app.module === 'BaseInfo' || app.module === 'PersonalIntroduction' || app.module ===
   'JobIntension'"></el-checkbox>
             <label>{{ app.label}}</label> <!-- 将 app.label 修改为 app.module -->
             <div v-if="app.module === 'BaseInfo' || app.module === 'PersonalIntroduction' || app.module === 'JobIntension'"
   class="mengceng"></div>
           </div>
         </div>

进度条

  • 实现动态简历进度跟踪
    在这里插入图片描述
<div class="oprate-box">
          <el-progress type="dashboard" :percentage="completion_progress" :color="progress_colors"
                       :width="60"></el-progress>
ltfxyy
关注
Vue--》从零开始打造交互体验一流的电商平台（一）
ztK63LrD的博客
05-06 493
今天开始使用搭建一个电商项目平台，因为文章会将项目的每处代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端vue知识，然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（：快速轻量且功能丰富的前端构建工具，帮助开发人员更高效构建现代Web应用程序。：高性能、轻量级npm替代品，帮助开发人员更加高效地处理应用程序的依赖关系。
《简历模板》--一个基于 Vue 3 和 ElementPlus 的简历网页模板，方便展示项目链接、二维码和截图等信息。.zip
03-05
个人花大量时间整理出的简历模板，内容丰富，无论是应届生，还是职场老手，都有相应的模板，节约自身时间，提升效率。 亲们下载我任何一个付费资源后，即可私信联系我免费下载其他相关资源，包含简历模板、PPT模板、面试资料等等 个人花大量时间整理出的简历模板，内容丰富，无论是应届生，还是职场老手，都有相应的模板，节约自身时间，提升效率。 亲们下载我任何一个付费资源后，即可私信联系我免费下载其他相关资源，包含简历模板、PPT模板、面试资料等等 个人花大量时间整理出的简历模板，内容丰富，无论是应届生，还是职场老手，都有相应的模板，节约自身时间，提升效率。 亲们下载我任何一个付费资源后，即可私信联系我免费下载其他相关资源，包含简历模板、PPT模板、面试资料等等
用elementUI的descriptions描述列表 合并单元格 实现个人简历效果
monkey7
03-25 3259
element-ui的2.15.14版本出了个Descriptions 描述列表 可以用来展示数据项详情 分为带边框和不带边框。其中column属性是指 一行 Descriptions Item 的数量 默认是3个 如果超出会被挤到下一行。descriptions合并单元格效果 可以实现类似word简历的效果 主要改的是css样式
管理系统的前端模板（vue2+Element UI）
热门推荐
快乐学习
04-19 1万+
前言这是引用ElementUI官网的布局容器里面的代码拿来修改优化后的。用的框架是vue2一、模板展示图二、获取的方式及操作运行步骤（一）获取方式去公众号“（二）操作步骤。
Vue+Element实现网页版个人简历系统
jx69693678nab的博客
12-30 8896
这篇文章介绍一个使用Vue+Element实现的个人简历系统，主要用到的技术有：vue、element、css3、css定位。 　　作者在window10进行开发，目前只在chrome上进行过测试，没有大的毛病。但是还有很多小功能还不完善，代码也未进行优化，后续会继续完善功能，优化代码。 　　声明：项目相对来说就是一个纯静态页面，代码都比较简单，大佬可闭眼绕过，或者看一眼留下宝贵意见也可 一...
HTML用＜form＞表单制作个人简历
m0_58822480的博客
06-03 2180
在HTML表单制作一张个人简介 源代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>个人简历</title> <style>.btbg{ text-align:center; } </style> <!--改变字体、颜色、大小--> <style>.alsp{ font-family:"
vue3+TS+Vite2+Element Plus管理系统通用模板（2022最新）
vcdddd的博客
12-03 3617
2022管理系统最流行技术栈，vue3+TypeScript+Vite2+Pinia+Element Plus+VueRouter。 搭建流程详细，这一套下来起码增加两年功力。
尚硅谷web前端HTML5+CSS3笔记
qq_52380174的博客
12-19 4511
HTML/CSS笔记#自用#尚硅谷#李立超
前端开发工程师面试题2
刘群智的博客
07-27 5021
前端开发工程师面试题2   　1、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? 　　（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 　　（2）、严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。 　　（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作...
web前端页面优化详解
weixin_44465584的博客
03-08 4798
一：web前端页面优化： 1.web页面的具体是什么？前身？ web前端页面作为呈现给用户看的页面，也就是浏览器可以解析出资源的通过一定程序而出现的页面，对于可以开发人员，很好懂：就是HTML（Hyper Text Markup Language【超文本标记语言】）+CSS（Cascading Style Sheets【表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集...
宜搭产品生态伙伴政策——宜搭：高效的低代码应用构建平台
阿里云技术
08-22 2285
导语：本文中，阿里云智能运营专家斯麦跟大家分享了宜搭的产品生态及生态伙伴政策，并介绍了宜搭产品的应用场景、产品优势、产品价值和具体实践。 今天是我们距离3月21号宜搭正式发布公测以来刚好是第216天。今天会向大家介绍宜搭产品的生态伙伴政策。 首先考虑到还会有部分的伙伴不太了解这个产品，所以会简单介绍一下产品、我们的实践还有伙伴政策。 宜搭的应用场景十分广泛，包含运营、人事、营销、销售...
开源啦！一款基于Vue3 + Vite + TS的简历制作神器~~
qq_34743072的博客
07-20 2206
目前市面上有不少在线制作简历的网站，不得不说，有些做得很好，提供的简历模板非常的漂亮！但是，相信有很多小伙伴不会去使用它们，毕竟贫穷会限制我们！当然，有些小伙伴可能会去下载各种各样的简历模板，比如一些word格式的模板，但是这些模板还是存在一个问题，就是样式太难调了，扩展性不高。因为，我作为众多小伙伴中的一员，就想充分发挥自己程序员的能力，于是便有了这款免费的开源简历制作神器！......
个人资料管理界面编写
Sunnyztg的博客
06-26 3008
本文将介绍如何使用Vue.js和Element UI编写一个个人资料管理界面。
推荐开源项目：简历模板生成器 - ResumeTemplate
gitblog_00023的博客
04-03 458
推荐开源项目：简历模板生成器 - ResumeTemplate 去发现同类优质开源项目:https://gitcode.com/ 项目简介 ResumeTemplate 是一个基于 Vue.js 开发的在线简历模板生成器。它提供了一系列美观、专业的简历模版，帮助用户快速创建个性化的电子简历，省去了设计和排版的烦恼。无论你是求职者还是设计师，都能在这个平台上找到适合自己的简历样式。 技术分析 前端框...
软件工程毕设项目推荐 40个VUE毕设项目分享【含源码+论文】
WEB_DC的博客
01-15 675
🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升，传统的java web缺少创新和亮点，往往达不到毕业答辩的要求，这两年不断有学弟学妹告诉学长自己做的java web管理系统达不到老师的要求。为了大家能够顺利以及最少的精力通过毕设，学长分享5个优质java web毕业设计项目，需要的自取。题目1 : 基于SSM的婚纱摄影网站🥇 题目综合评分(每项满分5分)难度系数：3分工作量：5分创新点：3分界面美化：5分开发语言：Java框架：ssmJDK版本：JDK1.8。
前端 js 处理一个数组 展示成层级下拉样式
最新发布
lzfengquan的博客
10-17 108
前端开发中，不管是什么时候都会遇到select 下拉框的使用，一般情况下，数据处理后端都会处理好。前端一般使用相应技术栈所推荐的公共组件就可以了。前端处理的前提是要确定那个是父级元素，那个是子级元素，这样才能更好的处理数据。这个时候前端要写个方法去处理这个数组了。这个数组后端是会给的。
npm 和 npx 的区别和使用场景
Dou_Hua6的博客
10-09 761
自动下载和缓存：如果本地未安装所需包，npx会自动下载并执行，执行完毕后可以选择保留或删除。脚本运行：通过package.json中的scripts字段定义和运行自定义脚本。依赖管理：管理项目的dependencies和devDependencies。简化命令行工具的使用：临时执行命令，避免全局安装带来的版本冲突或污染。npm 全称：Node Package Manager。发布包：将自己的包发布到npm注册表供他人使用。：无需全局安装即可运行npm包中的可执行文件。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1346
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值