Leone update vuex

src/api/axios.config.js

@@ -0,0 +1,84 @@
+import axios, { AxiosError, AxiosResponse } from 'axios'
+import store from '@/store/index'
+
+export default function axiosConfig() {
+    axios.defaults.withCredentials = true
+
+    axios.interceptors.response.use(
+        function(response) {
+            if (process.env.NODE_ENV === 'development') {
+                console.log('[AXIOS] response value: ', response)
+            }
+
+            const responseData = response.data
+
+            // console.log("这里是responseData");
+            // console.log(responseData);
+
+            if (responseData.code === '00000') {
+                return Promise.resolve(response)
+            } else {
+                console.log('reject')
+                if (responseData.code === 'A0223' || responseData.code === 'A0230') {
+                    jumpToLogin()
+                }
+                return Promise.reject(response)
+            }
+        },
+        function(error) {
+            if (process.env.NODE_ENV === 'development') {
+                console.error('[AXIOS] response error: ', error.response)
+            }
+
+            if (error.response) {
+                if (error.response.status === 401) {
+                    jumpToLogin()
+                }
+                return Promise.reject(error.response)
+            }
+
+            return Promise.reject(error)
+        }
+    )
+
+    axios.interceptors.request.use(
+        function(config) {
+            if (process.env.NODE_ENV === 'development') {
+                console.log('[AXIOS] request config: ', config)
+            }
+            if (store.state.token) {
+                config.headers = {
+                    Authorization: store.state.token,
+                    ...(config.headers ?? {})
+                }
+            }
+            return config
+        },
+        // Do something with request error
+        function(error) {
+            if (process.env.NODE_ENV === 'development') {
+                console.error('[AXIOS] request error: ', error)
+            }
+            return Promise.reject(error)
+        }
+    )
+}
+
+axiosConfig()
+
+const portal = 'http://p.seecoder.cn'
+
+export const getLoginUrl = () => {
+    console.log(portal)
+    const location = window.location
+    return `${portal}/api/interaction?client_id=seec-mooc&redirect_uri=${encodeURIComponent(
+        location.origin + '/'
+    )}&scope=openid`
+}
+
+/**
+ * 跳转到登陆界面
+ */
+export const jumpToLogin = () => {
+    window.location.href = getLoginUrl()
+}

src/api/user.js

@@ -0,0 +1,11 @@
+import axios from "axios";
+
+export function getUserInfo(){
+    return axios.get("api/api/user");
+}
+
+export function getUserById(id) {
+    return axios.get("api/api/user/", {params:{
+        id: id
+        }});
+}

src/components/bok/NavBar.vue

@@ -10,7 +10,7 @@
             <el-avatar shape="square" :size="30" :src="squareUrl"></el-avatar>
             <template #dropdown>
                 <el-dropdown-menu>
-                    <el-dropdown-item>选项1</el-dropdown-item>
+                    <el-dropdown-item>{{$store.state.user.name}}</el-dropdown-item>
                     <el-dropdown-item>选项2</el-dropdown-item>
                     <el-dropdown-item>选项3</el-dropdown-item>
                     <el-dropdown-item>选项4</el-dropdown-item>

src/components/bok/bokMain/KnowledgeGraph.vue

@@ -1,22 +1,43 @@
 <template>
     <div><h1>Knowledge Graph</h1></div>
+<!--    <div>{{$store.state.myCount}}</div>-->
+    <div>{{countAlias}}</div>
+    <div>{{countPlusLocalState}}</div>
+    <div>{{$store.getters.showCount}}</div>
+    <el-button type="primary" @click="add">+1</el-button>
 
 </template>
 
 <script>
+    import {mapState, mapGetters} from 'vuex';
     export default {
         name: "KnowledgeGraph",
         components: {
         },
         data(){
             return{
+                localCount: "su"
             }
         },
+        computed: {
+            // ...mapState(['myCount'])
+            ...mapState({
+                count: state => state.myCount,
+                countAlias: 'myCount',
+                countPlusLocalState (state) {
+                    return state.myCount + this.localCount
+                }
+            })
+        },
         methods: {
+            add(){
+                this.$store.dispatch('addAsync');
+            }
 
         },
         mounted() {
 
+
         }
     }
 </script>

