【150】基于SSM+Vue实现的小说阅读小程序(有文档)

发布于:2025-06-25 ⋅ 阅读:(24) ⋅ 点赞:(0)

系统介绍

基于SSM+Vue实现的小说阅读小程序采用前后端分离的架构方式,系统设计了管理员、用户两种角色,系统分为管理端、小程序端,管理端实现了管理员登录、个人中心、管理员管理、帮助中心管理、基础数据管理、论坛中心管理、公告资讯管理、书城信息管理、书架信息管理、用户管理、章节信息管理,用户端实现了用户登录、用户注册、书籍列表、书籍详情、收藏、个人信息、帮助中心等功能

技术选型

开发工具:idea2020.3+Webstorm2020.3+HbuilderX+微信开发者工具

运行环境:jdk1.8+maven3.6.0+MySQL5.7+nodejs14.21.3

服务端技术:Spring+SpringMVC+Mybatis-Plus

前端技术:Vue+axios+Element-UI+uniapp

成果展示

管理端

登录

image-20250620211158999

修改密码

image-20250620214940180

管理员管理

image-20250620215007825

帮助中心

image-20250620215058495

基础数据管理->公告类型管理

image-20250620215127142

基础数据管理->作品类型管理

image-20250620215150642

论坛信息管理

image-20250620215212315

公告资讯管理

image-20250620215241312

书城信息管理

image-20250620215316661

书城信息管理->作品评论管理

image-20250620215342238

书城信息管理->作品收藏管理

image-20250620215404879

书架信息管理

image-20250620215428191

用户管理

image-20250620215512667

章节信息管理

image-20250620215528797

用户端

用户登录

image-20250620215744658

用户注册

image-20250620215812896

首页

image-20250620215834003

书籍列表页

image-20250620220018050

书籍详情页

image-20250620215902703

章节详情页

image-20250620215924503

内容详情

image-20250620215945298

论坛信息

image-20250620220042743

个人中心

image-20250620220101042

帮助中心

image-20250620220138741

源码展示

/**
 * 登录相关
 */
@RequestMapping("users")
@RestController
public class UsersController {
	
	@Autowired
	private UsersService usersService;
	
	@Autowired
	private TokenService tokenService;

	/**
	 * 登录
	 */
	@IgnoreAuth
	@PostMapping(value = "/login")
	public R login(String username, String password, String captcha, HttpServletRequest request) {
		UsersEntity user = usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
		if(user==null || !user.getPassword().equals(password)) {
			return R.error("账号或密码不正确");
		}
		String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
		R r = R.ok();
		r.put("token", token);
		r.put("role",user.getRole());
		r.put("userId",user.getId());
		return r;
	}
	
	/**
	 * 注册
	 */
	@IgnoreAuth
	@PostMapping(value = "/register")
	public R register(@RequestBody UsersEntity user){
    	if(usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
        usersService.insert(user);
        return R.ok();
    }

	/**
	 * 退出
	 */
	@GetMapping(value = "logout")
	public R logout(HttpServletRequest request) {
		request.getSession().invalidate();
		return R.ok("退出成功");
	}

    /**
     * 保存
     */
    @PostMapping("/save")
    public R save(@RequestBody UsersEntity user){
    	if(usersService.selectOne(new EntityWrapper<UsersEntity>().eq("username", user.getUsername())) !=null) {
    		return R.error("用户已存在");
    	}
    	user.setPassword("123456");
        usersService.insert(user);
        return R.ok();
    }
}

账号地址及其他说明

1、地址说明

登录页:http://localhost:8081/#/login

2、账号说明

管理员:admin/admin

用户:user/123456

3、目录结构展示

image-20250620224232265

4、项目结构展示

image-20250620221552341

5、以上系统源码来源于互联网,经过小白整理与调试,确保能正常运行!

6、制作不易,点赞、在看、分享再走吧,您的支持永远是我最大的动力!

7、如电脑本机环境未配置好,可在公众号后台回复 环境配置 获取视频教程。

8、系统有部分BUG属于正常现象,请各位小伙伴自行修复。

9、运行步骤

1、创建数据库、导入sql脚本
2、修改config.properties中的数据库配置文件,配置tomcat,启动服务端
3、打开前端管理端代码~admin,目录下打开cmd,执行npm install或者yarn install下载依赖
4、下载完毕后启动前端npm run serve,访问端口
5、将小程序代码~xiaoshuoyueduxitong\src\main\webapp\front导入hbuilderx、申请微信小程序测试账号、配置appid、启动项目,会自动打开微信开发者工具。

源码获取

源码编号:150

添加下方卡片回复:150


网站公告

今日签到

点亮在社区的每一天
去签到