前言
今天学习了如何搭建一个后台管理系统，因此打算记录并总结一下今天的学习内容。
该项目是一个非常好用的后台管理系统模板，代码比较简单，项目功能比较通用，总之就是很推荐初学者学习。
项目的大体项目框架是：SpringBoot+Vue+ElementUI
后台是由SpringBoot，SpringData Jpa构成
前台是基于Vue+ElementUI
项目介绍：
这个项目包含登录页面，用户管理的页面，个人信息的页面。
项目包含登录和注册功能，用户可以从登录界面跳转到管理页面。
登录：
注册：
用户管理：
在管理页面，用户可以跳转到个人信息页面，也可以退出用户，也可以回到主页。还可以在管理页面实现信息的增删改查，同时管理页面也基于ElementUI提供的分页工具实现了分页的功能。
新增用户：
修改用户：
项目架构：
common：保存一些通用的配置
controller:是后台接口
dao：数据库访问层，这个项目使用的是Spring JPA,在Spring Jpa中整合了很多对数据库进行增删改查的方法
entity：对应数据库的实体类
exception：全局异常处理，比如在接口层抛了异常会给前台返回错误信息
service：业务处理层
utils：代码生成工具
resource：包含static（管理前台配置文件）和application.yml（springboot配置，数据库配置）
pom.xml：管理下载依赖dependency
架构各个部分的详解：
首先是common包：
Authintercepter：鉴权，拦截器。用户需要登录才能有权限进行访问。
package mon;import org.springframework.web.servlet.HandlerInterceptor;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;/*** 拦截器*/public class AuthInterceptor implements HandlerInterceptor {@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws IOException {Object user = request.getSession().getAttribute("user");if (user != null) {request.getSession().setAttribute("user", user);return true;}response.sendRedirect("/login.html");return false;}}
CorsConfig：跨域处理。当非本地用户访问时本地服务器时，需要在此处配置。
package mon;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.cors.CorsConfiguration;import org.springframework.web.cors.UrlBasedCorsConfigurationSource;import org.springframework.web.filter.CorsFilter;@Configurationpublic class CorsConfig {// 当前跨域请求最大有效时长。这里默认1天private static final long MAX_AGE = 24 * 60 * 60;private CorsConfiguration buildConfig() {CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法corsConfiguration.setMaxAge(MAX_AGE);return corsConfiguration;}@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", buildConfig()); // 4 对接口配置跨域设置return new CorsFilter(source);}}
result：封装结果类。统一返回接口数据，在controller层中，所有的的接口都会返回一个result对象，result会对所有请求的结果进行封装然后返回给前台。result类有三个属性：code，msg，data。code告诉前台访问是成功（1）还是失败（0）。如果失败了，会把错误信息放到msg返回给前台。data是查询数据的，将用户数据放到data中然后返回给前台，前台拿到data在页面进行渲染。
WebMvcConfig：拦截器。拦截或放开一些页面的请求
import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.InterceptorRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpublic class WebMvcConfig implements WebMvcConfigurer {@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(new AuthInterceptor()).addPathPatterns("/**").excludePathPatterns("/js/**", "/css/**", "/img/**", "/user/login", "/user/register", "/login.html", "/register.html");}}
controller层：定义项目所有的接口
包含：增删改查接口、登录注册接口，其他业务接口
controller会通过@resource引入service并请求service
package com.example.controller;import cn.hutool.core.collection.CollUtil;import cn.hutool.core.io.IoUtil;import cn.hutool.poi.excel.ExcelUtil;import cn.hutool.poi.excel.ExcelWriter;import mon.Result;import com.example.entity.User;import com.example.exception.CustomException;import com.example.service.UserService;import org.springframework.data.domain.Page;import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import .URLEncoder;import java.util.LinkedHashMap;import java.util.List;import java.util.Map;@RestController@RequestMapping("/user")public class UserController {@Resourceprivate UserService userService;/*** 登陆** @param user* @param request* @return*/@PostMapping("/login")public Result<User> login(@RequestBody User user, HttpServletRequest request) {User res = userService.login(user);request.getSession().setAttribute("user", res);return Result.success(res);}/*** 注册** @param user* @param request* @return*/@PostMapping("/register")public Result<User> register(@RequestBody User user, HttpServletRequest request) {User dbUser = userService.findByUsername(user.getUsername());if (dbUser != null) {throw new CustomException("-1", "用户已注册");}if (user.getPassword() == null) {user.setPassword("123456");}User res = userService.add(user);request.getSession().setAttribute("user", res);return Result.success(res);}@PostMappingpublic Result<User> save(@RequestBody User user) {return Result.success(userService.save(user));}@PutMappingpublic Result<?> update(@RequestBody User user) {return Result.success(userService.save(user));}@DeleteMapping("/{id}")public Result<?> delete(@PathVariable Long id) {userService.delete(id);return Result.success();}@GetMapping("/{id}")public Result<User> findById(@PathVariable Long id) {return Result.success(userService.findById(id));}@GetMappingpublic Result<List<User>> findAll() {return Result.success(userService.findAll());}@GetMapping("/page")public Result<Page<User>> findPage(@RequestParam(required = false, defaultValue = "1") Integer pageNum,@RequestParam(required = false, defaultValue = "10") Integer pageSize) {return Result.success(userService.findPage(pageNum, pageSize));}@GetMapping("/export")public void export(HttpServletResponse response) throws IOException {List<Map<String, Object>> list = CollUtil.newArrayList();List<User> all = userService.findAll();for (User user : all) {Map<String, Object> row1 = new LinkedHashMap<>();row1.put("用户名", user.getUsername());row1.put("邮箱", user.getEmail());row1.put("电话", user.getTel());list.add(row1);}// 2. 写excelExcelWriter writer = ExcelUtil.getWriter(true);writer.write(list, true);response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");String fileName = URLEncoder.encode("用户表", "UTF-8");response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");ServletOutputStream out = response.getOutputStream();writer.flush(out, true);writer.close();IoUtil.close(System.out);}}
service层：对数据库请求的数据进行逻辑处理。service会对项目的业务进行详细处理。
service会通过@Resource引入DAO来获取数据库数据
package com.example.service;import com.example.dao.UserDao;import com.example.entity.User;import com.example.exception.CustomException;import org.springframework.data.domain.Page;import org.springframework.data.domain.PageRequest;import org.springframework.stereotype.Service;import javax.annotation.Resource;import java.util.List;@Servicepublic class UserService {@Resourceprivate UserDao userDao;public User save(User user) {return userDao.save(user);}public void delete(Long id) {userDao.deleteById(id);}public User findById(Long id) {return userDao.findById(id).orElse(null);}public List<User> findAll() {return userDao.findAll();}public Page<User> findPage(int pageNum, int pageSize) {return userDao.findAll(PageRequest.of(pageNum - 1, pageSize));}public User login(User user) {User res = userDao.findByUsernameAndPassword(user.getUsername(), user.getPassword());if (res == null) {throw new CustomException("-1", "账号或密码错误");}return res;}public User add(User user) {return userDao.save(user);}public User findByUsername(String username) {return userDao.findByUsername(username);}}
dao：从数据库查询数据的接口
dao是由jpa提供各种对数据库进行操作的方法的
package com.example.dao;import com.example.entity.User;import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.data.jpa.repository.JpaSpecificationExecutor;import org.springframework.stereotype.Repository;@Repositorypublic interface UserDao extends JpaRepository<User, Long>, JpaSpecificationExecutor<User> {User findByUsernameAndPassword(String username, String password);User findByUsername(String username);}
entity：数据库实体类
实体类中的属性，与数据库表属性一一对应。
package com.example.entity;import javax.persistence.*;import java.util.Date;@Entity@Table(name = "t_user")public class User {/*** 主键*/@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;/*** 用户名 */@Column(name = "username")private String username;/*** 密码 */@Column(name = "password")private String password;/*** 邮箱 */@Column(name = "email")private String email;/*** 电话 */@Column(name = "tel")private String tel;public Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}public String getTel() {return tel;}public void setTel(String tel) {this.tel = tel;}}
总结：
这个项目仍然只学了一半，前端和部署还没有完成。剩下的内容，下次再分享吧。
结语：坚定目标，日日精进，必有所成。共勉！ ！
如果觉得《SpringBoot+Vue+ElementUI实现后台管理系统》对你有帮助，请点赞、收藏，并留下你的观点哦！
