如何使用ssm实现基于JavaWeb的家居商城系统的设计与实现

328 篇文章 0 订阅
135 篇文章 0 订阅

@TOC

ssm035基于JavaWeb的家居商城系统的设计与实现+jsp

第一章 绪 论

1.1背景及意义

系统管理也都将通过计算机进行整体智能化操作,对于家居商城系统所牵扯的管理及数据保存都是非常多的,例如管理员;主页、个人中心、用户管理、商品分类管理、商品信息管理、系统管理、订单管理,用户;主页、个人中心、我的收藏管理、订单管理,前台首页;商品信息、新闻资讯、我的、跳转到后台、购物车等,这给管理者的工作带来了巨大的挑战,面对大量的信息,传统的管理系统,都是通过笔记的方式进行详细信息的统计,后来出现电脑,通过电脑输入软件将纸质的信息统计到电脑上,这种方式比较传统,而且想要统计数据信息比较麻烦,还受时间和空间的影响,所以为此开发了家居商城系统;为用户提供了方便管理平台,方便管理员查看及维护,并且可以通过需求进行商品信息内容的编辑及维护等;对于用户而言,可以随时进行查看商品分类和订单信息等,管理员可以足不出户就可以获取到系统的数据信息等,而且还能节省用户很多时间,所以开发家居商城系统给管理者带来了很大的方便,同时也方便管理员对用户信息进行处理。

本论文家居商城系统主要牵扯到的程序,数据库与计算机技术等。覆盖知识面大,可以大大的提高工作人员的效率。

1.2国内外研究概况

随着国内经济形势的不断发展,中国互联网进入了一个难得的高峰发展时期,这使得中外资本家纷纷转向互联网市场。 然而,许多管理领域的不合理结构,人员不足以及市场管理需求的增加使得更多的人具备了互联网管理的意识。

在当今高度发达的信息中,信息管理改革已成为一种更加广泛和全面的趋势。 “家居商城系统”是基于Mysql数据库,在JSP程序设计的基础上实现的。为确保中国经济的持续发展,信息时代日益更新,同时,随着信息社会的快速发展,各种管理系统面临着越来越多的数据需要处理,如何用方便快捷的方式使管理者在广阔的数据海洋里面查询、存储、管理和共享有效的数据信息,对我们的学习,工作和生活具有重要的现实意义。因此,国内外学术界对此进行了深入而广泛的研究,一个新的研究领域——家居商城系统诞生了。

28

1.3 研究的内容

目前许多人仍将传统的纸质工具作为信息管理的主要工具,而网络技术的应用只是起到辅助作用。在对网络工具的认知程度上,较为传统的office软件等仍是人们使用的主要工具,而相对全面且专业的信息管理软件仍没有得到大多数人的了解或认可。本选题则旨在通过标签分类管理等方式,实现家居商城系统的各种功能,从而达到对家居商城系统的管理。

详细内容介绍,将在以下六章中详细阐述:

第一章、绪论,介绍了研究课题选择的背景及意义、研究现状,简要介绍了本文的章节内容。

第二章、引入技术知识,通过引入关键技术进行开发,向系统中涉及直观表达的技术知识。

第三章、重点分析了系统的分析,从系统强大的供需市场出发,对系统开发的可行性,系统流程以及系统性能和功能进行了探讨。

第四章、介绍了系统的详细设计方案,包括系统结构设计和数据库设计。

第五章、系统设计的实现,通过对系统功能设计的详细说明,论证了系统的结构。

第六章、系统的整体测试,评判系统是否可以上线运行。

第二章 关键技术的研究

2.1 JSP技术介绍

JSP技术本身是一种脚本语言,但它的功能是十分强大的,因为它可以使用所有的JAVA类。当它与JavaBeans 类进行结合时,它可以使显示逻辑和内容分开,这就极大的方便了用户的需求。JavaBeans 可以对JSP技术的程序进行扩展,从而形成新的应用程序,而且JavaBeans的代码可以重复使用,所以就便于对程序进行维护。JavaBean 组件有内部的接口,可以帮助不同的人对系统进行访问。1999年,Sun微系统公司正式推出了JSP技术,这是一种动态技术,是基于整个JAVA体系和JavaServlet提出的,是具有普遍适用性的WEB技术,也是本系统设计的核心技术之一。JSP技术能够极大的提高WEB网页的运行速度。这些内容会与脚本结合,并且由JavaBean和Servlet组件封装。所有的脚本均在服务器端运行,JSP引擎会针对客户端所 提交的申请进行解释,然后生成脚本程序和JSP标识,然后通过HTML/XML页面将结果反馈给浏览器。因此,开发人员亲自设计最终页面的格式和HTML/XML标识时,完全可以使用JSP技术。

