【基于知识图谱的前后端(vue+django)分离的问答系统的设计与实现(二):前端搭建与插件配置】

     阅读:34

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

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


一、框架介绍

接下来进入正题,问答系统的前端开发篇。

本节搭建环境,安装必要的工具和组件,为前端开发打下基础。

(一)前端框架

1. 什么是框架

框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架。前者是从应用方面而后者是从目的方面给出的定义。可以说,一个框架是一个可复用的设计构件,它规定了应用的体系结构,阐明了整个设计、协作构件之间的依赖关系、责任分配和控制流程,表现为一组抽象类以及其实例之间协作的方法,它为构件复用提供了上下文(Context)关系。

通俗来讲,框架好像是别人打好的地基,接入了水电总闸,屋子里很多地方都预留出了空间。我们可以对这个房子进行装修,建游泳池,建厨房,粉刷墙壁,要不要加盖几层,从而把它变成满足自己居住需求的房子。

2. 为什么要用框架

框架已经完成了一些基础的设计实现了基础的功能,它能帮助我们快速开发项目,使用框架,可以让我们更多地把精力放到业务上面去。

特别是前端框架,是前后端分离后,前端的任务也变得重要起来,web前端开发慢慢趋于规范。

前端要做的核心工作就是:根据用户的操作将相应的数据展示到视图中。

为保证状态与UI同步,前端工作人员除了将精力放在业务逻辑上,还需要将大量的精力放在操作DOM(Document Object Model,简称 DOM)上。 频繁的操作DOM,这样的结果导致了代码臃肿,不易维护,容易出错。前端框架帮助我们减少DOM的操作,方便了开发和维护。目前主流的前端框架angular,react,vue,这三个框架各有优势,今天我们选取的是vue。

3. vue框架有哪些特点

  1. 什么是渐进式
    Vue 是渐进式的 JavaScript 框架,渐进式是指先使用 Vue 核心库,在 Vue 核心库的基础上,根据自己需要再去逐渐增加功能。由于框架做分层设计,可以选择性的使用该 框架的一个或一些组件,使用起来十分灵活方便。

  2. 单页面程序
    Vue 的开发理念是类似于面向对象思想,将单个网页装配成可复用的组件,每个网页模块属于自己的标记语言、样式语言、脚本语言,用来渲染网页中相应的部分。程序规模越大,样式代码和业务逻辑代码越多使用框架的优势就越明显。

  3. 数据驱动
    数据驱动视图是 Vue.js 最大的特点。通俗地讲数据驱动就是用户界面的组件已经和数据绑定,数据发生变化的时候,界面就随之改变,不需要程序员再去操作文档对象模型(DOM)。

在传统的 jQuery 中,对于某个元素修改的流程通常是:对某个 HTML 上的组件绑定事件,然后获取这个元素对应的 DOM,然后通过脚本语言对这个元素的 DOM 进行操作。频繁地操作 DOM 会使得代码出错率增加并且难以维护,Vue 框架帮我们封装了数据和 DOM 操作的映射,在开发时我们就可以只关注数据的业务逻辑。

4.使用框架一定好吗

不一定。
代码是为业务服务的,符合业务需求的,才是好的技术栈。

举个简单的例子,如果框架是打好了100层高楼的地基,如果我们想建一个茅草房或者小木屋是不是就用不到框架了?

使用框架,可能有很多用不到的东西是冗余的;会让程序员不再深究代码的底层原理;会让程序员对框架产生依赖;凡是都是有利有弊的,其中滋味还需要各位在代码和项目中去体会。

(二)开发工具

代码用记事本就可以写,而开发工具,可以帮助我们检查代码规范,而且方便调试,大大提高开发的效率。

Pycharm分为社区版和专业版本,专业版功能更多,插件也更多一点,比如对后端框架django的支持。开发工具pycharm不再作过多的赘述,参考一下网站的进行下载安装。

pycharm的下载和安装
个人还是建议选取专业的pycharm,用起来还是方便许多。

(三)版本问题

框架的版本是一个大问题,比如python的2.0和python的3.0版本几乎就是两种语法了。

