vue - blog开发学习2

<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: {
      PostList
    },
    data() {
      return {
        postList: [
          {
            title: ‘测试1‘,
            content: ‘啊啊啊啊啊啊啊啊啊啊啊‘
          },
          {
            title: ‘测试1‘,
            content: ‘啊啊啊啊啊啊啊啊啊啊啊‘
          },
          {
            title: ‘测试1‘,
            content: ‘啊啊啊啊啊啊啊啊啊啊啊‘
          },
          {
            title: ‘测试1‘,
            content: ‘啊啊啊啊啊啊啊啊啊啊啊‘
          },
        ],
        postCount: 100
      }
    }

  }
</script>

<style scoped>

</style>

<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>

<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>

<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:‘首页‘,
            icon:‘ios-navigate‘,
            to:‘index‘
          },
          {
            name:‘类别‘,
            icon:‘ios-keypad‘,
            to:‘postClass‘
          },
          {
            name:‘新建‘,
            icon:‘ios-analytics‘,
            to:‘create‘
          },
          {
            name:‘修改‘,
            icon:‘ios-paper‘,
            to:‘edit‘
          },
          {
            name:‘关于我‘,
            icon:‘ios-paper‘,
            to:‘aboutMe‘
          }
        ]
      }
    }
  }
</script>

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

</style>

import axios from ‘axios‘

Vue.prototype.$axios = axios

使用时： 

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

或者

import axios from ‘axios‘
import VueAxios from ‘vue-axios‘

Vue.use(VueAxios,axios);


使用：
this.axios.get(‘api/getNewsList‘).then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })

npm install mockjs --save-dev   //开发使用  所以加上dev

require(‘./mock/mock.js‘)

//引入mockjs
const Mock = require(‘mockjs‘)
// 获取mock.Random对象
const Random = Mock.Random
//mock数据
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)

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

npm install bootstrap jquery --save

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

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