基于Spring_Boot与Vue.js的问卷模块在数字阅读推广系统中的设计与实现

2023

年

9

月

第

18

期总第

532

期

InnerMonoliaScienceTechnoloconom

ggy

&E

y

内蒙古科技与经济

Setember2023

p

No.18TotalNo.532

基于

Srinoot

与

Vue.s

的问卷模块

pg

B

j

在数字阅读推广系统中的设计与实现

()

成都工业学院

,

四川

成都

611730

王龙军

,

王

晶

,

许靖唯

文章致力于在数字阅读推广系统中设计一个基于

S

用来

摘

要

:

rinoot

与

Vue.s

的问卷模块

,

pg

B

j

,

用了前后端的分离模式来进行开发

,

前端开发采用了

V

后端的开发主要

Sue.s

和

ElementUIrin

jpg

前端和后端通过

JBoot

整合

SrinataJPA

,

SON

数据格式实现交互

。

系统在前端实现了问卷的答

pg

D

/

实现了解用户数字阅读需求以及更好地进行数字阅读推广

。

系统使用了浏览器

/

服务器

(

模式

,

采

BS

)

题功能

,

在后端实现了对问卷内容进行增加

、

修改

、

删除等功能

,

系统投入使用后能提升数字阅读推广的

使用率

,

为读者推送更好的数字阅读内容

,

将推动图书馆的数字阅读推广进入更高的台阶

。

()

中图分类号

:

TP311

文献标识码

:

A

文章编号

:

1007

—

6921202318

—

0115

—

04

;;;

关键词

:

问卷

;

数字阅读

ntUI

pg

B

j

读者对于

图书馆数字阅读推广的对象是读者

,

数字阅读评价是掌握主动权的

,

读者的评价直接影

响数字阅读的发展方向和推广方向

,

因此提高用户

的满意程度对于图书馆来说具有积极和深远的意

义

,

本研究的目的是通过设计一个问卷模块系统

,

这

样更好地了解读者的阅读兴趣

、

阅读内容

、

阅读的深

度等

,

以便后期给读者推送更好的数字阅读服务

。

1

数字阅读推广及其系统关键技术

1.1

数字阅读推广概述

字阅读方式已经成为年轻读者获取信息的重要方

式

,

特别是高校学生在做毕业设计

、

写论文

、

做项目

都需要阅读大量的数字文献资料

,

因此高校图书馆

提高数字资源的比重

、

加强数字资源的保障工作显

得尤为重要

。

1.1.2

数字阅读推广简介

。

传统的阅读推广主要

是指图书馆通过组织各种线下活动与线上活动向读

者推荐纸质资源

,

比如线下开展阅读推荐活动

、

报

告

、

阅读之星评选等

,

线上主要是通过微信

、

微博

、

短

视频等方式向读者精准推送他们感兴趣的纸质资源

信息

,

主要目的是培养读者阅读兴趣

、

加强图书的流

通率

、

提升图书馆的无形品牌形象

、

增强图书馆的黏

性

。

数字阅读推广与传统的阅读推广类似

,

为了激

励读者数字阅读行为

、

培养数字阅读习惯

、

提高阅读

能力和认知

,

图书馆向读者推荐数字阅读的资源

,

推

荐方式主要是线上构建资源推荐平台

(

比如智慧图

书馆

)

和线下组织阅读推荐主题活动

,

比如图书馆开

设信息素养公选课

,

通过微信公众平台

、

抖音短视频

平台来推广数字阅读

,

扩大数字阅读推广影响力

,

建

立微信小程序或微信公众号的留言功能

,

让读者可

以在线留言

,

这样可以收集读者的数字阅读的需求

,

1.1.1

数字阅读简介

。

数字阅读目前没有一个统

一定义

,

数字阅读一般是指在电子设备上阅读图书

、

期刊

、

论文

、

报纸

、

照片

、

视频等内容

,

数字阅读改变

了传统的阅读方式

,

将阅读纸质资源的方式迁移到

阅读电子资源

。

数字阅读的内容是数字化的

,

它存

储在硬盘

、

存储卡

