first commit

历届学生/罗朝/项目练习/天气预报_vue/src/App.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="app">
+ 
+    <v-h ></v-h>
+
+    <div class="content">
+       <transition name="bounce">
+          <router-view/>
+       </transition>
+    </div>
+
+   
+   <v-f></v-f>
+   
+
+
+    <mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'">
+        <mu-list>
+          <mu-list-item button>
+            <mu-list-item-title>Menu Item 1</mu-list-item-title>
+          </mu-list-item>
+          <mu-list-item button>
+            <mu-list-item-title>Menu Item 2</mu-list-item-title>
+          </mu-list-item>
+          <mu-list-item  @click="open = false" button>
+            <mu-list-item-title>Close</mu-list-item-title>
+          </mu-list-item>
+        </mu-list>
+      </mu-drawer>
+
+
+  </div>
+</template>
+
+<script>
+// 第一步导入组件
+import HeaderComponents from "./components/public/header"
+import FooterComponents from "./components/public/footer"
+export default {
+  name: 'App',
+  data() {
+    return {
+      docked: false,
+      open: false,
+      position: 'left'
+    }
+  },
+  // 注册组件
+  components: {
+    'v-h': HeaderComponents,
+    'v-f': FooterComponents
+  }
+}
+</script>
+
+<style>
+.content {
+  margin: 56px 0;
+}
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.headers {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.bounce-enter-active {
+  animation: bounce-in .5s;
+}
+.bounce-leave-active {
+  animation: bounce-in .5s reverse;
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>

历届学生/罗朝/项目练习/天气预报_vue/src/api/index.js

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import config from '../config';
+
+// ajax请求的公共地址，axios会自动进行地址的拼接形成一个完整地址
+axios.defaults.baseURL = config.baseURL;
+
+
+export default {
+  get(url,data,callback) {
+    axios.get(url, {
+      params: data
+    })
+    .then(function (response) {
+      callback(response.data);
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+  },
+  post() {}
+}

历届学生/罗朝/项目练习/天气预报_vue/src/api/service.js

@@ -0,0 +1,7 @@
+import api from './index'
+import config from '../config'
+export default {
+  getWeatherData (params,callback) {
+    api.get(config.WeatherUrl,params,callback)
+  }
+}

历届学生/罗朝/项目练习/天气预报_vue/src/components/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>
+     <router-link :to="{ name: 'info', params: { id: '1',title: 'title' }}">详情</router-link>
+    </h2>  
+
+  </div>
+</template>
+
+<script>
+export default {
+ created() {
+   this.getData()
+ },
+  data () {
+    return {
+      msg: '你好'
+    }
+  },
+  methods: {
+    getData() {
+      var params = {
+        cityname: '合肥'
+      };
+      this.$service.getWeatherData(params, function(res) {
+        console.log(res)
+      })
+    }
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

历届学生/罗朝/项目练习/天气预报_vue/src/components/info.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="info">
+    我是详情页面 {{ $route.params.id }} | {{ $route.params.title }}
+  </div>
+</template>
+
+<script>
+export default {
+  
+}
+</script>
+
+<style scoped>
+
+</style>

历届学生/罗朝/项目练习/天气预报_vue/src/components/public/footer.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="wfooter">
+    <mu-bottom-nav :value.sync="shift" shift class="footer">
+      <mu-bottom-nav-item value="movies" title="首页" icon="ondemand_video"></mu-bottom-nav-item>
+      <mu-bottom-nav-item value="music" title="音乐" icon="music_note"></mu-bottom-nav-item>
+      <mu-bottom-nav-item value="books" title="阅读" icon="books"></mu-bottom-nav-item>
+      <mu-bottom-nav-item value="pictures" title="相册" icon="photo"></mu-bottom-nav-item>
+    </mu-bottom-nav>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      shift: 'movies',
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
+
+

历届学生/罗朝/项目练习/天气预报_vue/src/components/public/header.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="wheader"> 
+    <mu-appbar style="width: 100%;" color="primary" class="headers">
+      <mu-button icon slot="left" @click="openDrawer">
+        <mu-icon value="menu"></mu-icon>
+      </mu-button>
+      首页
+
+      <mu-button flat slot="right">LOGIN</mu-button>
+    </mu-appbar>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+       
+    }
+  },
+   methods: {
+     openDrawer() {
+       this.$parent.$data.open = !this.$parent.$data.open
+     }
+   },
+}
+</script>
+
+<style scoped>
+
+</style>

历届学生/罗朝/项目练习/天气预报_vue/src/config/index.js

@@ -0,0 +1,4 @@
+export default {
+  baseURL: 'http://103.91.219.160:3000',
+  WeatherUrl: '/getWeather',
+}

历届学生/罗朝/项目练习/天气预报_vue/src/main.js

@@ -0,0 +1,25 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+
+import service from './api/service'
+
+import MuseUI from 'muse-ui';
+import 'muse-ui/dist/muse-ui.css';
+
+Vue.use(MuseUI);
+
+Vue.prototype.$service = service
+
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

历届学生/罗朝/项目练习/天气预报_vue/src/router/index.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Index from '@/components/index'
+import Info from '@/components/info'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'index',
+      component: Index
+    },
+    {
+      path: '/info/:id/:title',
+      name: 'info',
+      component: Info
+    }
+  ]
+})