写点什么

基于 Java+SpringBoot+Vue 前后端分离个人博客系统设计和实现

作者:hunter_coder
  • 2024-07-27
    陕西
  • 本文字数:3533 字

    阅读完需:约 12 分钟

\n 文末获取源码联系


感兴趣的可以先收藏起来,大家在毕设选题,项目以及论文编写等相关问题都可以给我加好友咨询

系统介绍:

随着国内市场经济这几十年来的蓬勃发展,突然遇到了从国外传入国内的互联网技术,互联网产业从开始的群众不信任,到现在的离不开,中间经历了很多挫折。本次开发的个人博客系统,有管理员,用户,博主三个角色。管理员功能有个人中心,用户管理,博主管理,文章分类管理,博主文章管理,系统公告管理,轮播图管理。博主可以注册登录,修改个人信息,对自己发布的博主文章进行管理操作。用户可以注册登录,查看管理员发布的公告信息和博主发布的文章信息,还可以对博主文章进行收藏评论以及评论操作。开发本程序后台用到了 SpringBoot 开发技术,页面设计采用 VUE 框架和 layui 样式。数据库采用关系数据库市场占有率最高的 MySQL 作为本程序使用的数据库,完全符合程序使用并且有丰富的拓展余地。程序从需求到设计,从开发到测试,都在功能上和性能上都不断的进行了调试,让开发的程序在使用上用户体验更美好。


程序的功能在系统分析这部分已经确定了,这部分主要还是针对程序功能进行更加详细的设计,设计成果使用结构图展示直观明了,也更容易让人理解。绘制结构图采用的工具是 Visio,使用它可以快速绘制出不同角色拥有的功能结构。



图 4.2 功能结构图


程序上交给用户进行使用时,需要提供程序的操作流程图,这样便于用户容易理解程序的具体工作步骤,现如今程序的操作流程都有一个大致的标准,即先通过登录页面提交登录数据,通过程序验证正确之后,用户才能在程序功能操作区页面操作对应的功能。




程序操作流程图

功能截图:

对个人博客系统进行了前面的系统分析,系统设计之后,接下来的环节就是个人博客系统的具体编码实现功能的部分。这部分内容会显示系统各个功能的具体界面运行效果。

5.1 管理员功能实现

5.1.1 用户管理

管理员可以对用户信息进行添加,修改,删除,查询操作。


对个人博客系统进行了前面的系统分析,系统设计之后,接下来的环节就是个人博客系统的具体编码实现功能的部分。这部分内容会显示系统各个功能的具体界面运行效果。

5.1 管理员功能实现

5.1.1 用户管理

管理员可以对用户信息进行添加,修改,删除,查询操作。



图 5.1 用户管理页面

5.1.2 文章分类管理

管理员可以对文章分类信息进行添加,修改,删除,查询操作。



图 5.2 文章分类管理页面

5.1.3 公告信息管理

管理员可以对公告信息进行添加,修改,删除,查询操作。



图 5.3 公告信息管理页面

5.1.4 ** 博主信息管理**

管理员可以对博主信息信息进行添加,修改,删除,查询操作。



图 5.4 博主信息管理页面

5.2 博主功能实现

5.2.1 博主文章管理

博主可以对自己发布过的博主文章信息进行添加,修改,删除,查询操作,还可以查看评论。



图 5.5 首页页面

5.3 用户功能实现

5.3.1 博主文章信息

用户可以在博主文章里面查看到博主发布的文章信息,可以对博主文章信息进行查看,收藏,赞踩,评论操作。



图 5.6 博主文章信息页面

5.3.2 我的收藏

我的收藏里面可以看到自己收藏过的博主文章信息,可以去点击收藏的信息去取消收藏。



图 5.7 我的收藏页面


图 5.1 用户管理页面

5.1.2 文章分类管理

管理员可以对文章分类信息进行添加,修改,删除,查询操作。



图 5.2 文章分类管理页面

5.1.3 公告信息管理

管理员可以对公告信息进行添加,修改,删除,查询操作。



图 5.3 公告信息管理页面