、

与传统纸质资源

U

盘等介质上

,

比较

,

数字阅读的内容便于携带

、

存储容量大

、

价格

便宜等

。

数字阅读的阅读方式包括电脑阅读

、

手机

阅读

、

平板电脑阅读

、

阅读器等

,

这些阅读方式与传

统阅读方式比较

,

显然数字阅读移动性更好

、

不受地

点和时间的约束

,

随着移动互联网的快速发展

,

数字

阅读在年轻读者群体中占据越来越重要的位置

,

数

收稿日期

:

2023-07-06

)。

基金项目

:

项目编号

:

2021

年度青苗计划项目

(

QM2021002

,

作者简介

:

王龙军

(

男

,

讲师

,

硕士

,

研究方向

:

软件工程

、

计算机视觉

、

数据挖掘

。

1977

—)

,

王晶

(

女

,

大学本科

,

研究方向

:

环境工程

。

2003

—)

,

许靖唯

(

女

,

大学本科

,

研究方向

:

数字媒体技术

。

1998

—)

·

115

·

总第

532

期

引导读者加入图书馆采购数字资源的会议中

,

这些

都是为把更好的数字阅读推广服务提供给高校师

生

。

1.1.3

问卷系统在数字阅读推广中的应用

。

高校

图书馆数字阅读推广的对象是教职工和学生

,

因此

了解用户的资源需求

,

即用户使用哪些资源和使用

资源的频率

,

用户对资源的满意度和评价

,

用户的评

价对于图书馆数字资源的影响非常巨大

,

同时也影

响数字阅读的方向

,

这些直接决定了以后图书馆需

要购买哪些数字资源及如何进行数字阅读推广

。

调

查问卷可以了解用户的资源需求及用户对资源的满

意度和评价

,

图书馆可以在调查问卷中设计合适的

问题

,

通过图书馆网站发布调查问卷程序

,

让用户可

以通过电脑

、

平板

、

手机等设备上使用调查问卷软

件

、

回答调查问卷的问题

,

图书馆对用户的回答问题

的数据进行统计

、

分析

,

然后得出合适的结论

,

最后

报送给图书馆的决策者

,

提供合适的建议和意见

。

数字阅读推广一般由图书馆读者服务部或资源建设

与阅读推广部的学科馆员具体负责执行

,

学科馆员

的信息素养和服务能力也是数字阅读推广很重要的

一个因素

,

学科馆员不但需要了解图书馆有哪些资

源

、

如何使用这些资源

,

而且需要了解用户的需求

,

此时通过调查问卷系统也可以考察学科馆员的信息

素养和服务能力

、

了解用户的需求

,

让学科馆员提升

其专业化服务水平

,

为后续的数字资源推广提供更

好的服务和建议

。

1.2

系统框架关键技术

1.2.1 S

p

rin

g

a

用的

l

团队开发的

,

Boot

框架

。

S

p

rin

g

其设计的目的是简化创建

Boot

是由

初始搭建和开发过程

[

1

]

S

p

ri

P

n

ivot-

p

in

g

所有的优秀特性

,

S

p

ri

。

n

g

S

p

rin

g

Boot

具

g

应

备

S

S

r

而

Bo

且

ot

可以实现

功能更加

富

p

r

、

in

使

g

可以实现的目标和功能

,

丰

用更加简单

、

性能更加稳定而健壮

。

Boot

最明显的特点是

,

通过

“

约定大于配置

”

的设计

S

p

rin

g

理念使得其配置文件变得非常简单

,

同时其应用部

署也更加简单

,

了大量开箱即用的依赖模块

S

p

rin

g

Boot

坚持

“

开箱即用

”,

提供

,

例如

“

s

s

p

rin

g

-boot-

等

tar

。

te

这些依赖模块为

r-

j

dbc

”“

s

p

rin

g

-boot-starter-data-

jp

a

”

的自动配置

,

使得

量的配置甚至零配置

S

p

r

S

,

i

便可以运行起来

n

p

r

g

in

B

g

oo

B

t

oo

应

t

应用提供了大量

用只需要非常少

,

让开发人员

有更多的精力专注于业务逻辑的开发

。

1

en

.2

ce

.2 SrinataJPA

框架

。

JPA

(

JavaPers

11

A

p

6

PI

·

)

是

g

Su

D

n

官方提出的

Java

持久化规范

i

,

st

它

-

·

内蒙古科技与经济

为

Java

开发人员提供了一种对象

/

关联映射工具来

管理

是

S

p

J

r

a

in

va

应用中的关系数据

。

g

基于

ORM

框架

、

JPA

S

规范的基础上封装

p

rin

g

DataJPA

[

2

]

的一套

JPA

技术实现

JPA

应用框架

,

底层使用了

,

可使开发者用极简的代码即可实现

Hibernate

的

对数据的访问和操作

,

它提供了包括增删改查等在

内的常用功能

,

并且易于扩展

。

常见的

有如

等

,

久层的操作

S

p

H

ri

i

n

b

g

er

D

na

,

a

t

t

e

这样便于开发者可以面向

aJ

M

P

y

A

Ba

旨在统一

tis

以前

O

叫

R

i

O

M

Bat

框架的访问持

is

)、

