feat: add mock

src/App.vue

@@ -11,6 +11,7 @@
       <el-menu-item index="/chat" >Chat</el-menu-item>
       <el-menu-item index="/wiki">Wiki</el-menu-item>
       <el-menu-item index="/recommend">Recommend</el-menu-item>
+
     </el-menu>
     <router-view style="margin-top: 60px"/>
 

src/javascript/kg_api.js

@@ -8,4 +8,16 @@ import '../mockjs/mock.js'
 export const getKGAll = () =>{
     return axios.get('/api/getKGAll')
 }
+export const getCourseWareList=()=>{
+    return axios.get('/api/getCourseWareList')
+}
+export const getTags=()=>{
+    return axios.get('/api/getTags')
+}
 
+export const getCoursesRelated=()=>{
+    return axios.get('/api/getCoursesRelated')
+}
+export  const getbasicInfo=()=>{
+    return axios.get('/api/getBasic')
+}

src/mockjs/mock.js

@@ -1,18 +1,44 @@
 import Mock from 'mockjs'
 const Random = Mock.Random;
+
 Mock.mock('/api/sendmessage', 'post', {
         'code':200,
-        'text':Random.cparagraph()
+        'text':'软件工程是一门研究用工程化方法构建和维护有效、实用和高质量的软件的学科，它涉及程序设计语言、数据库、软件开发工具、系统平台、标准、设计件有电子邮件、嵌入式系统、人机界面、办公套件、操作系统、编译器、数据库、游戏等。'
 });
 Mock.mock("/api/getExercises","get",
     {
         code:200,
         message:"success",
-        "data|10-12":[
+        "data":[
             {
-                desc:"@csentence(50,80)",
+                desc:"数据耦合、公共耦合、标记耦合、控制耦合的耦合性从低到高的顺序是",
+                "type|1":["TorF","choose","essay"],
+                knowledge:["OOP","OOA","OS","NET"]
+            },{
+                desc:"在SD方法中全面指导模块划分的最重要的原则是",
                 "type|1":["TorF","choose","essay"],
                 knowledge:["OOP","OOA","OS","NET"]
+            },{
+                desc:"在考察系统的一些涉及时序和改变的状态时，要用动态模型来表示。动态模型着重于系统的控制逻辑，它包括两个图：一个是事件追踪图，另一个是",
+                "type|1":["TorF","choose","essay"],
+                knowledge:["SE"]
+            },{
+                desc:"效益分有形效益和无形效益两种。有形效益可用纯收入、货币时间的价值、投资回收期等指标进行度量；无形效益主要从性质上、心理上进行衡量，很难直接进行量的比较。",
+                "type|1":["TorF","choose","essay"],
+                knowledge:["OS","NET"]
+            },
+            {
+                desc:"系统结构图是精确表达程序结构的图形表示法.因此,有时也可以将系统结构图当作系统流程图使用",
+                "type|1":["TorF","choose","essay"],
+                knowledge:["OOP","OOA","OS"]
+            },{
+                desc:"以对象,类,继承和通信为基础的面向对象设计方法(OOD)也是常见的软件概要设计方法之一",
+                "type|1":["TorF","choose","essay"],
+                knowledge:["OOP","OOA","OS","NET"]
+            },{
+                desc:"什么是数据字典 简述数据字典与数据流图的关系.",
+                "type|1":["TorF","choose","essay"],
+                knowledge:["DF","DS"]
             }
 
         ]
@@ -77,6 +103,10 @@ Mock.mock("/api/getKGAll","get",
                     id:18,
                     name:"白盒测试",
                     context: "白盒测试又称结构测试、透明盒测试、逻辑驱动测试或是基于代码的测试。白盒测试是一种测试用力设计方法。",
+                },{
+                    id:19,
+                    name: '数据库',
+                    context: '数据库数据库'
                 }],
             relations:[
                 {
@@ -119,17 +149,42 @@ Mock.mock("/api/getKGAll","get",
                 source: 4,
                     target: 1,
                     value: "DEFINE"
-                }]
+                },{
+                    source: 8,
+                    target: 1,
+                    value: "SUB"
+                }
+                ]
         }
     })
 Mock.mock('/api/getSearchResults','post',{
     code:200,
     message:'success',
-    'data|15-18':[
+    data:[
+        {
+            name:'数据库',
+            context:'数据库是存放数据的仓库。它的存储空间很大，可以存放百万条、千万条、上亿条数据。但是数据库并不是随意地将数据进行存放，是有一定的规则的，否则查询的效率会很低。当今世界是一个充满着数据的互联网世界，充斥着大量的数据。即这个互联网世界就是数据世界。数据的来源有很多，比如出行记录、消费记录、发送的消息等等。除了文本类型的数据，图像、音乐、声音都是数据。'
+        },
         {
-            'id|+1':0,
-            name:'@csentence',
-            context:'@cparagraph'
+            name: '关系型数据库 ',
+            context: '是指采用了关系模型来组织数据的数据库，其以行和列的形式存储数据，以便于用户理解，关系型数据库这一系列的行和列被称为表，一组表组成了数据库。用户通过查询来检索数据库中的数据，而查询是一个用于限定数据库中某些区域的执行代码。关系模型可以简单理解为二维表格模型，而一个关系型数据库就是由二维表及其之间的关系组成的一个数据组织。'
+        },{
+            name: 'mysql',
+            context: 'MySQL是一种关系型数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。'
+        },{
+            name: '非关系型数据库',
+            context: 'NoSQL，泛指非关系型的数据库。随着互联网web2.0网站的兴起，传统的关系数据库在处理web2.0网站，特别是超大规模和高并发的SNS类型的web2.0纯动态网站已经显得力不从心，出现了很多难以克服的问题，而非关系型的数据库则由于其本身的特点得到了非常迅速的发展。NoSQL数据库的产生就是为了解决大规模数据集合多重数据种类带来的挑战，特别是大数据应用难题。'
+        },{
+            name: '图数据库',
+            context: '图数据库是以点、边为基础存储单元，以高效存储、查询图数据为设计原理的数据管理系统。图概念对于图数据库的理解至关重要。图是一组点和边的集合，“点”表示实体，“边”表示实体间的关系。'
+        },{
+            name: 'Redis',
+            context: ' redis是一个key-value存储系统。和Memcached类似，它支持存储的value类型相对更多，包括string(字符串)、list(链表)、set(集合)、zset(sorted set --有序集合)和hash（哈希类型）。这些数据类型都支持push/pop、add/remove及取交集并集和差集及更丰富的操作，而且这些操作都是原子性的。在此基础上，redis支持各种不同方式的排序。'
+        },{
+            name: '大数据',
+            context: '对于“大数据”（Big data）研究机构Gartner给出了这样的定义。“大数据”是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力来适应海量、高增长率和多样化的信息资产。\n' +
+                '\n' +
+                '麦肯锡全球研究所给出的定义是：一种规模大到在获取、存储、管理、分析方面大大超出了传统数据库软件工具能力范围的数据集合，具有海量的数据规模、快速的数据流转、多样的数据类型和价值密度低四大特征。 '
         }
     ]
 })
@@ -137,3 +192,63 @@ Mock.mock('/api/addKnowledge','post',{
     code:200,
     message:'success'
 })
+Mock.mock('/api/getCourseWareList','get',{
+    code:200,
+    message:'success',
+    list:[
+        {
+            name:'vue生命周期.pdf',
+            type:'pdf'
+        },{
+            name:'软件工程的生命周期.mp4',
+            type:'mp4'
+        },{
+            name:'什么是生命周期.mp4',
+            type:'mp4'
+        },{
+            name:'react生命周期.ppt',
+            type:'ppt'
+        }
+    ]
+})
+Mock.mock('/api/getTags','get',{
+    code:200,
+    message:'success',
+    list:[{
+        name:'Software requirements'
+    },{
+        name:'Software design'
+    },{
+        name: 'Software test'
+    }
+    ]
+})
+Mock.mock('/api/getCoursesRelated','get',{
+    code:200,
+    message:'success',
+    list:[
+        {
+            name:'软件工程与计算2',
+            instructor:'SEEC01'
+        },{
+            name: '软件工程与计算3',
+            instructor:'SEEC01'
+        },{
+            name:'人机交互',
+            instructor:'SEEC02'
+        },
+        {
+            name:'软件测试',
+            instructor:'SEEC04'
+        }
+    ]
+})
+Mock.mock('/api/getBasic','get',{
+    info:{
+        name:'软件生命周期',
+        context:'软件生命周期(Software Life Cycle,SLC)是软件的产生直到报废或停止使用的生命周期。软件生命周期内有问题定义、可行性分析、总体描述、系统设计、编码、调试和测试、验收与运行、维护升级到废弃等阶段，' +
+            '也有将以上阶段的活动组合在内的迭代阶段，即迭代作为生命周期的阶段。生命周期的每一个周期都有确定的任务，并产生一定规格的文档（资料），提交给下一个周期作为继续工作的依据。按照软件的生命周期，软件的开发不再只单单强调“编码”，而是概括了软件开发的全过程。软件工程要求每一周期工作的开始只能必须是建立在前一个周期结果“正确”前提上的延续；因此，每一周期都是按“活动-结果-审核-再活动-直至结果正确”循环往复进展的。',
+        creater:'SEEC01',
+        createTime:'2023-05-20'
+    }
+})

src/router/index.js

@@ -6,6 +6,9 @@ import ChatView from "@/views/ChatView";
 import RecommendView from "@/views/RecommendView";
 import WikiView from "@/views/WikiView";
 import specificKnowledge from "@/views/specificKnowledge"
+import KnowledgeView from "@/views/KnowledgeDetailView"
+import ForumListView from "@/views/ForumListView"
+import ForumView from "@/views/ForumView"
 const routes = [
   {
     path: '/',
@@ -40,7 +43,17 @@ const routes = [
   {
     path: '/knowledge',
     name: 'knowledge',
-    component: specificKnowledge
+    component: KnowledgeView
+  },
+  {
+    path: '/forumList',
+    name: 'forumList',
+    component: ForumListView
+  },
+  {
+    path: '/forum',
+    name:'forum',
+    component: ForumView
   },
   {
     name: '404',

src/views/ChatView.vue

@@ -42,6 +42,7 @@ export default {
   components: {ChatBubble,senderView,userView},
   data(){
     return {
+      nowTimes:0,
       isOnCloud:false,
       chooseType:[{
         isOnCloud:false,
@@ -60,14 +61,7 @@ export default {
           sender:'chatBot',
           context: '请输入你想询问的内容',
         },
-        {
-          sender: 'user',
-          context: '软件工程涉及哪些领域？'
-        },
-        {
-          sender:'chatBot',
-          context: "软件工程是一门研究用工程化方法构建和维护有效、实用和高质量的软件的学科，它涉及程序设计语言、数据库、软件开发工具、系统平台、标准、设计件有电子邮件、嵌入式系统、人机界面、办公套件、操作系统、编译器、数据库、游戏等。"
-        }
+
 
       ]
     }
@@ -89,9 +83,17 @@ export default {
         //console.log(this.$data.inputText)
         sendMessage(this.$data.inputText).then(res=>{
           if(res.data.code===200){
-
-            this.$data.messageList.push({sender:'chatBot',context: res.data.text})
-            this.$data.inputText=''
+            if(this.$data.nowTimes===0){
+              this.$data.messageList.push({sender:'chatBot',context: '软件工程是一门研究用工程化方法构建和维护有效、实用和高质量的软件的学科，它涉及程序设计语言、数据库、软件开发工具、系统平台、标准、设计件有电子邮件、嵌入式系统、人机界面、办公套件、操作系统、编译器、数据库、游戏等。'})
+              this.$data.inputText=''
+            }else if(this.$data.nowTimes===1){
+              this.$data.messageList.push({sender: 'chatBot',context: '关系型数据库，是指采用了关系模型来组织数据的数据库，其以行和列的形式存储数据，以便于用户理解，关系型数据库这一系列的行和列被称为表，一组表组成了数据库。用户通过查询来检索数据库中的数据，而查询是一个用于限定数据库中某些区域的执行代码。关系模型可以简单理解为二维表格模型，而一个关系型数据库就是由二维表及其之间的关系组成的一个数据组织。'})
+              this.$data.inputText=''
+            }else {
+              this.$data.messageList.push({sender: 'chatBot',context: 'NoSQL，泛指非关系型的数据库。随着互联网web2.0网站的兴起，传统的关系数据库在处理web2.0网站，特别是超大规模和高并发的SNS类型的web2.0纯动态网站已经显得力不从心，出现了很多难以克服的问题，而非关系型的数据库则由于其本身的特点得到了非常迅速的发展。NoSQL数据库的产生就是为了解决大规模数据集合多重数据种类带来的挑战，特别是大数据应用难题。'})
+              this.$data.inputText=''
+            }
+            this.$data.nowTimes+=1
           }else {
             alert("an error happened while sending message")
           }

src/views/CourseView.vue

@@ -0,0 +1,16 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "CourseView"
+  /**
+   * 这部分用于展示课程详情，以及增删课程知识点
+   */
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/ForumListView.vue

@@ -0,0 +1,65 @@
+<template>
+<div>
+  <el-dialog
+      v-model="DialogVisible"
+      title="发帖"
+      width="30%"
+      align-center
+  >
+    <el-input v-model="inputTitle" placeholder="请输入标题" style="margin-bottom: 10px" />
+    <el-input v-model="input" placeholder="请输入内容，回车提交" type="textarea" @keyup.enter.native="onEnter" />
+
+  </el-dialog>
+  <div style="height: 20px">
+  </div>
+  <el-button style="position:fixed;float:right;right: 30px;bottom: 30px" type="primary" @click="DialogVisible=true">ADD</el-button>
+  <h2 style="margin-top: 10px">数据库</h2>
+  <el-card v-for="(item,index) in forumList" style="width: 60%;margin-left:20%;margin-top: 10px;text-align: left;" >
+    <el-row :gutter="20">
+      <el-col :span="22"><div style="font-size: 20px;margin-bottom: 10px;margin-left: 10px;cursor: pointer;" @click="()=>{this.$router.push('/forum')}">
+        {{item.name}}
+      </div>
+        <div style="margin-left: 10px">
+          {{item.context}}
+        </div></el-col>
+      <el-col :span="2" @click="this.$data.forumList.pop()" style="color: gray;cursor:pointer;">delete</el-col>
+    </el-row>
+
+  </el-card>
+
+</div>
+</template>
+
+<script>
+export default {
+  name: "ForumView",
+  data(){
+    return {
+      forumList:[
+        {
+          name:'什么是存储过程？',
+          context:'我不清楚什么是存储过程，请问数据是如何由文本进行持久化存储的？'
+        },{
+          name: '索引是什么？',
+          context: '索引是对数据库表中一或多个列的值进行排序的结构，是帮助MySQL高效获取数据的数据结构，这句话对吗？'
+        }
+      ],
+      DialogVisible:false,
+      input:'',
+      inputTitle:''
+    }
+  },
+  methods:{
+    onEnter(){
+      this.$data.DialogVisible=false
+      this.$data.forumList.push({name: this.$data.inputTitle,context: this.$data.input})
+      this.$data.inputTitle=''
+      this.$data.input=''
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/ForumView.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <el-dialog
+        v-model="DialogVisible"
+        title="评论"
+        width="30%"
+        align-center
+    >
+      <el-input v-model="input" placeholder="按回车提交评论" @keyup.enter.native="onEnter" />
+
+    </el-dialog>
+    <el-button style="position:fixed;float: right;right: 30px;bottom: 20px" type="primary" @click="this.DialogVisible=true">add</el-button>
+    <div style="height: 40px"></div>
+    <div style="width: 60%;margin-left: 20%;text-align: left;padding: 10px">
+      <div style="">
+        <h2>
+        {{theme.title}}
+        </h2>
+      </div>
+      <div>
+        {{theme.context}}
+      </div>
+    </div>
+
+    <div>
+      <el-card v-for="(item,index) in comments" style="width: 60%;margin-left: 20%;margin-top: 20px;text-align: left">
+        <el-row :gutter="20">
+          <el-col :span="22">{{item.context}}</el-col>
+          <el-col :span="2" @click="this.$data.comments.pop()" style="color: gray">delete</el-col>
+        </el-row>
+
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ForumView",
+  data(){
+    return {
+      theme:{
+        title:'什么是存储过程',
+        context:'我不清楚什么是存储过程，请问数据是如何由文本进行持久化存储的？'
+      },
+      comments:[
+        {
+          context:'存储过程是一些预编译的SQL语句,简单来讲就是为以后使用而保存的一条或多条sql语句的集合'
+        },{
+          context:'存储过程是一个预编译的代码块，简化复杂的操作.'
+        },{
+          context:'不用反复在建立一系列的处理步骤,出错率降低.'
+        }
+        ,{
+          context:'可以一定程度上确保数据安全'
+        }
+
+      ],
+      DialogVisible:false,
+      input:''
+    }
+
+  },
+  methods:{
+    onEnter(){
+      this.DialogVisible=false;
+      this.$data.comments.push({context: '提高性能'})
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/KGView.vue

@@ -84,7 +84,10 @@
     </div>
 
   </el-card>
+  <div>
     <el-card id="echart" style="height: 80vh;width: 65%;margin-left: 6%;margin-top: 120px;border-radius: 35px"></el-card>
+  </div>
+
 
 
 </template>
@@ -219,6 +222,7 @@ export default {
       myChart.on('click',(param)=>{
         //this.$data.clickElement=true;
         //console.log(param)
+        this.$router.push('/knowledge')
       })
     })
 
@@ -241,7 +245,7 @@ export default {
       this.$data.addRelationShip=false;
     },
     AddRelationShipMethod(){
-
+      this.$router.go(0)
     },
     DelRelationshipMethod(){
 

src/views/KnowledgeDetailView.vue

@@ -0,0 +1,143 @@
+<template>
+
+  <div>
+    <div style="float:right;right: 50px;height: 200px;margin-top: 60px;position:relative;">
+      <h3>CourseWare Related</h3>
+      <el-card style="width: 400px">
+        <div v-for="(item,index) in courseWareList" style="text-align: left;margin: 10px;">
+          <img v-if="item.type==='pdf'" src="../assets/file-expand_Pdf_icon-icons.com_68956.png" style="width: 40px">
+          <img v-if="item.type==='mp4'" src="../assets/file_7_icon-icons.com_68945.png" style="width: 40px">
+          <img v-if="item.type==='ppt'" src="../assets/file_11_icon-icons.com_68950.png" style="width: 40px">
+          <div style="margin-left: 10px;display: inline-block">{{item.name}}</div>
+        </div>
+      </el-card>
+    </div>
+    <el-descriptions
+        class="margin-top"
+        title="KNOWLEDGE  DETAIL"
+        :column="3"
+        size="large"
+        border
+        style="width: 60%;margin-left: 10%; padding-top: 60px;"
+    >
+      <el-descriptions-item>
+        <template #label>
+          <div class="cell-item">
+            Knowledge name
+          </div>
+        </template>
+        {{ this.$data.basicInfo.name}}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="cell-item">
+            creater
+          </div>
+        </template>
+        {{ this.$data.basicInfo.creater}}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="cell-item">
+            create time
+          </div>
+        </template>
+        {{ this.$data.basicInfo.createTime }}
+      </el-descriptions-item>
+      <el-descriptions-item :span="3">
+        <template #label>
+          <div class="cell-item">
+            related knowledges
+          </div>
+        </template>
+        <div>
+        <el-tag v-for="(item,index) in elTags" size="small" class="tag-style">{{ item.name }}</el-tag>
+
+        </div>
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="cell-item">
+            Context
+          </div>
+        </template>
+        {{ this.$data.basicInfo.context }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <div style="display: flex;margin-left: 10%;margin-top: 30px;"><h3>Courses Related</h3></div>
+    <el-scrollbar :vertical="true" style="height: 360px;width: 70%">
+      <div style="margin-left: 13%;text-align: left">
+        <el-card v-for="(item,index) in courseRelated" :key="item" style="width: 250px;height: 150px;display: inline-block;margin: 10px;" class="course-recommend">
+          <div style="margin-top: 32px;font-size: 18px">
+          {{ item.name }}
+          </div>
+          <div style="margin-top: 10px;font-size: 14px">
+            {{ item.instructor }}
+          </div>
+        </el-card>
+      </div>
+    </el-scrollbar>
+  </div>
+
+
+
+</template>
+
+<script>
+import {getCourseWareList,getTags,getCoursesRelated,getbasicInfo} from '../javascript/kg_api'
+export default {
+  name: "KnowledgeDetailView",
+  /**
+   * 这部分写展示知识点详情的，包括name context,创建人，创建时间， 相关课件，相关课程
+   */
+
+
+  /**
+   * 还有一个drawer用于展示题目
+   */
+  data(){
+    return {
+      courseRelated:[],
+      courseWareList:[],
+      elTags:[],
+      basicInfo:{
+      }
+    }
+  },
+  methods:{
+
+  },
+  mounted(){
+    getCourseWareList(window.localStorage.getItem('KGId')).then(res=>{
+      this.$data.courseWareList=res.data.list
+    })
+    getTags(window.localStorage.getItem('KGId')).then(res=>{
+      this.$data.elTags=res.data.list
+    })
+    getCoursesRelated(window.localStorage.getItem('KGId')).then(res=>{
+      this.$data.courseRelated=res.data.list
+    })
+    getbasicInfo(window.localStorage.getItem('KGId')).then(res=>{
+      console.log(res)
+      this.$data.basicInfo=res.data.info
+    })
+  }
+
+}
+</script>
+
+<style scoped>
+.tag-style{
+  margin: 5px;
+}
+.course-recommend:nth-child(5n+1){
+  background-color: #99A98F;}
+.course-recommend:nth-child(5n+2){
+  background-color: #C1D0B5;}
+.course-recommend:nth-child(5n+3){
+  background-color: #D6E8DB;}
+.course-recommend:nth-child(5n+5){
+  background-color: #FFF8DE;}
+.course-recommend:nth-child(5n+4){
+  background-color: #C9DBB2;}
+</style>

src/views/RecommendView.vue

@@ -56,7 +56,7 @@
         <div style="text-align: left;margin-bottom: 10px">
           知识点推荐
         </div>
-        <div class="recommendItem" v-for="(item,index) in recommendKnowledge" >
+        <div class="recommendItem" v-for="(item,index) in recommendKnowledge" style="cursor:pointer" @click="()=>{this.$router.push('/knowledge')}">
           <el-divider/>
           <div style="margin-top: 5px">
             {{item.name}}
@@ -106,27 +106,27 @@ export default {
       recommendKnowledge:[
         {
           'id':120,
-          'name':"asd",
+          'name':"集成测试",
         },
         {
           'id':121,
-          'name':"pqi"
+          'name':"软件生命周期"
         },
         {
           'id':122,
-          'name':"DRT"
+          'name':"软件工程"
         },
         {
           'id':123,
-          'name':"NAT"
+          'name':"chatGPT"
         },
         {
           'id':124,
-          'name':"DS"
+          'name':"MVC"
         },
         {'id':125,
 
-          'name':"STD"
+          'name':"黑盒测试"
         }],
       workStatistic:{
         total:20,

src/views/WikiView.vue

@@ -32,7 +32,7 @@
 
     <div style="margin-top: 180px"></div>
     <div v-if="searchResults!==[]">
-      <div v-for="(item,index) in searchResults" style="text-align: left">
+      <div v-for="(item,index) in searchResults" style="text-align: left" @click="()=>{this.$router.push('/forumList')}">
         <div style="width: 60%;margin-left: 20%;margin-top:10px;padding: 15px;border: 1px #DDE6ED solid;border-radius: 10px;cursor: pointer">
           <div style="font-size: 18px;margin-left: 20px;margin-right: 20px;margin-bottom: 10px">
             {{item.name}}