博客KGC

 home

<template>
<div>
    <HomeBanner/>
    <HomeMenu/>
    <HomeBlog/>
</div>
</template>
<script>
import HomeBanner from './HomeBanner.vue'
import HomeMenu from './HomeMenu.vue'
import HomeBlog from './HomeBlog.vue'
export default {
    components:{
        HomeBanner,
        HomeMenu,
        HomeBlog
    }
}
</script>
<style scoped>
</style>

homebanner 

<template>
  <div class="banner">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide><img src="../../assets/images/html.png" /></swiper-slide>
      <swiper-slide><img src="../../assets/images/react.png" /></swiper-slide>
      <swiper-slide><img src="../../assets/images/vue.png" /></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        autoplay:{
                delay: 3000,
                disableOnInteraction:false
            }
      },
    };
  },
};
</script>
<style scoped>
.banner img{
    width: 100vw;
    height: 200px;
}
</style>

homeblog 

<template>
  <div class="blog">
      <h4>推荐文章</h4>
      <div v-for="(item,index) in $store.state.hotblogs.blogs" :key="index">
          <div class="bg">
              {{item.title}}
              <div class="name">Angular</div>
          </div>
      </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
h4{
    margin-left: 10px;
    margin-bottom: 20px;
}
.blog{
    padding: 10px;
}
.bg{
    width: 100%;
    height: 100px;
    background: #ccc;
    text-align: center;
    line-height: 100px;
    margin-bottom: 10px;
    border-radius: 5px;
    /* 相对 */
    position: relative;
}
.name{
    position: absolute;
    background: #666;
    color: white;
    width: 80px;
    height: 30px;
    line-height: 30px;
    right: 10px;
    bottom: 10px;
    border-radius: 3px;
}
</style>

homemenu 

<template>
<div class="menu">
    <div @click="gotoList(item.id)" v-for="(item,index) in $store.state.category" :key="index">
        <div class="bg" :style="{backgroundColor:bc()}">{{item.category.substr(0,1)}}</div>
        <div class="name">{{item.category}}</div>
    </div>
</div>
</template>
<script>
export default {
    methods: {
        gotoList(id){
            this.$router.push('/category/'+id)
        },
        bc(){
            let arr = [6,7,8,9,'a','b','c','d','e','f']
            let color = '#'
            for(let i = 0;i<3;i++){
                color+= arr[Math.floor(Math.random()*10)]
            }
            return color
        }
    },
}

