基于知识图谱的前后端(vue3+django)分离的问答系统的设计与实现

基于知识图谱的前后端(vue3+django)分离的问答系统的设计与实现(一):总体介绍
基于知识图谱的前后端(vue3+django)分离的问答系统的设计与实现(二):前端搭建与插件配置


一、准备工作

(一)整理项目

上一篇,我们已经搭建好了架子,引入了三个必要的组件,我们先把一些系统生成的没用的删掉,然后开始我们自己自定义的页面搭建。
在这里插入图片描述
我们删掉上面的HelloWord.vue,还有AboutView.vue,以及TestView.vue。

之前在router的index.js文件里,我们做了组件和路径的映射,既然现在组件没了,那么我们也得去router里删掉配置好的映射。
在这里插入图片描述
删除后的router文件夹下的index.js 的内容如下:

import {createRouter, createWebHashHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },

]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

因为其他的组件已经删除了,所以我们只留下这一个映射。

最后我们把App.vue里的内容删掉换成以下部分:

<template>
  <div id="app">
    <router-view id="center"></router-view>
  </div>
</template>
<script>
export default {
  name: 'app',
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

#center {
  min-height: calc(100vh - 120px);
}
</style>

App.vue 中间只留一个router-view组件,用来加载组件。

(二)Vue文件结构

因为之前我们没有去有目的地去编写一个vue组件,所以没有详细介绍vue的文件结构,即将开始编写前,我们用App.js来介绍下vue文件的基本构成是怎么样的。我们就以简单的App.js为例吧。
在这里插入图片描述

1. 标签

vue文件的最上面的部分, 是“< template >”标签,找个标签,类似与我们html里的div 就是一个块级元素,我们可以在这标签里面写html的标签,大体的语法和html是差不多的。
它支持列表渲染、条件渲染等写法,例如以下的条件渲染:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

下面是列表渲染的例子:

<ul id="array-rendering">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

说白了就是循环打印的逻辑。

2. Script

vue的中间部分,是script,这里就是js或者ts代码,可以在script 标签里注明你要用的是js还是ts。

我们之前提到过,vue是单页面程序,而且需要把不同的组件组合起来,所以在组件组合的时候,往往需要导入别的组件。

我们可以看到App.vue里面,第七行,default export 用来导出模块,Vue 的单文件组件通常需要导出一个对象,这个对象是 Vue 实例的选项对象,以便于在其它地方可以使用 import 引入,而这name就是给这个模块起名字。

script 里面还有一些其他的数据、方法等。

3. Style

这里面就没有什么可说的了,就是css代码,对上面的标签进行样式上的修饰。
有一点要提到的是。
在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措。但是这个要要慎用。因为在我们需要修改公共组件(三方库或者项目定制的组件)的样式的时候,scoped往往会造成更多的困难,需要增加额外的复杂度。

(三)认识生命周期

每个组件在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。(来自vue.js)
通俗点来讲,vue组件在加载的时候,变量、函数的加载是有一定顺序的,我们如果想在这期间有些什么操作,就需要在合适的阶段写我们的代码。比如,我们想在页面渲染的同时,加载后端的数据,我们就需要用到mounted方法,在里面发ajax请求从后端得到数据。

在这里插入图片描述

生命周期函数在官网已经说的很详细了,不再赘述。
vue的生命周期函数(钩子)

二、编写组件

(一)导航栏

一般地,导航栏和页脚都是公用的组件,无论哪个页面都是需要用到。特别是导航栏,导航栏和router直接相关,那么我们先开始写一个头部的导航栏吧。

首先,我们在components文件夹下面,新建common文件夹,然后新建NavMenuTop.vue文件。

1. 编写组件

然后我们在文件里这样写。