所以结合家居商城系统的需求及功能模块的实现,使用JSP技术是最合适的,而且JSP的拓展性比较好,对于系统在后期使用过程中可以不断对系统功能进行拓展,是系统更完成,更方便的满足用户管理。

2.2 JAVA简介

Java主要采用CORBA技术和安全模型,可以在互联网应用的数据保护。它还提供了对EJB(Enterprise JavaBeans)的全面支持,java servlet API,JSP(java server pages),和XML技术。JAVA语言是一种面向对象的语言,它通过提供最基本的方法来完成指定的任务,开发者只需要知道一些概念就能够编写出一些应用程序。Java程序相对较小,其代码能够在小机器上运行。Java是一种计算机编程语言,具有封装、继承和多态性三个主要特性,广泛应用于企业Web应用程序开发和移动应用程序开发。

Java语言和一般编译器以及直译的区别在于,Java首先将源代码转换为字节码,然后将其转换为JVM的可执行文件,JVM可以在各种不同的JVM上运行。因此,实现了它的跨平台特性。虽然这使得Java在早期非常缓慢,但是随着Java的开发,它已经得到了改进。

2.3 ECLIPSE 开发环境

ECLIPSE 支持广泛、兼容性高并且功能强大,是一个Eclipse 插件集合,普遍适应于JAVA和J2EE的系统开发,支持 JDBC,Hibernate,AJAX,Struts,Java Servlet,Spring,EJB3等市面上存在的几乎所有数据库链接工具和主流Eclipse产品 开发工具。

ECLIPSE 在业内是所熟知的开发工具,该平台在开发的过程中运用的就是该工具。ECLIPSE 又被称之为企业级的工作平台,它是以Eclipse IDE为基础的。ECLIPSE 可以帮助我们进行数据库的研发和J2EE的使用,除此之外,还可以提高系统的运营能力,这突出表现在服务器的整合过程中。ECLIPSE 的功能相当完备,能够为J2EE的集成提供必要的环境支持,从而完成编码、测试、调试及发布等功能。它可以支持JSP,HTML,SQL,Javascript,Struts, CSS等。

2.4 Tomcat服务器

Tomcat属于一种轻型的服务器,所以说在中小企业中并不具有普适性。但是当程序员需要开发或调试JSP 程序时,则通常会将该服务器作为首选。对于一个仅具有计算机基础知识的人来说,计算机系统具有一个好的Apache服务器,可以很好的对HTML 页面进行访问。Tomcat 虽然是Apache的扩展,但是它们都是可以独立运行的,二者是不互相干扰的。当配置正确的时候,Apache服务器为HTML 页面的运行提供技术支持,Tomcat 的任务则是运行Servle和JSP 页面。Tomca也具有一定的HTML页面处理功能。

2.5 MySQL数据库

数据库是系统开发过程中不可或缺的一部分。在WEB应用方面,MySQL AB开发了一个具有很大优势的MySQL关系数据库管理系统。 MySQL可以将数据存储在不同的表中,这非常灵活,并且还可以提高系统在实际应用中的速度。数据库访问最常用于标准SQL语言,MySQL用于SQL语言,因此它具有高度兼容性。数据库的操作是必不可少的,包括对数据库表的增加、删除、修改、查询等功能。现如今,数据库可以分为关系型数据库和非关系型数据库,Mysql属于关系性数据库,Mysql数据库是一款小型的关系型数据库,它以其自身特点:体积小、速度快、成本低等,Mysql数据库是目前最受欢迎的开源数据库。

在WEB应用技术中, Mysql数据库支持不同的操作系统平台,虽然在不同平台下的安装和配置都不相同,但是差别也不是很大,Mysql在Windows平台下两种安装方式,二进制版和免安装版。安装完Mysql数据库之后,需要启动服务进程,相应的客户端就可以连接数据库,客户端可通过命令行或者图形界面工具登录数据库。

第三章 系统分析

3.1 系统设计目标

家居商城系统主要是为了用户方便对商品信息的了解以及查看商品分类和查看订单信息,也是为了更好的让管理员进行更好存储所有数据信息及快速方便的检索功能,对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定考虑用户的可操作性,遵循开发的系统优化的原则,经过全面的调查和研究。

系统所要实现的功能分析,对于现在网络方便的管理,根据自己的需求可以进行查看商品信息、新闻资讯、我的、跳转到后台、购物车等,这样既能节省用户的时间,不用在像传统的方式,需要查询,由于很多用户的时间原因,没有办法去相关实体店了解信息,真的很难去满足用户的各种需求。所以家居商城系统的开发不仅仅是能满足用户的需求,还能提高管理员的工作效率,减少原有不必要的工作量。

3.2 系统可行性分析

系统的开发环境和配置都是可以自行安装的,系统使用JSP开发工具,使用比较成熟的Mysql数据库进行对系统用户和管理员之间相关的数据交互,根据技术语言对数据库,结合需求进行修改维护,可以使得系统运行更具有稳定性和安全性,从而完成实现系统的开发。

