vue - blog the development of learning 2

Development Home blog list

1, modify index.vue, the list of features to support

<template>
  <div>
    <PostList v-for="(item,index) in postList" :title="item.title" :content="item.content" :postCount="postCount"
              :key="index"></PostList>
  </div>
</template>

<script>
  import PostList from '@/components/post-list'

  export default {
    name: "index",
    components: {
      Post List
    },
    data() {
      return {
        mail list: [
          {
            title: ' Test 1 ' ,
            Content: ' ah ah ah ah ah ah '
          },
          {
            title: ' Test 1 ' ,
            Content: ' ah ah ah ah ah ah '
          },
          {
            title: ' Test 1 ' ,
            Content: ' ah ah ah ah ah ah '
          },
          {
            title: ' Test 1 ' ,
            Content: ' ah ah ah ah ah ah '
          },
        ],
        postCount: 100
      }
    }

  }
</script>

<style scoped>

</style>

 

2, was added PostList custom components, custom components are used to label the Card in iView

<template>
  <div style="background: #eee;padding: 1px;">
    <Card :bordered="false">
      <p>{{title}}</p>
      <p>{{content}}</p>
    </Card>
  </div>
</template>

<script>
  export default {
    name: "PostList",
    props: {
      title: {
        type: String,
        default: ''
      },
      content: {
        type: String,
        default: ''
      },
      postCount: {
        type: Number,
        default: 0
      }
    }
  }
</script>

<style scoped>

</style>

3, the effect (if access to the root path, will automatically render the content index.vue specific look routing configuration router / index.js in)

 

4, generates a clickable link with router-link, enabling jump to the specific content of the page (post.vue) - or render to home.vue page, modifying the post-list.vue assembly, adds a router- Link, so that, when a click each post.vue will jump to, and the value will take postId

<template>
  <div style="background: #eee;padding: 1px; margin-left: 10%;margin-right: 10%">
    <router-link tag="div" :to="{name:'Post',params:{postId:postId}}">
      <Card :bordered="false">
        <p>{{title}}</p>
        <p>{{content}}</p>
      </Card>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: "PostList",
    props: {
      postId: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      content: {
        type: String,
        default: ''
      },
      postCount: {
        type: Number,
        default: 0
      }
    },
    methods: {}
  }
</script>

<style scoped>

</style>

 

5, home page of the menu label modification, change the menu automatically rendering the data, this is not to the zIndex Overlay Menus

<template>
  <div class="layout">
    <Layout>
      <Header :style="{position: 'fixed', width: '100%',zIndex:'900'}">
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">
            <img src="static/img/logo.png" alt="">
          </div>
          <div class="layout-nav">
            <MenuItem v-for="(item,index) in menuList" :name="index" :to="item.to" :key="index">
              <Icon :type="item.icon"></Icon>
              {{item.name}}
            </MenuItem>
          </div>
        </Menu>
      </Header>

      <Content :style="{margin: '88px 0 0', background: '#fff', minHeight: '500px'}">
        <router-view></router-view>
      </Content>
      <Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
    </Layout>
  </div>
</template>

<script>
  export default {
    name: "home",
    data() {
      return {
        menuList:[
          {
            name: ' Home ' ,
            icon:'ios-navigate',
            to:'index'
          },
          {
            name: ' category ' ,
            icon:'ios-keypad',
            to:'postClass'
          },
          {
            name: ' New ' ,
            icon:'ios-analytics',
            to:'create'
          },
          {
            name: ' Review ' ,
            icon:'ios-paper',
            to:'edit'
          },
          {
            name: ' About Me ' ,
            icon:'ios-paper',
            to:'aboutMe'
          }
        ]
      }
    }
  }
</script>

<style scoped>
  @import "../static/css/home.css";

</style>

 

 6, the basic functions of the Home finished, using simulated mock json data returned back, based on this embodiment mode axios transmission request, so the installation axios

①npm install axios --save

② After installation is complete, axios bound as global functions, so add in the main.js

import axios from 'axios'

Vue.prototype. $ Axios = axios

when using it: 

this.$axios.get('api/getNewsList')
.then((response)=>{
    this.newsList=response.data.data;
}).catch((response)=>{
    console.log(response);
})

or

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use (VueAxios, axios);


use:
this.axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })

③ installation mockjs

npm install mockjs --save-dev // developed using so add dev

④ modify main.js, add mock.js custom ( http://mockjs.com/ )

https://blog.csdn.net/xiaoxiaojie12321/article/details/81301399

require('./mock/mock.js')

⑤ Custom mock.js

// introduced mockjs 
const = Mock the require ( 'mockjs' )
 // Get the object mock.Random 
const the Random = Mock.Random
 // the mock data 
const Data = () => {
  let posts = []
  for (let i = 0; i < 50; i++) {
    let post = {
      title: Random.csentence(5, 30),
      content: Random.csentence(4000, 5000)
    }
    posts.push(post)
  }

  return {
    posts: posts
  }
}



Mock.mock('/api/posts','get',data)

⑥ modify the way in obtaining data index.vue

    created() {
      this.$axios({
        url: '/api/posts',
        method: 'get'
      }).then(response => {
        this.postList = response.data.posts
        console.log(this.postList)
      })
    }

⑦ add bootstrap support

npm install bootstrap jquery --save

webpack.base.conf.js

  plugins:[
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ],

main.js

//boostrap
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

 

 

overall:

Click on each box: