VueResource 实现网络请求

Advanced/vuedemo02/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "vue": "^2.5.11",
+    "vue-resource": "^1.5.1",
     "vue-router": "^3.0.2"
   },
   "browserslist": [

Advanced/vuedemo02/src/App.vue

@@ -26,12 +26,19 @@
 <style lang="scss" scoped>
 	/*css  局部作用域  scoped*/
 	#app {
-		.css_title {
-			color: red;
+		.css_title{
+			color: red
 		}
-
-		.css_title2 {
-			color: #008000;
+		.header {
+			height: 4.4rem;
+			background: #000;
+			color: #fff;
+			line-height: 4.4rem;
+			text-align: center;
+			a {
+				color: #fff;
+				padding: 0 2rem
+			}
 		}
 	}
 </style>

Advanced/vuedemo02/src/assets/css/base.scss

@@ -0,0 +1,31 @@
+@charset "utf-8";
+body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+    margin: 0;
+    padding: 0;
+}
+
+html{
+    font-size: 62.5%;
+}
+
+body {
+    font: 18px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif;
+    color: #555;
+    background-color: #F7F7F7;
+}
+em, i {
+    font-style: normal;
+}
+ul,li{
+    list-style-type: none;
+}
+strong {
+    font-weight: normal;
+}
+.clearfix:after {
+    content: "";
+    display: block;
+    visibility: hidden;
+    height: 0;
+    clear: both;
+}

Advanced/vuedemo02/src/components/Content.vue

@@ -1,29 +1,44 @@
 <template>
-   
-    <div id="content">    
-       我是详情页面
-    </div>
+	<div id="content">
+		我是详情页面
+		<h2>{{list.title}}</h2>
+		<div v-html="list.content"></div>
+	</div>
 </template>
-
-
 <script>
-    
-
-
-    export default{
-
-        data(){
-
-            return{
-
-                msg:'数据'
-            }
-        },
-        mounted(){
-
-                console.log(this.$route.params);  /*获取动态路由传值*/
-
-        }
-
-    }
-</script>
+	export default {
+		data() {
+			return {
+				msg: '数据',
+				list: []
+			}
+		},
+		mounted() {
+			var aid = this.$route.params.aid;
+			this.requestData(aid);
+			console.log(this.$route.params); /*获取动态路由传值*/
+		},
+		methods: {
+			requestData(aid) {
+				//get请求如果跨域的话 后台php java 里面要允许跨域请求
+				var api = 'http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=' + aid;
+				this.$http.get(api).then((response) => {
+					console.log(response);
+					this.list = response.body.result[0];
+				}, (err) => {
+					console.log(err)
+				})
+			}
+		}
+	}
+</script>
+<style lang="scss">
+	#content {
+		padding: 1rem;
+		line-height: 2;
+
+		img {
+			max-width: 100%;
+		}
+	}
+</style>

Advanced/vuedemo02/src/components/News.vue

@@ -1,32 +1,58 @@
-<template>    
-    <div id="news">    
-       我是新闻组件   
+<template>
+	<div id="news">
+		我是新闻组件
 
 
-     <ul>
-        <li v-for="(item,key) in list">
-             <router-link :to="'/content/'+key">{{key}}--{{item}}</router-link>
-        </li>
-     </ul>
-          
-    </div>
+		<ul>
+			<li v-for="(item,key) in list">
+				<router-link :to="'/content/'+item.aid">{{key}}--{{item.title}}</router-link>
+			</li>
+		</ul>
+
+	</div>
 
 </template>
 
 
 <script>
-
-    export default{
-        data(){
-            return {               
-               msg:'我是一个新闻组件'  ,    
-               list:['111111','222222','333333']        
-            }
-        }
-    }
-
+	export default {
+		data() {
+			return {
+				msg: '我是一个新闻组件',
+				list: []
+			}
+		},
+		methods: {
+			requestData() {
+				//jsonp请求的话  后台api接口要支持jsonp
+				var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
+				this.$http.jsonp(api).then((response) => {
+					console.log(response);
+					//注意：用到this要注意this指向
+					this.list = response.body.result;
+				}, function(err) {
+
+					console.log(err);
+				})
+			}
+		},
+		mounted() {
+			this.requestData();
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
-    
-</style>
+	.list {
+		li {
+			height: 3.4rem;
+			line-height: 3.4rem;
+			boder-bottom: 1px solid #eee;
+			font-size: 1.6rem;
+
+			a {
+				color: #666;
+			}
+		}
+	}
+</style>

Advanced/vuedemo02/src/main.js

@@ -3,12 +3,17 @@ import App from './App.vue'
 
 //导入路由
 import routers from './router/routers'
-import VueRouter from 'vue-router'
 import * as Api from './common/api'
-import * as common from './common/common'
 
+import VueRouter from 'vue-router'
 Vue.use(VueRouter);
 
+import VueResource from 'vue-resource';
+Vue.use(VueResource);
+
+// 引入全局css
+import './assets/css/base.scss';
+
 //3.实例化VueRouter
 const router = new VueRouter({
   routes:routers // （缩写）相当于 routes: routes

Advanced/vuedemo02/src/router/routers.js

@@ -1,11 +1,3 @@
-/**
- *      path         页面路由地址
- *      navShow      是否显示页面头部
- *      tabShow      是否显示页面底部导航
- *      title        页面标题
- *      keepAlive    是否缓存页面
- *      @type {*[]}
- */
 //1.创建组件
 import Home from '../components/Home.vue';
 import News from '../components/News.vue';

Advanced/vuedemo02/webpack.config.js

@@ -16,11 +16,41 @@ module.exports = {
           'vue-style-loader',
           'css-loader'
         ],
-      },      {
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader'
+        ],
+      },
+      {
+        test: /\.sass$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader?indentedSyntax'
+        ],
+      },
+      {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
           loaders: {
+            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
+            // the "scss" and "sass" values for the lang attribute to the right configs here.
+            // other preprocessors should work out of the box, no loader config like this necessary.
+            'scss': [
+              'vue-style-loader',
+              'css-loader',
+              'sass-loader'
+            ],
+            'sass': [
+              'vue-style-loader',
+              'css-loader',
+              'sass-loader?indentedSyntax'
+            ]
           }
           // other vue-loader options go here
         }