<template>
  <!--  插入一个导航栏-->
  <el-menu
      router
      mode="horizontal"
      background-color="#252525"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="width: 100%">

    <el-menu-item  route="/" index="index">
      首页
    </el-menu-item>

    <el-sub-menu index="template">
      <!--二级菜单里的组件-->
      <template #title>
        回答模板
      </template>
      <el-menu-item route="/addTemplate" index="addTemplate">
        添加
      </el-menu-item>
      <el-menu-item route="/listTemplate" index="listTemplate">
        查看
      </el-menu-item>
    </el-sub-menu>

    <!--    中间的问答系统的标识-->
    <span
        style=" background-color:#252525 ;position: absolute;color:#fff ;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold"> Q & A   System</span>
    <!--插入一个二级菜单栏-->

    <el-sub-menu index="person" style="position:absolute ;right: 11px;padding-top: 10px">
      <template #title>
        <el-avatar :size="40" :src="circleUrl"></el-avatar>
      </template>
      <!--二级菜单里的组件-->
      <el-menu-item route="/personal" index="personal">
        个人信息
      </el-menu-item>
      <el-menu-item @click="logout()" index="logout">
        登出
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item route="/help" index="help">
      帮助
    </el-menu-item>
  </el-menu>
</template>

<script>

export default {
  name: 'NavMenu',
  methods: {
    logout() {
    },
  },
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    }
  }
}
</script>

<style>
a {
  text-decoration: none;
}

span {
  pointer-events: none;
}

</style>




2. 解释代码

我们解释每行代码都是做什么的。

第3行,el -xxx的意思是,element UI 的 组件,这个组件并不是vue的语法,也不是纯html的语法,而是,这个语法是element ui plus的自定义组件,我们之前已经安装和element ui 的插件引入了它的css文件,所以我们现在可以使用el样式的组件。
我们从Element Ui Plus的组件库中,找到了导航菜单这个组件,然后插入,从第3行到第9行都是这个组件的属性。
第4行的router,是启用router功能。
第5行的mode,是指的菜单栏是如何显示,垂直还是水平。
下面是一些样式不再赘述。
第11行,菜单组件,其中index指的是这个组件唯一识别,也就它的id,其中route指的是路由的地址,也就说,点击这个菜单,router-view会加载什么组件。菜单的名字写在中间即可。

第15行,定义了一个含有二级菜单的菜单,这个菜单有一个名字,然后有下级菜单。

第29行,给这个系统添加一个标题,第三十行,我们用{{systemTitle}}引用了下面的一个变量。

第33 行,我想把一个含有二级菜单的菜单飘到右侧,可没成功,只好position:absolute ;right: 11px;来代替右漂。
我们在这个二级菜单下面,预留了答案模板的添加与查看的跳转。

第41行,@click就是给这个按钮添加一个方法。

从55行到58行,是这个vue文件中,所用到的方法的写法。
从59行到64行,是数据的写法,上面用到的数据都在data()里面。

我们写完这个导航栏,如何把它显示呢,我们来操作一下。

3. 挂载组件

我们进入到HomeView.vue组件,然后把东西全删了,然后写以下代码。

<template>
  <div>
    <NavMenuTop class="nav-menu"></NavMenuTop>
    <router-view/>
  </div>
</template>

<script>
import NavMenuTop from "@/components/common/NavMenuTop";

export default {
  name: 'HomeView',
  components: {NavMenuTop}
}
</script>
<style>

html, body {
  /*background: url("../assets/index.jpg");*/
  background: #F2F2F3;
  /*设置内部填充为0,几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  /*统一设置高度为100%*/
  height: 100%;
}

.nav-menu {
  /*margin-bottom: 40px;*/
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);
}
</style>

4. 运行测试

在这里插入图片描述

我们运行一下项目:然后访问默认路径, http://localhost:8080/,发现界面成了这个样子。
在这里插入图片描述
我们来分析一下HomeView。
我们在HomeView的第3行写了这个组件。这个组件是怎么导入的呢?
在第9行我们导入了组件,然后在第13行,我们把它挂在在HomeView里。

我们之前提到,在App.vue里,我们有一个router-view来加载组件,而我们访问的http://localhost:8080,是指的项目的根地址,访问根地址相当于访问的url就是“/”,也就是我们router里面的“/”(见router文件夹下的index.js第8行),所以就默认加载到router里的HomeView组件,HomeView组件,然后HomeView组件已经装载了NavMenuTop 组件,所以就显示到了页面上。

