1

src/assets/css/common.less

-html {
-    background-color: antiquewhite;
-}
\ No newline at end of file

src/libs/request/index.js

@@ -91,9 +91,10 @@ axios.interceptors.response.use(
         .then(response => {
             if(response.data.code === 200){
                 //返回成功处理  这里传的啥 后续调用的时候 res就是啥
-                resolve(response.data.data);//我们后台所有数据都是放在返回的data里所以这里统一处理了
+                resolve(response.data);//我们后台所有数据都是放在返回的data里所以这里统一处理了
             }else{
                 //错误处理
+                resolve(response.data);
                 Message(response.data.msg)
             }
         })
@@ -117,9 +118,11 @@ export function post(url,data = {}){
     return new Promise((resolve,reject) => {
         axios.post(url,data)
         .then(response => {
+            console.log(response)
             if(response.data.code === 200){
-                resolve(response.data.data);
+                resolve(response.data);
             }else{
+                resolve(response.data);
                 Message(response.data.msg)
             }
         },err => {
@@ -142,8 +145,9 @@ export function patch(url,data = {}){
         axios.patch(url,data)
         .then(response => {
             if(response.data.code === 200){
-                resolve(response.data.data);
+                resolve(response.data);
             }else{
+                resolve(response.data);
                 Message(response.data.msg)
             }
         },err => {
@@ -166,8 +170,9 @@ export function put(url,data = {}){
         axios.put(url,data)
         .then(response => {
             if(response.data.code === 200){
-                resolve(response.data.data);
+                resolve(response.data);
             }else{
+                resolve(response.data);
                 Message(response.data.msg)
             }
         },err => {
@@ -184,8 +189,9 @@ export function del(url,data = {}){
         axios.delete(url,data)
         .then(response => {
             if(response.data.code === 200){
-                resolve(response.data.data);
+                resolve(response.data);
             }else{
+                resolve(response.data);
                 Message(response.data.msg)
             }
         },err => {

src/main.js

@@ -2,15 +2,23 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import { Button, Drawer, Message, MessageBox, Row, Col } from 'element-ui';
+import { Button, Drawer, Message, MessageBox, Row, Col, Form,
+  FormItem, Input, Menu, MenuItem, Submenu } from 'element-ui';
 
 
 Vue.config.productionTip = false;
 
 Vue.use(Button);
+Vue.use(Col);
 Vue.use(Drawer);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Menu);
+Vue.use(MenuItem);
+Vue.use(Input);
 Vue.use(Row);
-Vue.use(Col);
+Vue.use(Submenu);
+
 
 Vue.prototype.$confirm = MessageBox.confirm;
 Vue.prototype.$message = Message;

src/router/index.js

 import Vue from "vue";
 import VueRouter from "vue-router";
 import Home from "../views/Home.vue";
+import Login from "../views/Account/Login.vue";
 
 Vue.use(VueRouter);
 
@@ -19,10 +20,28 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/About.vue"),
   },
+  {
+    path: "/login",
+    name: "Login",
+    component: Login,
+    // beforeEnter: (to, from, next) => { //路由独享的守卫
+    //   next();
+    // }
+  },
 ];
 
 const router = new VueRouter({
   routes,
 });
 
+let isAuthenticated = false;
+
+// 全局的路由守卫
+router.beforeEach((to, from, next) => {
+  isAuthenticated = localStorage.getItem('feidao_creation_token');
+  
+  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
+  else next()
+})
+
 export default router;

src/views/Home.vue

 <template>
-  <div class="home">
-    飞稻
-    <div>
-      <el-button @click="drawer = true">点我打开</el-button>
-    </div>
-    <el-drawer
-      title="我是标题"
-      :visible.sync="drawer"
-      :direction="direction"
-      :before-close="handleClose">
-      <span>我来啦!</span>
-    </el-drawer>
+  <div>
+    <nav>
+       <el-menu
+          mode="horizontal"
+          @select="handleSelect"
+          background-color="#545c64"
+          text-color="#fff"
+          active-text-color="#ffd04b">
+         <el-submenu index="1">
+           <template slot="title">飞稻</template>
+           <el-menu-item index="1-1">选项1</el-menu-item>
+         </el-submenu>
+         <el-submenu index="3">
+           <template slot="title">{{language}}</template>
+           <el-menu-item index="3-1">中文</el-menu-item>
+           <el-menu-item index="3-2">英文</el-menu-item>
+         </el-submenu>
+         <el-menu-item index="4">帮助</el-menu-item>
+       </el-menu>
+       <el-input placeholder="搜索" prefix-icon="el-icon-search" v-model="courseKeyword"></el-input>
+    </nav>
+    <el-row :gutter="0" class="grid-row">
+      <el-col :xs="8" :sm="6" :md="4" :lg="4" :xl="4">
+        <div class="grid-content home-left-nav"></div>
+      </el-col>
+      <el-col :xs="16" :sm="6" :md="20" :lg="20" :xl="20"><div class="grid-content home-content"></div></el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-// import HelloWorld from "@/components/HelloWorld.vue";
+import { loginApi } from "@/libs/request/api.js";
 
 export default {
   name: "Home",
@@ -27,15 +42,63 @@ export default {
     return {
       drawer: false,
       direction: 'rtl',
+      currentLang: 'cn',
+      courseKeyword: '',
     };
   },
+  computed: {
+    language: function() {
+      let langName = "";
+      switch(this.currentLang) {
+        case 'cn':
+          langName = "中文";
+          break;
+        case 'en':
+          langName = "英语";
+          break;
+        default:
+          langName = "语言";
+          break;
+      }
+      console.log(langName)
+      return langName;
+    },
+  },
   methods: {
     handleClose(done) {
       console.log('click me')
       this.$confirm('确认关闭？').then(_=>{
         done();
       }).catch(_=>{});
+    },
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+      switch(keyPath) {
+        case '1':
+        case '2':
+          break;
+        case '3-1':
+          this.currentLang = 'cn';
+          break;
+        case '3-2':
+          this.currentLang = 'en';
+          break;
+      }
     }
   }
 };
 </script>
+<style lang="less" scoped>
+  .grid-row {
+    width: 100%;
+  }
+  .grid-content {
+    height: calc(100vh - 100px);
+  }
+  .home-left-nav {
+    border-right: 1px solid #ccc;
+  }
+  .home-content {
+    
+  }
+</style>