JavaWeb课设-Vue.js+JsonServer+axios实战

一、主要内容：

应用所学知识，完成一个Web前端应用设计，结合与后端数据交互的技术等知识，设计开发一个Web前端的应用。该前端能实现基本功能，涉及到所用Vue、Bootstrap等主要库和axios服务的交互技术等。
主要学习内容包括：
（一）进一步学习并熟练掌握Vue.js设计的思想及常用库的使用。
（二）学习前端与Web服务的交互的axios技术，提高解决实际问题的能力。
（三）学习Web前端的设计与开发过程中所需要思想和细节。

二、基本要求：

1.资料充分，结构完整，论述清晰。
2.符合我院课程设计报告撰写规范。
3.按时完成课程设计各阶段工作，不突击，不抄袭。
1概述
当今社会，考试已经是我们必不可少的东西了，从小到大我们已经考过无数次了，以后还要考，不管是国内还是国外的各大厂家，都在不断的推出一系列的考试、认证。又是要我们去考试。我们国家的自考或是成考，以及各省市的各种考试，现在都在朝着信息化的道路前进在走。我们相信在今后这一系列的考试将会走向网络化考试的。这样才是符合信息技术发展的方向。
2后端服务器设计
2.1 使用的技术
Json-server
json-server 详解
JSON-Server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。
安装json-server
npm install -g json-server
启动 json-server
json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。
db.json文件的内容：
{
“course”: [
{
“id”: 1000,
“course_name”: “马连白米且”,
“autor”: “袁明”,
“college”: “金并即总变史”,
“category_Id”: 2
},
{
“id”: 1001,
“course_name”: “公拉农题队始果动”,
“autor”: “高丽”,
“college”: “先了队叫及便”,
“category_Id”: 2
}
}
}
例如以下命令，把db.json文件托管成一个 web 服务。
$ json-server --watch --port 3000 db.json
输出类似以下内容，说明启动成功。
{^_}/ hi!

Loading db.json
Done

Resources
http://localhost:3000/users

Home
http://localhost:3000

Type s + enter at any time to create a snapshot of the database
Watching…
此时，你可以打开你的浏览器，然后输入：http://localhost:3000/users
Axios
axios简介
基于promise，用于浏览器和node.js的http客户端
特点
支持浏览器和 node.js
支持 promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换 JSON 数据
浏览器端支持防止 CSRF (跨站请求伪造)
安装
1、 利用 npm 安装 npm install axios –save
2、 利用 bower 安装 bower install axios –save
3、 直接利用 cdn 引入
Bootstrap
什么是 Bootstrap？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
历史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
为什么使用 Bootstrap？
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

2.2 数据详细设计
用户信息表
users
{
“id”: 序号
“name”: 姓名
“loveok”: 爱好
“userid”: 学号
}
试题信息表
tests
{
“id”: 序号
“title”: 题目
“A”:选项A
“B”:选项B
“C”: 选项C
“D”: 选项D
“Y”: 正确答案
}
管理员账号表
root:
{
“id”: 序号,
“username”: 账号名
“password”: 密码
“look”: 备注
}

三、前端界面设计

3.1使用技术

Vue.js
Vue.js是什么
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。
1.VueJS 目的：
VueJs的产生核心是为了解决：
a: 解决数据绑定的问题，
b: vue框架产生的主要目的是为了开发大型单页面应用，
c: 它还支持组件化，也就是可以将页面封装成若干个组件，采用积木式进行编程，这样使页面复用性达到最高（支持组件化）。
2.VueJS 特性：
I: MVVM模式（数据变量（model）发生改变 视图（view）也改变， 视图（view）改变，数据变量（model）也发生改变）
使用MVVM模式有几大好处：
　　1. 低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
　　2. 可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。
　　3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
　　4. 可测试性。可以针对ViewModel来对界面(View)进行测试
II: 组件化
III 指令系统
IIII: vue2.0开始支持虚拟dom
vue1.0是操作的是真的dom元素而不是虚拟的
虚拟dom:可以提升页面的刷新速度
虚拟DOM有利也有弊。
A：大小 - 其中之一就是更多的功能意味着代码包中更多行的代码。幸运的是，Vue.js 2.0 依旧比 较小（当前版本 21.4kb），并
且也正在删除很多东西。
B: 内存 -同样，虚拟DOM需要将现有的DOM拷贝后保存在内存中，这是一个在DOM更新速度和内存使用中的权衡。
C: 并不适用所有情况 -如果虚拟DOM可以一次性进行批量的修改是非常好的。但是如果是单独的、稀少的更新呢？这样的任何
DOM更新都将会使虚拟DOM带来无意义的预计算。

3.2 具体实现

四、运行结果

启动后端服务器

启动前端服务器

访问首页

登入

用户信息注册页面

用户信息修改和管理页面

试题信息添加页面

试题信息查询页面

管理员注册页面

管理员信息管理