feat: 前后端连接初步

src/components/teacher/SlideListItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="slide-list-item-container">
     <div class="content">
-      <div class="title">编程基础 I - 基础与抽象</div>
+      <div class="title">编程基础 I - 基础与抽象讲解</div>
       <div>最后编辑时间：2020.01.03 14:22</div>
       <div>所属课程：软件工程与计算 I</div>
     </div>
@@ -14,7 +14,7 @@ export default {}
 
 <style lang="scss" scoped>
 .slide-list-item-container {
-  margin: 16px 0;
+  margin: 16px 0 32px 0;
 }
 .content > div {
   color: gray;
@@ -23,7 +23,6 @@ export default {}
 }
 .content .title {
   font-size: 1.2em;
-  font-weight: bold;
   margin: 8px 0;
 
   color: #555;

src/config/server-info.js

@@ -0,0 +1,7 @@
+const url = 'http://106.14.178.184:8080/seec_helper/api/slide/'
+
+const useSlideServer = postfix => postfix ? url + postfix : url
+
+export {
+  useSlideServer
+}

src/router/index.js

@@ -19,7 +19,32 @@ const routes = [{
 }, {
   path: '/teacher',
   name: 'teacher',
-  component: () => import('../views/teacher/TeacherHomeView.vue')
+  component: () => import('../views/teacher/TeacherHomeView.vue'),
+  children: [{
+    path: '',
+    name: 'home',
+    component: () => import('../views/teacher/tabs/HomeTab.vue')
+  }, {
+    path: 'search',
+    name: 'search',
+    component: () => import('../views/teacher/tabs/SearchTab.vue')
+  }, {
+    path: 'add',
+    name: 'add',
+    component: () => import('../views/teacher/tabs/AddTab.vue')
+  }, {
+    path: 'personal',
+    name: 'personal',
+    component: () => import('../views/teacher/tabs/PersonalTab.vue')
+  }, {
+    path: 'feedback',
+    name: 'feedback',
+    component: () => import('../views/teacher/tabs/FeedbackTab.vue')
+  }, {
+    path: 'info',
+    name: 'info',
+    component: () => import('../views/teacher/tabs/InfoTab.vue')
+  }]
 }]
 
 const router = new VueRouter({

src/server/slide.js

@@ -0,0 +1,24 @@
+import {
+  useSlideServer
+} from '@/config/server-info.js'
+import axios from 'axios'
+
+export function getSlide(id) {
+  return axios.get(useSlideServer(id))
+}
+
+export function createSlide(slideInfo) {
+  const data = {
+    ...slideInfo,
+    items: []
+  }
+  return axios.post(useSlideServer('create'), data)
+}
+
+export function updateSlide(slideInfo, items) {
+  const data = {
+    ...slideInfo,
+    items: items.map()
+  }
+  return axios.post(useSlideServer('update'), data)
+}

src/store/modules/editor.js

@@ -7,13 +7,20 @@ import {
   SET_FOCUS,
   SET_FOCUS_BEFORE,
   SET_FOCUS_AFTER,
-  USE_FOCUS
+  USE_FOCUS,
+  GET_SLIDE,
+  CREATE_SLIDE
 } from '../types/editor-types'
 
 import uuid from 'uuid'
+import {
+  getSlide,
+  createSlide
+} from '@/server/slide'
 
 export default {
   state: {
+    slideInfo: {},
     items: [],
     focus: null
   },
@@ -114,5 +121,23 @@ export default {
     [USE_FOCUS](state, payload) {
       state.focus = null
     }
+  },
+  actions: {
+    [CREATE_SLIDE](state, payload) {
+      createSlide({
+        courseId: payload.courseId,
+        name: payload.name
+      }).then(res => {
+        console.log(res)
+      })
+    },
+
+    [GET_SLIDE](state, payload) {
+      getSlide(payload.id).then(res => {
+        console.log(res)
+      }).catch(err => {
+        console.log(err)
+      })
+    }
   }
 }

src/store/types/editor-types.js

@@ -1,12 +1,13 @@
 export const INIT_BY_STATE = 'initByState'
 export const INIT_BY_DEFAULT = 'initByDefault'
-// export const ADD_PAGE_AFTER = 'addPageAfter'
-// export const DELETE_PAGE = 'initByState'
 export const ADD_ITEM_AFTER = 'addItemAfter'
 export const MODIFY_ITEM = 'modifyItem'
 export const DELETE_ITEM = 'deleteItem'
-
 export const SET_FOCUS = 'setFocus'
 export const SET_FOCUS_BEFORE = 'setFocusBefore'
 export const SET_FOCUS_AFTER = 'setFocusAfter'
 export const USE_FOCUS = 'useFocus'
+
+export const GET_SLIDE = 'getSlide'
+export const CREATE_SLIDE = 'createSlide'
+export const UPDATE_SLIDE = 'updateSlide'

src/views/teacher/TeacherHomeView.vue

@@ -1,83 +1,106 @@
 <template>
-  <div class="container">
-    <div class="catalog">
-      <section>
-        <h1>开始上课</h1>
-        <slide-list-item-vue></slide-list-item-vue>
-      </section>
-      <section>
-        <h1>编辑历史</h1>
-        <slide-list-item-vue></slide-list-item-vue>
-        <slide-list-item-vue></slide-list-item-vue>
-        <slide-list-item-vue></slide-list-item-vue>
-      </section>
-      <section>
-        <h1>我的课程</h1>
-        <slide-list-item-vue></slide-list-item-vue>
-      </section>
+  <div class="main-container">
+    <div class="menu-container">
+      <div class="tab-container">
+        <div class="tab">
+          <router-link to="./">
+            <div class="icon home">&#xe68b;</div>
+          </router-link>
+          <router-link to="search">
+            <div class="icon search">&#xe6a2;</div>
+          </router-link>
+          <router-link to="add">
+            <div class="icon add">&#xe71b;</div>
+          </router-link>
+          <router-link to="personal">
+            <div class="icon personal">&#xe790;</div>
+          </router-link>
+          <div class="line"></div>
+          <router-link to="feedback">
+            <div class="icon feedback">&#xe68a;</div>
+          </router-link>
+          <div class="line"></div>
+          <router-link to="info">
+            <div class="icon info">&#xe68e;</div>
+          </router-link>
+        </div>
+      </div>
+      <div class="view-container">
+        <transition name="fade" mode="out-in">
+          <router-view />
+        </transition>
+      </div>
     </div>
-    <div class="gap"></div>
-    <div class="preview"></div>
+    <div class="preview-container"></div>
   </div>
 </template>
 
 <script>
-import SlideListItemVue from '../../components/teacher/SlideListItem.vue'
 export default {
-  components: { SlideListItemVue }
+  data() {
+    return {
+      // path: $router.params
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-.container {
-  position: relative;
-  display: flex;
-  min-height: 100vh;
-  box-sizing: border-box;
-  overflow: hidden;
-
-  padding: 8vh 8vw;
+$icon-normal-color: #aabbcc;
+$icon-active-color: #5485e5;
+$icon-hover-color: rgb(146, 171, 221);
 
-  &::after {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    right: -60vmax;
-    bottom: -60vmax;
-    width: 150vmax;
-    height: 150vmax;
-    border-radius: 40vmax;
-    background: radial-gradient(
-      #76aee666 0%,
-      transparent 70%,
-      transparent 100%
-    );
-  }
+@font-face {
+  font-family: 'iconfont'; /* project id 1598214 */
+  src: url('//at.alicdn.com/t/font_1598214_il2if4ux43.eot');
+  src: url('//at.alicdn.com/t/font_1598214_il2if4ux43.eot?#iefix')
+      format('embedded-opentype'),
+    url('//at.alicdn.com/t/font_1598214_il2if4ux43.woff2') format('woff2'),
+    url('//at.alicdn.com/t/font_1598214_il2if4ux43.woff') format('woff'),
+    url('//at.alicdn.com/t/font_1598214_il2if4ux43.ttf') format('truetype'),
+    url('//at.alicdn.com/t/font_1598214_il2if4ux43.svg#iconfont') format('svg');
 }
-.catalog {
-  max-height: 84vh;
-  overflow: auto;
-  width: 100%;
-  flex: 1;
-
-  h1 {
-    margin: 0;
-    font-size: 30px;
-  }
-
-  section {
-    margin-bottom: 56px;
-    padding: 0;
-  }
+.main-container {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.preview {
-  width: 100%;
-  flex: 2;
-  background: white;
-  border-radius: 12px;
+.menu-container {
+  display: flex;
 }
-
-.gap {
-  width: 2vw;
+.tab-container {
+  padding: 24px 18px 24px 36px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.view-container {
+  padding: 24px 18px;
+  width: 460px;
+}
+.line {
+  height: 0;
+  padding: 6px;
+  margin: 0 4px 12px 4px;
+  border-bottom: 2px solid $icon-normal-color;
+}
+.tab {
+  margin: -12px 0;
+  a {
+    outline: none;
+    text-decoration: none;
+    color: black;
+  }
+  .icon {
+    user-select: none;
+    cursor: pointer;
+    padding: 12px 0;
+    text-align: center;
+    font-family: 'iconfont';
+    font-size: 34px;
+    color: #abb8bf;
+  }
 }
 </style>

src/views/teacher/tabs/AddTab.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="tab-wrapper">
+    add
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+<style lang="scss" scoped>
+@import './tab-common.scss';
+</style>

src/views/teacher/tabs/FeedbackTab.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="tab-wrapper">
+    feedback
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+<style lang="scss" scoped>
+@import './tab-common.scss';
+</style>

src/views/teacher/tabs/HomeTab.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="tab-wrapper">
+    <section class="slide-section">
+      <div class="title">准备上课？</div>
+      <slide-list-item-vue></slide-list-item-vue>
+    </section>
+    <section class="slide-section">
+      <div class="title">编辑历史</div>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+      <slide-list-item-vue></slide-list-item-vue>
+    </section>
+  </div>
+</template>
+
+<script>
+import SlideListItemVue from '../../../components/teacher/SlideListItem.vue'
+
+export default {
+  components: { SlideListItemVue }
+}
+</script>
+<style lang="scss" scoped>
+@import './tab-common.scss';
+.tab-wrapper {
+  max-height: 80vh;
+  overflow: auto;
+}
+</style>

src/views/teacher/tabs/InfoTab.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="tab-wrapper">
+    Info
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+<style lang="scss" scoped>
+@import './tab-common.scss';
+</style>

src/views/teacher/tabs/PersonalTab.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="tab-wrapper">
+    personal
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+<style lang="scss" scoped>
+@import './tab-common.scss';
+</style>

src/views/teacher/tabs/SearchTab.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="tab-wrapper">
+    search
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+<style lang="scss" scoped>
+@import './tab-common.scss';
+</style>

src/views/teacher/tabs/tab-common.scss

@@ -0,0 +1,15 @@
+.tab-wrapper {
+  width: 320px;
+  margin: auto;
+
+  color: #3a4a5a;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 500;
+}
+
+.slide-section {
+  margin-bottom: 36px;
+}