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

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

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

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

基于知识图谱的前后端（vue3+django）分离的问答系统的设计与实现一、准备工作（一）整理项目（二）Vue文件结构1. 标签2. Script3. Style

（三）认识生命周期

二、编写组件(一）导航栏1. 编写组件2. 解释代码3. 挂载组件4. 运行测试

(二）问答组件1. 编辑问答组件2. 配置映射3. 运行测试

(二）答案模板组件1. 编辑添加组件2. 编辑列表组件3. 添加组件到router4. 运行并观察

一、准备工作

（一）整理项目

上一篇，我们已经搭建好了架子，引入了三个必要的组件，我们先把一些系统生成的没用的删掉，然后开始我们自己自定义的页面搭建。 我们删掉上面的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是差不多的。 它支持列表渲染、条件渲染等写法，例如以下的条件渲染：

下面是列表渲染的例子：

• {{ 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>

type="textarea"

:autosize="{ minRows: 2, maxRows: 4}"

placeholder="尝试输入，上市公司名称，如：格力空调\海澜之家最近上涨吗？平安银行估值怎么样？"

v-model="txt_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

精彩内容

 您阅读本篇文章共花了：