(1)硬件可行性分析

家居商城系统及信息分析的设计对于所使用的计算机没有什么硬性的要求,计算机只要可以正常的使用进行代码的编写及页面设计就可行,主要是对于服务器有些要求,对于平台搭建完成要上传的服务器是有一定的要求的,服务器必须选择安全性比较高的,然后就是在打开系统必须顺畅,不能停顿太长时间;性价比高;安全性高。

(2)软件可行性分析

开发整个系统使用的是云计算,流量的可扩展性和基于流量的智能调整云计算的优点就是流量的可扩展性和基于流量的智能调整,保障系统的安全及数据信息的及时备份。

因此,我们从两个方面进行了可行性研究,可以看出系统的开发没有问题。

3.3 系统功能分析和描述

使用家居商城系统的用户分管理员和用户两个角色的权限子模块。

管理员所能使用的功能主要有:主页、个人中心、用户管理、商品分类管理、商品信息管理、系统管理、订单管理等。

用户可以实现主页、个人中心、我的收藏管理、订单管理等。

前台首页可以实现商品信息、新闻资讯、我的、跳转到后台、购物车等。

3.4系统UML用例分析

3.4.1管理员用例

管理员登录后可进行主页、个人中心、用户管理、商品分类管理、商品信息管理、系统管理、订单管理,管理员的用例如图3-1所示。

图3-1 管理员用例图

3.4.2用户用例

用户注册登录后可进行主页、个人中心、我的收藏管理、订单管理,用户用例如图3-2所示。

图3-2 用户用例图

3.5系统流程分析

3.5.2添加信息流程

添加信息,编号系统使用自动编号模式,没有用户填写,用户添加信息输入信息,系统将自动确认的信息和数据,验证的成功是有效的信息添加到数据库,信息无效,重新输入信息。添加信息流程如图3-4所示。

图3-4 添加信息流程图

3.5.1操作流程

用户想进入系统,首先进入系统登录界面,通过正确的用户名、密码,选择登录类型登录,系统会检查登录信息,信息正确,然后输入相应的功能界面,提示信息错误,登录失败。系统操作流程如图3-3所示。

图3-3操作流程图

3.5.3删除信息流程

用户选择要删除的信息并单击Delete按钮。系统提示是否删除信息。如果用户想要删除信息,系统将删除信息。系统数据库删除信息。删除信息流程图如图3-5所示。

图3-5 删除信息流程图

第四章 系统设计

4.1 系统体系结构

家居商城系统的结构图4-1所示:

用户

服务器和程序

管理员

图4-1 系统结构

模块包括主界面,主页、个人中心、用户管理、商品分类管理、商品信息管理、系统管理、订单管理等进行相应的操作。

登录系统结构图,如图4-2所示:

Y

家居商城系统登录界面

用户登录

密码正确

管理员界面

用户界面

图4-2 登录结构图

这些功能可以充分满足家居商城系统的需求。此系统功能较为全面如下图系统功能结构如图4-4所示。

图片1

图4-4系统功能结构图

4.2 数据库设计原则

每个数据库的应用它们都是和区分开的,当运行到一定的程序当中,它就会与自己相关的协议与客户端进行通讯。那么这个系统就会对使这些数据进行连接。当我们选择哪个桥段的时候,接下来就会简单的叙述这个数据库是如何来创建的。当点击完成按钮的时候就会自动在对话框内弹出数据源的名称,在进行点击下一步即可,直接在输入相对应的身份验证和登录密码。

家居商城系统的数据流程:

图4.6商品信息E-R图

用户信息E-R图,如图4.7所示。

图4.7用户信息E-R图

4.3 数据表

将数据库概念设计的E-R图转换为关系数据库。在关系数据库中,数据关系由数据表组成,但是表的结构表现在表的字段上。

表名:shangpinfenlei

功能:商品分类

字段名称类型长度字段说明主键默认值
idbigint主键主键
addtimetimestamp创建时间CURRENT_TIMESTAMP
shangpinfenleivarchar200商品分类

表名:shangpinxinxi

功能:商品信息

字段名称类型长度字段说明主键默认值
idbigint主键主键
addtimetimestamp创建时间CURRENT_TIMESTAMP
shangpinbianhaovarchar200商品编号
shangpinmingchengvarchar200商品名称
shangpinfenleivarchar200商品分类
shuliangvarchar200数量
pinpaivarchar200品牌
guigevarchar200规格
xiangqingvarchar200详情
fengmianvarchar200封面

表名:yonghu

功能:用户

字段名称类型长度字段说明主键默认值
idbigint主键主键
addtimetimestamp创建时间CURRENT_TIMESTAMP
yonghuzhanghaovarchar200用户账号
yonghuxingmingvarchar200用户姓名
mimavarchar200密码
xingbievarchar200性别
lianxidianhuavarchar200联系电话
dianziyouxianglongtext4294967295电子邮箱

