基于springboot+vue的江西旅游网(前后端分离)

简介: 本系统为原创项目,以江西旅游为主题,采用前后端分离,创作于2022年4月,项目代码工整,结构清晰,适合选题:旅游、旅游攻略、**旅游网、前后端分离类其他旅游系统等。系统采用springboot+vue整合开发,前端主要使用了element-ui框架、项目后端主要使用了springboot,数据层采用mybatis。

项目介绍:



本系统为原创项目,以江西旅游为主题,采用前后端分离,创作于2022年4月,项目代码工整,结构清晰,适合选题:旅游、旅游攻略、**旅游网、前后端分离类其他旅游系统等。系统采用springboot+vue整合开发,前端主要使用了element-ui框架、项目后端主要使用了springboot,数据层采用mybatis。


项目功能:



60bdbdfd7e474062b438eaf144ca45e5.png


数据模型:



3ff6a38d59c646f9ba89cd51065e0222.png


数据库表结构:



fcd09205518c43dc85c141c10f6ca0df.png


系统包含技术:



后端:springboot,mybatis

前端:element-ui、js、css等

开发工具:idea/vscode

数据库:mysql 5.7

JDK版本:jdk1.8


部分截图说明:



下面是首页,展示景点、攻略等


3c36af032f1548fb94f3543e536a89ef.png


前台登录


 80cab80552ff4e8ca880d6ae7bc7b93a.png


旅游攻略,可以分类查看,也可以分页查看


d9046b2d06ac47ed933c8f56d2820f5b.png


攻略详情


02023ec028d74e88b0b8c6b5176503dc.png


旅游路线,可以分类查看,也可以分页查看


4e1353c1489d413d9585a1f484004be1.png


路线详情


6ebe87f9ed6944eaab703a5841cb10bb.png


景点


ca1162a9773e4698b62df76a7bec9a2a.png


酒店住宿信息


eb92f7b3fd8749e9b8b0d9239e5a184f.png


下面是个人中心,登录后可以看到


2c4e3178a83b42cba8b51779ade34b8c.png


用户也可以反馈留言


d79f567cb0bb4bae9e097e59f40bc008.png


后台登录


58d3f2b208e5499588967292d8d89b98.png


管理员对用户进行管理


30d3666c57034b869034efc0a5beb650.png


管理员对旅游路线管理员对用户进行管理进行管理


c7802c058dd14446bcd466845e2e1e2f.png


管理员对用景点推荐进行管理


51999dacaa864b20880acb67b171b681.png


管理员对推荐进行编辑


b9d3d548d7ba4315a4f755b302fc86d6.png


项目前端结构


873f7b189fdc4460a81f360bbc1cd19e.png


项目后端结构


cb7112d48bd74d7b9cb19d254c9c72c7.png


部分代码:



 /**
     * 分页查询
     */
    @PostMapping("selectAll")
    public PageInfo<Hotel> selectAll(@RequestBody Map<String,String> mp) {
        PageHelper.startPage(Integer.parseInt(mp.get("currentPage").toString()), Integer.parseInt(mp.get("pagesize").toString()));
        List<Hotel> list = hotelService.queryAllByLimit(mp);
        PageInfo<Hotel> pageInfo = new PageInfo<Hotel>(list);
        return pageInfo;
    }
    /**
     * 修改
     */
    @RequestMapping("edit")
    public String edit(@RequestBody Hotel hotel) {
        try {
            hotelService.update(hotel);
            return "200";
        }catch (Exception e){
            e.printStackTrace();
            return "201";
        }
    }
    /**
     * 新增
     */
    @RequestMapping("add")
    public String add(@RequestBody Hotel hotel) {
        try {
            Date date = new Date();
            hotel.setCreateTime(date);
            hotelService.insert(hotel);
            return "200";
        }catch (Exception e){
            e.printStackTrace();
            return "201";
        }
    }
    /**
     * 通过主键查询单条数据
     */
    @GetMapping("selectOne")
    public Hotel selectOne(Integer id) {
        return hotelService.queryById(id);
    }
    /**
     * 通过主键删除数据
     */
    @GetMapping("deleteById")
    public String deleteById(Integer id) {
        try {
            hotelService.deleteById(id);
            return "200";
        }catch (Exception e){
            e.printStackTrace();
            return "201";
        }
    }
    /**
     * 导出excel
     */
    @RequestMapping("/downExcel")
    public List<Hotel> downExcel(){
        Hotel hotel = new Hotel();
        return hotelService.queryCondition(hotel);
    }


文件上传



@RequestMapping("/imgUpload")
  public Map<String, Object> yunUploadFile(@RequestParam("file") MultipartFile multiFile) {
    Map<String, Object> outMap = new HashMap<>();
    try {
      SimpleDateFormat sf = new SimpleDateFormat("yyyyMMddHHmmss");
      String name = sf.format(new Date());
      //获取文件的扩展名
      String ext = FilenameUtils.getExtension(multiFile.getOriginalFilename());
      //以绝对路径保存重名命后的图片
      multiFile.transferTo(new File(uploadDir+"/"+name + "." + ext));
      //jsonObject.put("code",name + "." + ext);
      outMap.put("imgUrl", "/api/upload/"+name + "." + ext);
      outMap.put("url", "http://127.0.0.1:8080/api/upload/"+name + "." + ext);
      outMap.put("message", "图片上传成功!");
      outMap.put("result", "true");
      return outMap;
    } catch (IOException e) {
      e.printStackTrace();
      outMap.put("result", "false");
      outMap.put("message", "图片上传失败,请重新上传!");
    }
    return outMap;
  }


以上就是部分功能展示,从整体上来看,本系统功能是十分完整的,界面设计简洁大方,交互友好,数据库设计也很合理,规模适中,代码工整,清晰,适合学习使用。


好了,今天就到这儿吧,小伙伴们点赞、收藏、评论,一键三连走起呀,下期见~~


相关文章
|
4月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
400 1
|
5月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
393 7
|
4月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
417 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
5月前
|
JavaScript 前端开发 Java
Spring Boot 与 Vue.js 前后端分离中的数据交互机制
本文深入探讨了Spring Boot与Vue.js在前后端分离架构下的数据交互机制。通过对比传统`model.addAttribute()`方法与RESTful API的设计,分析了两者在耦合性、灵活性及可扩展性方面的差异。Spring Boot以RESTful API提供数据服务,Vue.js借助Axios消费API并动态渲染页面,实现了职责分明的解耦架构。该模式显著提升了系统的灵活性和维护性,适用于复杂应用场景如论坛、商城系统等,为现代Web开发提供了重要参考。
424 0
|
8月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
|
8月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的家政服务管理平台设计与实现(计算机毕设项目实战+源码+文档)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
|
8月前
|
JavaScript 搜索推荐 Java
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
|
JavaScript Java 关系型数据库
Springboot+vue打包部署到线上服务器
整合springboot+vue的项目,打包成jar包到线上服务器运行
Springboot+vue打包部署到线上服务器
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
494 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能