基于SpringBoot的网上摄影工作室

1. 资源

放到文章最后

2. 项目简介

网上摄影工作室的Java Web应用系统。该系统旨在为摄影爱好者提供一个在线交流与作品展示的平台。核心功能包括：用户管理、摄影作品的上传与展示、作品分类管理、摄影圈论坛交流、系统公告发布以及作品评论与点赞互动等。

项目提供了两套用户界面：

• 前端用户界面：供普通用户浏览作品、发表帖子、进行互动和个人中心管理。
• 后台管理界面：供管理员对用户、作品、分类、公告、轮播图等核心数据进行维护和管理。

3. 技术栈

• 后端技术:

  • 核心框架: Spring Boot 2.2.2.RELEASE
  • 持久层框架: MyBatis Plus 2.3 (集成MyBatis)
  • 数据库: MySQL 5.7.32
  • 安全/权限: Apache Shiro 1.3.2 (用于权限控制) 和自定义的Token拦截器
  • 工具库: Apache Commons Lang3, Hutool, Fastjson, Java JWT (用于Token生成)

• 前端技术:

  • 后台管理界面: Vue.js 2.x, Element UI, ECharts, Axios。
  • 前端用户界面: Layui, jQuery, Swiper, Vue.js (辅助部分功能)。
  • 富文本编辑器: TinyMCE (用于论坛和作品内容编辑)。

• 开发与部署:

  • 项目构建: Maven
  • 开发工具: (未指明，但通常为IntelliJ IDEA或Eclipse)
  • 服务器: 内置Spring Boot Tomcat

4. 详细介绍

1. 用户管理模块:

   • 支持两种角色：管理员 (users表，角色为“管理员”) 和普通用户 (yonghu表)。
   • 普通用户可以通过前端页面 (login.html, register.html) 进行注册和登录。
   • 用户登录后，可以在个人中心 (yonghu/center.html) 修改个人信息、头像和密码。

2. 摄影作品模块:

   • 核心功能是作品的发布与管理。用户登录后可以上传新的摄影作品 (sheyingzuopin/add.html)，填写作品名称、分类、封面、简介和详细内容。
   • 在前端首页和作品列表页 (sheyingzuopin/list.html)，用户可以浏览所有公开的作品，并支持按分类和关键词进行筛选。
   • 在作品详情页 (sheyingzuopin/detail.html)，用户可以查看作品的完整内容，进行“赞”/“踩”操作，发表评论，以及收藏作品。

3. 摄影圈（论坛）模块:

   • 提供了一个用户交流讨论的场所 (forum表)。
   • 用户可以发布新帖子 (forum/add.html)，设置帖子为“公开”或“私人”，并使用富文本编辑器编辑内容。
   • 在论坛列表页 (forum/list.html)，用户可以查看所有“公开”的帖子并进入详情页进行评论和互动。

4. 分类与公告模块:

   • 作品分类: 通过zuopinfenlei表管理摄影作品的分类，方便作品归类和筛选。
   • 系统公告: 管理员可以通过后台发布公告 (news表)，在前端页面 (news/list.html) 向所有用户展示重要信息。
   • 轮播图管理: 管理员通过config表管理前端首页的轮播图图片，实现了网站外观的动态配置。

5. 其他功能模块:

   • 收藏功能: 用户可以收藏喜欢的摄影作品，并在“我的收藏”页面 (storeup/list.html) 进行统一查看。
   • 作品评论: 用户可以对摄影作品进行评论，管理员可以在后台进行回复管理。
   • 作品智能排序: 在“摄影作品”列表页 (sheyingzuopin/list.html)，系统提供了按“点击次数”进行智能排序的功能。

5. 部分代码

5.1. 后端登录接口 (YonghuController.java)

用户登录的核心后端接口，验证用户名和密码，并生成Token用于后续的身份认证。

// 文件路径: ./springboot07j52/src/main/java/com/controller/YonghuController.java
package com.controller;

// ... [导入包] ...

@RestController
@RequestMapping("/yonghu")
public class YonghuController {
    @Autowired
    private YonghuService yonghuService;