第五章 系统实现

5.1用户功能模块

用户点击进入到系统操作界面,可以对主页、个人中心、我的收藏管理、订单管理等功能模块,我的收藏管理:通过列表可以获取用户ID、收藏ID、表名、收藏名称、收藏图片信息并进行修改操作,如图5-1所示。

IMG_256

图5-1我的收藏管理界面图

已支付订单列表:通过列表可以获取订单id、用户id、商品id、商品名称、商品图片、购买数量、价格/积分、折扣价格、总价格/总积分、折扣总价格、支付类型、状态、地址等信息,进行查看操作,如图5-2所示。

IMG_256

图5-2已支付订单列表界面图

已退款订单列表:通过列表可以获取订单id、用户id、商品id、商品名称、商品图片、购买数量、价格/积分、折扣价格、总价格/总积分、折扣总价格、支付类型、状态、地址等信息,进行查看、删除操作,如图5-3所示。

IMG_256

图5-3已退款订单列表界面图

已发货订单列表:通过列表可以获取订单id、用户id、商品id、商品名称、商品图片、购买数量、价格/积分、折扣价格、总价格/总积分、折扣总价格、支付类型、状态、地址等信息,进行查看操作,如图5-4所示。

IMG_256

图5-4已发货订单列表界面图

已完成订单列表:通过列表可以获取订单id、用户id、商品id、商品名称、商品图片、购买数量、价格/积分、折扣价格、总价格/总积分、折扣总价格、支付类型、状态、地址等信息,进行查看、删除操作,如图5-5所示。

图5-5已完成订单列表界面图

5.2管理员功能模块

管理员通过用户名和密码填写完成后进行登录,如图5-6所示。管理员登录成功后进入到系统操作界面,可以对主页、个人中心、用户管理、商品分类管理、商品信息管理、系统管理、订单管理等功能模块进行相对应操作。

图5-7个人中心页面

个人信息:通过列表可以获取用户名等信息,进行删除或修改操作,如图5-8所示。

图5-8个人信息界面图

用户管理:通过列表可以获取用户账号、用户姓名、密码、性别、联系电话、电子邮箱、余额等信息,进行修改或删除操作,如图5-9所示。

IMG_256

图5-9用户管理界面图

商品分类管理:通过列表可以获取商品分类等信息,进行修改或删除操作,如图5-10所示。

IMG_256

TokenServiceImpl.java

package com.service.impl;


import java.util.Calendar;
import java.util.Date;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Service;

import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.dao.TokenDao;
import com.entity.TokenEntity;
import com.entity.TokenEntity;
import com.service.TokenService;
import com.utils.CommonUtil;
import com.utils.PageUtils;
import com.utils.Query;


/**
 * token
 * @author yangliyuan
 * @date 2019年10月10日 上午9:17:59
 */
@Service("tokenService")
public class TokenServiceImpl extends ServiceImpl<TokenDao, TokenEntity> implements TokenService {

	@Override
	public PageUtils queryPage(Map<String, Object> params) {
		Page<TokenEntity> page = this.selectPage(
                new Query<TokenEntity>(params).getPage(),
                new EntityWrapper<TokenEntity>()
        );
        return new PageUtils(page);
	}

	@Override
	public List<TokenEntity> selectListView(Wrapper<TokenEntity> wrapper) {
		return baseMapper.selectListView(wrapper);
	}

	@Override
	public PageUtils queryPage(Map<String, Object> params,
			Wrapper<TokenEntity> wrapper) {
		 Page<TokenEntity> page =new Query<TokenEntity>(params).getPage();
	        page.setRecords(baseMapper.selectListView(page,wrapper));
	    	PageUtils pageUtil = new PageUtils(page);
	    	return pageUtil;
	}

	@Override
	public String generateToken(Long userid,String username, String tableName, String role) {
		TokenEntity tokenEntity = this.selectOne(new EntityWrapper<TokenEntity>().eq("userid", userid).eq("role", role));
		String token = CommonUtil.getRandomString(32);
		Calendar cal = Calendar.getInstance();   
    	cal.setTime(new Date());   
    	cal.add(Calendar.HOUR_OF_DAY, 1);
		if(tokenEntity!=null) {
			tokenEntity.setToken(token);
			tokenEntity.setExpiratedtime(cal.getTime());
			this.updateById(tokenEntity);
		} else {
			this.insert(new TokenEntity(userid,username, tableName, role, token, cal.getTime()));
		}
		return token;
	}

	@Override
	public TokenEntity getTokenEntity(String token) {
		TokenEntity tokenEntity = this.selectOne(new EntityWrapper<TokenEntity>().eq("token", token));
		if(tokenEntity == null || tokenEntity.getExpiratedtime().getTime()<new Date().getTime()) {
			return null;
		}
		return tokenEntity;
	}
}

