• 【VUE】vue网站设计-----字节招聘网站设计

    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、首页

    相关代码：

    1.    <div class="main">
    2.       <div ref="product" class="product content-item-block">
    3.         <h1 class="title">Inspire creativity, enrich lifeh1>
    4.         <div class="desc">截至目前，字节跳动产品已覆盖超过 150 个国家和地区，75 个语种div>
    5.         <ul class="product-list">
    6.           <li
    7.             class="product-item"
    8.             v-for="(item, key) in products"
    9.             :key="key"
    10.             @click="jumpToDetail(item)"
    11.           >
    12.             <img :src="item.logo" alt />
    13.             <div>{{ item.title }}div>
    14.           li>
    15.         ul>
    16.         <router-link to="/products">
    17.           <div class="more">
    18.             
    19.             <bytedance-button size="large">了解更多bytedance-button>
    20.           div>
    21.         router-link>
    22.       div>
    23.  
    24.       
    25.       <div class="job-category content-item-block">
    26.         <h2 class="job-category-title title">探索你感兴趣的职位h2>
    27.         <ul class="job-category-list clearfix">
    28.           <li v-for="item in jobCategories" :key="item.id" class="job-category-item">
    29.             <router-link :to="{ name: 'jobs', params: { job_category_id: item.id } }">
    30.               <div class="image" :style="`backgroundImage:url(${item.image})`">
    31.                 <span class="overlay" v-if="!item.id">{{ item.zh_name }}span>
    32.               div>
    33.               <div v-if="item.id" class="name">{{ item.zh_name }}div>
    34.             router-link>
    35.           li>
    36.         ul>
    37.       div>
    38.  
    39.       
    40.       <div class="byteStandard content-item-block">
    41.         <h1 class="title">字节范h1>
    42.         <div class="desc">字节范是字节跳动企业文化的重要组成部分，是我们共同认可的行为准则div>
    43.         <div class="content">
    44.           <div class="image">
    45.             <span
    46.               v-show="productLayerVisible"
    47.               class="layer"
    48.               @animationend="onScrollRightAnimationEnd"
    49.             >span>
    50.             <img
    51.               v-if="byteStandards[byteStandardActiveIndex]"
    52.               width="100%"
    53.               height="100%"
    54.               :src="byteStandards[byteStandardActiveIndex].image"
    55.               alt
    56.             />
    57.           div>
    58.           <div class="indicator">
    59.             <ul>
    60.               <li class="indicator-item" v-for="(item, index) in byteStandards" :key="index">
    61.                 <h3
    62.                   :class="{ active: byteStandardActiveIndex === index }"
    63.                   @click="
    64.                   () => {
    65.                     byteStandardActiveIndex = index;
    66.                     productLayerVisible = true;
    67.                   }
    68.                 "
    69.                 >{{ item.title }}h3>
    70.                 <p v-html="item.content" v-show="byteStandardActiveIndex === index">p>
    71.               li>
    72.             ul>
    73.           div>
    74.         div>
    75.       div>
    76.  
    77.       
    78.       <div class="byteLife content-item-block">
    79.         <h1 class="byteLife-title">字节生活h1>
    80.         <div class="block-item block-item-one">
    81.           <div class="block-item-column block-item-column-text">
    82.             <h2 class="block-item-column-title">在扁平开放的氛围 里工作h2>
    83.             <div class="content">
    84.               <div class="content-item">
    85.                 <h2 class="content-item-title">务实扁平的工作氛围h2>
    86.                 <p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识p>
    87.               div>
    88.               <div class="content-item">
    89.                 <h2 class="content-item-title">务实扁平的工作氛围h2>
    90.                 <p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识p>
    91.               div>
    92.               <div class="content-item">
    93.                 <h2 class="content-item-title">务实扁平的工作氛围h2>
    94.                 <p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识p>
    95.               div>
    96.             div>
    97.           div>
    98.           <div class="block-item-column block-item-column-image">
    99.             <img src="https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/life_1.png" alt />
    100.           div>
    101.         div>
    102.  
    103.         <div class="block-item block-item-one">
    104.           <div class="block-item-column block-item-column-text">
    105.             <h2 class="block-item-column-title">在扁平开放的氛围 里工作h2>
    106.             <div class="content">
    107.               <div class="content-item">
    108.                 <h2 class="content-item-title">务实扁平的工作氛围h2>
    109.                 <p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识p>
    110.               div>
    111.               <div class="content-item">
    112.                 <h2 class="content-item-title">务实扁平的工作氛围h2>
    113.                 <p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识p>
    114.               div>
    115.               <div class="content-item">
    116.                 <h2 class="content-item-title">务实扁平的工作氛围h2>
    117.                 <p class="content-item-desc">不讲 title 和层级，敢于授权新人，专注完成业务目标，没有领地意识p>
    118.               div>
    119.             div>
    120.           div>
    121.           <div class="block-item-column block-item-column-image">
    122.             <img src="https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/ATSX/mainland/life_1.png" alt />
    123.           div>
    124.         div>
    125.       div>
    126.  
    127.       
    128.       <div class="staffStory content-item-block">
    129.         <h2 class="title">员工故事h2>
    130.         <ul class="staffStory-list clearfix">
    131.           <router-link
    132.             tag="li"
    133.             :to="`/staff-stories/${item.id}`"
    134.             v-for="item in staffStories"
    135.             :key="item.id"
    136.             class="staffStory-item"
    137.           >
    138.             <div class="avatar">
    139.               <img width="100%" :src="item.avatar" alt srcset />
    140.             div>
    141.             <div class="text">
    142.               <h2 class="title">{{ item.title }}h2>
    143.               <div class="desc">{{ item.name }} | {{ item.department }}div>
    144.               <p class="remark">{{ item.remark }}p>
    145.             div>
    146.             <div class="circular-button">→div>
    147.           router-link>
    148.         ul>
    149.       div>
    150.     div>

     3.2、职位列表页

    相关代码：

    1. <template>
    2.   <div class="jobs">
    3.     <div class="banner">和优秀的人，做有挑战的事div>
    4.  
    5.     
    6.     <div ref="searchBar" :class="{ fixedTop: searchBarFixedTop }" class="search-wrapper">
    7.       <input-search
    8.         :size="searchBarFixedTop ? 'small' : 'medium'"
    9.         placeholder="搜索职位"
    10.         v-model="searchKeyword"
    11.       >input-search>
    12.     div>
    13.  
    14.     <div class="main clearfix">
    15.       
    16.       <div class="clearfix aside-filter">
    17.         <div class="header">
    18.           <span>选择span>
    19.           <span :class="{ clearable }" class="clear" @click="clearFilter">清空span>
    20.         div>
    21.         <div class="job-category job-filter-block">
    22.           <div class="title">div>
    23.           <checkbox-transfer
    24.             title="职位"
    25.             ref="jobCategory"
    26.             v-model="job_category_id_list"
    27.             :props="{ key: 'id', label: 'name' }"
    28.             :data="jobCategories"
    29.           >checkbox-transfer>
    30.         div>
    31.         <div class="job-city job-filter-block">
    32.           <div class="title">div>
    33.           <checkbox-transfer
    34.             title="城市"
    35.             ref="location"
    36.             v-model="location_code_list"
    37.             :props="{ key: 'code', label: 'name' }"
    38.             :data="jobCities"
    39.           >checkbox-transfer>
    40.         div>
    41.       div>
    42.       
    43.       <div class="content" v-loading:#ffffff7d.scrollFixed="loading">
    44.         <h2 class="content-title">开启新的职位 ({{ results.count }})h2>
    45.         <ul class="content-list">
    46.           <li class="content-item" v-for="item in results.job_post_list" :key="item.id">
    47.             <router-link :to="`/jobs/${item.id}`">
    48.               <h3 class="title">{{ item.title }}h3>
    49.  
    50.               <div class="subTitle">
    51.                 <span class="city">{{ item.city_info.name }}span> |
    52.                 <span class="job_category">{{ item.job_category.name }}span> |
    53.                 <span class="recruitment_channel">社招span>
    54.               div>
    55.               <p class="desc">{{ item.description }}p>
    56.             router-link>
    57.           li>
    58.         ul>
    59.         
    60.         <div v-show="!loading" class="pagination-wrapper">
    61.           <pagination :current-page.sync="currentPage" :total="results.count">pagination>
    62.         div>
    63.       div>
    64.     div>
    65.   div>
    66. template>
    67. <script>
    68. import { getOffsetTop } from "@/helper/utilities";
    69. let positionY = 0;
    70. let searchBarClientHeight = 0;
    71.  
    72. export default {
    73.   name: "job",
    74.   data() {
    75.     const { keyword, job_category_id } = this.$route.params;
    76.     return {
    77.       searchKeyword: keyword || "",
    78.       currentPage: 1,
    79.       job_category_id_list: job_category_id ? [job_category_id] : [],
    80.       jobCategories: [],
    81.       jobCities: [],
    82.       location_code_list: [],
    83.       cityList: [],
    84.       cities: [],
    85.       results: [],
    86.       searchBarFixedTop: false,
    87.       loading: false
    88.     };
    89.   },
    90.  
    91.   created() {
    92.     const jobConfigRequest = this.request
    93.       .get("/job-filters")
    94.       .then(response => {
    95.         this.jobCities = response.city_list;
    96.         this.jobCategories = response.job_type_list;
    97.       })
    98.       .catch();
    99.  
    100.     const dataRequest = this.fetchList();
    101.  
    102.     this.loadingIns = this.$loading();
    103.     Promise.all([jobConfigRequest, dataRequest]).then(() => {
    104.       this.loadingIns.close();
    105.     });
    106.   },
    107.   mounted() {
    108.     this.$nextTick(() => {
    109.       positionY = getOffsetTop(document.body, this.$refs.searchBar);
    110.  
    111.       searchBarClientHeight = this.$refs.searchBar.clientHeight;
    112.     });
    113.     const onPageScroll = () => {
    114.       const top = this.$refs.searchBar.getBoundingClientRect().top;
    115.  
    116.       this.searchBarFixedTop =
    117.         window.scrollY > positionY - searchBarClientHeight / 2;
    118.     };
    119.     window.addEventListener("scroll", onPageScroll);
    120.  
    121.     this.$on("hook:destroyed", () => {
    122.       window.removeEventListener("scroll", onPageScroll);
    123.     });
    124.   },
    125.   computed: {
    126.     queryFilter() {
    127.       return {
    128.         job_category_id_list: this.job_category_id_list,
    129.         location_code_list: this.location_code_list,
    130.         keyword: this.searchKeyword,
    131.         offset: Math.max(0, this.currentPage - 1) * 10
    132.       };
    133.     },
    134.     clearable() {
    135.       return (
    136.         this.job_category_id_list.length !== 0 ||
    137.         this.location_code_list.length !== 0
    138.       );
    139.     }
    140.   },
    141.   watch: {
    142.     queryFilter: function(newVal, oldVal) {
    143.       this.searchBarFixedTop && window.scrollTo(0, positionY);
    144.       this.fetchList();
    145.     }
    146.   },
    147.   methods: {
    148.     clearFilter() {
    149.       if (this.job_category_id_list.length) {
    150.         this.job_category_id_list = [];
    151.       }
    152.       if (this.location_code_list.length) {
    153.         this.location_code_list = [];
    154.       }
    155.     },
    156.     fetchList() {
    157.       this.loading = true;
    158.  
    159.       return this.request
    160.         .post("/jobs", this.queryFilter)
    161.         .then(response => {
    162.           if (this.results.count !== response.count) {
    163.             this.currentPage = 1;
    164.           }
    165.           this.results = response;
    166.           this.loading = false;
    167.         })
    168.         .catch(() => {
    169.           this.loading = false;
    170.         });
    171.     }
    172.   }
    173. };
    174. script>

     3.3、职位详情

    相关代码：

    1. <template>
    2.   <div class="product">
    3.     <ul class="product-fullpage-indicator">
    4.       <li
    5.         v-for="(item, index) in products"
    6.         :key="item.id"
    7.         class="product-fullpage-indicator-item"
    8.         :class="{ active: activeIndex === index }"
    9.         @click="activeIndex = index"
    10.       >
    11.         <img :src="item.logo" alt />
    12.       li>
    13.     ul>
    14.     <transition :duration="duration" :name="transitionName">
    15.       
    16.       <div
    17.         :key="activeIndex"
    18.         class="view-wrapper"
    19.         v-if="!loading"
    20.         :style="`backgroundImage:url(${item.cover})`"
    21.       >
    22.         <div class="content">
    23.           <div class="logo">
    24.             <img :src="item.logo" width="100%" height="100%" alt />
    25.           div>
    26.           <h2>{{ item.title }}h2>
    27.           <div class="description">{{ item.description }}div>
    28.           <div class="subDescription">{{ item.subDescription }}div>
    29.           <div class="link">
    30.             更多信息，请访问：
    31.             <br />
    32.             <span>{{ item.link }}span>
    33.           div>
    34.         div>
    35.       div>
    36.     transition>
    37.   div>
    38. template>
    39. <script>
    40. export default {
    41.   name: "product",
    42.   data() {
    43.     return {
    44.       products: [],
    45.       activeIndex: 0,
    46.       transitionName: "",
    47.       scrolling: false,
    48.       duration: 1000,
    49.       loading: false
    50.     };
    51.   },
    52.   watch: {
    53.     activeIndex(newIndex, oldIndex) {
    54.       if (this.scrolling) {
    55.         return;
    56.       }
    57.       if (this.$route.params.id) {
    58.         delete this.$route.params.id;
    59.         return;
    60.       }
    61.  
    62.       this.transitionName = newIndex < oldIndex ? "move-down" : "move-up";
    63.     }
    64.   },
    65.   created() {
    66.     this.loading = true;
    67.     const loading = this.$loading({
    68.       position: { top: 60 }
    69.     });
    70.     this.request
    71.       .get("/products")
    72.       .then(response => {
    73.         this.products = response;
    74.         this.loading = false;
    75.         loading.close();
    76.  
    77.         if (this.$route.params.id) {
    78.           this.activeIndex = this.products.findIndex(
    79.             item => item.id === this.$route.params.id
    80.           );
    81.         }
    82.       })
    83.       .catch();
    84.   },
    85.   mounted() {
    86.     window.addEventListener("mousewheel", this.mousewheelHandler);
    87.   },
    88.   destroyed() {
    89.     window.removeEventListener("mousewheel", this.mousewheelHandler);
    90.   },
    91.   computed: {
    92.     item() {
    93.       return this.products[this.activeIndex] || {};
    94.     }
    95.   },
    96.   methods: {
    97.     mousewheelHandler(e) {
    98.       if (this.scrolling) {
    99.         return;
    100.       }
    101.       this.scrolling = true;
    102.       if (e.wheelDelta > 0) {
    103.         this.transitionName = "move-down";
    104.         this.activeIndex =
    105.           this.activeIndex === 0
    106.             ? this.products.length - 1
    107.             : this.activeIndex - 1;
    108.       } else {
    109.         this.transitionName = "move-up";
    110.         this.activeIndex = (this.activeIndex + 1) % this.products.length;
    111.       }
    112.       setTimeout(() => {
    113.         this.scrolling = false;
    114.       }, this.duration);
    115.     }
    116.   }
    117. };
    118. script>

    4、代码结构图

    总结

    以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取

  • 相关阅读:
    Redis常见题型
    Cheat Engine 修改器获取内存数据心路历程， THREADSTACK0 C# .NET VB 获取基址 CE修改器
    【ArcGIS绘图系列1】在ArcGIS中制作柱状图与饼状图
    NiFi中缓存组件的运行机制及增删改缓存数据
    网络和Linux网络_2(套接字编程)socket+UDP网络通信代码
    vim常用命令
    JS 错误捕获
    InnoDB和MyISAM区别
    深入理解 Java 对象的内存布局
    数据库 PolarDB 开源之路该如何走?听听他们怎么说
  • 原文地址：https://blog.csdn.net/pandas23/article/details/126436651