而在第4行,我们定义了一个 ,这个router-view是属于HomeView这个界面的,就可以用来加载HomeView的其他子界面了。

(二)问答组件

1. 编辑问答组件

 template>
  <el-card class="box-card">
    <template #header>
      <span style="font-weight: bold;font-size: 15px">--系统</span>
    </template>
    <div id="dialog_container">
      <div v-for="oneDialog in text_dialog" :key="oneDialog">
        <el-divider content-position="left">{{ user_name }} --{{ oneDialog.time }}</el-divider>
        <span id="question_card" style="font-size: 15px">{{ oneDialog.question }}</span>
        <el-divider content-position="right">回答</el-divider>
        <span id="answer_card">
              <div style="font-size: 15px" v-html="oneDialog.answer"></div>
            </span>
      </div>
    </div>
    <el-divider content-position="right"></el-divider>
    <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="尝试输入,上市公司名称,如:格力空调\海澜之家最近上涨吗?平安银行估值怎么样?"
        v-model="txt_question"
    >
    </el-input>
    <el-divider content-position="right">
      <el-button @click="ask_question()">提问</el-button>
    </el-divider>
  </el-card>
</template>
<script>

export default {
  name: 'AnswerCard',
  methods: {
    scrollToBottom: function () {
      // 问答的框,每次提问完滚动条滚动到最下方新的消息
      this.$nextTick(() => {
        const div = document.getElementById('dialog_container')
        div.scrollTop = div.scrollHeight
      })

    },
    ask_question() {
      // 提问
      if (this.txt_question === '') {
        alert("输入不能为空")
        return
      }
      // 添加一条 问答对话
      const myDate = new Date();
      this.text_dialog.push({time: myDate.toLocaleString(), question: this.txt_question, answer: "我是一条答案"})
      this.scrollToBottom();
    }
  },
  data() {
    return {
      user_name: '默认用户',
      txt_question: '',
      text_dialog: [],
    }
  }
}
</script>

<style scoped>


.box-card {
  margin: 2% auto;
  width: 50%;
  min-width: 900px;
  text-align: left;
}

#dialog_container {
  overflow: auto;
  scroll-margin-right: 1px;
  /*根据屏幕占比设置高度*/
  min-height: calc(100vh - 360px);
  max-height: calc(100vh - 360px);
}
</style>
 

这个页面模拟了一个简单的你问我答的界面,后续会有和后端交互。

2. 配置映射

问答组件编辑好了,我们把它放到HomeView界面的子组件中,这里如何配置呢,我们请看。
我们找到router文件夹下的index文件,然后把index.js改为以下的代码。

import {createRouter, createWebHashHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AnswerCard from "@/components/Answer/AnswerCard";

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView,
        children: [
                {
                    path: '/',
                    name: 'AnswerCard',
                    component: AnswerCard,
                    meta: {
                        requireAuth: false
                    }
                },

            ]
        },

]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

3. 运行测试

启动项目,打开后显示,此时的地址为http://localhost:8080/。
在这里插入图片描述

随意输入文本:
在这里插入图片描述
我们最初想达到的样子就是如此了,问一句回答一句。

我们之前提到过,我们的答案是根据设定好的模板,替换关键字来实现的,普通用户也可也贡献自己的模板,那么我们就需要一个操作用户模板的界面了。

(二)答案模板组件

1. 编辑添加组件

提交表单是前端一个基本的操作,是怎么也绕不开的。表单往往会有一些验证的操作,我们在此进行编写进行一个简单的Demo。

我们在问答系统中,会用到答案模板,所以我们以答案模板为例。
我们之前左导航菜单的时候提到,我们预留了答案模板的列表查询和添加页面,下面我们来编写一下这俩页面。
我们在components下面新建两个Vue文件,一个是AnswerTemplate.vue,一个是ListTemplate.vue,我们先来编写添加的页面。