UserController.java

package com.controller;


import java.util.Arrays;
import java.util.Calendar;
import java.util.Date;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.annotation.IgnoreAuth;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.entity.TokenEntity;
import com.entity.UserEntity;
import com.service.TokenService;
import com.service.UserService;
import com.utils.CommonUtil;
import com.utils.MPUtil;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.ValidatorUtils;

/**
 * 登录相关
 */
@RequestMapping("users")
@RestController
public class UserController{
	
	@Autowired
	private UserService userService;
	
	@Autowired
	private TokenService tokenService;

	/**
	 * 登录
	 */
	@IgnoreAuth
	@PostMapping(value = "/login")
	public R login(String username, String password, String captcha, HttpServletRequest request) {
		UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
		if(user==null || !user.getPassword().equals(password)) {
			return R.error("账号或密码不正确");
		}
		String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
		return R.ok().put("token", token);
	}
	
	/**
	 * 注册
	 */
	@IgnoreAuth
	@PostMapping(value = "/register")
	public R register(@RequestBody UserEntity user){
//    	ValidatorUtils.validateEntity(user);
    	if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
        userService.insert(user);
        return R.ok();
    }

	/**
	 * 退出
	 */
	@GetMapping(value = "logout")
	public R logout(HttpServletRequest request) {
		request.getSession().invalidate();
		return R.ok("退出成功");
	}
	
	/**
     * 密码重置
     */
    @IgnoreAuth
	@RequestMapping(value = "/resetPass")
    public R resetPass(String username, HttpServletRequest request){
    	UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username));
    	if(user==null) {
    		return R.error("账号不存在");
    	}
    	user.setPassword("123456");
        userService.update(user,null);
        return R.ok("密码已重置为:123456");
    }
	
	/**
     * 列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,UserEntity user){
        EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
    	PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params));
        return R.ok().put("data", page);
    }

	/**
     * 列表
     */
    @RequestMapping("/list")
    public R list( UserEntity user){
       	EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>();
      	ew.allEq(MPUtil.allEQMapPre( user, "user")); 
        return R.ok().put("data", userService.selectListView(ew));
    }

    /**
     * 信息
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        UserEntity user = userService.selectById(id);
        return R.ok().put("data", user);
    }
    
    /**
     * 获取用户的session用户信息
     */
    @RequestMapping("/session")
    public R getCurrUser(HttpServletRequest request){
    	Long id = (Long)request.getSession().getAttribute("userId");
        UserEntity user = userService.selectById(id);
        return R.ok().put("data", user);
    }

    /**
     * 保存
     */
    @PostMapping("/save")
    public R save(@RequestBody UserEntity user){
//    	ValidatorUtils.validateEntity(user);
    	if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
        userService.insert(user);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody UserEntity user){
//        ValidatorUtils.validateEntity(user);
        userService.updateById(user);//全部更新
        return R.ok();
    }

    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        userService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
}

BaiduUtil.java
package com.utils;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.json.JSONObject;


/**
* @author yangliyuan
* @version 创建时间:2020年2月7日 下午9:37:05
* 类说明 : 
*/

public class BaiduUtil {
	
