add auth and create homepage

assets/css/home.scss

@@ -0,0 +1,11 @@
+.home-banner{
+  width: 100%;
+}
+
+a{
+  text-decoration: none;
+  color: white;
+  &:hover{
+    color: $focus-color;
+  }
+}

assets/css/main.scss

@@ -26,6 +26,132 @@ body{
   clear: both;
   height: 100px;
 }
+
+.nav{
+  width: 100%;
+  display: flex;
+  padding: 0 50px;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  height: 60px;
+  background-color: black;
+
+  &__logo{
+    width: 100px;
+  }
+
+  &__list{
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    &-left{
+      width: 300px;
+    }
+
+    &-right{
+      width: 160px;
+      justify-content: space-between;
+    }
+  }
+
+  &__search{
+    width: 200px;
+  }
+
+  &__item{
+    & a{
+      text-decoration: none;
+      color: white;
+      font-size: 16px;
+
+      &:hover{
+        color: $focus-color;
+      }
+    }
+  }
+}
+
+.foot{
+  width: 100%;
+  background-color: black;
+  color: white;
+  padding: 30px 50px 0 50px;
+
+  &__main{
+    width: 100%;
+    height: 160px;
+    border-bottom: 0.5px white solid;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  &__logo{
+    width: 200px;
+  }
+
+  &__slogan{
+    margin-top: 10px;
+  }
+
+  &__right{
+    width: 500px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  &__list{
+    min-width: 100px;
+  }
+
+  &__title{
+    font-size: 16px;
+    padding-bottom: 5px;
+  }
+
+  & a{
+    font-size: 14px;
+    color: white;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+    margin-top: 5px;
+  }
+
+  &__icon{
+    margin-top: 10px;
+    width: 50px;
+    height: 50px;
+    border-radius: 25px;
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    border: 1px white solid;
+    display: inline-block;
+    margin-right: 10px;
+
+    &-wechat{
+      background-image: url('/image/wechat_icon.png');
+    }
+
+    &-weibo{
+      background-image: url('/image/weibo_icon.png');
+    }
+
+  }
+
+
+  &__bottom{
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+  }
+}
 //
 //h1 h2 h3{
 //  color: #333;

components/Foot.vue

@@ -0,0 +1,44 @@
+<template>
+ <footer class="foot">
+   <div class="foot__main">
+     <div class="foot__left">
+       <img src="/image/seec_logo--bw.png" class="foot__logo" />
+       <div class="foot__slogan">打造最贴心的软件工程教育云平台,精于toC,拥抱toB</div>
+     </div>
+     <div class="foot__right">
+       <div class="foot__list">
+         <div class="foot__title">关于我们</div>
+         <a>常见问题</a>
+         <a>意见反馈</a>
+         <a>联系我们</a>
+         <a>法律条款</a>
+       </div>
+
+       <div class="foot__list">
+         <div class="foot__title">关注我们</div>
+         <div class="foot__icon foot__icon-wechat"></div>
+         <div class="foot__icon foot__icon-weibo"></div>
+       </div>
+       <div class="foot__list">
+         <div class="foot__title">合作机构</div>
+         <a>南京大学</a>
+         <a>阿里巴巴</a>
+       </div>
+     </div>
+   </div>
+   <div class="foot__bottom">
+     ©2020 NJU SEECODER TEAM<br>
+     苏ICP备19073881号-1
+   </div>
+ </footer>
+</template>
+
+<script>
+  export default {
+    name: "Foot"
+  };
+</script>
+
+<style scoped>
+
+</style>

components/Navi.vue

@@ -0,0 +1,27 @@
+<template>
+  <nav class="nav">
+    <router-link to="/"><img src="/image/seec_logo--bw.png" class="nav__logo" /></router-link>
+    <ul class="nav__list nav__list-left">
+      <li class="nav__item"><a href="http://mooc.seecoder.cn" target="_self">软工一</a></li>
+      <li class="nav__item"><a href="http://bok.seecoder.cn" target="_self">题库</a></li>
+      <li class="nav__item"><a href="http://helper.seecoder.cn" target="_self">教学助手</a></li>
+    </ul>
+    <el-input placeholder="搜索课程" class="nav__search" disabled>
+      <el-button slot="append" icon="el-icon-search" disabled></el-button>
+    </el-input>
+    <ul class="nav__list nav__list-right">
+      <li class="nav__item"><router-link to="/login">登录</router-link></li>
+      <li class="nav__item"><router-link to="/register">注册</router-link></li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+  export default {
+    name: "Navi"
+  };
+</script>
+
+<style scoped>
+
+</style>

layouts/blank.vue

@@ -0,0 +1,10 @@
+<template>
+    <div>
+      <nuxt />
+    </div>
+</template>
+
+
+<style scoped>
+
+</style>

layouts/default.vue

@@ -1,9 +1,20 @@
 <template>
   <div>
+    <navi></navi>
     <nuxt />
+    <foot></foot>
   </div>
 </template>
 
+<script>
+  import Navi from "~/components/Navi";
+  import Foot from "~/components/Foot";
+
+  export default{
+    components: {Navi, Foot}
+  }
+</script>
+
 <style>
 html {
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',

middleware/auth.js

@@ -0,0 +1,25 @@
+import { mapMutations } from 'vuex'
+
+export default function ({route, store, req, res, redirect}) {
+  let isClient = process.client;
+  let isServer = process.server;
+  let redirectURL = '/login';
+  let token, path;
+
+  token = store.state.token;
+
+  //在服务端
+  if (isServer) {
+    path = req.originalUrl;
+  }
+  //在客户端判读是否需要登陆
+  if (isClient) {
+    path = route.path;
+  }
+
+ // console.log("path:"+path);
+
+  if (!token && path !== "/" && path !=="/login" && path !== "/register") {
+    redirect(redirectURL);
+  }
+}

nuxt.config.js

@@ -46,6 +46,10 @@ module.exports = {
     '@nuxtjs/style-resources'
   ],
 
+  router: {
+    middleware: 'auth'
+  },
+
   styleResources: {
     scss: './assets/css/main.scss',
   },

pages/index.vue

@@ -1,30 +1,16 @@
 <template>
-  <div class="container">
-    <div>
-      <logo />
-      <h1 class="title">
-        portal-frontend
-      </h1>
-      <h2 class="subtitle">
-        My fine Nuxt.js project
-      </h2>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          class="button--grey"
-        >
-          GitHub
-        </a>
-      </div>
-    </div>
+  <div>
+    <!--<el-menu-->
+      <!--default-active="1"-->
+      <!--class="el-menu-demo"-->
+      <!--mode="horizontal"-->
+      <!--active-text-color="#409eff">-->
+      <!--<el-menu-item index="0"><image src="/image/seec_logo&#45;&#45;bw.png" class="nav__logo" /></el-menu-item>-->
+      <!--<el-menu-item index="1"><a href="http://mooc.seecoder.cn" target="_self">软工一</a></el-menu-item>-->
+      <!--<el-menu-item index="2"><a href="http://bok.seecoder.cn" target="_self">题库</a></el-menu-item>-->
+      <!--<el-menu-item index="3"><a href="http://helper.seecoder.cn" target="_self">学习助手</a></el-menu-item>-->
+    <!--</el-menu>-->
+    <img class="home-banner" src="/image/SEEC_banner.png"/>
   </div>
 </template>
 
@@ -38,35 +24,6 @@ export default {
 }
 </script>
 
-<style>
-.container {
-  margin: 0 auto;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.title {
-  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
-}
-
-.subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
-}
-
-.links {
-  padding-top: 15px;
-}
+<style lang="scss" scoped>
+  @import '~/assets/css/home.scss';
 </style>

pages/login.vue

@@ -2,7 +2,7 @@
   <div class="page-container login-container">
     <el-card class="login-card">
       <h2 class="login-card__title login-card__item">登 录</h2>
-      <el-input ref="phone" v-model="phone"  oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号" minlength='11' maxlength='11' class="login-card__item"></el-input>
+      <el-input ref="phone" v-model="phone"  oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号" minlength='11' maxlength='11' class="login-card__item" autofocus></el-input>
       <el-input ref="password" v-model="password" type="password" placeholder="请输入密码" maxlength="20" class="login-card__item"></el-input>
       <el-input ref="iCode" v-model="iCode" placeholder="请输入验证码" class="login-card__short-item"></el-input>
 
@@ -26,6 +26,7 @@
 
   export default {
     name: "login",
+    layout: "blank",
     data(){
       return{
         phone: '',

pages/register.vue

@@ -2,7 +2,7 @@
   <div class="page-container login-container">
     <el-card class="login-card">
       <h2 class="login-card__title login-card__item">注 册</h2>
-      <el-input ref="name" v-model="name" placeholder="请输入昵称, 长度为1-10个字符" maxlength="10" class="login-card__item"></el-input>
+      <el-input ref="name" v-model="name" placeholder="请输入昵称, 长度为1-10个字符" maxlength="10" class="login-card__item" autofocus></el-input>
       <el-input ref="password" v-model="password" type="password" placeholder="请输入密码，长度为6-20个字符" maxlength="20" class="login-card__item"></el-input>
       <el-input ref="passwordConfirm" v-model="passwordConfirm" type="password" placeholder="请再次输入密码" maxlength="20" class="login-card__item"></el-input>
       <el-input ref="phone" v-model="phone"  oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号" minlength='11' maxlength='11' class="login-card__item"></el-input>
@@ -20,6 +20,7 @@
 
   export default {
     name: "register",
+    layout: "blank",
     data(){
       return{
         name: '',