<template>
  <el-card class="box-card">

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="mini" label-width="100px" class="demo-ruleForm">
      <el-form-item label="模板类别" prop="type" style="width: 380px;">
        <el-select v-model="ruleForm.type" style="width: 180px;" placeholder="请选择模板类别">
          <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-tooltip class="item" effect="dark" content="若类别无数据,请重新加载页面" placement="top">
          <el-button style="border: none;color: #8c939d"></el-button>
        </el-tooltip>
      </el-form-item>


      <el-form-item label="模板标题" prop="title" style="width: 380px;">
        <el-select v-model="ruleForm.title" style="width: 180px;" placeholder="请选择模板标题">
          <el-option
              v-for="item in titleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-tooltip class="item" effect="dark" content="若标题无数据,请重新加载页面" placement="top">
          <el-button style="border: none;color: #8c939d"></el-button>
        </el-tooltip>
      </el-form-item>

      <el-form-item label="子标题" prop="childTitle" style="width: 380px;">
        <el-select v-model="ruleForm.childTitle" style="width: 180px;" placeholder="请选择模板子标题">
          <el-option
              v-for="item in childTitleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-tooltip class="item" effect="dark" content="若子标题无数据,请重新加载页面" placement="top">
          <el-button style="border: none;color: #8c939d"></el-button>
        </el-tooltip>
      </el-form-item>

      <el-form-item label="模板内容" prop="content">
        <el-input :autosize="{ minRows: 4, maxRows:8}" type="textarea" v-model="ruleForm.content"
                  placeholder="例:截止到data,该股票代码:stocknumber,简称:stockname,目前股票价格运行的状态处于status区间,下档embrace元一线构成技术支撑位,上方无明显压力位,依此区间自行操作,逢低可以买入。"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>

  </el-card>


</template>

<script>