</script>
<style scoped>
.menu{
    display: flex;
    flex-wrap: wrap;
}
.menu>div{
    width: 25%;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bg{
    width: 44px;
    height: 44px;
    /* background: coral; */
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
}
</style>

blogcontent 

<template>
<div class="content">
    <div class="fhlb" @click="$router.push('/category/'+id)">
        >>>返回列表
    </div>
    <div>
        <div class="bt">{{blog.title}}</div>
        <div class="nr">{{blog.content}}</div>
    </div>
</div>
</template>
<script>
export default {
    data() {
        return {
            blog:{}
        }
    },
    // 接收两个参数
    props:['id','bid'],
    mounted() {
      this.blog = this.$store.state.category.find(r=>r.id==this.id).blogs.find(r=>r.id==this.bid)
    },
}
</script>
<style scoped>
.content{
    padding: 10px;
}
.fhlb{
    padding: 20px 0;
}
.bt{
    margin: 20px 0;
    text-align: center;
    font-weight: bold;
}
.nr{
    margin: 20px 0;
    text-align: center;
}
</style>

bloglist 

<template>
  <div class="list">
      <div class="category">
          "{{category.category}}"类目下文章列表
      </div>
      <div @click="$router.push('/')">
          >>> 返回首页
      </div>
      <div @click="gotoContent(item.id)" class="blogs" v-for="(item,index) in category.blogs" :key="index">
          {{item.title}}
      </div>
  </div>
</template>
<script>
export default {
  props: ["id"],
  data() {
    return {
      //  定义一个分类对象
      category: {},
    };
  },
  methods: {
    //   跳转到详情页
      gotoContent(bid){
          this.$router.push(`/category/${this.id}/${bid}`)
      }
  },
  // 页面挂载完成后
  mounted() {
    this.category = this.$store.state.category.find((r) => r.id == this.id);
  },
};
</script>
<style scoped>
.list{
    padding: 10px;
}
.category{
    margin: 20px 0;
    font-size: 20px;
    font-weight: bold;
}
.blogs{
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}
</style>

路由

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    component:()=>import('../components/Home/Home.vue')
  },
  {
    path:'/category/:id',
    props:true,
    component:()=>import('../components/Blogs/BlogList.vue')
  },
  {
    path:'/category/:id/:bid',
    props:true,
    component:()=>import('../components/Blogs/BlogContent.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 分类信息
    category: [
      {
        id: 0, category: "HTML", url: "/category/0", blogs: [
          {
            id: 0,
            title: "HTML5新增标签",
            content: "HTML5新增标签——内容"
          },
          {
            id: 1,
            title: "HTML基础语法",
            content: "HTML基础语法——内容"
          }
        ]
      },
      {
        id: 1, category: "CSS", url: "/category/1",
         blogs: [
          {
            id: 0,
            title: "CSS3新特性一览",
            content: "CSS3新特性一览——内容"
          },
          {
            id: 1,
            title: "CSS3动画使用",
            content: "CSS3动画使用——内容"
          }
        ]
      },
      {
        id: 2, category: "JavaScript", url: "/category/2", blogs: [
          {
            id: 0,
            title: "JavaScript内置对象一览表",
            content: "JavaScript内置对象一览表——内容"
          },
          {
            id: 1,
            title: "闭包的使用",
            content: "闭包的使用——内容"
          }
        ]
      },
      {
        id: 3, category: "HTTP", url: "/category/3", blogs: [
          {
            id: 0,
            title: "HTTP协议详细介绍",
            content: "HTTP协议详细介绍——内容"
          },
          {
            id: 1,
            title: "HTTP状态码一览",
            content: "HTTP状态码一览——内容"
          }
        ]
      },
      {
        id: 4, category: "React", url: "/category/4", blogs: [
          {
            id: 0,
            title: "React之状态管理",
            content: "React之状态管理——内容"
          },
          {
            id: 1,
            title: "React之脚手架使用",
            content: "React之脚手架使用——内容"
          }
        ]
      },
      {
        id: 5, category: "Vue", url: "/category/5", blogs: [
          {
            id: 0,
            title: "Vue常用指令",
            content: "Vue常用指令——内容"
          },
          {
            id: 1,
            title: "Vue生命周期",
            content: "Vue生命周期——内容"
          }
        ]
      },
      {
        id: 6, category: "Angular", url: "/category/6", blogs: [
          {
            id: 0,
            title: "Angular指令",
            content: "Angular指令——内容"
          },
          {
            id: 1,
            title: "Angular深入原理",
            content: "Angular深入原理——内容"
          }
        ]
      },
      {
        id: 7, category: "ES6", url: "/category/7", blogs: [
          {
            id: 0,
            title: "ECMAScript 的背景",
            content: "ECMAScript 的背景——内容"
          },
          {
            id: 1,
            title: "Promise 对象使用方法",
            content: "Promise 对象使用方法——内容"
          }
        ]
      }
    ],
    // 热点信息
    hotblogs: {
      id: 6, category: "Angular", url: "/category/6", blogs: [
        {
          id: 0,
          title: "Angular指令",
          content: "Angular指令——内容"
        },
        {
          id: 1,
          title: "Angular深入原理",
          content: "Angular深入原理——内容"
        }
      ]
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

APP

<template>
  <div>
    <div class="title">KGC技术博客</div>
    <router-view></router-view>
  </div>
</template>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  outline: none;
}
.a-c{
  text-align: center;
}
.flex{
  display: flex;
}
.j-s{
  justify-content: space-between;
}
.j-c{
  justify-content: center;
}
.title{
  height: 50px;
  background: #f8f8f8;
  color: #555;
  line-height: 50px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/css/swiper.css'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')