1.加入豆瓣api.可以查询近期热门电影，音乐以及图书查询。

build/webpack.base.conf.js

@@ -72,13 +72,14 @@ module.exports = {
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
       }
-    ],
+    ]
+
+  },
     plugins: [
       new webpack.optimize.CommonsChunkPlugin('common.js'),
       new webpack.ProvidePlugin({
       jQuery: "jquery",
       $: "jquery"
       })  
     ]
-  }
 }

build/webpack.dev.conf.js

@@ -33,7 +33,7 @@ module.exports = merge(baseWebpackConfig, {
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
-      favicon: resolveApp('favicon.ico'),
+      favicon: resolveApp('logo.ico'),
       inject: true
     }),
     new FriendlyErrorsPlugin()

config/index.js

@@ -27,7 +27,22 @@ module.exports = {
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/weather': {
+        target: 'http://www.sojson.com/open/api/weather/json.shtml',
+        changeOrigin:true,
+        pathRewrite: {
+          '^/weather': ''
+        }
+      },
+      '/douban': {
+        target: 'https://api.douban.com/v2',//设置你调用的接口域名和端口号 别忘了加http
+        changeOrigin: true,
+        pathRewrite: {
+          '^/douban': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
+        }
+      }
+    },
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README
     // (https://github.com/webpack/css-loader#sourcemaps)

package.json

@@ -11,9 +11,10 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
-    "jquery" : "^3.2.1",
     "axios": "0.16.2",
     "element-ui": "^2.0.11",
+    "http-proxy-middleware": "^0.17.3",
+    "jquery": "^3.2.1",
     "js-cookie": "2.1.4",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

src/router/index.js

@@ -62,5 +62,15 @@ export const asyncRouterMap = [
     children: [{ path: 'index', name: 'Table', component: _import('table/index'), meta: { role: ['user'] }}]
   },
 
+  {
+    path: '/DouBan',
+    component: Layout,
+    redirect: 'noredirect',
+    name:"豆瓣查询",
+    icon: 'tubiao',
+    children: [{ path: 'movie', name: '热门电影', component: _import('DouBan/movie'), meta: { role: ['system'] }},
+    { path: 'music', name: '音乐排行', component: _import('DouBan/music'), meta: { role: ['system'] }},
+    { path: 'book', name: '热门图书', component: _import('DouBan/book'), meta: { role: ['system'] }}]
+  },
   { path: '*', redirect: '/404', hidden: true }
 ]

src/store/getters.js

@@ -2,6 +2,7 @@ const getters = {
   sidebar: state => state.app.sidebar,
   token: state => state.user.token,
   // avatar: state => state.user.avatar,
+  realname:state=>state.user.realname,
   name: state => state.user.name,
   roles: state => state.user.roles,
   permission_routers: state => state.permission.routers,

src/utils/fetch.js

@@ -18,6 +18,7 @@ service.interceptors.request.use(config => {
   if (store.getters.token) {
     config.headers['auth'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
   }
+  console.log("拦截req")
   return config
 }, error => {
   // Do something with request error

src/views/dashboard/index.vue

@@ -1,32 +1,49 @@
 <template>
   <div class="dashboard-container">
+    <el-row>
+      <el-col :span="8">
+        <el-card :body-style="{ padding: '15px 0px',height:'250px'}">
+            <i class="el-icon-edit" style="font-size:30px"></i>
 
-    <el-card :body-style="{ padding: '0px' }">
-      <div style="padding: 14px;">
-        <div class="dashboard-title"> Anshare Vue Admin</div>
-        <div class="bottom clearfix">
-          <div class='dashboard-text'>用户:{{name}}</div>
-          <div class='dashboard-text'>角色:
-            <span v-for='role in roles' :key='role'>{{role}}</span>
-          </div>
-          <time class="time">{{ currentDate }}</time>
-        </div>
-      </div>
-            <img src="../../assets/404_images/404.png" class="image">
+            <div class="dashboard-text"> Anshare Vue Admin</div>
+            <div class="bottom clearfix">
+              <div class='dashboard-text'>{{name}},
+                <span v-for='role in roles' :key='role'>{{role}}</span>
+              </div>
+
+              <time class="time dashboard-text">{{ currentDate }}</time>
+            </div>
+
+        </el-card>
+      </el-col>
+      <el-col :span="8" :offset="2">
+        <el-card :body-style="{ padding: '15px 0px',height:'250px'}">
+                      <i class="el-icon-location" style="font-size:30px"></i>
+
+          <div class="dashboard-text" style="padding-top:0px">{{weather.city}}天气</div>
+          <div class="dashboard-text">空气质量:{{weather.data.quality}},气温:{{weather.data.wendu}}℃,湿度:{{weather.data.shidu}}</div>
+
+        </el-card>
+      </el-col>
+    </el-row>
+            <img src="../../assets/401.gif" style="position:fixed;bottom:10px;right:10px">
 
-    </el-card>
   </div>
 </template>
 
 <script>
   import {
     mapGetters
   } from 'vuex'
-  import {parseTime} from '@/utils/index'
+  import {
+    parseTime
+  } from '@/utils/index'
+  import axios from 'axios'
   export default {
     data() {
       return {
-        currentDate: parseTime(new Date())
+        currentDate: parseTime(new Date()),
+        weather:null
       }
     },
     name: 'dashboard',
@@ -35,6 +52,24 @@
         'name',
         'roles'
       ])
+    },
+    methods: {
+      GetNowTime() {
+        setInterval(() => {
+          this.currentDate = parseTime(new Date())
+        }, 1000)
+
+      },
+      GetWeather(){
+        axios.get('/weather?city=南京').then(response=>{
+            this.weather = response.data
+        })
+      }
+    },
+    created() {
+      this.GetNowTime()
+      this.GetWeather()
+
     }
   }