    @Autowired
    private TokenService tokenService;

    /**
     * 登录
     */
    @IgnoreAuth
    @RequestMapping(value = "/login")
    public R login(String username, String password, String captcha, HttpServletRequest request) {
        // 1. 根据用户名查询用户
        YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuming", username));
        // 2. 校验账号和密码
        if(user==null || !user.getMima().equals(password)) {
            return R.error("账号或密码不正确");
        }
        // 3. 生成Token
        String token = tokenService.generateToken(user.getId(), username, "yonghu", "用户");
        return R.ok().put("token", token);
    }
    // ... [其他方法] ...
}

5.2. 前端登录页面逻辑 (login.html)

前端登录页面的核心JavaScript逻辑，负责发送登录请求并处理响应。

<!-- 文件路径: ./springboot07j52/src/main/resources/front/front/pages/login/login.html -->
<script>
// ... [layui.use 初始化部分] ...

// 登录
form.on('submit(login)', function(data) {
    data = data.field;
    if (!data.role) {
        layer.msg('请选择登录用户类型', { time: 2000, icon: 5 });
        return false;
    }
    // 发送登录请求
    http.request(data.role + '/login', 'get', data, function(res) {
        layer.msg('登录成功', { time: 2000, icon: 6 });
        // 存储登录凭证和用户信息到localStorage
        localStorage.setItem('Token', res.token);
        localStorage.setItem('role', $('#role:checked').attr('title'));
        localStorage.setItem('userTable', data.role);
        localStorage.setItem('sessionTable', data.role);
        localStorage.setItem('adminName', data.username);

        http.request(data.role + '/session', 'get', {}, function(res) {
            localStorage.setItem('userid', res.data.id);
            // 跳转到系统主页
            window.location.href = '../../index.html';
        });
    });
    return false;
});
</script>

5.3. 前端路由配置 (router-static.js)

后台管理界面的Vue Router路由配置文件，定义了不同功能模块对应的页面组件路径。

// 文件路径: ./springboot07j52/src/main/resources/admin/admin/src/router/router-static.js
import Vue from 'vue';
import VueRouter from 'vue-router'
Vue.use(VueRouter);

// 1. 创建组件
import Index from '@/views/index'
import Home from '@/views/home'
import Login from '@/views/login'
// ... [其他组件导入] ...

// 2. 配置路由
const routes = [{
    path: '/index',
    name: '首页',
    component: Index,
    children: [
        { path: '/', name: '首页', component: Home },
        { path: '/updatePassword', name: '修改密码', component: UpdatePassword },
        // 核心管理模块路由
        { path: '/forum', name: '摄影圈', component: forum },
        { path: '/news', name: '系统公告', component: news },
        { path: '/zuopinfenlei', name: '作品分类', component: zuopinfenlei },
        { path: '/yonghu', name: '用户', component: yonghu },
        { path: '/sheyingzuopin', name: '摄影作品', component: sheyingzuopin },
        { path: '/storeup', name: '我的收藏管理', component: storeup },
        { path: '/config', name: '轮播图管理', component: config },
    ]
  },
  // ... [其他路由：login, register, 404等] ...
}]

const router = new VueRouter({ mode: 'hash', routes })
export default router;

6. 部分截图

7. 项目总结

网上摄影工作室是一个功能完备的网上摄影工作室系统，成功实现了摄影作品分享、用户互动、内容管理等核心业务需求。其前后端分离的架构清晰，技术选型成熟且社区活跃，易于维护和扩展。

优点:

• 功能全面: 涵盖了作品展示、分类管理、论坛交流、用户管理、公告发布等主流社区功能。
• 技术标准: 基于Spring Boot和MyBatis Plus的稳定后端架构，以及Vue.js和Layui的成熟前端方案。
• 交互体验: 提供了作品收藏、点赞、评论、智能排序等互动功能，提升了用户体验。

总体而言，该项目是一个优秀的毕业设计或课程实践作品，完整地展示了Web应用开发的整个流程。如果计划用于生产环境，建议对安全性和代码规范性进行一轮重构和加固。

代码：https://fifteen.xiaobias.com/source/107