5.1.4 ** 博主信息管理**

管理员可以对博主信息信息进行添加,修改,删除,查询操作。



图 5.4 博主信息管理页面

5.2 博主功能实现

5.2.1 博主文章管理

博主可以对自己发布过的博主文章信息进行添加,修改,删除,查询操作,还可以查看评论。



图 5.5 首页页面

5.3 用户功能实现

5.3.1 博主文章信息

用户可以在博主文章里面查看到博主发布的文章信息,可以对博主文章信息进行查看,收藏,赞踩,评论操作。



图 5.6 博主文章信息页面

5.3.2 我的收藏

我的收藏里面可以看到自己收藏过的博主文章信息,可以去点击收藏的信息去取消收藏。



图 5.7 我的收藏页面

代码实现:

/** * 登录相关 */@RequestMapping("users")@RestControllerpublic class UserController{        @Autowired    private UserService userService;        @Autowired    private TokenService tokenService;
/** * 登录 */ @IgnoreAuth @PostMapping(value = "/login") public R login(String username, String password, String role, HttpServletRequest request) { UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username)); if(user != null){ if(!user.getRole().equals(role)){ return R.error("权限不正常"); } if(user==null || !user.getPassword().equals(password)) { return R.error("账号或密码不正确"); } String token = tokenService.generateToken(user.getId(),username, "users", user.getRole()); return R.ok().put("token", token); }else{ return R.error("账号或密码或权限不对"); }
} /** * 注册 */ @IgnoreAuth @PostMapping(value = "/register") public R register(@RequestBody UserEntity user){// ValidatorUtils.validateEntity(user); if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) { return R.error("用户已存在"); } userService.insert(user); return R.ok(); }
/** * 退出 */ @GetMapping(value = "logout") public R logout(HttpServletRequest request) { request.getSession().invalidate(); return R.ok("退出成功"); } /** * 密码重置 */ @IgnoreAuth @RequestMapping(value = "/resetPass") public R resetPass(String username, HttpServletRequest request){ UserEntity user = userService.selectOne(new EntityWrapper<UserEntity>().eq("username", username)); if(user==null) { return R.error("账号不存在"); } user.setPassword("123456"); userService.update(user,null); return R.ok("密码已重置为:123456"); } /** * 列表 */ @RequestMapping("/page") public R page(@RequestParam Map<String, Object> params,UserEntity user){ EntityWrapper<UserEntity> ew = new EntityWrapper<UserEntity>(); PageUtils page = userService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.allLike(ew, user), params), params)); return R.ok().put("data", page); }
/** * 信息 */ @RequestMapping("/info/{id}") public R info(@PathVariable("id") String id){ UserEntity user = userService.selectById(id); return R.ok().put("data", user); } /** * 获取用户的session用户信息 */ @RequestMapping("/session") public R getCurrUser(HttpServletRequest request){ Integer id = (Integer)request.getSession().getAttribute("userId"); UserEntity user = userService.selectById(id); return R.ok().put("data", user); }
/** * 保存 */ @PostMapping("/save") public R save(@RequestBody UserEntity user){// ValidatorUtils.validateEntity(user); if(userService.selectOne(new EntityWrapper<UserEntity>().eq("username", user.getUsername())) !=null) { return R.error("用户已存在"); } userService.insert(user); return R.ok(); }
/** * 修改 */ @RequestMapping("/update") public R update(@RequestBody UserEntity user){// ValidatorUtils.validateEntity(user); userService.updateById(user);//全部更新 return R.ok(); }
/** * 删除 */ @RequestMapping("/delete") public R delete(@RequestBody Integer[] ids){ userService.deleteBatchIds(Arrays.asList(ids)); return R.ok(); }}
复制代码

论文参考:

*

开源地址:可以——【戳一戳】即可免费获取!

用户头像

hunter_coder

关注

还未添加个人签名 2024-05-24 加入

还未添加个人简介

评论

发布
暂无评论
基于Java+SpringBoot+Vue前后端分离个人博客系统设计和实现_后端开发_hunter_coder_InfoQ写作社区