vue的2.x版本被广泛应用,而现在vue cli已经更新到了5.0版本。
不同版本的vue 安装命令都不一样了。vue是从3.x开始有了很大的变化,一些语法发生了改变,比如获取Vue实例的方法变了;初始化的项目不再自带router;还有一些语法可能也略有变化。

Vue中使用的一些第三方组件,例如element UI,也在更新,从原来的element ui 到 element ui plus,连组件demo的语言都变成了ts,变化是非常大的。

所以版本之间的匹配一定要做好,否则很容易出现错误,对初学者非常不友好。

二、安装环境与工具

下面进入前端的开发过程,将逐步陈述。

(一) node.js

前面我们提到JavaScript是要依靠node.js的运行环境的,所以我们先安装node.js的运行环境。
node.js的下载地址

安装node.js很简答,一路next,这一步可选可不选。
安装完成后,查看是否安装成功。
在这里插入图片描述
出现版本号说明已经安装成功。

(二) 关于npm

安装好node.js以后,已经可以使用npm命令。

npm全称是 Node Package Manager 包管理工具,这一点和maven、gradle十分相似,只不过maven、gradle是用来管理java jar包的,而npm是用来管理js的。NPM 的实现思路和maven、gradle是一样的:

  1. 有一个远程代码仓库(registry),在里面存放所有需要被共享的js代码,每个js文件都有自己唯一标识。
  2. 用户想使用某个js的时候,只需引用对应的标识,js文件会自动下载下来。

也就是说,npm帮助我们下载各种依赖。众所周知,默认代码仓库一般在国外,所以网络差的同学下载比较慢,但是我们可以手动永久改成taobao的镜像地址。
打开cmd,输入以下命令即可。

npm config set registry https://registry.npm.taobao.org

(三) 安装Vue

vue cli是一个脚手架,为什么叫脚手架呢,vue cli可以帮助我们构建一个具有主体框架的vue 的项目。

webpack一种模块打包器。通俗点来说,因为对于浏览器来说,它只认识js代码,或者css代码,而Vue框架是有自定义的语法,所以就需要一个工具把它的代码解析成为浏览器认识的js代码。

接下来,全局安装vue cli,打开cmd命令行,输入以下命令。

npm install -g @vue/cli

注意,这是3.0以上版本的vue安装命令,会默认安装最新的版本。3.0以下的是另外一个命令。
安装好以后,可以检查下是否安装成功。

vue --version

在这里插入图片描述
出现版本号,说明安装已经成功了。

(四) 创建项目

安装好以后,我们可以用命令行来创建一个vue项目。除此之外,vue提供了一个UI界面,帮助我们创建和管理项目,和项目依赖。我们可以看一下。

打开cmd,命令行运行以下代码,会跳出浏览器。

vue ui

在这里插入图片描述
项目管理的UI界面,点击创建。
在这里插入图片描述
选择一个目录,然后点击创建。

在这里插入图片描述
起个项目名字,点击下一步。
在这里插入图片描述
选择Vue3, 用新不用旧嘛。

点击创建项目以后,切换回cmd命令行看进度,此时开始自动下载所需要的包,等待项目建立完成即可。
在这里插入图片描述
上图是正在创建项目

在这里插入图片描述
创建成功后,刚才的ui界面会到这里。

接下来,我们用pycharm打开项目,来看一下项目结构。之前我们已经安装好了pycharm,我们找到文件的目录,然后右键,以pycharm as project打开。

安装好pycharm的前提下,我们也可以这样点击左上角的项目名字,然后点击在编辑器中打开,此时会打开pycharm。
在这里插入图片描述
创建完成后的结构
用pycharm打开的项目结构

(五) 启动项目

既然是用Pycharm工具,启动项目也用IDE。
在这里插入图片描述
打开package.json 文件:
这个文件下有三个命令,分别是serve /build /lint,分别对应开始服务/打包成dist(打包以后可以用应用服务器部署)/运行代码格式检查,现在我们运行npm run serve (点击上图中,serve对应的绿色小按钮)来看一下项目是否可以正常启动啦。然后观察pycharm下方的运行结果。
在这里插入图片描述
启动正常,第一个对应的是本地ip,第二个对于的是外网ip,而8080就是计算机对外开放服务的端口,外部访问8080端口,就会得到这个网页。如果你的电脑和另外一台电脑是用同一个路由器上网的,另一台电脑可以通过第二个ip访问你的网页。