    /**
     * 根据经纬度获得省市区信息
     * @param lon 纬度
     * @param lat 经度
     * @param coordtype 经纬度坐标系
     * @return
     */
    public static Map<String, String> getCityByLonLat(String key, String lng, String lat) {
        String location = lat + "," + lng;
        try {
            //拼装url
            String url = "http://api.map.baidu.com/reverse_geocoding/v3/?ak="+key+"&output=json&coordtype=wgs84ll&location="+location;
            String result = HttpClientUtils.doGet(url);
            JSONObject o = new JSONObject(result);
            Map<String, String> area = new HashMap<>();
			area.put("province", o.getJSONObject("result").getJSONObject("addressComponent").getString("province"));
			area.put("city", o.getJSONObject("result").getJSONObject("addressComponent").getString("city"));
			area.put("district", o.getJSONObject("result").getJSONObject("addressComponent").getString("district"));
			area.put("street", o.getJSONObject("result").getJSONObject("addressComponent").getString("street"));
            return area;
        }catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
	     * 获取API访问token
	     * 该token有一定的有效期,需要自行管理,当失效时需重新获取.
	     * @param ak - 百度云官网获取的 API Key
	     * @param sk - 百度云官网获取的 Securet Key
	     * @return assess_token
	     */
    public static String getAuth(String ak, String sk) {
        // 获取token地址
        String authHost = "https://aip.baidubce.com/oauth/2.0/token?";
        String getAccessTokenUrl = authHost
                // 1. grant_type为固定参数
                + "grant_type=client_credentials"
                // 2. 官网获取的 API Key
                + "&client_id=" + ak
                // 3. 官网获取的 Secret Key
                + "&client_secret=" + sk;
        try {
            URL realUrl = new URL(getAccessTokenUrl);
            // 打开和URL之间的连接
            HttpURLConnection connection = (HttpURLConnection) realUrl.openConnection();
            connection.setRequestMethod("GET");
            connection.connect();
            // 获取所有响应头字段
            Map<String, List<String>> map = connection.getHeaderFields();
            // 遍历所有的响应头字段
            for (String key : map.keySet()) {
                System.err.println(key + "--->" + map.get(key));
            }
            // 定义 BufferedReader输入流来读取URL的响应
            BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            String result = "";
            String line;
            while ((line = in.readLine()) != null) {
                result += line;
            }
            /**
             * 返回结果示例
             */
            System.err.println("result:" + result);
            org.json.JSONObject jsonObject = new org.json.JSONObject(result);
            String access_token = jsonObject.getString("access_token");
            return access_token;
        } catch (Exception e) {
            System.err.printf("获取token失败!");
            e.printStackTrace(System.err);
        }
        return null;
    }

}

add-or-update.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<%@ include file="../../static/head.jsp"%>
	<!-- font-awesome -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css">
</head>
<style>

</style>

<body>
	<!-- Pre Loader -->
	<div class="loading">
		<div class="spinner">
			<div class="double-bounce1"></div>
			<div class="double-bounce2"></div>
		</div>
	</div>
	<!--/Pre Loader -->
	<div class="wrapper">
		<!-- Page Content -->
		<div id="content">
			<!-- Top Navigation -->
			<%@ include file="../../static/topNav.jsp"%>
			<!-- Menu -->
			<div class="container menu-nav">
				<nav class="navbar navbar-expand-lg lochana-bg text-white">
					<button class="navbar-toggler" type="button" data-toggle="collapse"
						data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
						aria-expanded="false" aria-label="Toggle navigation">
						<span class="ti-menu text-white"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul id="navUl" class="navbar-nav mr-auto">
						</ul>
					</div>
				</nav>
			</div>
			<!-- /Menu -->
			<!-- Breadcrumb -->
			<!-- Page Title -->
			<div class="container mt-0">
				<div class="row breadcrumb-bar">
					<div class="col-md-6">
						<h3 class="block-title" style="color: red;">剩余 xx 分钟 xx 秒</h3>
					</div>
					<div class="col-md-6">
						<ol class="breadcrumb">

							<li class="breadcrumb-item"><a href="#">退出
								</a></li>
						</ol>
					</div>
				</div>
			</div>
			<!-- /Page Title -->

			<!-- /Breadcrumb -->
			<!-- Main Content -->
			<div class="container">

				<div class="row">
					<!-- Widget Item -->
					<div class="col-md-12">
						<div class="widget-area-2 lochana-box-shadow">
							<h3 class="widget-title">当前第 1 题,剩余 0 题,共 0 题</h3>
							<div class="table-responsive mb-3">
								<form>
									<div class="form-group">
										<label>题目</label>
										<textarea class="form-control" id="questionname" rows="3"></textarea>
									</div>
									<div id="optionsArea" class="form-group">
										<label>选项</label>
										<textarea class="form-control" rows="3" readonly></textarea>
									</div>
									<div id="answerArea" class="form-group">
										<label>答案</label>
									</div>
									<div id="yourAnswer" class="form-group" style="display: none;">
										<label>你的答案</label>
										<input readonly>
										<label style="color: red;">正确</label>
									</div>
									<div id="analysis" class="form-group" style="display: none;">
										<label>解析</label>
										<textarea class="form-control" rows="2" placeholder="解析" readonly></textarea>
									</div>
									<div id="result" class="form-group" style="display: none;">
										<label>考试成绩</label>
										<input readonly>
									</div>

									<button id="submitBtn" type="button" class="btn btn-warning">提交</button>
									<button id="nextBtn" type="button" class="btn btn-success">下一题</button>
								</form>

							</div>
						</div>
					</div>
					<!-- /Widget Item -->
				</div>
			</div>
			<!-- /Main Content -->

		</div>
		<!-- /Page Content -->
	</div>
	<!-- Back to Top -->
	<a id="back-to-top" href="#" class="back-to-top"> <span class="ti-angle-up"></span>
	</a>
	<!-- /Back to Top -->
	<%@ include file="../../static/foot.jsp"%>
	<script language="javascript" type="text/javascript"
		src="${pageContext.request.contextPath}/resources/My97DatePicker/WdatePicker.js"></script>

	<script>

	<%@include file = "../../utils/menu.jsp" %>
		
	<%@include file = "../../static/setMenu.js" %>
		
	<%@include file = "../../utils/baseUrl.jsp" %>
		
