首页 > 其他分享 >路飞首页前端

路飞首页前端

时间:2023-03-02 20:34:52浏览次数:32  
标签:axios url 前端 js 路飞 首页 path margin color

路飞前台的全局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>
<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>

标签:axios,url,前端,js,路飞,首页,path,margin,color
From: https://www.cnblogs.com/zyg111/p/17173370.html

相关文章

  • 路飞后台
    后台主页模块设计1.首页要写哪些接口轮播图接口推荐课程接口2.创建首页app在apps文件夹下执行python../../manage.pystartapphome3.创建......
  • 路飞
    今日内容1.git多分支2.git远程仓库3.ssh方式连接远程仓库4.协同开发5.冲突解决6.线上分支合并7.远程仓库回滚1.git多分支#为什么要有分支 -可以保证,主分支的版......
  • 路飞项目day_06
    目录今日内容详细一、git多分支二、git远程仓库三、ssh方式连接远程仓库四、协同开发五、冲突解决六、线上分支合并七、远程仓库回滚今日内容详细一、git多分支#为什么......
  • python之路 80 路飞项目、git多分支、git远程仓库、ssh方式连接远程仓库、协同开发、
    git多分支为什么要有分支可以保证,主分支的版本都是可以查看的版本我们都在开发分支开发,开发完成,合并到主分支分支操作分支查看gitbranch分支......
  • 前端_移动端设配方案
    1.浏览器兼容:一、css兼容:不同浏览器的标签默认的margin和padding不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大。碰到频率:100%......
  • 路飞-day5——git 多分支开发、git远程仓库、ssh方式连接远程仓库、协同开发、冲突解
    目录一、git多分支开发git分支管理分支操作公司里使用的分支方案二、git远程仓库把我们写了一部分的luffy项目上传到gitee上传项目到本地版本库上传项目到远程仓库需要被......
  • 前端已死?我看未必,但「低代码」已剑指前端程序员
    本文笔者会从以下几个方面分享,希望能够帮助正在迷茫的前端小伙伴提供一点思路!逛技术博客不局限框架全栈工程师兴起关注前沿写技术文章录制前端视频总......
  • 设置了msg放进model中了,前端页面却读取不出来?
    设置了msg放进model中了,前端页面却读取不出来?index.html<pstyle="color:red"th:text="${msg}"th:if="${not#strings.isEmpty(msg)}"></p>controller.......
  • 系统化学习前端之CSS
    前言CSS层叠样式表,之所以是层叠,是因为在CSS中,后写的样式(权重高)是可以覆盖之前(权重低)的相同样式的。HTML可以书写页面内容,CSS则负责排版和美化页面内容,使得用户能够......
  • 前端三件套--读书笔记(一)HTML
    前端三件套--读书笔记(一)HTML摘要:书名:《网页设计与编程》-------耿增民内容:HTML的基本标签一、HTML标签语法:注释标签:<!--注释标签-->标签的属性:<标签名......