src/components/bok/bokMain/QuestionRepository/index.vue

@@ -107,8 +107,8 @@ export default {
       }})
             .then(res => {
               console.log(res);
-              this.questionList = res.data.content;
-              this.totalNum = res.data.totalElements;
+              this.questionList = res.data.result.content;
+              this.totalNum = res.data.result.totalElements;
             }).catch(error => {
       console.log(error);
     }).finally(() => {

src/components/bok/bokMain/Setting.vue

@@ -1,12 +1,72 @@
 <template>
 <div>
   <h1>Setting</h1>
+
+  <h1>题目审查</h1>
+  <el-button @click="jumpToLogin">jumpToLogin</el-button>
+
+  <div >
+    <checkQuestionCard v-for="(item, index) in questionvoList"
+                       :questionvo="item"></checkQuestionCard>
+  </div>
+
+
+
 </div>
 </template>
 
 <script>
+  import checkQuestionCard from "../../card/checkQuestionCard";
 export default {
-  name: "Setting"
+  name: "Setting",
+  components:{
+    checkQuestionCard,
+  },
+  data(){
+    return{
+      questionvoList: [
+        {
+          id: '123456',
+          type: 'choice',
+          state: 'CHECKING',
+          checkedUserId: 0,
+          savedUserId: 364,
+          stem: '',
+          weight: 0,
+          analysis: '',
+          keyPoints: '',
+          tags: [],
+          knowledgeId: [],
+          options: {},
+          blanks: {},
+          answer: '',
+          inputOutputMapping: {},
+          millisecondLimit: 0,
+          memoryLimit: 0,
+          createdTime: Date,
+          lastModifiedTime: Date,
+        },
+        {
+
+        }
+      ]
+
+    }
+  },
+  methods:{
+    getLoginUrl(){
+      const portal = 'http://p.seecoder.cn'
+
+      const location = window.location
+      return `${portal}/api/interaction?client_id=seec-mooc&redirect_uri=${encodeURIComponent(
+              location.origin + '/'
+      )}&scope=openid`
+    },
+    jumpToLogin(){
+      window.location.href = this.getLoginUrl()
+    },
+
+  }
 }
 </script>
 

src/components/card/QuestionCreater.vue

@@ -145,6 +145,7 @@
 
 <script>
     import axios from "axios";
+    import store from "../../store/index"
 
     export default {
         name: "QuestionCreater",
@@ -194,6 +195,9 @@
                     id: null,
                     stem: null,
                     type: null,
+                    state: null,
+                    checkedUserId: 0,
+                    savedUserId: 0,
                     options: {
                         "A": null,
                         "B": null,
@@ -240,6 +244,8 @@
                 console.log(this.question);
                 this.question.knowledgeId.push(this.myknowledgeId);
                 this.question.createdTime = new Date();
+                this.question.state = 'CHECKING';
+                this.question.savedUserId = store.state.user.id;
                 axios.post("/api/api/question", this.question)
                     .then(res => {
                         console.log(res);
@@ -259,7 +265,6 @@
                             message: '创建失败'
                         });
                 }).finally(() => {
-
                     console.log("Question created!");
                 })
             }

src/components/card/checkQuestionCard.vue

@@ -0,0 +1,209 @@
+<template>
+    <el-card class="cQuestion-card" shadow="hover">
+        <template #header>
+            <el-row>
+                <el-col :span="3">
+                    <div>
+                        <strong>申请人: </strong>{{savedUserName}}
+                    </div>
+                </el-col>
+                <el-col :span="5">
+                    <div>
+                        <strong>申请日期: </strong>2021-9-19 09:36:00
+                    </div>
+                </el-col>
+                <el-col :span="14"></el-col>
+                <el-col :span="2">
+                    <el-button type="text" circle @click="expand" v-if="!isAll"><strong>查看全部</strong></el-button>
+                    <el-button type="text" circle @click="withdraw" v-if="isAll"><strong>收起</strong></el-button>
+                </el-col>
+            </el-row>
+        </template>
+        <div class="question-body">
+            <div class="bQuestion-card-body">
+                <div class="bQuestion-card-body-stem">
+                    <div>
+                        <MarkdownText :raw="'<strong>题目: </strong>'+questionvo.stem"></MarkdownText>
+                    </div>
+                    <div class="stem-extension" v-if="isAll">
+                        <div class="bQuestion-card-body-options" v-if="questionvo.type === 'choice'">
+                            <div v-for="(item,index) in questionvo.options" >
+                                <div v-if="questionvo.answer.split('').indexOf(index) !== -1" class="underline-correct-answer">
+                                    <MarkdownText :raw="index+': '+item"></MarkdownText>
+                                </div>
+                                <div v-else>
+                                    <MarkdownText :raw="index+': '+item"></MarkdownText>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bQuestion-card-body-options" v-if="questionvo.type === 'multiple_choice'">
+                            <div v-for="(item,index) in questionvo.options" >
+                                <div v-if="questionvo.answer.split(';').indexOf(index) !== -1" class="underline-correct-answer">
+                                    <MarkdownText :raw="index+': '+item"></MarkdownText>
+                                </div>
+                                <div v-else>
+                                    <MarkdownText :raw="index+': '+item"></MarkdownText>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bQuestion-card-body-blanks" v-if="questionvo.type === 'blank'">
+                            <div v-for="index in Object.keys(questionvo.blanks).length">
+                                <div class="correct_answer">
+                                    __{{index}}__: {{questionvo.blanks['__'+index+'__']}}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bQuestion-card-body-true_false" v-if="questionvo.type === 'true_false'">
+                            <div class="correct_answer"> {{questionvo.answer}}</div>
+                        </div>
+                    </div>
+                </div>
+
+                <el-divider v-if="isAll"></el-divider>
+
+                <div class="bQuestion-card-body-info" v-if="isAll">
+                    <div class="info-block">
+                        <el-row>
+                            <el-col :span="10">
+                                <strong>KeyPoints: </strong>{{questionvo.keyPoints}}
+                            </el-col>
+                            <el-col :span="6">
+                                <strong>题目难度: </strong>{{questionvo.weight}}/5
+                            </el-col>
+                            <el-col :span="4">
+                                <span><strong>Tags: </strong></span>
+                                <span v-if="questionvo.tags && questionvo.tags.length !== 0">
+                                    <el-tag v-for="(item, index) in questionvo.tags" effect="dark">{{item}}</el-tag>
+                                </span>
+                                <span v-else>
+                                    <span>no tags</span>
+                                </span>
+                            </el-col>
+                        </el-row>
+                    </div>
+                    <div>
+                        <div class="info-block"
+                             v-if="questionvo.type === 'choice' ||
+                         questionvo.type === 'multiple_choice' ||
+                         questionvo.type === 'true_false' ||
+                         questionvo.type === 'short_answer'">
+                            <MarkdownText :raw="'<strong>正确答案: </strong>'+questionvo.answer"></MarkdownText>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="info-block"
+                             v-if="questionvo.type === 'choice' ||
+                         questionvo.type === 'multiple_choice' ||
+                         questionvo.type === 'true_false'">
+                            <MarkdownText :raw="'<strong>解析: </strong>'+questionvo.analysis"></MarkdownText>
+                        </div>
+                        <div class="info-block" v-if="questionvo.type === 'blank' && questionvo.analysis.length > 5">
+                            <MarkdownText :raw="'<strong>解析: </strong>'+questionvo.analysis"></MarkdownText>
+                        </div>
+                        <div class="info-block" v-if="questionvo.type === 'short_answer' && questionvo.analysis.length > 5">
+                            <MarkdownText :raw="'<strong>解析: </strong>'+questionvo.analysis"></MarkdownText>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <el-divider v-if="isAll"></el-divider>
+
+            <div class="bQuestion-card-footer" v-if="isAll">
+                <div>
+                    <el-row>
+                        <el-col :span="8">
+                            <el-button type="primary" @click="">通过</el-button>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-button type="primary" @click="">待定</el-button>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-button type="primary" @click="">拒绝</el-button>
+                        </el-col>
+
+                    </el-row>
+                </div>
+            </div>
+
+        </div>
+
+    </el-card>
+
+</template>
+
+<script>
+    import {getUserById} from "../../api/user";
+    import MarkdownText from "../MarkdownText";
+
+    export default {
+        name: "checkCard",
+        components:{
+            MarkdownText,
+        },
+        props: {
+            questionvo: Object,
+        },
+        data(){
+            return{
+                questionvo1: {
+                    id: '',
+                    type: '',
+                    state: '',
+                    checkedUserId: 0,
+                    savedUserId: 0,
+                    stem: '',
+                    weight: 0,
+                    analysis: '',
+                    keyPoints: '',
+                    tags: [],
+                    knowledgeId: [],
+                    options: {},
+                    blanks: {},
+                    answer: '',
+                    inputOutputMapping: {},
+                    millisecondLimit: 0,
+                    memoryLimit: 0,
+                    createdTime: Date,
+                    lastModifiedTime: Date,
+                },
+                isAll: false,
+            }
+        },
+        computed: {
+            savedUserName: function () {
+                // let user;
+                // getUserById(this.questionvo.savedUserId).then(res => {
+                //     user = res.result.content;
+                //     return user.name;
+                // }).catch(err => {
+                //     console.log(err);
+                // })
+                return "xiaosu";
+            },
+
+        },
+        methods: {
+            expand(){
+                if(!this.isAll){
+                    this.isAll = true;
+                }
+            },
+            withdraw(){
+                if(this.isAll){
+                    this.isAll = false;
+                }
+            },
+
+        }
+    }
+</script>
+
+<style>
+    .cQuestion-card{
+        margin: 20px;
+        font-size: 18px;
+        background-color: #eef7f2;
+    }
+
+</style>

src/router/index.js

@@ -1,6 +1,8 @@
 import {createRouter, createWebHistory} from 'vue-router'
 import Home from '../views/Home.vue'
 import store from '../store/index'
+import {jumpToLogin} from "../api/axios.config";
+import {getUserInfo} from "../api/user";
 
 const routes = [
   {
@@ -76,6 +78,26 @@ const router = createRouter({
   routes
 })
 
+router.beforeEach((to, from , next) =>{
+  const {id_token} = to.query;
+  if(id_token){
+    store.commit('setToken', id_token);
+    getUserInfo().then(({ data }) => {
+      store.commit('setUser', data.result)
+      next()
+    }).catch(err => {
+      console.log(err);
+    })
+  }else{
+    if(!store.getters.isLogin){
+      jumpToLogin();
+    }else{
+      next();
+    }
+
+  }
+})
+
 router.afterEach((to, from) => {
   // ...
   store.commit('bok/setPath', to.path)

src/store/index.js

@@ -3,10 +3,34 @@ import bok from '@/store/bok'
 
 export default createStore({
   state: {
+    myCount: 0,
+    token: '',
+    user: Object,
   },
   mutations: {
+    add(state){
+      state.myCount++;
+    },
+    setToken(state, token){
+      state.token = token;
+    },
+    setUser(state, user){
+      state.user = user;
+    }
   },
   actions: {
+    addAsync(context){
+      setTimeout(()=>{
+        context.commit('add')
+      }, 1000);
+    }
+  },
+  getters: {
+    showCount: state => {
+      return '苏的state:'+state.myCount;
+    },
+    isLogin: state => Boolean(state.token),
+
   },
   modules: {
     bok