点击第一个链接。
在这里插入图片描述
说明项目启动成功啦,开始写自己的前端代码之前呢,我们先大体介绍一下项目的结构。

(六) 项目结构

在这里插入图片描述

项目结构

1. node_modules

是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。不好理解的话,我们可以认为,这是别人写好的工具,我们不用管。

2. public 文件夹

接下来可以看到public 文件夹,这是用来存放静态资源的。

我们再看public下面的这index.html(vue项目的入口),其中第十五行,有一句话,files wil l be auto injected,也就是说,生成的文件会被自动注入。

我们可以注意到,这句话的上方,有一个div,它的id是app,而大家都知道,在html里面,id是唯一的,这个app,指的就是下面App.vue文件的内容。

3. src文件夹

接下来可以看到,src文件夹(资源和源码文件):

3.1 该目录下的assets文件夹,这里面主要存放一些图片,图标等。

3.2 components 存放vue文件。vue文件的本质,里面网页代码。里写操作和方法,而写网页的样式。

3.3. 我们来看一下App.vue:

在这里插入图片描述

App.vue便是vue组件入口了。
vue是单页面的程序,通过组合各种div成为一个复杂的页面,所有的div都是写在index.html这一个页面上,我们在运行的时候页面变化,其实是不同的div在调用的时候切换的结果。也就是说,我们写的vue文件,要被App.vue里引用,才可以被加载。

我们刚才启动项目的时候,打开的欢迎界面,就是App.vue引用了,组件下的HelloWorld.vue。

我们上文提到,在index.html(项目入口)里面有个id为app的div,这个App.vue里的div 就是index.html里面id为app的div。

我们写的vue组件,需要被App.vue(组件入口)引用,然后才能被index.html(项目入口)调用。

4. main.js

相当于vue框架的程序入口文件,主要放置项目中经常会用到的插件和CSS样式之类的。例如: 网络请求插件:axios和加载的一些组件库等。

(七)重要插件

3.0 版本以后,自动生成的目录里没有了router.js,在vue.js里面,路由是一个很关键的概念。我们必须要花大篇幅来说这个东西。

1. Router