	<%@include file = "../../static/getRoleButtons.js" %>
		
	<%@include file = "../../static/crossBtnControl.js" %>
		var tableName = "";
		var pageType = "add-or-update";

		var updateId = "";
		var ruleForm = {};
		var questions = [];
		var current = 1;
		var total = 0;
		var paperId;
		var userId;
		var time = 0;
		var score = 0;

		// 用户登出
		<%@include file = "../../static/logout.jsp" %>


			$(document).ready(function () {

				//隐藏原生搜索框
				$('#tableId_filter').hide()
				//设置右上角用户名
				$('.dropdown-menu h5').html(
					window.sessionStorage.getItem('username'))
				//设置项目名
				$('.sidebar-header h3 a').html(projectName)
				setMenu();
				$('#submitBtn').on('click', function (e) {
					e.preventDefault();
					//console.log("点击了...提交按钮");
					submitAnswer();
				});
				$('#nextBtn').on('click', function (e) {
					e.preventDefault();
					//console.log("点击了...提交按钮");
					next();
				});
				init();
			<%@include file = "../../static/myInfo.js" %>
		});

		//初始化准备
		function init() {
			//获取试卷id
			paperId = window.sessionStorage.getItem('paperid');
			window.sessionStorage.removeItem('paperid');
			//获取当前用户id
			getUserId();
			//获取当前试卷题目
			getQuestions();
		}

		//获取当前用户id
		function getUserId() {
			var accountTableName = window.sessionStorage.getItem('accountTableName')
			$.ajax({
				type: "GET",
				url: baseUrl + accountTableName + "/session",
				beforeSend: function (xhr) { xhr.setRequestHeader("token", window.sessionStorage.getItem('token')); },
				success: function (res) {
					if (res.code == 0) {
						//将用户id保存到全局变量中
						userId = res.data.id
						//删除旧考试记录
						reWrite();
					}
					else if (res.code == 401) {<%@include file = "../../static/toLogin.jsp" %>}
					else { alert(res.msg); }
				},
			});
		}

		//获取当前试卷题目
		function getQuestions() {
			$.ajax({
				type: "GET",
				url: baseUrl + "examquestion/page",
				data: {
					sort: "id",
					paperid: paperId,
				},
				beforeSend: function (xhr) { xhr.setRequestHeader("token", window.sessionStorage.getItem('token')); },
				success: function (res) {
					if (res.code == 0) {
						//将题目保存到全局变量						
						questions = res.data.list;
						total = questions.length;
						//获取时间
						getExamTime();
					} else if (res.code == 401) {<%@include file = "../../static/toLogin.jsp" %>}
					else { alert(res.msg); }
				},
			});
		}

		//渲染题目
		function showQuestion() {
			$('#nextBtn').hide();
			//更新考试进度信息
			setProgressMsg();
			//隐藏选项表单项
			$('#optionsArea').hide();
			var question = questions[current - 1];
			//将字符串转成json
			var answerOptions = $.parseJSON(question.options);
			//展示题目类型和分值
			var questionType = '';
			switch (question.type) {
				case 0:
					questionType = '(单选题';
					break;
				case 1:
					questionType = '(多选题';
					break;
				case 2:
					questionType = '(判断题';
					break;
				case 3:
					questionType = '(填空题';
					break;
				default:
					console.log('该题目类型未能识别');
			}
			$('#questionname').val(questionType + " " + question.score + " 分) " + question.questionname);
			//清空作答区域
			$('#answerArea').children().remove()
			if (question.type == 0 || question.type == 2) {
				//单选题和判断题
				$('#answerArea').append("<label>答案</label><select id=\"answerSelect\" class=\"form-control\"></select>");
				for (var i = 0; i < answerOptions.length; i++) {
					var option = document.createElement('option');
					option.setAttribute('class', 'answerOption');
					option.setAttribute('value', answerOptions[i].code);
					option.innerHTML = answerOptions[i].text;
					$('#answerSelect').append(option)
				}
			} else if (question.type == 1) {
				var str = ''
				for (var i = 0; i < answerOptions.length; i++) {
					str = str + answerOptions[i].code + '. ' + answerOptions[i].text + '  ';
				}
				$('#optionsArea textarea').val(str)
				//展示选项表单
				$('#optionsArea').show();
				//渲染答案输入框			
				$('#answerArea').append("<input id=\"answer\" class=\"form-control\" placeholder=\"多个答案用英文逗号隔开\">")
			} else if (question.type == 3) {
				//渲染答案输入框	
				$('#answerArea').append("<textarea id=\"answer\" class=\"form-control\" rows=\"2\" placeholder=\"请输入答案\"></textarea>");
			}
			$('#answerArea').show();
		}