R

T

M

框架

、(

o

p

Link

行持久层的开发

,

而底层的实现则是可以进行切换

JPA

规范进

,

从而提高开发人员的效率

。

在使用持久化工具的时候

,

一般都有一个对象

来操作数据库

,

在

象操作数据库

,

在

H

JP

ib

A

ern

框

at

架

e

框架中通过

中通过

Entit

S

y

es

M

s

a

io

n

n

对

对象操作数据库

,

在

a

g

er

s

M

尽管每个对象叫法不太一样

y

Batis

框架中通过

S

q

lSes-

,

其实功能基本一致

ion

对象操作数据库

,

。

一般按照

来看的话

,

据库打交道

Se

,

rv

在

ice

层做业务逻辑处理

DAO

模式四层结构

,

象

。

那么

ORM

D

就存在着操

D

作

AO

层和数

数据的

框

A

架

O

中

,

对

本身提供对数据库的增删改

查

,

也就是通常简称为

基础

是非常方便

CRUD

操作

,

程序员使用这些框架操作数据库

CRUD

。

所有的框架都提供

,

但业务逻辑层面的处理

提供的

,

如果使用原生的框架

,

业务逻辑代码我们一

ORM

是没有

般会自定义

,

会自己去写

这个时候

,

ORM

提供的能力他都提供

S

p

rin

g

DataJ

p

S

a

Q

的

L

语句

,

然后执行

。

在

威力就体现出来了

,

,

业务逻辑功能

决用户的需求

。

S

p

rin

g

DataJ

p

O

a

R

也提供

M

框架没有提供的

,

全方位的解

1

面的

.2.3

[

3

]

渐

V

进

u

式

e.

React

一起被

J

j

s

框架

。

a

称

va

为

Scr

目

i

p

前

t

Vu

框

e

架

.

j

s

是一套构建用户界

,

最流行

Vu

的

e.

j

s

与

An

g

u

其

lar

中

、

V

其他重

3

个框架

,

与量级框架不同

,

V

u

数据驱动和

u

e

e

.

.

j

j

s

只关注视图层

,

s

采用自底向上增量开发的设计

,

并且它是以

组件化的思想构建的

。

更加简洁

、

更易于理解的

Vue.

j

s

提供了

上手并使用

Vue.s

。

Vue

A

.

P

s

I

可以进行组件化开发

,

使得我们能够快速地

,

使代码编写量大大减少

j

,

读者更加易于理解

j

,

最突出的优势在于可以对数据进行双向绑定

V

,

u

使用

e.

j

s

V

使网页在各种设备上都能显示出非常好看的效果

ue.

j

s

编写出来的界面效果本身就是响应式的

,

这

,

相比传统的页面通过超链接实现页面的切换和跳

转

,

Vue

使用路由不会刷新页面

。

Vue.

j

s

有

2.0

和

王龙军

,

等

·

基于

Srinoot

与

Vue.s

的问卷模块在数字阅读推广系统中的设计与实现

pg

B

j

2023

年第

18

期

3

Sc

.0

两个版本

,

ri

p

t

的

,

而

Vu

V

e

u

3

e

.

.

j

0

s

支

2.

持

0

默认是不支持

使用

T

T

,

y

使

p

e

用

-

目开发的质量

yp

eScri

p

t

在构建大型项目时

,

能够

T

yp

很

eS

好

cri

地

p

t

提高项

。

1.2.4 E

、

设计师和产品经理准备的一款设计和交互

lementUI

框架

。

ElementUI

[

4

]

是一套为

开发者

非常优秀的前端

UI

框架

,

它可以采用

Vue2.0

进

行实现

,

也可以采用

包含了一套设计原则和组件

An

g

ular

和

,

同时具有非常多的设

React

进行实现

,

它

计资源

,

如

UI

是一个不依赖于

Sketch

模板

、

Axure

组件等

。

Element

ue

框架一起开发项

Vu

目

e

的

的一

UI

库

,

但是它是当前和

V

个比较好的

UI

框架

。

由于

它可以非常快速制作出美观大方的前端网页

ElementUI

具备极其丰富的

UI

组件库

,

使用

,

可以

为前端程序员减轻了工作量

、

提高了开发效率

,

让程

序员把更多的精力放到业务的功能实现上

。

m

Ele-

V

e

E

u

n

e

t

目前为止只支持

2

U

.0

I

,

框架也有其不足的地方

,

不支持

Vue3.0

,

在

Vue3.0

环境下使用

m

l

e

e

n

m

t

e

U

nt

I

-

框架的升级版

p

lus

框架

,

E

,

l

E

e

l

m

e

e

m

n

e

t

nt

-

-

p

l

p

u

l

s

框架是

us

框架在支持

Ele-

面向对象的编程方面更加友好和便利

。

1.2.5 Ax

的

io

一

s

框架

。

种解决

p

方

ro

案

mi

,

se

技术在网络通信中是

异步编程

r

果

om

,

i

可

se

里面保存着某

个未来才会结束的事件的结

p

以说

p

romise

是

一个容器

,

种异步操作

p

r

。

o

P

mise

通过统一的

API

函数来处理各

种状态

:

F

Pendin

g

ro

(

m

进

is

行

e

对象代表一个异步操作

,

有

中

)、

Resolved

(

已完成

,

又称

3

果

ul

,

fi

可以决定当前是哪一种状态

lled

)

和

Re

j

ected

(

已失败

)。

,

只有异步操作的结

任何其他操作都无

法改变这个状态

。

传统

事件

,

而随

Ja

着

vaScri

p

t

需要操作

DOM

库而产生通信

主流前端框架是不

An

g

ular

、

R

操

ea

作

ct

D

、

V

这

OM

ue

的出现

,

需要库

,

也不需

3

种

要引

入

互迫切需要

jq

uer

y

.

j

s

库

,

主流前端框架的出现以及与后端交

一种通信技术

,

这就导致

[

5

]

的出现

。

Axios

是一种轻量级的异步

A

通

xi

信

os

技术

框架

,

它

是一个基于

求功能的

Ht

p

t

r

p

om

库

is

,

e

技术和可以发送

不用设置回调

,

直接调用

g

et

、

p

o

t

s

h

t

等请

法

,

它能用在

en

方

p

封装一样

romise

对

,

A

A

x

j

i

a

o

x

No

进行封装

de.

j

s

和浏览器中

,

Axios

通过

,

就像

s

比

A

j

ax

更加好用以及更加安全

j

Quer

y

对

A

j

ax

的

。

2

基于

S

p

rin

g

读推广系统中的设计和实现

Boot

与

Vue.

j

s

问卷模块在数字阅

2.1

系统总体框架设计

本系统主要采用

S

p

rin

g

Boot

与

Vue.

j

s

框架

,

系统总体框架分为

4

层

,

即表示层

、

控制层

、

业务逻

辑层

、

持久层

,

系统总体框架

,

如图

1

所示

。

图

由图

的用户的请求

1

可以看到

1

系统总体框架

,

表示层接收来自浏览器操作

,

将用户请求发送至服务器

,

然后处理

用户的业务逻辑

,

将给用户展示处理后的数据

,

具体

操作采用的是

Web

前端

,

Web

Vu

通

e

框架和

过

axios

El

实

em

现

en

A

t

a

U

x

I

框架来实现

向后端发送

Htt

p

数据请求到控制层

,

控制器层负责对请求和发

j

送来的请求数据进行处理

,

将前端表示层的请求进

行业务逻辑层的调用

,

从而对表示层的数据进行业

务逻辑处理

,

然后从业务逻辑层将处理好的数据返

回到控制层

收前端页面的请求

Control

,

le

调用

r

控制层使用

Service

S

p

rin

g

MVC

接

辑

s

业务逻辑层进行

业务逻辑处理

,

Services

业务逻层调用数据持久

层

,

从而达到访问数据库服务器和对数据库进行增

删改查等操作

。

完成请求处理后

,

由

ON

数据格式返回给前端页面

Controller

控

制层将结果以

JS

。

系

统架构通过分层的形式使得各层逻辑清晰和职能明

确

,

降低业务系统的耦合度

,

方便系统后续业务的扩

展与维护

。

.2

系统总体功能模块设计

该系统从功能模块上分为系统前台和系统后台

两部分

,

系统前台主要功能是读者登录后填写事先

设计好的推广数字资源的问卷以及查看答完后的问

卷

,

系统前台面向的用户主要是读者

,

目的是通过问

卷让读者了解数字资源

、

读者喜欢哪些数字资源

,

以

便后期向读者推送更加精准的

、

适合读者的数字资

源

,

系统后台主要功能是对问卷模块系统进行问卷

创建和发布

、

问卷修改和删除

、

问卷分析等功能

,

系

统后台面向的用户是管理员

,

他们对问卷进行管理

·

117

·

2

总第

532

期

和分析

,

最后通过适当的数据挖掘算法和推荐算法

,

向读者推送精准的数字资源信息

。

图书馆问卷功能

模块结构

,

如图

2

所示

。

图

.3

系统实现

2

图书馆问卷功能模块结构

笔者设计了基于

馆问卷模块

,

该系统采用

S

p

rin

g

Boot

与

Vue.

j

s

的图书

和

MVC

设计模式

,

采用

B

前

/

后

S

(

端

浏览器

的分

/

离

服务器

模式来

)

体系

进行

开发

,

前端开发采用

端开发用采用

端和后端交互式通过

S

p

rin

g

Vue

A

B

x

o

.

i

o

j

o

t

s

和

与

s

来进行实现

S

El

p

e

后

ri

m

n

e

g

n

J

t

P

U

A

I

框架

,

。

Data

,

前

前端开发采用了

Vue.s

和

Element

V

UI

框

通过

ue.

j

s

利用

布局开发是利用

p

m

安装项目所需要的第三方组件

Vue-cli

脚手架来快速创建项目

j

架

,

,

并且

n

,

前端页面

Eleme

的

nt

现的

,

通过

Bootstra

p

依

U

赖

I

丰富的功能组件来实

来实现整个前端页面

的布局

。

后端主要采用

、

业务逻辑层

、

持久层

3

层架构进行设计和实现

,

即控制

层

,

持久层主要实现对数据库进

行增删改查等操作

,

具体实现是采用

框架实现对数据对象的持久化操作

,

S

业务逻辑层负责

p

rin

g

DataJPA

最核心的业务逻辑处理

,

处于控制层与持久层之间

,

业务逻辑层通过调用数据持久层从而达到访问数据

库服务器和对数据库进行增删改查等操作

,

控制层接

收前端的请求

,

调用业务逻辑层对前端的请求来处理

业务逻辑

,

处理完成前端的请求后

,

最后控制层将以

SON

格式向前端返回处理的结果

。

前端通过

axios

实现

A

j

ax

向后端发送

htt

p

数

据请求

,

后端通过

回

JSON

格式的数据给前端

S

p

rin

g

JPA

,

Data

处理数据后

,

返

前后端通过

据格式实现交互

。

JSON

数

本系统采具体实现采用

DE

,

前端开发采用

Vue.

j

s2

S

和

TS

作为项目开发的

Element

后端开发用采用

S

p

rin

g

Boot

与

S

UI

框架

,

框

p

r

架

in

g

的

J

构

PA

项目采用

DAO

模式来完成整个建

D

,

a

本

ta

系

,

统比较关键的地方在于如何实现系统前后端的交

互

,

即

Vue.

j

s

利用

,

现在简单阐述部分关键的代码

Axios

实现与

S

p

rin

g

oot

的前

后端交互问题

B

。

·

118

·

内蒙古科技与经济

前端

t

p

://

c

l

o

o

n

c

s

a

t

V

lh

{

u

o

d

e

s

a

t

t

.

j

a

s

:

8

:

的

0

r

8

e

g

s

e

1

t

0

/

g

}

请求的

et

=

/

awai

A

t

x

t

i

h

o

i

s

关键代码如下

arams'

,{

.

g

et

(

:

'ht-

p

n

arams

:{

p

}

ame

:

'di

g

italbook'

后端

S

p

rin

g

Boot

中

来接收

url

中键值对中的数据后端代码

Re

q

uestParam

注解就是用

:

p

@G

ubl

e

i

t

c

M

S

a

tr

p

i

p

n

i

g

n

g

te

(

s

"

t

/

g

Str

){

(

e

@R

t

/

p

a

e

r

q

a

ue

m

s

s

t

"

P

)

in

aram

(

"name"

)

r

g

}

et

n

u

a

r

m

n

e

"

名称

"+name

;

系统中还有很多代码和技术细节不能一一展

示

,

通过

块的所有功能

S

p

rin

g

,

系统经过测试运行后

Boot

与

Vue.

j

s

实现图书馆问卷模

,

能极大地提高

图书馆数字资源的推广力度

。

3

结束语

本系统采用前后端的分离模式

,

设计了基于

S

体框架分为四层

p

rin

g

Boot

与

Vue.s

的图书馆问卷模块

,

系统总

,

即表示层

j

、

控制层

、

业务逻辑层

、

持

久层

,

通过四层架构实现了对数据库进行增删改查

等操作

,

前端开发采用了

端的开发主要

S

p

rin

g

Boo

V

t

ue

整

.

j

合

s

和

S

p

r

E

i

l

n

e

g

m

D

en

at

t

a

U

J

I

P

,

A

后

前端和后端交互式通过

Axios

来进行实现

。

使用

,

V

和

ue

S

p

.

j

r

s

和

in

g

ElementUI

开发前端

,

使用

S

p

rin

g

Boot

,

D

减轻开发人员的工作量

ataJPA

来开发后端

,

这些技术能提高

开发效率

、

增强系统的安全

性和健壮性

。

系统投入使用后运行稳定

,

读者可以

方便地使用本系统来填写个人的数字阅读喜好

,

图

书馆也可以了解读者的需求

,

以便更精准地向读者

推广数字阅读资源

,

该系统具有良好的社会效益和

经济效益

。

[

参考文献

]

[

1

]

吴胜

.S

p

rin

[

oot

开发实战

:

微课视频版

[

2

]

疯

M

]

狂软

.

北京

:

g

清华大学出版社

B

,

件

北京

:

电子工业出版社

.S

p

rin

g

Boot

,

2

企业

2

应

02

用

0.

实战

[

M

]

.

[

3

]

师晓利

,

刘志远

[

[

4

]

贾志

M

]

杰

.

北京

:

人民邮电出版社

.Vue.s

20

前

18

端

.

开发实战

:

慕课

版

j

,

.Vue+Srin

2020

实战

[

5

綦慧

,

M

]

北京

:

p

清华大学出版社

g

Boot

前后端分

.

离开发

,

[]

徐晓慧

.

.

基于

2021.

术的实现和优化

[

Web

系统的大数据搜索技

计算技术与自动化

2021

,

40

(

1

):

155-1

J

]

63

.

,

.

2

J

I