路飞首页前端

路飞前台的全局CSS，全局配置文件

整理项目

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

router/index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
]

HomeView.vue

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
}
</script>

全局css

1.新建一个assets-css----global.css
    /* 声明全局样式和项目的初始化样式 */
    body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
        margin: 0;
        padding: 0;
        font-size: 15px;
    }

    a {
        text-decoration: none;
        color: #333;
    }

    ul {
        list-style: none;
    }

    table {
        border-collapse: collapse; /* 合并边框 */
    }
    
2.全局生效 main.js中配置
    import '@/assets/css/global.css'

全局js

向后端发送请求，测试阶段的地址为127.0.0.1:8000，后期项目上线后地址改变
写一个全局的js，js中有一个url地址，所有组件发送请求都使用该url地址

1.新建assets-js----settings.js
    export default {
        BASE_URL:'http://127.0.0.1:8000/api/v1'
    }
    
2.main.js中引入
    import settings from "@/assets/js/settings";
    Vue.prototype.$settings = settings
    
3.任意组件中使用
    this.$srttings.BASE_URL
    this.$axios.get(this.$settings.BASE_URL+'/users').then(res=>{})

安装axios

1.安装、
    cnpm install axios -S
2.把axios放到vue原型中，即main.js中
    import axios from 'axios';
    Vue.prototype.$axios=axios
3.在任意组件中使用
    this.$ajax.get()

安装vue-cookies

1.安装
    cnpm install vue-cookies -S
2.把vue-cookies放到vue原型中，即main.js中
    import cookies from 'vue-cookies';
    Vue.prototype.$cookies=cookies
3.在任意组件中使用
    this.$cookies.set()
    

安装elementui

1.安装
    cnpm install element-ui -S
2.main.js配置
    import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';

前台主页功能

前台主页可大致分为三个部分头部组件、轮播图组件、尾部组件

头部组件 Header

<template>
<div class="header">
  <div class="slogan">
    <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
  </div>
  <div class="nav">
    <ul class="left-part">
      <li class="logo">
        <router-link to="/">
          <img src="../assets/img/head-logo.svg" alt="">
        </router-link>
      </li>
      <li class="ele">
        <span @click="goPage('/free-course')" :class="{active:url_path === '/free-course'}">免费课</span>
      </li>
      <li class="ele">
        <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
      </li>
      <li class="ele">
        <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">高级课程</span>
      </li>
    </ul>
    <div class="right-part">
      <div>
        <span>登录</span>
        <span class="line"> | </span>
        <span>注册</span>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "Header",
  data(){
    return {
      // 当前路径，在sessionStorage中取的，如果取不到就是 /
      url_path: sessionStorage.url_path || '/',
    }
  },
  methods: {
    goPage(url_path) {
      // 判断是不是当前路径，如果不是就跳转
      if (this.url_path !== url_path){
        this.$router.push(url_path);
      }
      sessionStorage.url_path = url_path;
    },
  },
  created() {
    // 组件加载完成，就取出当前路径存到sessionStorage
    sessionStorage.url_path = this.$route.path;
    // 让url_path 等于当前路径
    this.url_path = this.$route.path
  }
}
</script>

<style scoped>
 .header {
        background-color: white;
        box-shadow: 0 0 5px 0 #aaa;
    }

    .header:after {
        content: "";
        display: block;
        clear: both;
    }

    .slogan {
        background-color: #eee;
        height: 40px;
    }

    .slogan p {
        width: 1200px;
        margin: 0 auto;
        color: #aaa;
        font-size: 13px;
        line-height: 40px;
    }

    .nav {
        background-color: white;
        user-select: none;
        width: 1200px;
        margin: 0 auto;

    }

    .nav ul {
        padding: 15px 0;
        float: left;
    }

    .nav ul:after {
        clear: both;
        content: '';
        display: block;
    }

    .nav ul li {
        float: left;
    }

    .logo {
        margin-right: 20px;
    }

    .ele {
        margin: 0 20px;
    }

    .ele span {
        display: block;
        font: 15px/36px '微软雅黑';
        border-bottom: 2px solid transparent;
        cursor: pointer;
    }

    .ele span:hover {
        border-bottom-color: orange;
    }

    .ele span.active {
        color: orange;
        border-bottom-color: orange;
    }

    .right-part {
        float: right;
    }

    .right-part .line {
        margin: 0 10px;
    }

    .right-part span {
        line-height: 68px;
        cursor: pointer;
    }
</style>

轮播图组件 Banner

<template>
  <div class="banner">
<el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in img_list" :key="item.id">
      <div v-if="item.link.indexOf('http') > -1">
        <a :href="item.link">
          <img :src="item.image" alt="">
        </a>
      </div>
      <div v-else>
        <router-link :to="item.link">
          <img :src="item.image" alt="">
        </router-link>
      </div>
    </el-carousel-item>
  </el-carousel>
    </div>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      img_list: []
    }
  },
  created() {
    this.$axios.get(this.$settings.BASE_URL + '/home/banner/').then(res => {
      console.log(res.data)
      if (res.data.code == 100) {
        this.img_list = res.data.data
      } else {
        this.$message(res.data.msg)
      }
    }).catch(res => {
      this.$message('轮播图服务器异常，请稍后再试')
    })
  }
}
</script>

<style scoped>
.el-carousel__item {
  height: 400px;
  min-width: 1200px;
}

.el-carousel__item img {
  height: 400px;
  margin-left: calc(50% - 1920px / 2);
}
</style>

尾部组件 Footer

<template>
<div class="footer">
        <ul>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>商务合作</li>
            <li>帮助中心</li>
            <li>意见反馈</li>
            <li>新手指南</li>
        </ul>
        <p>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p>
    </div>
</template>

<script>
export default {
  name: "Footer"
}
</script>

<style scoped>
 .footer {
        width: 100%;
        height: 128px;
        background: #25292e;
        color: #fff;
    }

    .footer ul {
        margin: 0 auto 16px;
        padding-top: 38px;
        width: 810px;
    }

    .footer ul li {
        float: left;
        width: 112px;
        margin: 0 10px;
        text-align: center;
        font-size: 14px;
    }

    .footer ul::after {
        content: "";
        display: block;
        clear: both;
    }

    .footer p {
        text-align: center;
        font-size: 12px;
    }
</style>