export default {
  name: 'AddTemplate',
  created() {
    //生命周期函数,创建的时候
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("开始提交")
          console.log('开始提交');
        } else {
           alert("验证失败")
          console.log('提交失败');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  data() {
    return {
    //选择框的值
      typeOptions: [{
        value: 'Option1',
        label: '股票',
      }, {
        value: 'Option2',
        label: '期货',
      }],
      titleOptions: [{
        value: 'Option1',
        label: '估值',
      }, {
        value: 'Option2',
        label: '大盘',
      }],
      childTitleOptions: [{
        value: 'Option1',
        label: '震荡无压力',
      }, {
        value: 'Option2',
        label: '震荡无阻力',
      }],
      ruleForm: {
        title: '',
        type: '',
        childTitle: '',
        content: ''
      },
      //添加前段校验规则
      rules: {
        type: {required: true, message: '请选择模板类别', trigger: 'change'},
        title: {required: true, message: '请选择模板标题', trigger: 'change'},
        childTitle: {required: true, message: '请选择子标题', trigger: 'change'},
        desc: [
          {required: true, message: '请填模板内容', trigger: 'blur'},
          {min: 2, message: '长度在 2 个字符以上', trigger: 'blur'}
        ],

      }

    }
  }
}
</script>

<style scoped>

.box-card {
  overflow: auto;
  margin: 2% auto;
  width: 50%;
  text-align: left;
}

.item {
  margin: 1px;
}

</style>

2. 编辑列表组件

  <template>
  <el-card class="box-card">
    <el-table
    // tableData是列表要显示的内容,这里进行搜索过滤
        :data="tableData.filter(data => !search || data.title.includes(search.toLowerCase())
        || data.content.includes(search.toLowerCase())
        || data.childTitle.includes(search.toLowerCase())
        || data.type.includes(search.toLowerCase()) )" :height="450" style="width: 100%">
     // 这个prop对应着tableData里面的对象属性名称
      <el-table-column label="序号" width="60" prop="index"/>
      <el-table-column label="类别" width="60" prop="type"/>
      <el-table-column label="标题" width="60" prop="title"/>
      <el-table-column label="子标题" width="100" prop="childTitle"/>
      <el-table-column label="内容" width="560" prop="content"/>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Type to search"/>
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            Edit
          </el-button>

          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >Delete
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  name: "ListTemplate",

  methods: {
    handleEdit(index, row) {
      alert("我要编辑第 " + (index+1)+" 行")
      console.log(index, row)
    },
    handleDelete(index, row) {
       alert("我要删除第 " + (index+1)+" 行")
      console.log(index, row)
    },

  },

  data() {
    return {
      search: "",
      tableData: [{
        index: '1',
        type: '股票',
        title: '下跌',
        childTitle: '下跌无支撑',
        content: '直至data,该股票代码:stocknumber,简称:stockname,整体来看近期走势status状态,注意高位调整位置在area区域,上方的压力位是在hinder元左右,短线并未形成有效支撑,建议观望为宜。'
      },
        {
          index: '2',
          type: '股票',
          title: '上涨',
          childTitle: '下上涨',
          content: '到data为止,stockname呈status走势,支撑位为embrace元左右,压力位为hinder元左右,超卖超买指标在area范围内,注意逢高减仓操作。。'
        }, {
          index: '3',
          type: '股票',
          title: '大盘',
          childTitle: '大盘',
          content: '两市个股跌多涨少,上涨品种近number-zhang只,下跌品种逾number-die只。不计算ST个股,两市近number-zhangting只个股涨停两市个股跌多涨少,上涨品种近number-zhang只,下跌品种逾number-die只。不计算ST个股,两市近number-zhangting只个股涨停,两市近number-dieting只个股跌停。科创板方面,当日stock-zhang涨幅最大,上涨percent-stock-zhang%;stock-die微跌幅最大,下跌percent-stock-die%。板块概念方面,block-zhang涨幅居前,涨幅在percent-block-zhang%以上;block-die跌幅居前,跌幅在percent-stock-die%以上。。'
        }, {
          index: '4',
          type: '股票',
          title: '下跌',
          childTitle: '下跌无支撑',
          content: '截止到data,本股票代码stocknumber,股票简称stockname,当前价格运行处于status状态,超买超卖处于area范围,向上阻力位是hinder元,向下的支撑位是embrace元,基于目前的明显下行趋势,建议及时出售筹码,待夯实底部之后再对该股进行建仓。'
        }, {
          index: '5',
          type: '股票',
          title: '上涨',
          childTitle: '上涨无阻力',
          content: '截止到data,本股票代码stocknumber,股票简称stockname,当前股票价格的运行的状态是status状态,超买超卖在area区域,向上无明显的压力位,向下的支撑位是embrace元,基于目前的明显上升趋势,建议继续持有,待出现明显顶部特征之后可以考虑卖出。'
        },]
    }
  }
}
</script>

<style scoped>

.box-card {
  margin: 2% auto;
  width: 95%;
  min-width: 900px;
  text-align: left;
}

</style>

3. 添加组件到router

以上的代码很简单,相信大家一看就明白。下面,我们找到router文件夹下的index.js,把这俩组件添加映射。

import {createRouter, createWebHashHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AnswerCard from "@/components/Answer/AnswerCard";
import AddTemplate from "@/components/AnswerTemplate/AddTemplate";
import ListTemplate from "@/components/AnswerTemplate/ListTemplate";
const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView,
        children: [
            {
                path: '/',
                name: 'AnswerCard',
                component: AnswerCard,
                meta: {
                    requireAuth: false
                }
            },
            {
                path: '/addTemplate',
                name: 'AddTemplate',
                component: AddTemplate,
                meta: {
                    requireAuth: false
                }
            }, {
                path: '/listTemplate',
                name: 'ListTemplate',
                component: ListTemplate,
                meta: {
                    requireAuth: false
                }
            },


        ]
    },

]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

4. 运行并观察

在这里插入图片描述
在这里插入图片描述

静态页面到这里差不多就做这些了,其他那些也没什么太大意义。放上这个静态页面的代码。
这个阶段的代码
https://gitee.com/hua_zhen_liu/qa-app-vue-2.git

Logo

前往低代码交流专区

更多推荐