(1) 介绍

  • 什么是路由
    路由是浏览器 URL 中的哈希值( # hash) 与 展示视图内容 之间的对应规则。
    路由就是一套映射规则(一对一的对应规则), 由开发人员制定规则。
    当 URL 中的哈希值( # hash) 发生改变后,路由会根据制定好的规则, 展示对应的视图内容。

  • 区分(route,routes,router):
    route:首先它是个单数,译为路由,即我们可以理解为单个路由或者某一个路由;

    routes:它是个复数,表示多个的集合才能为复数;即我们可以理解为多个路由的集合,JS中表示多种不同状态的集合的形式只有数组和对象两种,事实上官方定义routes是一个数组;所以我们记住了,routes表示多个数组的集合;

    router:译为路由器,上面都是路由,这个是路由器,我们可以理解为一个容器包含上述两个或者说它是一个管理者,负责管理上述两个;举个常见的场景的例子:当用户在页面上点击按钮的时候,这个时候router就会去routes中去查找route,就是说路由器会去路由集合中找对应的路由。

  • 为什么要学习路由?
    路由是什么东西呢,路由是用来控制页面的跳转的,特别是对用户的权限管理中起着重要的角色。在 web App 中, 经常会出现通过一个页面来展示和管理整个应用的功能。我们之前提到,我们的vue框架是一个单页面程序,可以理解为咱们vue组件的切换逻辑。

  • Vue中的路由
    vue 中的路由 : 是 hash 和 component 的对应关系, 一个哈希值对应一个组件。也就是说,一个路径对应着一个对应的vue文件,而显示是谁来做的呢,是下面两个组件。

  • vue中router两个重要的路由组件。
    router-view 主要是在构建单页应用时,渲染指定路由对应的组件,我们上面提到vue是单页面程序,页面的的切换,是用切换不同的vue组件来实现的,router-view就是用来渲染vue组件的,可以理解为一个容易,里面可以装不同的页面。

    router-link 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的“a”标签,不想深入理解的,可以直接理解为a标签。

既然vue cli初始化的时候没给我们生成这个router,那我们只能自己来安装然后使用。

(2) 安装

安装vue router。现在我们打开vue ui的界面,选择左侧的插件,然后点击中间上方位置的 添加vue router 。这个工具可以帮我们安装vue router,并且添加好router的配置文件。
在这里插入图片描述
添加完router 以后,我们来看项目结构,项目结构已经发生了变化。接下来我们分析下更新好的目录。

(3) 目录结构

分析新的项目结构,看router是如何起作用的。
在这里插入图片描述
我们发现vue组件的入口,App.vue已经发生了改变。多出了router文件夹(一个js)文件,还有views文件夹(多了两个vue文件)。

App.vue 本来是一个图标组件和HelloWorld组件,现在变成了一个nav组件,nav组件是导航组件,里面又有了两个router-link链接,分别指向不同的url。

我们重新运行一下项目。
在这里插入图片描述
我们可以看到,默认显示的是Home页面,地址栏里的url是localhost:8081/#/,这和router-link里的to的“/”相对应,旁边的显示的是“/about”链接,点击后会显示about页面。

我们可以知道,当在Home界面的时候,上面的url是localhost:8081/#/,点击About,那么url就会变成localhost:8081/about,对应的界面也会切换。

是那么router是如何通过url来找到相对应的组件来显示的呢,我们来分析下。

第一步:创建路由

js文件里,导入路由对象,创建路由实例,定义路由的url和组件直接的映射。

如何创建的?

我们来看一下router文件下的js文件具体做了什么。
在这里插入图片描述我们可看到,第一行引入了createRouter,和createWebHashHistory,这属于router组件里的。

第2行引入了HomeView组件,其中HomeView是项目下的vue文件。

第4行开始,定义了一个routes数组,里面包括多个路由,每个路由写了三个基本的属性,分别是路径,也就是url,name(组件的名称),component(对于的vue组件)。这里就把访问路径和vue组件对应起来了,路由就会根据路径加载对应的组件。

注意到的是,第16行这种写法,其实就是第2行和第8行的结合版,随你选择。

第二十五行是固定的写法,就是导出默认路由。

第二步:加载router文件

router的js文件是怎么被加载的呢,因为vue项目不会主动去加载这个文件的。

我们之前提到main.js这个程序入口文件,插件组件的加载是在main.js完成的,所以我们看到main.js。
在这里插入图片描述
在2.X版本中创建一个vue 实例是通过 new Vue()来实现的,到了3.X中则是通过使用createApp这个 API返回一个应用实例。

然后在main.js里面导入了router文件。

看到上图的最后一行代码,我们可以看到上面先得到了实例,然后.use(相当于加载)了router组件。

到此我们介绍完了router和它的工作机制。

(4) 测试router

测试一个自定义的route和页面,看看是否可以正常跳转。

第一步:自定义组件

在view文件夹下,创建一个名称为TestView.vue的文件,然后在文件里写入,以下的代码。
在这里插入图片描述

		<template>
		  <p>我只是一个卑微的测试页面</p>
		</template>
第二步:配置组件和url的映射

然后,我们把这个组件去router文件夹下的index.js文件里去做下配置。我们在第3行添加

	import TestView from "@/views/TestView";
然后再第19行添加。
	    {
        path: '/test',
        name: 'test',
        component: TestView
    }

添加完以后的长这个样子。
在这里插入图片描述

第三步:添加页面显示逻辑

然后我们去App.vue里第5行添加,

	 |<router-link to="/test">Test</router-link>

然后我们启动这项目,然后点击test,发现长这个样子。
在这里插入图片描述
好的,说明路由是配置成功了。路由可以正常使用了,我们再看下另一个重要的插件。

2. Vuex

Vuex 是一个专为 Vue.js 应用程序开发的“状态管理模式”。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

讲人话就是:有几个数据,几个操作,在多个组件上都需要使用,如果每个组件都去调用都是写,就会很麻烦。你可以简单的将其看成把多个组件、界面共享的变量全部存储在一个对象里面。然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用,多个组件就可以共享这个对象中的所有变量属性。这种设计是不是也让你想到了单例模式。

例如,我们的前端登录功能,我们想把登录的用户信息保存到本地,而用户的信息可能要在多个地方使用,这时候就可以用到Vuex了。

可能有人有疑惑了,不能自己封装一个对象来管理吗?当然是可以的。但是我们自己封装的对象,是没用响应式的,还要自己写,很麻烦。

(1) Vuex的安装

我们继续使用vue ui 的界面来安装Vuex。点击上方 添加vuex按钮即可安装vuex,并且生成配置文件。
在这里插入图片描述

(2) 目录结构

在这里插入图片描述
我们发现,多了store文件和下面的index.js文件夹。main.js里,也注册了store。

(3) 核心概念

初学者来说,我来通俗地讲一下几个比较核心的概念:
- State。对我们来说,它就用来存储的数据。
- Getters。 获取state中的数据,可以加以包装。比如说我们把用户选择的商品存在购物车里,我们再getter里面,可以选取商品价格大于某个价格的商品.
- Mutations。用于处理state中数据,比如说更新用户的状态,说白了就是,对数据进行修改。
- Action。Mutation中进行异步操作, 比如网络请求, 必然是异步的。
- Module。是模块的意思。为什么在Vuex中我们要使用模块呢?
当应用变得非常复杂时,store对象就有可能变得相当臃肿。为了解决这个问题,Vuex允许我们将store分割成模块(Module),而每个模块拥有自己的state、mutation、action、getters等等。

3. Element UI Plus

所谓组件库,就是别人写好的组件样式,你拿来用就可以,这样可以使用前端框架封装的代码帮助工程师快速开发。

学习过前端的同学肯定知道bootstrap,我们一般的使用方法就是引入css和样式,然后在页面使用就可以了。

我们的组件库选用element UI。

之前我们已经介绍了npm包管理工具,那么我们现在可以下载Element UI组件库了。

请注意,vue3以上的element ui 教程一定要进这个链接。
element ui plus

(1) 安装

我们看到开发工具的下方,有一个terminal ,就是终端的意思,和我们的命令行是一样的,不同的是,这里直接切到项目的路径下面了,更加方面。我们在安装的时候,一定要保证路径在当前项目下。

npm install element-plus --save

在这里插入图片描述

在terminal里面直接输入,以上命令,就安装了element ui。这些插件,都要在main.js里注册才行。

(2) 注册

在main.js的代码调整一下,这样还更好看一些。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(store)
app.use(router)


app.mount('#app')

这样就完整引入了element ui的样式。想要按需引入的同学,可以看这个链接。(按需引用的话,可以减少打包后的项目体积,提高页面加载效率)
element UI 官方引入方式

(3) 测试

整体引入了element UI以后,我们再写的样式就和element ui 一样了。element ui 官网上会有相对应的代码,我们直接复制过来加以改动即可,例如导航栏。我们在element ui 的网站,找到组件,然后点击导航栏,然后查看代码。
在这里插入图片描述
这里有一点要注意一下,element ui plus的最新版本的demo变成了 typescript语言,大家不要粘下面的ts代码。
在这里插入图片描述

清空HelloWorld.vue文件里的代码,然后我们直接把导航栏的代码粘贴到我们的HelloWorld.vue文件里。

<template>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>Info</el-menu-item>
    <el-menu-item index="4">Orders</el-menu-item>
  </el-menu>
</template>

重新运行项目观察
在这里插入图片描述
我们看到了样式和element ui 一样,说明Element UI 样式使用成功了

以上三个主要组件已经引入成功。

第一个阶段的代码(只配置了前端插件)