基于springboot2+vue2的公交线路查询系统

1. 提示

浏览全文获取资源

2. 项目简介

本项目是一个基于 Spring Boot + MyBatis Plus 的公交路线查询系统，包含前端展示（用户端）和后端管理（管理员端）。系统主要提供公交路线信息的管理与查询功能，用户可浏览公交路线、网站公告、友情链接，参与留言建议和在线提问；管理员可对用户、公交路线、网站公告、友情链接、留言建议、轮播图等进行维护，并回复用户的提问与建议。

3. 技术栈

• 后端框架：Spring Boot 2.2.2.RELEASE
• 持久层：MyBatis Plus 2.3
• 数据库：MySQL 5.7（配置中也有 SQL Server 注释，实际使用 MySQL）
• 安全控制：Apache Shiro 1.3.2、自定义 Token 拦截器
• 前端（后台管理）：Vue.js + Element UI
• 前端（用户端）：HTML + Layui + Vue.js
• 工具库：Hutool、Fastjson、Commons Lang3、POI（Excel）

  4. 详细介绍

  4.1 功能模块

  4.1.1 用户端（前端）

• 首页：轮播图展示、公交路线推荐、网站公告推荐、友情链接推荐。
• 公交路线：列表展示公交路线（含路线编号、名称、封面、价格、起止站点等），支持按路线名称、起点站名、途径站点、终点站名搜索，点击进入详情页可查看完整路线详情、点赞/踩、收藏、发表评论。
• 网站公告：公告列表及详情页，支持点赞/踩、收藏、评论。
• 友情链接：链接列表展示，点击跳转外部链接，支持收藏。
• 留言建议：用户可提交留言建议，管理员可回复。
• 在线提问：用户可与管理员进行一对一的在线提问与回复。
• 个人中心：用户信息管理（修改密码、上传头像等）、我的收藏列表。
• 登录/注册：用户可注册账号，登录后访问个人中心及提问等功能。

4.1.2 管理端（后台）

• 用户管理：对用户表 (yonghu) 进行增删改查。
• 公交路线管理：对公交路线表 (gongjiaoluxian) 进行增删改查，支持查看评论。
• 网站公告管理：对公告表 (wangzhangonggao) 进行增删改查，支持查看评论。
• 友情链接管理：对链接表 (youqinglianjie) 进行增删改查。
• 留言建议管理：查看用户留言并回复。
• 系统管理：轮播图管理（config 表存储轮播图配置）、在线提问管理（回复用户提问）。
• 管理员登录：管理员账号 (users 表，默认账号 abo / 密码 abo) 登录后台。

4.2 数据库设计

• yonghu：用户表（账号、密码、姓名、年龄、性别、手机、照片）
• gongjiaoluxian：公交路线表（路线编号、名称、封面、价格、起点站名、途径站点、终点站名、详情、点击次数、赞踩数）
• wangzhangonggao：网站公告表（标题、简介、发布时间、封面、内容、点击次数、赞踩数）
• youqinglianjie：友情链接表（链接名称、URL、图片、点击次数）
• messages：留言建议表（留言人、内容、图片、回复内容、回复图片）
• chat：在线提问表（用户id、管理员id、提问、回复、是否回复）
• storeup：收藏/赞踩表（用户id、收藏id、表名、类型）
• discussgongjiaoluxian / discusswangzhangonggao：评论表
• config：系统配置表（存储轮播图图片路径等）
• users：管理员表
• token：用户登录 token 表

4.3 项目结构

• 后端：Java 包结构包括 com.controller（控制器）、com.service（服务层）、com.dao（数据访问层）、com.entity（实体类及VO/View）、com.config（配置类）、com.interceptor（拦截器）、com.utils（工具类）。
• 前端（用户端）：静态页面位于 src/main/resources/front/front/，使用 layui + vue.js，包含 index.html、pages/ 下各功能页。
• 前端（管理端）：Vue 项目位于 src/main/resources/admin/admin/，使用 Element UI。

