【VUE】vue网站设计-----字节招聘网站设计
2024-04-02 02:25:51
1、引言
设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决
2、作品介绍
字节招聘网站系统采用vue，node技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，回复“字节招聘”免费获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。
2.1、作品简介方面
字节招聘网站系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选
2.2、作品二次开发工具
此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。
2.3、作品技术介绍
html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计
vue作品技术方面：使用vue技术开发的网站，涉及常见的vue指令，如v-for，v-if，v-show，v-html等的使用，包含watch，计算属性等常见功能的开发，以及组件的使用，使用vue相关全家桶的使用，运用了v-router来作为路由，完全符合常见的网站开发技术。同时也会使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。
3、作品演示
【coding加油站】vue网站设计---模仿字节招聘网站设计
3.1、首页
相关代码：
<div class="main"><div ref="product" class="product content-item-block"><h1 class="title">Inspire creativity, enrich life</h1><div class="desc">截至目前，字节跳动产品已覆盖超过 150 个国家和地区，75 个语种</div><ul class="product-list"><liclass="product-item"v-for="(item, key) in products":key="key"@click="jumpToDetail(item)"><img :src="item.logo" alt /><div>{{ item.title }}</div></li></ul><router-link to="/products"><div class="more"><!-- <span class="more-button">了解更多</span> --><bytedance-button size="large">了解更多</bytedance-button></div></router-link></div><!-- 职位 --><div class="job-category content-item-block"><h2 class="job-category-title title">探索你感兴趣的职位</h2><ul class="job-category-list clearfix"><li v-for="item in jobCategories" :key="item.id" class="job-category-item"><router-link :to="{ name: 'jobs', params: { job_category_id: item.id } }"><div class="image" :style="`backgroundImage:url(${item.image})`"><span class="overlay" v-if="!item.id">{{ item.zh_name }}</span></div><div v-if="item.id" class="name">{{ item.zh_name }}</div></router-link></li></ul></div><!-- 字节范 --><div class="byteStandard content-item-block"><h1 class="title">字节范</h1><div class="desc">字节范是字节跳动企业文化的重要组成部分，是我们共同认可的行为准则</div><div class="content"><div class="image"><spanv-show="productLayerVisible"class="layer"@animationend="onScrollRightAnimationEnd"></span><imgv-if="byteStandards[byteStandardActiveIndex]"width="100%"height="100%":src="byteStandards[byteStandardActiveIndex].image"alt/></div><div class="indicator"><ul><li class="indicator-item" v-for="(item, index) in byteStandards" :key="index"><h3:class="{ active: byteStandardActiveIndex === index }"@click="() => {byteStandardActiveIndex = index;productLayerVisible = true;}">{{ item.title }}</h3><p v-html="item.content" v-show="byteStandardActiveIndex === index"></p></li></ul></div></div></div><!-- 字节生活 --><div class="byteLife content-item-block"><h1 class="byteLife-title">字节生活</h1><div class="block-item block-item-one"><div class="block-item-column block-item-column-text"><h2 class="block-item-column-title">在扁平开放的氛围 里工作</h2><div class="content"><div class="content-item"><h2 class="content-item-title">务实扁平的工作氛围</h2><p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识</p></div><div class="content-item"><h2 class="content-item-title">务实扁平的工作氛围</h2><p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识</p></div><div class="content-item"><h2 class="content-item-title">务实扁平的工作氛围</h2><p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识</p></div></div></div><div class="block-item-column block-item-column-image"><img src="https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/life_1.png" alt /></div></div><div class="block-item block-item-one"><div class="block-item-column block-item-column-text"><h2 class="block-item-column-title">在扁平开放的氛围 里工作</h2><div class="content"><div class="content-item"><h2 class="content-item-title">务实扁平的工作氛围</h2><p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识</p></div><div class="content-item"><h2 class="content-item-title">务实扁平的工作氛围</h2><p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识</p></div><div class="content-item"><h2 class="content-item-title">务实扁平的工作氛围</h2><p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识</p></div></div></div><div class="block-item-column block-item-column-image"><img src="https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/life_1.png" alt /></div></div></div><!-- 员工故事 --><div class="staffStory content-item-block"><h2 class="title">员工故事</h2><ul class="staffStory-list clearfix"><router-linktag="li":to="`/staff-stories/${item.id}`"v-for="item in staffStories":key="item.id"class="staffStory-item"><div class="avatar"><img width="100%" :src="item.avatar" alt srcset /></div><div class="text"><h2 class="title">{{ item.title }}</h2><div class="desc">{{ item.name }} | {{ item.department }}</div><p class="remark">{{ item.remark }}</p></div><div class="circular-button">→</div></router-link></ul></div></div>3.2、职位列表页
相关代码：
<template><div class="jobs"><div class="banner">和优秀的人，做有挑战的事</div><!-- 搜索 --><div ref="searchBar" :class="{ fixedTop: searchBarFixedTop }" class="search-wrapper"><input-search:size="searchBarFixedTop ? 'small' : 'medium'"placeholder="搜索职位"v-model="searchKeyword"></input-search></div><div class="main clearfix"><!-- 侧边栏过滤选择 --><div class="clearfix aside-filter"><div class="header"><span>选择</span><span :class="{ clearable }" class="clear" @click="clearFilter">清空</span></div><div class="job-category job-filter-block"><div class="title"></div><checkbox-transfertitle="职位"ref="jobCategory"v-model="job_category_id_list":props="{ key: 'id', label: 'name' }":data="jobCategories"></checkbox-transfer></div><div class="job-city job-filter-block"><div class="title"></div><checkbox-transfertitle="城市"ref="location"v-model="location_code_list":props="{ key: 'code', label: 'name' }":data="jobCities"></checkbox-transfer></div></div><!-- 主体内容 --><div class="content" v-loading:#ffffff7d.scrollFixed="loading"><h2 class="content-title">开启新的职位 ({{ results.count }})</h2><ul class="content-list"><li class="content-item" v-for="item in results.job_post_list" :key="item.id"><router-link :to="`/jobs/${item.id}`"><h3 class="title">{{ item.title }}</h3><div class="subTitle"><span class="city">{{ item.city_info.name }}</span> |<span class="job_category">{{ item.job_category.name }}</span> |<span class="recruitment_channel">社招</span></div><p class="desc">{{ item.description }}</p></router-link></li></ul><!-- 分页器 --><div v-show="!loading" class="pagination-wrapper"><pagination :current-page.sync="currentPage" :total="results.count"></pagination></div></div></div></div>
</template>
<script>
import { getOffsetTop } from "@/helper/utilities";
let positionY = 0;
let searchBarClientHeight = 0;export default {name: "job",data() {const { keyword, job_category_id } = this.$route.params;return {searchKeyword: keyword || "",currentPage: 1,job_category_id_list: job_category_id ? [job_category_id] : [],jobCategories: [],jobCities: [],location_code_list: [],cityList: [],cities: [],results: [],searchBarFixedTop: false,loading: false};},created() {const jobConfigRequest = this.request.get("/job-filters").then(response => {this.jobCities = response.city_list;this.jobCategories = response.job_type_list;}).catch();const dataRequest = this.fetchList();this.loadingIns = this.$loading();Promise.all([jobConfigRequest, dataRequest]).then(() => {this.loadingIns.close();});},mounted() {this.$nextTick(() => {positionY = getOffsetTop(document.body, this.$refs.searchBar);searchBarClientHeight = this.$refs.searchBar.clientHeight;});const onPageScroll = () => {const top = this.$refs.searchBar.getBoundingClientRect().top;this.searchBarFixedTop =window.scrollY > positionY - searchBarClientHeight / 2;};window.addEventListener("scroll", onPageScroll);this.$on("hook:destroyed", () => {window.removeEventListener("scroll", onPageScroll);});},computed: {queryFilter() {return {job_category_id_list: this.job_category_id_list,location_code_list: this.location_code_list,keyword: this.searchKeyword,offset: Math.max(0, this.currentPage - 1) * 10};},clearable() {return (this.job_category_id_list.length !== 0 ||this.location_code_list.length !== 0);}},watch: {queryFilter: function(newVal, oldVal) {this.searchBarFixedTop && window.scrollTo(0, positionY);this.fetchList();}},methods: {clearFilter() {if (this.job_category_id_list.length) {this.job_category_id_list = [];}if (this.location_code_list.length) {this.location_code_list = [];}},fetchList() {this.loading = true;return this.request.post("/jobs", this.queryFilter).then(response => {if (this.results.count !== response.count) {this.currentPage = 1;}this.results = response;this.loading = false;}).catch(() => {this.loading = false;});}}
};
</script>
3.3、职位详情
相关代码：
<template><div class="product"><ul class="product-fullpage-indicator"><liv-for="(item, index) in products":key="item.id"class="product-fullpage-indicator-item":class="{ active: activeIndex === index }"@click="activeIndex = index"><img :src="item.logo" alt /></li></ul><transition :duration="duration" :name="transitionName"><!-- ... the buttons ... --><div:key="activeIndex"class="view-wrapper"v-if="!loading":style="`backgroundImage:url(${item.cover})`"><div class="content"><div class="logo"><img :src="item.logo" width="100%" height="100%" alt /></div><h2>{{ item.title }}</h2><div class="description">{{ item.description }}</div><div class="subDescription">{{ item.subDescription }}</div><div class="link">更多信息，请访问：<br /><span>{{ item.link }}</span></div></div></div></transition></div>
</template>
<script>
export default {name: "product",data() {return {products: [],activeIndex: 0,transitionName: "",scrolling: false,duration: 1000,loading: false};},watch: {activeIndex(newIndex, oldIndex) {if (this.scrolling) {return;}if (this.$route.params.id) {delete this.$route.params.id;return;}this.transitionName = newIndex < oldIndex ? "move-down" : "move-up";}},created() {this.loading = true;const loading = this.$loading({position: { top: 60 }});this.request.get("/products").then(response => {this.products = response;this.loading = false;loading.close();if (this.$route.params.id) {this.activeIndex = this.products.findIndex(item => item.id === this.$route.params.id);}}).catch();},mounted() {window.addEventListener("mousewheel", this.mousewheelHandler);},destroyed() {window.removeEventListener("mousewheel", this.mousewheelHandler);},computed: {item() {return this.products[this.activeIndex] || {};}},methods: {mousewheelHandler(e) {if (this.scrolling) {return;}this.scrolling = true;if (e.wheelDelta > 0) {this.transitionName = "move-down";this.activeIndex =this.activeIndex === 0? this.products.length - 1: this.activeIndex - 1;} else {this.transitionName = "move-up";this.activeIndex = (this.activeIndex + 1) % this.products.length;}setTimeout(() => {this.scrolling = false;}, this.duration);}}
};
</script>
4、代码结构图
总结
以上就是本次项目的全部内容，需要交流或者免费获取代码请关注微信公众号：coding加油站，回复“字节招聘”免费获取
【VUE】vue网站设计-----字节招聘网站设计相关推荐
- java基于ssm+vue的人才简历求职招聘网站 elementui
本求职招聘管理系统是针对目前求职招聘管理的实际需求,从实际工作出发,对过去的求职招聘管理系统存在的问题进行分析,结合计算机系统的结构.概念.模型.原理.方法,在计算机各种优势的情况下,采用目前最流行的 ...
- java招聘网站项目_基于jsp的招聘网站-JavaEE实现招聘网站 - java项目源码
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的招聘网站, 该项目可用各类java课程设计大作业中, 招聘网站的系统架构分为前后台两部分, 最终实现在线上进行招聘 ...
- 招聘网站代码模板 mysql_招聘网站爬虫模板
招聘网站爬虫模板 项目的创建 项目的设置 中间件的理解与使用 selenium的基本使用 爬虫项目的创建: scrapy startproject spiderName cd spiderName s ...
- html网页设计与制作：基于html设计整套招聘网站求职前端模板页面 静态网页HTML代码 学生网页课程设计期末作业下载
- 【基于Python的招聘网站爬虫及可视化的设计与实现】
完整下载:基于Python的招聘网站爬虫及可视化的设计与实现.docx 目录 目录 2 摘要 3 关键词 3 第一章 绪论 3 1.1 研究背景 3 1.2 研究意义 4 1.3 研究目的 6 1.4 ...
- （附源码）ssm招聘网站 毕业设计 250858
SSM招聘网站 摘 要 招聘网站采用B/S结构.java开发语言.以及Mysql数据库等技术.系统主要分为管理员.用户.企业三部分,管理员管理主要功能包括:首页.站点管理(轮播图.公告栏)用户管理( ...
- 基于某知名招聘网站的上海财务岗位数据分析（含excel可视化）
1.前言: 之前博主在学习PYTHON的爬虫,正好有一个很要好的朋友向我询问上海财务岗位的招聘信息,便爬取了XX网当时上海财务岗的招聘信息. 爬虫采用了PYTHON2.7.其实博主是很看好PYTHON ...
- app.vue 跳转页面_【在线教学】第8章 网站页面布局和模块设计
第8章 网站页面布局和模块设计 8.1 网站页面布局 在设计网站界面时,将页面中的模块进行规范化的设计和合理的布局,能够实现网页内容的结构化,使访问者直观.迅速的找到需要的信息. 1.网站UI视觉规 ...
- ssm基于JAVA的求职招聘网站的设计与实现计算机毕业设计
最新200套计算机专业原创毕业设计参考选题都有源码+数据库是近期作品 如果题目不合适,可以去我上传的资源里面找题目,找不到的话,评论留下题目,站内私我或add用户名,有时间看到机会给您发 1 2100 ...
最新文章
- Theano 中文文档 0.9 - 7.2.5 循环
- 25个自适应菜单教程和脚本
- C#如何得到运行中和杀死运行中的进程？
- Leetcode Combinations
- Nvidia CUDA初级教程2 并行程序设计概述
- 工作流中ServiceTask的各种方法
- 图像处理——在Python中使用OpenCV和PIL显示图像(legacy)
- 为什么会自动打开Nautilus文件管理器？
- 计算机硬件的基本结构和工作原理
- CSharp_DevExpress_DXperience_Universal_11.1.6 下载+源码+编译
- win7系统玩游戏提示“运行时出错！初始化DirectX运行库失败 ”的解决方法
- 计算机无法继续安装程序,电脑提示nvidia安装程序无法继续 如何解决 - 驱动管家...
- 亚马逊Alexa技能的创建流程
- Java数据类型总结
- Sharding-jdbc连接kingbasev8r6跨表分页
- 更换手表电池后,如何关闭压合式手表后盖--工具:两枚硬币,钳子,布或纸巾,木板
- c# 游戏设计：地图移动
- 四元数入门（简单容易理解）
- 到底是谁捧红了芙蓉姐姐
- java 泛型service_java泛型