SpringBoot結(jié)合Vue實(shí)現(xiàn)投票系統(tǒng)過程詳解
一、前言介紹
本系統(tǒng)前端框架采用了比較流行的漸進(jìn)式JavaScript框架Vue.js。使用Vue-Router和Vuex實(shí)現(xiàn)動(dòng)態(tài)路由和全局狀態(tài)管理,Ajax實(shí)現(xiàn)前后端通信,Element UI組件庫(kù)時(shí)頁(yè)面快速成型。后端部分:采用springboot作為開發(fā)框架,同時(shí)集成MyBatis、Redis等相關(guān)技術(shù)。
管理員模塊:首頁(yè)、站點(diǎn)管理(輪播圖、公告欄)用戶管理(管理員、普通用戶)內(nèi)容管理(新聞列表、新聞分類列表)更多管理(參與投票、我的投票、取消投票)
用戶模塊:首頁(yè)、公告消息、新聞、參與投票等。
二、需求分析
管理員模塊:首頁(yè)、站點(diǎn)管理(輪播圖、公告欄)用戶管理(管理員、普通用戶)內(nèi)容管理(新聞列表、新聞分類列表)更多管理(參與投票、我的投票、取消投票)
用戶模塊:首頁(yè)、公告消息、新聞、參與投票等。
用戶用例圖如下所示。

管理員用例圖如下所示。

2.1系統(tǒng)功能結(jié)構(gòu)
進(jìn)入系統(tǒng)后首先要進(jìn)行登錄,驗(yàn)證你的身份,賦予你不同的權(quán)限。當(dāng)你成功登錄后,頁(yè)面會(huì)有多個(gè)板塊,分別是首頁(yè)、站點(diǎn)管理(輪播圖、公告欄)用戶管理(管理員、普通用戶)內(nèi)容管理(新聞列表、新聞分類列表)更多管理(我的投票、參與投票、取消投票)推薦。里面界面簡(jiǎn)單易懂,根據(jù)標(biāo)示可以直接進(jìn)行方便快捷的操作。
系統(tǒng)功能結(jié)構(gòu)圖如下所示。

2.2功能模塊設(shè)計(jì)
管理員賬戶的基本信息管理。主要提供管理員賬戶的基本信息錄入、刪除、維護(hù)和查詢等功能,包括:
管理員錄入管理員賬戶基本信息;
管理員更新、增加及刪除管理員賬戶基本信息;
管理員根據(jù)管理員賬戶 ID 查詢基本信息;
系統(tǒng)管理員更改個(gè)人密碼;
參與投票管理。主要是提供參與投票的基本信息錄入、維護(hù)和查詢功能,包括:
用戶錄入?yún)⑴c投票信息;
用戶更新、增加及刪除參與投票基本信息;
用戶根據(jù)想要了解的投票話題查詢投票話題基本信息;
我的投票管理。主要提供我的投票的基本錄入、刪除、維護(hù)和查詢功能, 包括:
用戶錄入投票信息;
用戶更新、增加投票基本信息;
用戶根據(jù)投票 ID 查詢投票基本信息;
三、系統(tǒng)詳細(xì)設(shè)計(jì)
3.1系統(tǒng)登錄界面

3.2用戶首頁(yè)模塊

3.3參與投票模塊

用戶點(diǎn)擊參與投票按鈕進(jìn)入投票頁(yè)面里面,投票話題、投票類型、備注、總票數(shù)等操作。

四、管理員功能模塊
4.1主界面如下圖所示

4.2用戶管理

4.3參與投票管理

五、部分核心代碼
5.1登錄關(guān)鍵代碼
@PostMapping("login")
public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {
log.info("[執(zhí)行登錄接口]");
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, "賬號(hào)或密碼不能為空");
}
if (resultList == null || password == null) {
return error(30000, "賬號(hào)或密碼不能為空");
}
//判斷是否有這個(gè)用戶
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);
//查詢用戶審核狀態(tài)
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,"該用戶審核未通過");
}
}
//查詢用戶狀態(tài)
if (byUsername.getState()!=1){
return error(30000,"用戶非可用狀態(tài),不能登錄");
}
String md5password = service.encryption(password);
if (byUsername.getPassword().equals(md5password)) {
// 存儲(chǔ)Token到數(shù)據(jù)庫(kù)
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, "賬號(hào)或密碼不正確");
}
}5.2用戶注冊(cè)關(guān)鍵代碼
/**
* 注冊(cè)
* @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]用戶獲取其他與用戶相關(guān)的數(shù)據(jù)
*/
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "user_id")
private Integer userId;
/**
* 賬戶狀態(tài):[0,10](1可用|2異常|3已凍結(jié)|4已注銷)
*/
@Basic
@Column(name = "state")
private Integer state;
/**
* 所在用戶組:[0,32767]決定用戶身份和權(quán)限
*/
@Basic
@Column(name = "user_group")
private String userGroup;
/**
* 上次登錄時(shí)間:
*/
@Basic
@Column(name = "login_time")
private Timestamp loginTime;
/**
* 手機(jī)號(hào)碼:[0,11]用戶的手機(jī)號(hào)碼,用于找回密碼時(shí)或登錄時(shí)
*/
@Basic
@Column(name = "phone")
private String phone;
/**
* 手機(jī)認(rèn)證:[0,1](0未認(rèn)證|1審核中|2已認(rèn)證)
*/
@Basic
@Column(name = "phone_state")
private Integer phoneState;
/**
* 用戶名:[0,16]用戶登錄時(shí)所用的賬戶名稱
*/
@Basic
@Column(name = "username")
private String username;
/**
* 昵稱:[0,16]
*/
@Basic
@Column(name = "nickname")
private String nickname;
/**
* 密碼:[0,32]用戶登錄所需的密碼,由6-16位數(shù)字或英文組成
*/
@Basic
@Column(name = "password")
private String password;
/**
* 郵箱:[0,64]用戶的郵箱,用于找回密碼時(shí)或登錄時(shí)
*/
@Basic
@Column(name = "email")
private String email;
/**
* 郵箱認(rèn)證:[0,1](0未認(rèn)證|1審核中|2已認(rèn)證)
*/
@Basic
@Column(name = "email_state")
private Integer emailState;
/**
* 頭像地址:[0,255]
*/
@Basic
@Column(name = "avatar")
private String avatar;
/**
* 創(chuàng)建時(shí)間:
*/
@Basic
@Column(name = "create_time")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Timestamp createTime;
@Basic
@Transient
private String code;
}5.3參與投票關(guān)鍵代碼
@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();
}5.4取消投票關(guān)鍵代碼
@RequestMapping(value = {"/sum_group", "/sum"})
public Map<String, Object> sum(HttpServletRequest request) {
Query count = service.sum(service.readQuery(request), service.readConfig(request));
return success(count.getResultList());
}到此這篇關(guān)于SpringBoot結(jié)合Vue實(shí)現(xiàn)投票系統(tǒng)過程詳解的文章就介紹到這了,更多相關(guān)SpringBoot投票系統(tǒng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
SpringBoot使用swagger生成api接口文檔的方法詳解
在之前的文章中,使用mybatis-plus生成了對(duì)應(yīng)的包,在此基礎(chǔ)上,我們針對(duì)項(xiàng)目的api接口,添加swagger配置和注解,生成swagger接口文檔,需要的可以了解一下2022-10-10
java實(shí)現(xiàn)同態(tài)加密算法的實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于java實(shí)現(xiàn)同態(tài)加密算法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Hibernate validator使用以及自定義校驗(yàn)器注解
這篇文章主要介紹了Hibernate validator使用以及自定義校驗(yàn)器注解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01

