主内容页和个人介绍

web/front/src/components/ArticleList.vue

@@ -0,0 +1,12 @@
+<template>
+ <div>
+ <h3>文章列表</h3>
+ </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+</style>

web/front/src/components/Footer.vue

@@ -1,17 +1,14 @@
 <template>
- <v-footer padless color="primary">
- <v-col class="text-center white--text">
- {{ new Date().getFullYear() }} — GinBlog
- </v-col>
- </v-footer>
+  <v-footer padless color="indigo darken-2">
+  <v-col class="text-center white--text">
+  {{ new Date().getFullYear() }} — GinBlog
+  </v-col>
+  </v-footer>
 </template>
 
 <script>
-export default {
-
-}
+export default {}
 </script>
 
 <style>
-
 </style>

web/front/src/components/Nav.vue

@@ -0,0 +1,97 @@
+<template>
+ <v-card class="mx-auto" max-width="300">
+ <v-img src="../assets/NavBg.jpg">
+ <v-card-title>
+ <v-col align="center">
+ <v-avatar size="130" color="grey">
+ <img src="../assets/avatar.jpg" alt="" />
+ </v-avatar>
+ <div class="ma-4 white--text">asaki</div>
+ </v-col>
+ </v-card-title>
+ <v-divider></v-divider>
+ </v-img>
+
+ <v-col>
+ <div class="ma-3">About Me:</div>
+ <div class="ma-3">test</div>
+ </v-col>
+
+ <v-divider color="indigo"></v-divider>
+
+ <v-list nav dense>
+ <v-list-item>
+ <v-list-item-icon class="ma-3">
+ <v-icon>
+ {{ 'mdi-qqchat' }}
+ </v-icon>
+ </v-list-item-icon>
+ <v-list-item-content class="grey--text">
+ test
+ </v-list-item-content>
+ </v-list-item>
+
+ <v-list-item>
+ <v-list-item-icon class="ma-3">
+ <v-icon>
+ {{ 'mdi-wechat' }}
+ </v-icon>
+ </v-list-item-icon>
+ <v-list-item-content class="grey--text">
+ test
+ </v-list-item-content>
+ </v-list-item>
+
+ <v-list-item>
+ <v-list-item-icon class="ma-3">
+ <v-icon>
+ {{ 'mdi-sina-weibo' }}
+ </v-icon>
+ </v-list-item-icon>
+ <v-list-item-content class="grey--text">
+ test
+ </v-list-item-content>
+ </v-list-item>
+
+ <v-list-item>
+ <v-list-item-icon class="ma-3">
+ <v-icon>
+ {{ 'mdi-facebook' }}
+ </v-icon>
+ </v-list-item-icon>
+ <v-list-item-content class="grey--text">
+ test
+ </v-list-item-content>
+ </v-list-item>
+
+ <v-list-item>
+ <v-list-item-icon class="ma-3">
+ <v-icon>
+ {{ 'mdi-twitter' }}
+ </v-icon>
+ </v-list-item-icon>
+ <v-list-item-content class="grey--text">
+ test
+ </v-list-item-content>
+ </v-list-item>
+
+ <v-list-item>
+ <v-list-item-icon class="ma-3">
+ <v-icon>
+ {{ 'mdi-email' }}
+ </v-icon>
+ </v-list-item-icon>
+ <v-list-item-content class="grey--text">
+ test
+ </v-list-item-content>
+ </v-list-item>
+ </v-list>
+ </v-card>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+</style>

web/front/src/components/TopBar.vue

@@ -1,9 +1,9 @@
 <template>
  <div>
- <v-app-bar app color="primary">
+ <v-app-bar app color="indigo darken-2">
  <v-avatar color="grey" size="40"> </v-avatar>
  <v-container class="py-0 fill-height">
- <v-btn text color="white">首页</v-btn>
+ <v-btn text color="white" @click="$router.push('/')">首页</v-btn>
  <v-btn
  v-for="item in cateList"
  :key="item.id"

web/front/src/router/index.js

@@ -1,16 +1,20 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
+import ArticleList from '../components/ArticleList.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
  {
  path: '/',
  name: 'home',
- component: Home
+ component: Home,
+ children: [
+ { path: '/', component: ArticleList, meta: { title: '欢迎来到GinBlog' } }
+ ]
  },
- 
+
 ]
 
 const router = new VueRouter({
@@ -19,4 +23,11 @@ const router = new VueRouter({
  routes
 })
 
+router.beforeEach((to, from, next) => {
+ if (to.meta.title) {
+ document.title = to.meta.title
+ }
+ next()
+})
+
 export default router

web/front/src/views/Home.vue

@@ -2,8 +2,19 @@
  <v-app app>
  <TopBar></TopBar>
 
- <v-main>
- <v-container></v-container>
+ <v-main class="grey lighten-3">
+ <v-container>
+ <v-row>
+ <v-col cols="3">
+ <Nav></Nav>
+ </v-col>
+ <v-col>
+ <v-sheet min-height="80vh" rounded="lg">
+ <router-view></router-view>
+ </v-sheet>
+ </v-col>
+ </v-row>
+ </v-container>
  </v-main>
 
  <Footer></Footer>
@@ -13,9 +24,10 @@
 <script>
 import TopBar from '@/components/TopBar.vue'
 import Footer from '@/components/Footer.vue'
+import Nav from '@/components/Nav.vue'
 export default {
  name: 'Home',
 
- components: { TopBar, Footer }
+ components: { TopBar, Footer, Nav }
 }
 </script>