SpringBoot結合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等相關技術。
管理員模塊：首頁、站點管理（輪播圖、公告欄）用戶管理（管理員、普通用戶）內(nèi)容管理（新聞列表、新聞分類列表）更多管理（參與投票、我的投票、取消投票）
用戶模塊：首頁、公告消息、新聞、參與投票等。
二、需求分析
管理員模塊：首頁、站點管理（輪播圖、公告欄）用戶管理（管理員、普通用戶）內(nèi)容管理（新聞列表、新聞分類列表）更多管理（參與投票、我的投票、取消投票）
用戶模塊：首頁、公告消息、新聞、參與投票等。
用戶用例圖如下所示。
管理員用例圖如下所示。
2.1系統(tǒng)功能結構
進入系統(tǒng)后首先要進行登錄，驗證你的身份，賦予你不同的權限。當你成功登錄后，頁面會有多個板塊，分別是首頁、站點管理（輪播圖、公告欄）用戶管理（管理員、普通用戶）內(nèi)容管理（新聞列表、新聞分類列表）更多管理（我的投票、參與投票、取消投票）推薦。里面界面簡單易懂，根據(jù)標示可以直接進行方便快捷的操作。
系統(tǒng)功能結構圖如下所示。
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登錄關鍵代碼
@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用戶注冊關鍵代碼
/**
* 注冊
* @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]用戶獲取其他與用戶相關的數(shù)據(jù)
*/
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "user_id")
private Integer userId;
/**
* 賬戶狀態(tài)：[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位數(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參與投票關鍵代碼
@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取消投票關鍵代碼
@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());
}到此這篇關于SpringBoot結合Vue實現(xiàn)投票系統(tǒng)過程詳解的文章就介紹到這了,更多相關SpringBoot投票系統(tǒng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Filtering是Maven Resources Plugin的一個功能,本文主要介紹了淺談Maven resrouce下filtering作用,具有一定的參考價值,感興趣的可以了解一下2024-03-03
SpringBoot使用swagger生成api接口文檔的方法詳解
在之前的文章中，使用mybatis-plus生成了對應的包，在此基礎上，我們針對項目的api接口，添加swagger配置和注解，生成swagger接口文檔，需要的可以了解一下2022-10-10
這篇文章主要介紹了Java中的Vector詳細解讀,Vector是實現(xiàn)了List接口的子類,其底層是一個對象數(shù)組,維護了一個elementData數(shù)組,是線程安全的,Vector類的方法帶有synchronized關鍵字,在開發(fā)中考慮線程安全中使用Vector,需要的朋友可以參考下2023-09-09
項目中我們經(jīng)常會遇到多數(shù)據(jù)源的問題，尤其是數(shù)據(jù)同步或定時任務等項目更是如此。本篇文章主要介紹了spring多數(shù)據(jù)源配置，有興趣的可以了解一下。2017-01-01
SpringBoot從本質(zhì)上來說就是Spring,它通過了一些自己的特性幫助我們簡化了Spring應用程序的開發(fā),下面這篇文章主要給大家介紹了關于springboot實用配置的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-05-05
下面小編就為大家?guī)硪黄媪私鈐ava byte數(shù)組與文件讀寫。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要給大家介紹了關于java實現(xiàn)同態(tài)加密算法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要為大家詳細介紹了MyBatis Plus中分頁插件使用的相關知識，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以了解一下2023-02-02
這篇文章主要介紹了命令行編譯java文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Hibernate validator使用以及自定義校驗器注解
這篇文章主要介紹了Hibernate validator使用以及自定義校驗器注解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01