5. 部分代码

5.1 公交路线实体类 (GongjiaoluxianEntity.java)

@TableName("gongjiaoluxian")
public class GongjiaoluxianEntity<T> implements Serializable {
    @TableId
    private Long id;
    private String luxianbianhao;       // 路线编号
    private String luxianmingcheng;     // 路线名称
    private String fengmian;            // 封面
    private Integer jiage;              // 价格
    private String qidianzhanming;      // 起点站名
    private String tujingzhandian;      // 途径站点
    private String zhongdianzhanming;   // 终点站名
    private String luxianxiangqing;     // 路线详情
    private Integer thumbsupnum;        // 赞
    private Integer crazilynum;         // 踩
    private Date clicktime;             // 最近点击时间
    private Integer clicknum;           // 点击次数
    // getters/setters omitted
}

5.2 公交路线控制器部分方法 (GongjiaoluxianController.java)

@RestController
@RequestMapping("/gongjiaoluxian")
public class GongjiaoluxianController {
    @Autowired
    private GongjiaoluxianService gongjiaoluxianService;

    // 前端列表（忽略登录验证）
    @IgnoreAuth
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params, GongjiaoluxianEntity gongjiaoluxian) {
        EntityWrapper<GongjiaoluxianEntity> ew = new EntityWrapper<>();
        PageUtils page = gongjiaoluxianService.queryPage(params,
                MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, gongjiaoluxian), params), params));
        return R.ok().put("data", page);
    }

    // 前端详情（自动增加点击次数）
    @IgnoreAuth
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id) {
        GongjiaoluxianEntity entity = gongjiaoluxianService.selectById(id);
        entity.setClicknum(entity.getClicknum() + 1);
        entity.setClicktime(new Date());
        gongjiaoluxianService.updateById(entity);
        return R.ok().put("data", entity);
    }
}

5.3 前端首页轮播图配置 (config.js 部分)

var projectName = '公交线路查询系统';
var swiper = {
    width: '100%',
    height: '400px',
    arrow: 'none',
    anim: 'default',
    interval: 2000,
    indicator: 'outside'
};

var indexNav = [
    { name: '公交路线', url: './pages/gongjiaoluxian/list.html' },
    { name: '网站公告', url: './pages/wangzhangonggao/list.html' },
    { name: '友情链接', url: './pages/youqinglianjie/list.html' },
    { name: '留言建议', url: './pages/messages/list.html' }
];

5.4 用户登录 token 生成逻辑 (TokenServiceImpl.java)

@Override
public String generateToken(Long userid, String username, String tableName, String role) {
    TokenEntity tokenEntity = this.selectOne(new EntityWrapper<TokenEntity>()
            .eq("userid", userid).eq("role", role));
    String token = CommonUtil.getRandomString(32);
    Calendar cal = Calendar.getInstance();
    cal.setTime(new Date());
    cal.add(Calendar.HOUR_OF_DAY, 1);
    if (tokenEntity != null) {
        tokenEntity.setToken(token);
        tokenEntity.setExpiratedtime(cal.getTime());
        this.updateById(tokenEntity);
    } else {
        this.insert(new TokenEntity(userid, username, tableName, role, token, cal.getTime()));
    }
    return token;
}

6. 部分截图

7. 项目总结

该项目是一个功能完整的公交路线查询系统，涵盖了用户端的信息浏览、交互（收藏、评论、提问、留言）和管理端的数据维护功能。技术选型经典，使用 Spring Boot 作为后端基础，MyBatis Plus 简化数据访问，前端分别采用 Vue+ElementUI 管理后台和 Layui+Vue 用户前台，具有良好的分层与可维护性。项目还集成了 token 鉴权、点赞/踩、收藏、点击量统计等常见业务功能，为类似信息查询类系统的开发提供了参考实现。

资源：https://fifteen.xiaobias.com/source/193