基于知识图谱的前后端（vue+django）分离的问答系统的设计与实现（三）：前端开发

基于知识图谱的前后端（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