SpringBoot結(jié)合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功能模塊設(shè)計
管理員賬戶的基本信息管理。主要提供管理員賬戶的基本信息錄入、刪除、維護和查詢等功能,包括:
管理員錄入管理員賬戶基本信息;
管理員更新、增加及刪除管理員賬戶基本信息;
管理員根據(jù)管理員賬戶 ID 查詢基本信息;
系統(tǒng)管理員更改個人密碼;
參與投票管理。主要是提供參與投票的基本信息錄入、維護和查詢功能,包括:
用戶錄入?yún)⑴c投票信息;
用戶更新、增加及刪除參與投票基本信息;
用戶根據(jù)想要了解的投票話題查詢投票話題基本信息;
我的投票管理。主要提供我的投票的基本錄入、刪除、維護和查詢功能, 包括:
用戶錄入投票信息;
用戶更新、增加投票基本信息;
用戶根據(jù)投票 ID 查詢投票基本信息;
三、系統(tǒng)詳細設(shè)計
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)文章
SpringBoot使用swagger生成api接口文檔的方法詳解
在之前的文章中,使用mybatis-plus生成了對應(yīng)的包,在此基礎(chǔ)上,我們針對項目的api接口,添加swagger配置和注解,生成swagger接口文檔,需要的可以了解一下2022-10-10Hibernate validator使用以及自定義校驗器注解
這篇文章主要介紹了Hibernate validator使用以及自定義校驗器注解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01