我又回来啦~

       很久没有来写文章了，最近有些处于迷茫状态，担心自己学的知识没法学以致用，为了练手让自己熟练起来，在各种社交平台上看伙伴们分享经验技术。最终在十一月中的样子，我决定开始动手仿作一个网站。我选择的网站是拉勾网站，大致看了下网站，感觉能够包含大量已学的知识点，是个不错的选择。我用的是HTML、CSS、JavaScript、Vue, 和Layui.

一、准备阶段

       不着急动手，先观察网站，在脑海里大致布局一遍。然后开始创建项目，在主 src 文件夹下创建一个单独的 views 文件夹用存放大的分页文件夹，我分成了5个部分：company公司页面、course课程页面、index首页面、job职位页面、university校园页面，里面各放入index.vue，这里主要是各个分页写代码的地方。再建一个route文件夹存放路由，index.js文件中可以直接先创建好各个分页的路由。接下来就可以在GitHub上创建一个仓库，用来存放和记录此次仿作的拉勾网，建立与本地仓库之间的联系。接下来就可以开分支了。我先做的是头部导航区域，所以先创建了一个nav-bar分支，然后在components文件夹下新建nav-bar文件夹，在nav-bar文件夹下新建vue文件，用于写头部导航区域的代码。头部导航区域的话，我是去layui网站找的模板，然后自己再根据需求修改的。这个区域的难点就在于配置点击某一个主导航，要实现网站地址的跳转，这里用到了前面配置的路由。

（一）views文件夹展示

1. 截图

    views文件夹截图.png(p1-juejin.byteimg.com/tos-cn-i-k3…?)

（二）router文件夹index.js中配置的路由

1. index.js

import Vue from 'vue'
import Router from 'vue-router'
import Company from '@/views/Company'
import Cource from '@/views/Cource'
import Index from '@/views/Index'
import Job from '@/views/Job'
import University from '@/views/University'

Vue.use(Router)

const routes = [
    {
        path: '/',
        name: 'Index',
        component: Index
      },
      {
        path: '/company',
        name: 'Company',
        component: Company
      },
      {
        path: '/cource',
        name: 'Cource',
        component: Cource
      },
      {
        path: '/job',
        name: 'Job',
        component: Job
      },
      {
        path: '/university',
        name: 'University',
        component: University
      },
]

const router = new Router({
    routes
})

export default router

（三）nav-bar文件夹下的index.vue：

1. template区域html代码

    <div class="box">
      <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item left"><a href="https://www.lagou.com/" class="logo"><img src="https://lagou-zhaopin-fe.lagou.com/fed/lg-www-fed/image/20210624/1624523613071.png" alt=""></a></li>
        <li class="layui-nav-item left"><span class="city" @click.stop="citySelect">{{thisCity}}<i class="layui-icon layui-icon-triangle-d"></i></span></li>
        <li class="layui-nav-item left layui-this">
          <router-link to="/" active-class="current">首页</router-link>
        </li>
        <li class="layui-nav-item left" v-for="(i, index) in navItems" :key="index">
          <router-link :to="i.url" active-class="current">{{i.name}}</router-link>
        </li>
        <li class="layui-nav-item left">
          <a :href="appUrl" class="app-color"><i class="layui-icon layui-icon-cellphone"></i> 拉勾APP</a>
        </li>
        <li class="layui-nav-item right">
          <a :href="osUrl">进入企业版</a>
        </li>
        <li class="layui-nav-item right">
          <a href="">我</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">账号设置</a></dd>
            <dd><a href="javascript:;">退出</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item right">
          <a :href="resumeUrl">我的简历</a>
        </li>
        <li class="layui-nav-item right pannel-msg">
          <i class="layui-icon layui-icon-notice" @click="msgOn"></i>
          <div class="layui-card" v-show="divVisible">
            <div class="layui-card-header">消息通知</div>
            <div class="layui-card-body">暂时没有新的消息~</div>
            <div class="card-footer"><a href="" class="msg-all">查看全部消息</a></div>
          </div>
        </li>
      </ul>
    </div>

2. script区域代码

<script>
export default {
  data(){
    return {
      appUrl: 'https://help.lagou.com/staticpage/app_download/pc/index.html',
      osUrl: 'https://easy.lagou.com/dashboard/index.htm?from=c_index',
      resumeUrl: 'https://www.lagou.com/resume/myresume.html',
      navItems: [
          {name: '职位', url: '/job'},
          {name: '公司', url: '/company'},
          {name: '校园', url: '/university'},
          {name: '课程', url: '/cource'}
        ],
        divVisible: false,
        cityVisible: false,
        thisCity: '长沙站',
    }
  },
  methods: {
    msgOn(){
      this.divVisible = !this.divVisible
    },
    citySelect(){
      this.cityVisible = !this.cityVisible
    },
  }
}
</script>

3. css代码

<style scoped>
* {
  padding: 0%;
  margin: 0%;
}
  .layui-nav {
    padding: 0 100px;
  }
  .layui-nav,
  li {
    background: #32373e;
    height: 60px;
  }
  li a,
  li span,
  i {
    line-height: 60px;
    font-size: 20px;
  }
  .logo img {
      height: 20px;
    }
  .layui-nav .layui-nav-item .city,
  .layui-nav .layui-nav-item .app-color {
  color: #0dca9f;
}
.layui-nav .layui-nav-item .city:hover,
.pannel-msg .layui-icon-notice:hover {
  cursor: pointer;
}
.left {
  float: left;
}
.right {
  float: right;
}
.pannel-msg {
  position: relative;
  padding-right: 20px;
}
.layui-card {
  position: absolute;
  left: -280px;
  top: 60px;
  width: 600px;
  height: 200px;
  border: 2px solid #1f1818;
}
.layui-card-header {
  padding: 0%;
  margin-left: 20px;
  height: 58px;
  font-size: 19px;
  line-height: 58px;
}
.layui-card-body {
  padding: 0%;
  height: 82px;
  border-top: 1px solid #1f1818;
  border-bottom: 1px solid #1f1818;
  color: #54544f;
  font-size: 18px;
  text-align: center;
  line-height: 82px;
}
.card-footer {
  height: 58px;
  text-align: center;
  line-height: 58px;
}
.card-footer .msg-all {
  color: #000;
  font-size: 18px;
}
.card-footer .msg-all:hover {
  color: #000;
}
</style>