http://chiss.org.cn/hism/wcmpub/hism1029/zqyj/
郑州seo优化网站建设苏州单页面优化网站建设与策划大连网络营销建设网站费用南通seo廊坊网络推广石家庄优化网站互动免费建站系统上海seo公司排名网页界面设计公司网站维护收费黑帽seo技术百度左侧优化网站优化seo见到效果再付费网站后台维护惠州seo博客邓州网站建设网站维护收费电商网站开发平台门户设计做网站价格兰州网站建设公司和幼儿做网站广东seo广州app制作公司小程序定制公司青岛建网站公司社区团购的详细设计与实现主要是根据前面的社区团购的需求分析和社区团购的总体设计来设计页面并实现业务逻辑。主要从社区团购界面实现、业务逻辑实现这两部分进行介绍。
当进入社区团购的时候，首先映入眼帘的是系统的导航栏，下面是轮播图以及系统内容，其主界面展示如下图4-1所示。
图4-1 前台首页界面图
前台首页代码如下：
server:
port: 5000
servlet:
context-path: /api
spring:
datasource:
url: jdbc:mysql://127.0.0.1:3306/CS725260_20211101091736?serverTimezone=GMT%2B8&useSSL=false&characterEncoding=utf-8
username: root
password: root
driver-class-name: com.mysql.cj.jdbc.Driver
jackson:
property-naming-strategy: CAMEL_CASE_TO_LOWER_CASE_WITH_UNDERSCORES
default-property-inclusion: ALWAYS
time-zone: GMT+8
date-format: yyyy-MM-dd HH:mm:ss
servlet:
multipart:
max-file-size: 100MB
max-request-size: 100MB
不是社区团购中正式团长用户的是可以在线进行注册的，如果你没有本社区团购的团长账号的话，添加“注册”，当填写上自己的账号+密码+确认密码+昵称+邮箱+手机号+团长用户等后再点击“注册”按钮后将会先验证输入的有没有空数据，再次验证密码和确认密码是否是一样的，最后验证输入的账户名和数据库表中已经注册的账户名是否重复，只有都验证没问题后即可注册成功。其注册界面展示如下图4-2所示。
图4-2 前台团长买家注册界面图
注册代码如下：
/**
* 注册
* @param user
* @return
*/
@PostMapping("register")
public Map<String, Object> signUp(@RequestBody User user) {
// 查询用户
Map<String, String> query = new HashMap<>();
query.put("username",user.getUsername());
List list = service.select(query, new HashMap<>()).getResultList();
if (list.size()>0){
return error(30000, "用户已存在");
}
user.setUserId(null);
user.setPassword(service.encryption(user.getPassword()));
service.save(user);
return success(1);
}
/**
* 用户ID：[0,8388607]用户获取其他与用户相关的数据
*/
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "user_id")
private Integer userId;
/**
* 账户状态：[0,10](1可用|2异常|3已冻结|4已注销)
*/
@Basic
@Column(name = "state")
private Integer state;
/**
* 所在用户组：[0,32767]决定用户身份和权限
*/
@Basic
@Column(name = "user_group")
private String userGroup;
/**
* 上次登录时间：
*/
@Basic
@Column(name = "login_time")
private Timestamp loginTime;
/**
* 手机号码：[0,11]用户的手机号码，用于找回密码时或登录时
*/
@Basic
@Column(name = "phone")
private String phone;
/**
* 手机认证：[0,1](0未认证|1审核中|2已认证)
*/
@Basic
@Column(name = "phone_state")
private Integer phoneState;
/**
* 用户名：[0,16]用户登录时所用的账户名称
*/
@Basic
@Column(name = "username")
private String username;
/**
* 昵称：[0,16]
*/
@Basic
@Column(name = "nickname")
private String nickname;
/**
* 密码：[0,32]用户登录所需的密码，由6-16位数字或英文组成
*/
@Basic
@Column(name = "password")
private String password;
/**
* 邮箱：[0,64]用户的邮箱，用于找回密码时或登录时
*/
@Basic
@Column(name = "email")
private String email;
/**
* 邮箱认证：[0,1](0未认证|1审核中|2已认证)
*/
@Basic
@Column(name = "email_state")
private Integer emailState;
/**
* 头像地址：[0,255]
*/
@Basic
@Column(name = "avatar")
private String avatar;
/**
* 创建时间：
*/
@Basic
@Column(name = "create_time")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Timestamp createTime;
@Basic
@Transient
private String code;
}
社区团购中的前台上注册后的用户是可以通过自己的账户名和密码进行登录的，当用户输入完整的自己的账户名和密码信息并点击“登录”按钮后，将会首先验证输入的有没有空数据，再次验证输入的账户名+密码和数据库中当前保存的用户信息是否一致，只有在一致后将会登录成功并自动跳转到社区团购的首页中；否则将会提示相应错误信息，用户登录界面如下图4-3所示。
图4-3团长买家登录界面图
登录代码如下：
/**
* 登录
* @param data
* @param httpServletRequest
* @return
*/
@PostMapping("login")
public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {
log.info("[执行登录接口]");
String username = data.get("username");
String email = data.get("email");
String phone = data.get("phone");
String password = data.get("password");
List resultList = null;
Map<String, String> map = new HashMap<>();
if(username != null && "".equals(username) == false){
map.put("username", username);
resultList = service.select(map, new HashMap<>()).getResultList();
}
else if(email != null && "".equals(email) == false){
map.put("email", email);
resultList = service.select(map, new HashMap<>()).getResultList();
}
else if(phone != null && "".equals(phone) == false){
map.put("phone", phone);
resultList = service.select(map, new HashMap<>()).getResultList();
}else{
return error(30000, "账号或密码不能为空");
}
if (resultList == null || password == null) {
return error(30000, "账号或密码不能为空");
}
//判断是否有这个用户
if (resultList.size()<=0){
return error(30000,"用户不存在");
}
User byUsername = (User) resultList.get(0);
Map<String, String> groupMap = new HashMap<>();
groupMap.put("name",byUsername.getUserGroup());
List groupList = userGroupService.select(groupMap, new HashMap<>()).getResultList();
if (groupList.size()<1){
return error(30000,"用户组不存在");
}
UserGroup userGroup = (UserGroup) groupList.get(0);
//查询用户审核状态
if (!StringUtils.isEmpty(userGroup.getSourceTable())){
String sql = "select examine_state from "+ userGroup.getSourceTable() +" WHERE user_id = " + byUsername.getUserId();
String res = String.valueOf(service.runCountSql(sql).getSingleResult());
if (res==null){
return error(30000,"用户不存在");
}
if (!res.equals("已通过")){
return error(30000,"该用户审核未通过");
}
}
//查询用户状态
if (byUsername.getState()!=1){
return error(30000,"用户非可用状态，不能登录");
}
String md5password = service.encryption(password);
if (byUsername.getPassword().equals(md5password)) {
// 存储Token到数据库
AccessToken accessToken = new AccessToken();
accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));
accessToken.setUser_id(byUsername.getUserId());
tokenService.save(accessToken);
// 返回用户信息
JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));
user.put("token", accessToken.getToken());
JSONObject ret = new JSONObject();
ret.put("obj",user);
return success(ret);
} else {
return error(30000, "账号或密码不正确");
}
}
用户在点击导航栏上面的新闻资讯后，就可以搜索查看新闻资讯信息，用户根据自己的喜好可以进行点赞收藏等，新闻资讯界面如下图4-4所示。
图4-4新闻资讯界面图
新闻资讯代码如下：
@RequestMapping("/get_list")
public Map<String, Object> getList(HttpServletRequest request) {
Map<String, Object> map = service.selectToPage(service.readQuery(request), service.readConfig(request));
return success(map);
}
当团长买家点击“基本信息”后，就会显示出目前现有的个人资料，也可以更改新的资料和密码修改，界面如下图4-5 4-5.1所示。
图4-5基本信息界面图
图4-5.1修改密码界面图
基本信息代码如下：
@RequestMapping(value = "/del")
@Transactional
public Map<String, Object> del(HttpServletRequest request) {
service.delete(service.readQuery(request), service.readConfig(request));
return success(1);
}
@Transactional
public void delete(Map<String,String> query,Map<String,String> config){
StringBuffer sql = new StringBuffer("DELETE FROM ").append("`").append(table).append("`").append(" ");
sql.append(toWhereSql(query, "0".equals(config.get(FindConfig.GROUP_BY))));
log.info("[{}] - 删除操作：{}",table,sql);
Query query1 = runCountSql(sql.toString());
query1.executeUpdate();
}
当访客点击了任意商品后将会进入该款商品的详情界面，可以了解到该商品的图片信息、商品名称、商品类型、规格、单独购买价、团购价、卖家名称、商品介绍等，同时可以对该商品进行团购开团+收藏+点赞等操作，商品详情展示页面如图4-6所示。
图4-6 商品信息详情界面图
商品信息详情代码如下：
@RequestMapping("/get_obj")
public Map<String, Object> obj(HttpServletRequest request) {
Query select = service.select(service.readQuery(request), service.readConfig(request));
List resultList = select.getResultList();
if (resultList.size() > 0) {
JSONObject jsonObject = new JSONObject();
jsonObject.put("obj",resultList.get(0));
return success(jsonObject);
} else {
return success(null);
}
}
public Query select(Map<String,String> query,Map<String,String> config){
StringBuffer sql = new StringBuffer("select ");
sql.append(config.get(FindConfig.FIELD) == null || "".equals(config.get(FindConfig.FIELD)) ? "*" : config.get(FindConfig.FIELD)).append(" ");
sql.append("from ").append("`").append(table).append("`").append(toWhereSql(query, "0".equals(config.get(FindConfig.LIKE))));
if (config.get(FindConfig.GROUP_BY) != null && !"".equals(config.get(FindConfig.GROUP_BY))){
sql.append("group by ").append(config.get(FindConfig.GROUP_BY)).append(" ");
}
if (config.get(FindConfig.ORDER_BY) != null && !"".equals(config.get(FindConfig.ORDER_BY))){
sql.append("order by ").append(config.get(FindConfig.ORDER_BY)).append(" ");
}
if (config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE))){
int page = config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE)) ? Integer.parseInt(config.get(FindConfig.PAGE)) : 1;
int limit = config.get(FindConfig.SIZE) != null && !"".equals(config.get(FindConfig.SIZE)) ? Integer.parseInt(config.get(FindConfig.SIZE)) : 10;
sql.append(" limit ").append( (page-1)*limit ).append(" , ").append(limit);
}
log.info("[{}] - 查询操作，sql: {}",table,sql);
return runEntitySql(sql.toString());
}
当团长点击“团长订单”链接后就进入自己购买的订单的界面展示，界面如下图4-7所示。
图4-7 团长订单界面图
团长订单代码如下：
public Map<String, Object> getList(HttpServletRequest request) {
Map<String, Object> map = service.selectToPage(service.readQuery(request), service.readConfig(request));
return success(map);
}
社区团购中的管理人员是可以对前台注册的团长买家、团员买家、卖家进行管理的，也可以对管理员进行管控。界面如下图4-8所示。
图4-8系统用户管理界面图
社区团购中的管理人员是可以对公告信息进行添加或删除等管控，界面如下图4-9所示。
图4-9公告界面图
社区团购中的管理人员是可以对卖家发布的商品进行审核回复管理，支持增删改查操作。界面如下图4-10所示。
图4-10商品信息审核界面图
社区团购中的管理人员是可以对社区团购内的资讯信息进行维护和管理的。新闻资讯列表界面如下图4-11所示。
图4-11新闻资讯管理界面图
4.3.1团长买家登录界面
社区团购管理系统中的团员买家注册后的用户是可以通过自己的账户名和密码进行登录的，当用户输入完整的自己的账户名和密码信息并点击“登录”按钮后，将会首先验证输入的有没有空数据，再次验证输入的账户名+密码和数据库中当前保存的用户信息是否一致，只有在一致后将会登录成功并自动跳转到社区团购管理系统的首页中；否则将会提示相应错误信息，用户登录界面如下图4-12所示。
图4-12团员买家登录界面图
4.3.2基本信息界面
当团员买家点击“基本信息”后，就会显示出目前现有的个人资料，也可以更改新的资料和密码修改，界面如下图4-13所示。
图4-13基本信息界面图
4.3.3 团长订单界面
当团员买家点击“团长订单”界面可查看到团长所有的开团订单，团员可根据自己需要商品进行参与拼团，界面如下图4-14所示。
图4-14团员拼团界面图
4.3.4拼团订单物流
当团员的商品拼团成功后，由商家安排发货，团员可在此页面查看物流情况，界面如下图4-15所示。
图4-15团员订单物流界面图
4.4卖家功能模块
4.4.1卖家登录界面
卖家通过自己的账户名和密码进行登录的，当卖家输入完整的自己的账户名和密码信息并点击“登录”按钮后，将会首先验证输入的有没有空数据，再次验证输入的账户名+密码和数据库中当前保存的用户信息是否一致，只有在一致后将会登录成功并自动跳转到社区团购管理系统的首页中；否则将会提示相应错误信息，卖家登录界面如下图4-16所示。
图4-16卖家登录界面图
4.4.2卖家后台首页功能界面
卖家登录社区团购系统后可查看商品信息、团长订单、拼团订单、团长订单物流、拼团订单物流、个人信息等功能，卖家可对其进行维护管理，界面如下图5-17所示。
图4-17卖家功能界面图
4.4.3商品信息管理模块
卖家在页面可添加商品信息，如：商品图片、商品名称、商品类型、规格、单独购买价、团购价、卖家名称、商品介绍等信息，可根据需要进行详情、修改或删除等操作，界面如下图5-18所示。
图4-18卖家添加商品界面图
系统开发到了最后一个阶段那就是系统测试，系统测试对软件的开发其实是非常有必要的。因为没什么系统一经开发出来就可能会尽善尽美，再厉害的系统开发工程师也会在系统开发的时候出现纰漏，系统测试能够较好的改正一些bug，为后期系统的维护性提供很好的支持。通过系统测试，开发人员也可以建立自己对系统的信心，为后期的系统版本的跟新提供支持。
系统测试包括：用户登录功能测试、商品展示功能测试、商品添加、商品搜索、密码修改功能测试，如表5-1、5-2、5-3、5-4、5-5所示：
表5-1 用户登录功能测试表
| 用例名称 | 用户登录系统 |
| 目的 | 测试用户通过正确的用户名和密码可否登录功能 |
| 前提 | 未登录的情况下 |
| 测试流程 | 1) 进入登录页面 2) 输入正确的用户名和密码 |
| 预期结果 | 用户名和密码正确的时候，跳转到登录成功界面，反之则显示错误信息，提示重新输入 |
| 实际结果 | 实际结果与预期结果一致 |
商品查看功能测试：
表5-2 商品查看功能测试表
| 用例名称 | 商品查看 |
| 目的 | 测试商品查看功能 |
| 前提 | 用户登录 |
| 测试流程 | 点击商品列表 |
| 预期结果 | 可以查看到所有商品信息 |
| 实际结果 | 实际结果与预期结果一致 |
卖家添加商品界面测试：
表5-3 卖家添加商品界面测试表
| 用例名称 | 商品发布测试用例 |
| 目的 | 测试商品发布功能 |
| 前提 | 用户正常登录情况下 |
| 测试流程 | 1）点击商品信息管理就，然后点击添加后并填写信息。 2）点击进行提交。 |
| 预期结果 | 提交以后，页面首页会显示新的商品信息 |
| 实际结果 | 实际结果与预期结果一致 |
商品搜索功能测试：
表5-4商品搜索功能测试表
| 用例名称 | 商品搜索测试 |
| 目的 | 测试商品搜索功能 |
| 前提 | 无 |
| 测试流程 | 1）在搜索框填入搜索关键字。 2）点击搜索按钮。 |
| 预期结果 | 页面显示包含有搜索关键字的商品 |
| 实际结果 | 实际结果与预期结果一致 |
密码修改功能测试：
表5-5 密码修改功能测试表
| 用例名称 | 密码修改测试用例 |
| 目的 | 测试管理员密码修改功能 |
| 前提 | 管理员用户正常登录情况下 |
| 测试流程 | 1）管理员密码修改并完成填写。 2）点击进行提交。 |
| 预期结果 | 使用新的密码可以登录 |
| 实际结果 | 实际结果与预期结果一致 |
通过编写社区团购的测试用例，已经检测完毕用户登录模块、商品查看模块、商品添加模块、商品搜索模块、密码修改功能测试，通过这5大模块为社区团购的后期推广运营提供了强力的技术支撑。
">