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

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

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

基于知识图谱的前后端（vue3+django）分离的问答系统的设计与实现
一、准备工作
- （一）整理项目
- （二）Vue文件结构
- - 1. 标签
  - 2. Script
  - 3. Style
- （三）认识生命周期
二、编写组件
- (一）导航栏
- - 1. 编写组件
  - 2. 解释代码
  - 3. 挂载组件
  - 4. 运行测试
- (二）问答组件
- - 1. 编辑问答组件
  - 2. 配置映射
  - 3. 运行测试
- (二）答案模板组件
- - 1. 编辑添加组件
  - 2. 编辑列表组件
  - 3. 添加组件到router
  - 4. 运行并观察

一、准备工作

（一）整理项目

上一篇，我们已经搭建好了架子，引入了三个必要的组件，我们先把一些系统生成的没用的删掉，然后开始我们自己自定义的页面搭建。

我们删掉上面的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-menuroutermode="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><!--    中间的问答系统的标识--><spanstyle=" 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-inputtype="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-optionv-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-optionv-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-optionv-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-buttonsize="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

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

零点城市社交电商 2.1.7.4 独立版全开源含前后端VUE文件全插件
零点城市社交电商 2.1.7.4 独立版全开源含前后端VUE文件全插件前言产品介绍开发语音获取源码前言零点城市社交电商最新版,独立版+前后端VUE+全开源+全插件,持续更新中,完美使 ...
Web前后端：如何分离，如何解耦？
摘要:在本文中我们一起来探讨一下为什么要在软件开发中进行前后端的分离,如何做到前后端分离,如何解耦. 简单地说,就是要把复杂的问题简单化,把一个从0到N的问题转化为N个0到1的问题.另一个相近的说法就 ...
如何基于知识图谱技术构建现代搜索引擎系统、智能问答系统、智能推荐系统？
1.构建搜索引擎系统下图中描述的体系结构包括三个部分:结合本体库的网络爬虫,索引及检索模块以及知识图谱模块.其中爬虫及索引模块主要负责从网络中爬取原始数据并通过解析得到实体相关信息以及建立索引:搜索 ...
基于知识图谱并考虑智能数据关联的金融反洗钱软件设计及应用
摘要反洗钱数据分析是提升金融行业安全性的重要技术之一.在互联网和大数据高速发展的冲击下,业内亟需形成对公客户的全维度视图,但传统反洗钱手段往往缺乏深度挖掘有价值客户信息的数据处理技术以识别和对抗风险 ...
Django小实战——在线Web计算器(利用Bootstrap进行前端开发)
文章目录前言一.目的二.步骤 1.创建项目 2.项目配置 3.页面制作 4.界面美化 5.逻辑功能实现 6.后端计算模块 7.效果展示三.总结前言前端采用了Bootstrap进行制作,提供 ...
前端要不要学习一门后端语言_这是一门免费课程，可帮助前端开发人员学习数学
前端要不要学习一门后端语言 Are you looking to become a more effective developer by improving your fundamental mat ...
前后端传图片用base64好吗_Base64是什么？前端用Base64加载图片到底好不好？
相信无论是前端还是后端开发工程师,对于Base64都不会感到陌生,在开发中我们经常会将一些小图片以Base64的形式存储和加载.然而知其然也要知其所以然,Base64究竟是什么,我们为什么要使用Bas ...
vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。（持续迭代升级中）...
vdesjs 介绍 vdesjs是一款基于vue技术栈,可视化拖拽,代码生成工具.我们提供详细的文档来帮助您理解我们工具的实现原理,并且您可以方便的基于vdesjs来扩展您自己的代码生成组件. 技术选 ...
js 获得明天0点时间戳_Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战...
点击上方"测试开发技术",选择设为"设为星标" 优质文章,第一时间送达! 学习全文大概需要 12分钟,内容实战性较强. 1. 前言本篇将基于Python 3. ...

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

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