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

基于知识图谱的前后端（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里的内容删掉换成以下部分：

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

（二）Vue文件结构

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

1. 标签

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


  A


  B


  C


  Not A/B/C

下面是列表渲染的例子：


  
    {{ item.message }}

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

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. 编写组件

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

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组件，然后把东西全删了，然后写以下代码。

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>
  
    
    
      
        {{ user_name }} --{{ oneDialog.time }}
        {{ oneDialog.question }}
        回答
        
              
            
      
    
    
    
    
    
      提问

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

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，我们先来编写添加的页面。

2. 编辑列表组件

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）分离的问答系统的设计与实现（三）：前端开发

Python相关栏目本月热门文章