vue - blog開發學習2

首頁博客列表的開發

1、修改index.vue，使能夠支持列表功能

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

?

2、添加PostList自定義組件，自定義組件中使用到了iView中的Card標簽

<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、效果（訪問根路徑的話，會自動渲染index.vue中的內容，具體看router/index.js中的路由配置）

?

4、用router-link生成一個可點擊的鏈接，使能夠跳轉到具體內容頁面（post.vue）--頁面還是渲染到home.vue中，修改post-list.vue組件，添加了一個router-link，這樣，再點擊每一塊的時候都會跳轉到post.vue中，并且會帶著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頁的menu標簽，改成根據數據自動渲染菜單,zIndex這個是為了不覆蓋菜單

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

?

?6、首頁基本功能寫完后，使用mock模擬后臺返回的json數據，此方式基于axios發送請求方式，因此安裝axios

①npm install axios --save

②安裝完成之后，將axios綁定為全局函數，因此在main.js中添加

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);})

③安裝mockjs

npm install mockjs --save-dev //開發使用 所以加上dev

④修改main.js，添加自定義的mock.js（http://mockjs.com/）

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

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

⑤自定義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)

⑥修改index.vue中的獲取數據的方式

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

⑦添加bootstrap支持

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'

?

?

整體：

點擊每一個框：

?

posted @ 2019-05-26 18:51 巡山小妖N 閱讀(...) 評論(...) 編輯 收藏

總結

以上是生活随笔為你收集整理的vue - blog开发学习2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。