		//设置题目进度文本
		function setProgressMsg() {
			var remain = total - current;
			var msg = "当前第 " + current + " 题,剩余 " + remain + " 题,共 " + total + "题."
			$('.widget-title').html(msg)
		}
		//获取考试时间
		function getExamTime() {
			$.ajax({
				type: "GET",
				url: baseUrl + "exampaper/info/" + paperId,
				contentType: "application/json",
				beforeSend: function (xhr) { xhr.setRequestHeader("token", window.sessionStorage.getItem('token')); },
				success: function (res) {
					if (res.code == 0) {
						//将考试时间保存到全局变量
						time = res.data.time;
						//每秒更新一次剩余时间
						self.setInterval("setTimeMsg()", 1000);
						console.log("time: " + time)
						//定时结束考试
						setTimeout(function () { examFinish() }, time * 1000);
						//渲染题目
						showQuestion();
					} else if (res.code == 401) {
						<%@include file = "../../static/toLogin.jsp" %>
					} else {
						alert(res.msg)
					}
				},
			});
		}
		//设置时间信息
		function setTimeMsg() {
			if (time > 0) {
				time--;
				var min = parseInt(time / 60);
				var second = time % 60;
				var str = "剩余 " + min + " 分钟, " + second + " 秒";
				$('.block-title').html(str);
			} else {
				$('.block-title').html('考试结束');
			}
		}
		//提交当前题目答案
		function submitAnswer() {
			var question = questions[current - 1];
			var answerStr = '';
			var myScore = 0;
			if (question.type == 0 || question.type == 2) {
				var index = document.getElementById("answerSelect").selectedIndex;
				var answerOptions = document.getElementById("answerSelect").options;
				answerStr = answerOptions[index].value
			} else {
				answerStr = $('#answer').val();
			}
			if (answerStr == question.answer) {
				myScore = question.score;
			}

			$.ajax({
				type: "POST",
				url: baseUrl + "examrecord/save",
				contentType: "application/json",
				data: JSON.stringify({
					analysis: question.analysis,
					answer: question.answer,
					myanswer: answerStr,
					myscore: myScore,
					options: question.options,
					paperid: paperId,
					papername: question.papername,
					questionid: question.id,
					questionname: question.questionname,
					score: question.score,
					userid: userId,
				}),
				beforeSend: function (xhr) { xhr.setRequestHeader("token", window.sessionStorage.getItem('token')); },
				success: function (res) {
					if (res.code == 0) {
						score += myScore;
						$('#yourAnswer input').val(answerStr);
						if (answerStr == question.answer) {
							$('#yourAnswer input').next().html("正确");
						} else {
							$('#yourAnswer input').next().html("错误");
						}
						showResult();
					} else if (res.code == 401) {
						<%@include file = "../../static/toLogin.jsp" %>
					} else {
						alert(res.msg)
					}
				},

			});
		}
		//提交答案后显示结果和解析
		function showResult() {
			//隐藏选项表单项
			$('#optionsArea').hide();
			//隐藏作答区域
			$('#answerArea').hide();
			$('#analysis textarea').html(questions[current - 1].analysis);
			$('#yourAnswer').show();
			$('#analysis').show();
			$('#nextBtn').show();
			$('#submitBtn').hide();
			if (current == total) {
				$('#nextBtn').html("查看考试成绩");
			}
		}
		//继续下一题
		function next() {
			if (current == total) {
				examFinish();
			} else {
				$('#nextBtn').hide();
				$('#submitBtn').show();
				//隐藏答案解析
				$('#yourAnswer').hide();
				$('#analysis').hide();
				current++;
				showQuestion();
			}
		}
		//考试结束,展示成绩
		function examFinish() {
			console.log("考试结束 ");
			$('form div').hide();
			$('#result input').val(score + '分');
			$('#result').show();
			$('#result input').show();
			$('form').append("<button type=\"button\" onclick=\"exit()\">退出</button>");
			$('#nextBtn').remove();
			time = 0;
		}
		//退出考试
		function exit() {
			var flag = confirm("真的要退出吗?");
			if (flag) {
				window.location.href = baseUrl + "jsp/modules/kaoshijilu/list.jsp";
			}

		}
		//重新考试,删除该份试卷之前的考试记录
		function reWrite() {
			$.ajax({
				type: "GET",
				url: baseUrl + "examrecord/deleteRecords",
				data: {
					userid: userId,
					paperid: paperId,
				},
				beforeSend: function (xhr) { xhr.setRequestHeader("token", window.sessionStorage.getItem('token')); },
				success: function (res) {
					if (res.code == 0) {

					} else if (res.code == 401) {<%@include file = "../../static/toLogin.jsp" %>}
					else {/*alert(res.msg)*/; }
				},
			});
		}	
	</script>
</body>

</html>

声明

本博客适用于广泛的学术和教育用途,包括但不限于个人学习、开发设计,产品设计。仅供学习参考,旨在为读者提供深入理解和学术研究的材料。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值