SpringBoot結(jié)合Vue實現(xiàn)投票系統(tǒng)過程詳解
更新時間：2022年09月29日 10:10:35 作者：qq_834251331
這篇文章主要介紹了SpringBoot+Vue框架實現(xiàn)投票功能的項目系統(tǒng)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
一、前言介紹
本系統(tǒng)前端框架采用了比較流行的漸進式JavaScript框架Vue.js。使用Vue-Router和Vuex實現(xiàn)動態(tài)路由和全局狀態(tài)管理,Ajax實現(xiàn)前后端通信，Element UI組件庫時頁面快速成型。后端部分：采用springboot作為開發(fā)框架，同時集成MyBatis、Redis等相關(guān)技術(shù)。
管理員模塊：首頁、站點管理（輪播圖、公告欄）用戶管理（管理員、普通用戶）內(nèi)容管理（新聞列表、新聞分類列表）更多管理（參與投票、我的投票、取消投票）
用戶模塊：首頁、公告消息、新聞、參與投票等。
二、需求分析
管理員模塊：首頁、站點管理（輪播圖、公告欄）用戶管理（管理員、普通用戶）內(nèi)容管理（新聞列表、新聞分類列表）更多管理（參與投票、我的投票、取消投票）
用戶模塊：首頁、公告消息、新聞、參與投票等。
用戶用例圖如下所示。
管理員用例圖如下所示。
2.1系統(tǒng)功能結(jié)構(gòu)
進入系統(tǒng)后首先要進行登錄，驗證你的身份，賦予你不同的權(quán)限。當你成功登錄后，頁面會有多個板塊，分別是首頁、站點管理（輪播圖、公告欄）用戶管理（管理員、普通用戶）內(nèi)容管理（新聞列表、新聞分類列表）更多管理（我的投票、參與投票、取消投票）推薦。里面界面簡單易懂，根據(jù)標示可以直接進行方便快捷的操作。
系統(tǒng)功能結(jié)構(gòu)圖如下所示。
2.2功能模塊設計
管理員賬戶的基本信息管理。主要提供管理員賬戶的基本信息錄入、刪除、維護和查詢等功能，包括：
管理員錄入管理員賬戶基本信息；
管理員更新、增加及刪除管理員賬戶基本信息；
管理員根據(jù)管理員賬戶 ID 查詢基本信息；
系統(tǒng)管理員更改個人密碼；
參與投票管理。主要是提供參與投票的基本信息錄入、維護和查詢功能，包括：
用戶錄入?yún)⑴c投票信息；
用戶更新、增加及刪除參與投票基本信息；
用戶根據(jù)想要了解的投票話題查詢投票話題基本信息；
我的投票管理。主要提供我的投票的基本錄入、刪除、維護和查詢功能， 包括：
用戶錄入投票信息；
用戶更新、增加投票基本信息；
用戶根據(jù)投票 ID 查詢投票基本信息；
三、系統(tǒng)詳細設計
3.1系統(tǒng)登錄界面
3.2用戶首頁模塊
3.3參與投票模塊
用戶點擊參與投票按鈕進入投票頁面里面，投票話題、投票類型、備注、總票數(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, "賬號或密碼不能為空");
}
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);
//查詢用戶審核狀態(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)) {
// 存儲Token到數(shù)據(jù)庫
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, "賬號或密碼不正確");
}
}5.2用戶注冊關(guān)鍵代碼
/**
* 注冊
* @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;
/**
* 上次登錄時間：
*/
@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位數(shù)字或英文組成
*/
@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;
/**
* 創(chuàng)建時間：
*/
@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實現(xiàn)投票系統(tǒng)過程詳解的文章就介紹到這了,更多相關(guān)SpringBoot投票系統(tǒng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用PDFBox可以渲染生成pdf文檔,并且自定義程度高,只是比較麻煩,這篇文章將為大家詳細介紹一下具體的實現(xiàn)方法,感興趣的小伙伴可以參考一下2025-04-04
Springboot添加jvm監(jiān)控實現(xiàn)數(shù)據(jù)可視化
這篇文章主要介紹了Springboot添加jvm監(jiān)控實現(xiàn)數(shù)據(jù)可視化，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了使用Java如何將文本復制到剪貼板問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
SpringCloud如何創(chuàng)建一個服務提供者provider
這篇文章主要介紹了SpringCloud如何創(chuàng)建一個服務提供者provider,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
SpringBoot做junit測試的時候獲取不到bean的解決
這篇文章主要介紹了SpringBoot做junit測試的時候獲取不到bean的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-09-09
idea已經(jīng)提交到遠程分支,但需要本地和遠程都回退到某一版本問題
這篇文章主要介紹了idea已經(jīng)提交到遠程分支,但需要本地和遠程都回退到某一版本問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
spring boot整合Shiro實現(xiàn)單點登錄的示例代碼
本篇文章主要介紹了spring boot整合Shiro實現(xiàn)單點登錄的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
在軟件開發(fā)中,利用Spring?Boot進行分模塊項目搭建能夠提高代碼的模塊化和復用性,本文主要介紹了Springboot分模塊項目搭建的實現(xiàn),感興趣的可以了解一下2024-10-10
本文主要介紹了Java 開啟多線程常見的4種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
在RedHat系統(tǒng)上安裝JDK與Tomcat的步驟
這篇文章主要介紹了在RedHat系統(tǒng)上安裝Java與Tomcat的步驟,同樣適用于CentOS等RedHat系的Linux系統(tǒng),需要的朋友可以參考下2015-11-11