代码位置:旅游管理系统: 根据若依模版的一个旅游管理系统 - Gitee.com
分支dev
项目介绍
项目目的
随着社会的高速发展，人们生活水平的不断提高，以及工作节奏的加快，旅游逐渐成为一个热门的话题，因为其形式的多样，涉及的面比较广，成为人们放松压力，调节情绪的首要选择。 传统的旅游信息管理是采用人力的自然管理和纸制记录。在查询，更新时都是由人一条一条的记录，这样不仅需要大量的人力还需要大量的办公用品。这必然造成对人力和物力的浪费，而且由于工作量大并且繁琐，就会带来效率方面的低下，而这些就会无形地使利润下滑。 在这样的背景下，一套旅游推荐管理系统应运而生，它可以帮助人们更快更好的找到旅游相对应的各种信息，既可以节省人力物力又可以节省财力。同时，旅游推荐管理系统也可以促进旅游行业的发展，吸引更多游客到达不同的旅游目的地，促进旅游业的多元化发展，减轻旅游热点地区的压力，推动整体旅游业的健康发展。 旅游推荐管理系统可以收集并分析用户行为数据和反馈信息，洞察用户行为模式和市场趋势，为旅游决策提供数据支持和参考，持续优化旅游推荐服务。
项目意义
1.提升旅游体验
通过系统化地收集各种旅游相关信息，例如：旅游线路、景点信息、地方美食等，用户能更快更全的了解所有旅游信息，从而提升旅游体验。
2.促进旅游业发展
通过旅游推荐系统，用户可以全面的了解旅游信息，更好的促进用户想旅游的心情，因而促进旅游业的发展。
3.数据积累与分析
通过系统后台对各种数据的积累，再加以分析，可以洞察用户的行为模式和偏好趋势，为旅游决策提供数据支持和参考。
4.提升服务品质
通过系统对用户的反馈进行实时监测和分析，旅游从业者可以及时发现和解决问题，提升服务品质，增强用户满意度，提升口碑。
5.优化资源配置
不再是传统旅游信息的纸质展示，而是数据保存，系统可以更好的帮助从业者提高资源利用效率，降低成本。
项目功能模块
使用的技术
1.若依（Ruoyi）框架
若依（Ruoyi）框架是一款基于Spring Boot框架开发的管理系统快速开发平台，提供了丰富的功能模块和插件支持，帮助开发人员快速搭建各类企业级管理系统。 Ruoyi框架具有灵活的权限控制、代码生成器、多数据源支持等特性，使得开发人员能够高效地完成项目开发工作，提升开发效率和代码质量。
2.Vue.js
Vue.js是一款流行的开源JavaScript框架，用于构建用户界面和单页面应用程序（SPA）。Vue.js采用轻量级的方式处理数据绑定和DOM操作，同时提供了简洁明了的API和响应式的数据绑定机制，使得开发者能够快速构建交互式的Web应用程序。Vue.js特点包括易学易用、高效灵活、组件化开发、虚拟DOM等，被广泛应用于前端开发中，并得到了社区和开发者的积极支持和推崇。。
3..Ajax
Ajax（Asynchronous JavaScript and XML）是一种用于在Web应用程序中实现异步数据传输的技术。借助Ajax，Web页面可以在不刷新整个页面的情况下与服务器进行数据交换，从而实现动态更新页面内容的效果。Ajax利用XMLHttpRequest对象在后台与服务器进行数据交换，通过在后台异步传输数据，可以在页面加载过程中向服务器发送请求并获取响应，从而提升用户体验和页面的交互性。Ajax技术的出现极大地改变了Web开发的方式，使得Web应用程序能够更加动态、实时地与用户进行交互。
4.springboot
Spring Boot是一个用于构建基于Spring框架的快速、简单的应用程序的开源框架。它旨在简化Spring应用程序的搭建过程，提供了开箱即用的配置和功能，让开发者可以更专注于业务逻辑的开发，而不需要花费过多精力在配置上。Spring Boot提供了自动化的配置，集成了大量常用的框架和库，支持快速开发Web应用、RESTful服务、批处理应用等。同时，Spring Boot还提供了内嵌的Servlet容器，方便应用程序的部署和运行。总的来说，Spring Boot简化了Spring应用程序的开发和部署过程，降低了开发者的学习成本，使得开发人员能够更高效地构建和部署应用程序。
项目结构
riyi-admin中存放着springboot启动类,controller存放着前后台控制层,resource存放着springboot配置文件,static存放着前台资源
riyi-system,domain存放着实体类,mapper存放着dao层类,service存放着服务层接口与服务层实现类,mapper存放着数据库xml文件
riyi-system中存放着后台vue文件,api存放着ajax.js文件,assets存放着静态资源,components存放着组件,router存放着路由js文件,store存放着vuex存放的信息,utils存放着工具,views存放着界面.
代码分析
后台首页报表
<div id="lineInfo" :style="{ width: '560px', height: '400px' }"></div>先创建一个容器
通常来说，需要在 HTML 中先定义一个 <div> 节点，并且通过 CSS 使得该节点具有宽度和高度。
import * as echarts from 'echarts';导入Apache ECharts
Apache ECharts（原名百度ECharts）是一个由百度开源的可视化图表库，用于在Web应用程序中创建各种交互式的图表和数据可视化展示。ECharts提供了丰富多彩的图表类型，包括折线图、柱状图、饼图、散点图等，同时支持数据的多维度展示和控制。ECharts具有良好的交互性能，支持图表的拖拽、缩放、联动等操作，使得用户能够更直观、更深入地理解数据。ECharts还提供了丰富的配置选项和API，方便开发者根据需求定制和调整图表的外观和行为。由于其功能强大、易用性高，Apache ECharts已经成为Web开发中常用的数据可视化工具之一，被广泛应用于各种Web应用程序中。
let attrInfo = echarts.init(document.getElementById('attrInfo'));
let lineInfo = echarts.init(document.getElementById('lineInfo'));
let lineInfo1 = echarts.init(document.getElementById('lineInfo1'));
let newsInfo = echarts.init(document.getElementById('newsInfo'));初始化ECharts
attrInfo.setOption({title: {text: '景点浏览量和票价统计',left: 'center',top: 0,textStyle: {color: '#555555'}},//鼠标悬停显示X轴和相对应的值tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {top:20,},grid:{left: '3%',right: '4%',containLabel:true},xAxis:{data:that.attrName,},yAxis:{type:"value"},series:[{name:'浏览量',type:'bar',data:that.attrViews},{name:'票价',type:'bar',data:that.attrFare},]});设置图表
ECharts 配置语法 | 菜鸟教程 (runoob.com)
订单
后台
IndentMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ruoyi.system.mapper.IndentMapper"><resultMap id="IndentResult" type="Indent"><id property="iid" column="iid"/><result property="lineid" column="lineid"/><result property="number" column="number"/><result property="userId" column="user_id"/><result property="sid" column="sid"/><result property="addtime" column="addtime"/><association property="line" column="lineid" javaType="Line" resultMap="LineResult"/><association property="user" column="user_id" javaType="SysUser" resultMap="SysUserResult"/></resultMap><resultMap type="Line" id="LineResult"><result property="lineid" column="lineid" /><result property="lid" column="lid" /><result property="lname" column="lname" /><result property="picture" column="picture" /><result property="start" column="start" /><result property="via" column="via" /><result property="end" column="end" /><result property="lprice" column="lprice" /><result property="pageviews" column="pageviews" /><result property="item" column="item" /><result property="introduction" column="introduction" /><result property="addtime" column="addtime" /></resultMap><resultMap type="SysUser" id="SysUserResult"><id property="userId" column="user_id" /><result property="deptId" column="dept_id" /><result property="userName" column="user_name" /><result property="nickName" column="nick_name" /><result property="email" column="email" /><result property="phonenumber" column="phonenumber" /><result property="sex" column="sex" /><result property="avatar" column="avatar" /><result property="password" column="password" /><result property="status" column="status" /><result property="delFlag" column="del_flag" /><result property="loginIp" column="login_ip" /><result property="loginDate" column="login_date" /><result property="createBy" column="create_by" /><result property="createTime" column="create_time" /><result property="updateBy" column="update_by" /><result property="updateTime" column="update_time" /><result property="remark" column="remark" /></resultMap><sql id="selectIndentVo">select * from indent ileft join line lon l.lineid=i.lineidleft join sys_user suon su.user_id=i.user_id</sql><select id="selectIndentList" parameterType="com.ruoyi.system.domain.vo.IndentVo" resultMap="IndentResult"><include refid="selectIndentVo"/><where><if test="start != null and start != ''"> and l.start = #{start}</if><if test="end != null and end != ''"> and l.end = #{end}</if><if test="number != null and number != ''"> and number like concat('%', #{number}, '%')</if><if test="username != null and username != ''"> and su.user_name = #{username}</if><if test="sid != null and sid != ''"> and sid = #{sid}</if><if test="addtime != null "> and addtime = #{addtime}</if></where></select><select id="selectIndentByIid" parameterType="Integer" resultMap="IndentResult"><include refid="selectIndentVo"/>where iid = #{iid}</select><select id="selectIndentListBySid" resultType="com.ruoyi.system.domain.Indent"><include refid="selectIndentVo"/>where sid = #{sid}</select><insert id="insertIndent" parameterType="Indent" useGeneratedKeys="true" keyProperty="iid">insert into indent<trim prefix="(" suffix=")" suffixOverrides=","><if test="iid != null">iid,</if><if test="lineid != null">lineid,</if><if test="number != null and number != ''">number,</if><if test="userId != null">user_id,</if><if test="sid != null">sid,</if><if test="addtime != null">addtime,</if></trim><trim prefix="values (" suffix=")" suffixOverrides=","><if test="iid != null">#{iid},</if><if test="lineid != null">#{lineid},</if><if test="number != null and number != ''">#{number},</if><if test="userId != null">#{userId},</if><if test="sid != null">#{sid},</if><if test="addtime != null">#{addtime},</if></trim></insert><update id="updateIndent" parameterType="Indent">update indent<trim prefix="SET" suffixOverrides=","><if test="iid != null"> and iid = #{iid}</if><if test="lineid != null"> and lineid = #{lineid}</if><if test="number != null and number != ''"> and number = #{number}</if><if test="time != null and time != ''"> and time = #{time}</if><if test="userId != null"> and user_id = #{userId}</if><if test="sid != null "> and sid = #{sid}</if><if test="addtime != null "> and addtime = #{addtime}</if></trim>where iid = #{iid}</update><delete id="deleteIndentByIid" parameterType="Integer">delete from indent where iid = #{iid}</delete><delete id="deleteIndentByIids" parameterType="String">delete from indent where iid in<foreach item="iid" collection="array" open="(" separator="," close=")">#{iid}</foreach></delete>
</mapper>订单表通过lineid连接旅游路线表,通过userId连接用户表
IndentMapper.class
package com.ruoyi.system.mapper;import com.ruoyi.system.domain.Indent;
import com.ruoyi.system.domain.vo.IndentVo;import java.util.List;/*** 订单Mapper接口* @author ruoyi* @date 2024-04-19*/
public interface IndentMapper
{/*** 查询订单* @param iid 订单主键* @return 订单*/public Indent selectIndentByIid(Integer iid);/*** 查询订单列表* @param indentVo 订单* @return 订单集合*/public List<Indent> selectIndentList(IndentVo indentVo);/*** 根据状态查询订单列表* @param indent 订单* @return 订单集合*/public List<Indent> selectIndentListBySid(Indent indent);/*** 新增订单* @param indent 订单* @return 结果*/public int insertIndent(Indent indent);/*** 修改订单* @param indent 订单* @return 结果*/public int updateIndent(Indent indent);/*** 删除订单* @param iid 订单主键* @return 结果*/public int deleteIndentByIid(Integer iid);/*** 批量删除订单* @param iids 需要删除的数据主键集合* @return 结果*/public int deleteIndentByIids(Integer[] iids);
}
IIndentService.class
package com.ruoyi.system.service;import com.ruoyi.system.domain.Indent;
import com.ruoyi.system.domain.Line;
import com.ruoyi.system.domain.vo.IndentVo;import java.util.List;/*** 订单Service接口* * @author ruoyi* @date 2024-04-19*/
public interface IIndentService
{/*** 查询订单* @param iid 订单id* @return 订单*/public Indent selectIndentByIid(Integer iid);/*** 查询景点信息列表* @return 订单集合*/public List<Indent> selectIndentList(IndentVo indentVo);/*** 新增订单* @param indent 订单* @return 结果*/public int insertIndent(Indent indent);/*** 修改订单* @param indent 订单* @return 结果*/public int updateIndent(Indent indent);/*** 批量删除订单* @param iids 需要删除的订单主键集合* @return 结果*/public int deleteIndent(Integer[] iids);/*** 删除订单* @param iid 订单主键* @return 结果*/public int deleteIndent(Integer iid);
}
IndentServiceImpl.class
package com.ruoyi.system.service.impl;import com.ruoyi.system.domain.Indent;
import com.ruoyi.system.domain.vo.IndentVo;
import com.ruoyi.system.mapper.IndentMapper;
import com.ruoyi.system.service.IIndentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;/*** @author hua* @version 1.0* @title IndentServiceImpl* @description 订单业务层处理* @create 2024/4/22 9:58*/
@Service
public class IndentServiceImpl implements IIndentService {@Autowiredprivate IndentMapper indentMapper;/*** 查询订单* @param iid 订单id* @return 订单*/@Overridepublic Indent selectIndentByIid(Integer iid) {return indentMapper.selectIndentByIid(iid);}/*** 查询景点信息列表* @return 订单集合*/@Overridepublic List<Indent> selectIndentList(IndentVo indentVo) {return indentMapper.selectIndentList(indentVo);}/*** 新增订单* @param indent 订单* @return 结果*/@Overridepublic int insertIndent(Indent indent) {return indentMapper.insertIndent(indent);}/*** 修改订单* @param indent 订单* @return 结果*/@Overridepublic int updateIndent(Indent indent) {return indentMapper.updateIndent(indent);}/*** 批量删除订单* @param iids 需要删除的订单主键集合* @return 结果*/@Overridepublic int deleteIndent(Integer[] iids) {return indentMapper.deleteIndentByIids(iids);}/*** 删除订单* @param iid 订单主键* @return 结果*/@Overridepublic int deleteIndent(Integer iid) {return indentMapper.deleteIndentByIid(iid);}
}
IndentController.class
package com.ruoyi.web.controller.system;import com.ruoyi.common.annotation.Log;
import com.ruoyi.common.core.controller.BaseController;
import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.common.core.page.TableDataInfo;
import com.ruoyi.common.enums.BusinessType;
import com.ruoyi.common.utils.poi.ExcelUtil;
import com.ruoyi.system.domain.Indent;
import com.ruoyi.system.domain.vo.IndentVo;
import com.ruoyi.system.service.IIndentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;import javax.servlet.http.HttpServletResponse;
import java.util.List;/*** 订单Controller* * @author ruoyi* @date 2024-04-19*/
@RestController
@RequestMapping("/indents/indent")
public class IndentController extends BaseController
{@Autowiredprivate IIndentService iIndentService;/*** 查询订单列表*/@PreAuthorize("@ss.hasPermi('indents:indent:list')")@GetMapping("/list")public TableDataInfo list(IndentVo indentVo){startPage();List<Indent> list = iIndentService.selectIndentList(indentVo);return getDataTable(list);}/*** 导出订单列表*/@PreAuthorize("@ss.hasPermi('indents:indent:export')")@Log(title = "订单", businessType = BusinessType.EXPORT)@PostMapping("/export")public void export(HttpServletResponse response, IndentVo indentVo){List<Indent> list = iIndentService.selectIndentList(indentVo);ExcelUtil<Indent> util = new ExcelUtil<Indent>(Indent.class);util.exportExcel(response, list, "订单数据");}/*** 获取订单详细信息*/@PreAuthorize("@ss.hasPermi('indents:indent:query')")@GetMapping(value = "/{iid}")public AjaxResult getInfo(@PathVariable("iid") Integer iid){return success(iIndentService.selectIndentByIid(iid));}/*** 新增订单*/@PreAuthorize("@ss.hasPermi('indents:indent:add')")@Log(title = "订单", businessType = BusinessType.INSERT)@PostMappingpublic AjaxResult add(@RequestBody Indent indent){return toAjax(iIndentService.insertIndent(indent));}/*** 修改订单*/@PreAuthorize("@ss.hasPermi('indents:indent:edit')")@Log(title = "订单", businessType = BusinessType.UPDATE)@PutMappingpublic AjaxResult edit(@RequestBody Indent indent){return toAjax(iIndentService.updateIndent(indent));}/*** 删除订单*/@PreAuthorize("@ss.hasPermi('indents:indent:remove')")@Log(title = "订单", businessType = BusinessType.DELETE)@DeleteMapping("/{iids}")public AjaxResult remove(@PathVariable Integer[] iids){return toAjax(iIndentService.deleteIndent(iids));}
}
getDataTable(list) 将查询结果封装成 TableDataInfo 对象后返回,方法使用mvc模式,控制层调用服务层,服务层调用mapper层,mapper层调用数据库xml文件完成后台数据交互.
package com.ruoyi.common.core.page;import java.io.Serializable;
import java.util.List;/*** 表格分页数据对象* * @author ruoyi*/
public class TableDataInfo implements Serializable
{private static final long serialVersionUID = 1L;/** 总记录数 */private long total;/** 列表数据 */private List<?> rows;/** 消息状态码 */private int code;/** 消息内容 */private String msg;/*** 表格数据对象*/public TableDataInfo(){}/*** 分页* * @param list 列表数据* @param total 总记录数*/public TableDataInfo(List<?> list, int total){this.rows = list;this.total = total;}public long getTotal(){return total;}public void setTotal(long total){this.total = total;}public List<?> getRows(){return rows;}public void setRows(List<?> rows){this.rows = rows;}public int getCode(){return code;}public void setCode(int code){this.code = code;}public String getMsg(){return msg;}public void setMsg(String msg){this.msg = msg;}
}
@PreAuthorize 是 Spring Security 框架中用来进行方法级别安全控制的注解。它用于在方法执行之前检查调用者是否有合适的权限。你可以在服务层的方法上添加 @PreAuthorize 注解，以限制只有特定角色或权限的用户才能调用该方法。@PreAuthorize 支持使用 Spring Expression Language (SpEL) 来编写更加复杂的权限判断逻辑。你还可以把 @PreAuthorize 与其他 Spring 安全注解结合使用，以实现更强大和灵活的安全控制。
@PreAuthorize("@ss.hasPermi('indents:indent:list')")return success(iIndentService.selectIndentByIid(iid));：此行表示方法将通过 success 方法封装服务层返回的数据，并最终返回一个 AjaxResult 对象。
package com.ruoyi.common.core.domain;import java.util.HashMap;
import java.util.Objects;
import com.ruoyi.common.constant.HttpStatus;
import com.ruoyi.common.utils.StringUtils;/*** 操作消息提醒* * @author ruoyi*/
public class AjaxResult extends HashMap<String, Object>
{private static final long serialVersionUID = 1L;/** 状态码 */public static final String CODE_TAG = "code";/** 返回内容 */public static final String MSG_TAG = "msg";/** 数据对象 */public static final String DATA_TAG = "data";/*** 初始化一个新创建的 AjaxResult 对象，使其表示一个空消息。*/public AjaxResult(){}/*** 初始化一个新创建的 AjaxResult 对象* * @param code 状态码* @param msg 返回内容*/public AjaxResult(int code, String msg){super.put(CODE_TAG, code);super.put(MSG_TAG, msg);}/*** 初始化一个新创建的 AjaxResult 对象* * @param code 状态码* @param msg 返回内容* @param data 数据对象*/public AjaxResult(int code, String msg, Object data){super.put(CODE_TAG, code);super.put(MSG_TAG, msg);if (StringUtils.isNotNull(data)){super.put(DATA_TAG, data);}}/*** 返回成功消息* * @return 成功消息*/public static AjaxResult success(){return AjaxResult.success("操作成功");}/*** 返回成功数据* * @return 成功消息*/public static AjaxResult success(Object data){return AjaxResult.success("操作成功", data);}/*** 返回成功消息* * @param msg 返回内容* @return 成功消息*/public static AjaxResult success(String msg){return AjaxResult.success(msg, null);}/*** 返回成功消息* * @param msg 返回内容* @param data 数据对象* @return 成功消息*/public static AjaxResult success(String msg, Object data){return new AjaxResult(HttpStatus.SUCCESS, msg, data);}/*** 返回警告消息** @param msg 返回内容* @return 警告消息*/public static AjaxResult warn(String msg){return AjaxResult.warn(msg, null);}/*** 返回警告消息** @param msg 返回内容* @param data 数据对象* @return 警告消息*/public static AjaxResult warn(String msg, Object data){return new AjaxResult(HttpStatus.WARN, msg, data);}/*** 返回错误消息* * @return 错误消息*/public static AjaxResult error(){return AjaxResult.error("操作失败");}/*** 返回错误消息* * @param msg 返回内容* @return 错误消息*/public static AjaxResult error(String msg){return AjaxResult.error(msg, null);}/*** 返回错误消息* * @param msg 返回内容* @param data 数据对象* @return 错误消息*/public static AjaxResult error(String msg, Object data){return new AjaxResult(HttpStatus.ERROR, msg, data);}/*** 返回错误消息* * @param code 状态码* @param msg 返回内容* @return 错误消息*/public static AjaxResult error(int code, String msg){return new AjaxResult(code, msg, null);}/*** 是否为成功消息** @return 结果*/public boolean isSuccess(){return Objects.equals(HttpStatus.SUCCESS, this.get(CODE_TAG));}/*** 是否为警告消息** @return 结果*/public boolean isWarn(){return Objects.equals(HttpStatus.WARN, this.get(CODE_TAG));}/*** 是否为错误消息** @return 结果*/public boolean isError(){return Objects.equals(HttpStatus.ERROR, this.get(CODE_TAG));}/*** 方便链式调用** @param key 键* @param value 值* @return 数据对象*/@Overridepublic AjaxResult put(String key, Object value){super.put(key, value);return this;}
}
前台
indent.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>我的订单</title><link rel="stylesheet" type="text/css" href="css/reset.css" /><link rel="stylesheet" type="text/css" href="css/index.css" /><link rel="stylesheet" type="text/css" href="css/swiper.min.css" /><link rel="stylesheet" type="text/css" href="css/iconfont.css" /><link rel="stylesheet" type="text/css" href="css/serve.css" /><link rel="stylesheet" type="text/css" href="css/animate.min.css" /><script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function () {var token = localStorage.getItem("token")$.ajax({url: "/html/IndentList",type: "get",dataType: "json",data:{userId:localStorage.getItem("userId")},success: function (result) {if(token!=null&&token!="") {$("#userName").html("欢迎您: " + localStorage.getItem("userName"));$("#email").html(localStorage.getItem("email"));console.log(result);var html="";result.rows.forEach(item =>{html+="<div style=\"border: #d9d9d9 1px solid; margin-top: 30px;color: #3e3e3e;\">\n" +" <div style=\"padding: 10px; display: flex;background: #f6f6f6;height: 20px\">\n" +" <input type=\"checkbox\" value=\"index1\">\n" +" <div style=\"margin-left: 5px;display: flex\">订单号:<a\n" +" style=\"color: #4ad1e5;margin-left: 5px;\">"+item.number+"</a></div>\n" +" <div style=\"margin-left: 20px\">预订日期: "+item.addtime+"</div>\n" +" <a style=\"margin-left: 20px;color: #4ad1e5\" " +"href= \"javascript:void(0)\" onclick= \"deleteIndent(" + item.iid + ")\">删除订单</a>\n" +" </div>\n" +" <div style=\"margin-left: 30px; display: flex;justify-content: space-between\">\n" +" <div style=\"margin-left: 10px\">\n" +" <h2 style=\"margin: 5px; font-weight:bold\">"+item.line.lname+"</h2>\n" +" <div style=\"margin: 5px\">使用人: "+item.user.nickName+"</div>\n" +" </div>";if (item.sid==="已支付") {html += "<div style=\" margin: 10px\">\n" +" <div style=\"color: #61611d;\"><h2>已支付</h2></div>\n" +" <div style=\"font-weight:bold;font-size: 20px;margin-top: 10px\">"+item.line.lprice+"</div>\n" +" </div>\n" +" </div>\n" +" <div style=\"display: flex; justify-content: flex-end\">\n" +" <div style='width: 100px;height: 30px; font-size: 18px;\n" +" text-align: center;border-radius: 4px;\n" +" background: #07cb07; margin: 10px;\n" +" border: 2px #07cb07;' onclick='setSid(\"已完成\","+item.iid+")'>确定\n" +" </div>\n" +" <div style='width: 100px;height: 30px;font-size: 18px;\n" +" text-align: center;border-radius: 4px;\n" +" background: #e01313; margin: 10px;\n" +" border: 2px #e01313;' onclick='setSid(\"未支付\","+item.iid+")'>退款\n" +" </div>\n" +" </div>\n" +"</div>" +" <br/>";}if(item.sid==="未支付"){html +="<div style=\" margin: 10px\">\n" +" <div style=\"color: #e01313;\"><h2>未支付</h2></div>\n" +" <div style=\"font-weight:bold;font-size: 20px;margin-top: 10px\">$1200</div>\n" +" </div>\n" +" </div>\n" +" <div style=\"display: flex; justify-content: flex-end\">\n" +" <div style='width: 100px;height: 30px; font-size: 18px;\n" +" text-align: center;border-radius: 4px;\n" +" background: #61611d; margin: 10px;color: #ffffff;\n" +" border: 2px #61611d;' onclick='setSid(\"已支付\","+item.iid+")'>去支付\n" +" </div>" +" </div>\n" +"</div>"+"<br/>";}if(item.sid==="已完成"){html += "<div style=\" margin: 10px\">\n" +" <div style=\"color: #07cb07;\"><h2>已完成</h2></div>\n" +" <div style=\"font-weight:bold;font-size: 20px;margin-top: 10px\">$1200</div>\n" +" </div>\n" +" </div>" +" </div>\n" +"</div>" +"<br/>";}})$("#IndentList").html(html);}else {location.href = "login.html";}}});});function setSid(num,iid){$.ajax({url: "/html/updateIndent",data: {sid:num,id:iid},type: "put",dataType: "json",success: function (result) {location.reload();}});}function deleteIndent(iid) {$.ajax({url: "/html/deteleIndent",data: {id:iid},type: "detele",dataType: "json",success: function (result) {location.reload();}});}function logOut(){window.localStorage.clear();location.href="login.html";}</script>
</head><body>
<!--头部-->
<div class="headr"><div class="headTop"><div class="container"><div class="head-z"><div class="logo-z fl"><a href="index.html"><img src="./img/index/1484553384812.png" /></a></div><div class="phone-z fr"><p><i class="iconfont icon-dianhuatianchong"></i><span id="userName"></span><br /><a href="personal.html" id="email"></a><a href="javascript:void(0)" onclick="logOut()">退出登录</a></p></div><div class="clear"></div></div></div></div><div id="headnav" class=""><div class="container"><div id="head" class="head"><ul><li><a href="index.html" onclick="showname()"><span>首页</span></a></li><li ><a href="line.html" onclick="showname()"><span>旅游线路</span></a></li><li><a href="attractions.html" onclick="showname()"><span>景点信息</span></a></li><li><a href="food.html" onclick="showname()"><span>地方美食</span></a></li><li><a href="news.html" onclick="showname()"><span>新闻</span></a></li><li><a href="personal.html" onclick="showname()"><span>个人中心</span></a></li><li><a href="indent.html" onclick="showname()"><span>我的订单</span></a></li></ul></div></div></div>
</div><!--小导航栏-->
<div class="p-nav"><div class="container"><div class="pro-menu"><ul><li><a class="active">全部</a></li><li class="short-line">|</li><li><a>未支付</a></li><li class="short-line">|</li><li><a>已支付</a></li><li class="short-line">|</li><li><a>已完成</a></li></ul></div><div id="IndentList"><div style="border: #d9d9d9 1px solid; margin-top: 30px;color: #3e3e3e"><div style="padding: 10px; display: flex;background: #f6f6f6"><input type="checkbox" value="index1"><div style="margin-left: 5px;display: flex"><p>订单号:</p><a style="color: #4ad1e5;margin-left: 5px;">25928596871</a></div><div style="margin-left: 20px">预订日期: 2023-08-20</div><a style="margin-left: 20px;color: #4ad1e5">删除订单</a></div><div style="margin-left: 30px; display: flex;justify-content: space-between"><div style="margin-left: 10px"><h2 style="margin: 5px; font-weight:bold">宁乡-顺风车</h2><div style="margin: 5px">途径地: </div><div style="margin: 5px">使用人: </div></div><div style=" margin: 10px"><div style="color: green;"><h2>已完成</h2></div><div style="font-weight:bold;font-size: 20px;margin-top: 10px">$24.4</div></div></div></div><br/></div></div>
</div>
<!--侧边栏，微信、微博、手机、返回顶部-->
<a href="#"><div class="little-ico weixin"><i class="iconfont icon-goutong"></i></div>
</a>
<a href="#"><div class="little-ico weibo"><i class="iconfont icon-sinaweibo"></i></div>
</a>
<a href="#"><div class="little-ico shouji"><i class="iconfont icon-shouji"></i></div>
</a>
<a id="to-top" href="#"><div class="to-top"><i class="iconfont icon-top"></i></div>
</a>
<!--二维码-->
<div id="bg_black" class="back-cover nosee"><div class="weixin-ma"><img src="img/index/1438424052624.jpg" /><p>微信扫一扫</p></div>
</div>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Validform_v5.3.2_min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/wow.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">$(document).ready(function() {$(".p-nav .pro-menu a").click(function() {$(this).parent("li").siblings("li").children("a").removeClass("active");$(this).addClass("active");})})
</script>
</body></html>使用localStorage获取用户的token和userId。
通过AJAX请求/html/IndentList接口，获取订单列表。
如果用户已登录，显示欢迎信息和邮箱，并且填充订单列表。
如果用户未登录，重定向到登录页面。
setSid(num,iid)：更新订单的状态（如设置为“已支付”或“已完成”）。
deleteIndent(iid)：删除订单。
logOut()：清除localStorage中的用户信息并重定向到登录页面。
点击导航栏中的“全部”、“未支付”、“已支付”、“已完成”选项时，添加active类使选定项高亮。
index.vue
<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="起点" prop="start"><el-input v-model="queryParams.start" placeholder="请输入起点" clearable @keyup.enter.native="handleQuery" /></el-form-item><el-form-item label="终点" prop="end"><el-input v-model="queryParams.end" placeholder="请输入终点" clearable @keyup.enter.native="handleQuery" /></el-form-item><el-form-item label="订单号" prop="number"><el-input v-model="queryParams.number" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery" /></el-form-item><el-form-item label="预订人" prop="username"><el-input v-model="queryParams.username" placeholder="请输入预订人" clearable @keyup.enter.native="handleQuery" /></el-form-item><el-form-item label="添加时间" prop="addtime"><el-date-picker clearable v-model="queryParams.addtime" type="date" value-format="yyyy-MM-dd"placeholder="请选择添加时间"></el-date-picker></el-form-item><el-form-item label="状态" prop="sid"><el-select v-model="queryParams.sid" placeholder="请选择状态"><el-option v-for="item in sidOptions" :key="item.key" :value="item.value" /></el-select></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"v-hasPermi="['system:indent:add']">新增</el-button></el-col><el-col :span="1.5"><el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"v-hasPermi="['system:indent:edit']">修改</el-button></el-col><el-col :span="1.5"><el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"v-hasPermi="['system:indent:remove']">删除</el-button></el-col><el-col :span="1.5"><el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"v-hasPermi="['system:indent:export']">导出</el-button></el-col><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row><el-table v-loading="loading" :data="indentList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="订单id" align="center" prop="iid" /><el-table-column label="订单号" align="center" prop="number" /><el-table-column label="线路编号" align="center" prop="line.lid" /><el-table-column label="线路名称" align="center" prop="line.lname" /><el-table-column label="价格" align="center" prop="line.lprice" /><el-table-column label="预订人姓名" align="center" prop="user.userName" /><el-table-column label="联系方式" align="center" prop="user.phonenumber" /><el-table-column label="状态" align="center" prop="sid" /><el-table-column label="添加时间" align="center" prop="addtime" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.addtime, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"v-hasPermi="['system:indent:edit']">修改</el-button><el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"v-hasPermi="['system:indent:remove']">删除</el-button><el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"v-hasPermi="['system:indent:getLine', 'system:indent:getUser']"><el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button><el-dropdown-menu slot="dropdown"><el-dropdown-item command="getLine" v-hasPermi="['system:indent:list']">查看旅游线路</el-dropdown-item><el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"v-hasPermi="['system:indent:list']">分配角色</el-dropdown-item></el-dropdown-menu></el-dropdown></template></el-table-column></el-table><pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"@pagination="getList" /><!-- 添加或修改预定对话框 --><el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-form ref="form" :model="form.lineid" :rules="rules" label-width="80px"><el-form-item label="订单号" prop="lineid"><el-select v-model="form.lineid" placeholder="请选择"><el-option v-for="item in lines" key="item.lineid" :label="item.lname" :value="item.lineid"></el-option></el-select></el-form-item><el-form-item label="订单号" prop="number"><el-input v-model="form.number" placeholder="请输入订单号" /></el-form-item><el-form-item label="预订人" prop="userId"><el-select v-model="form.userId" placeholder="请选择"><el-option v-for="item in users" key="item.userId" :label="item.userName" :value="item.userId"></el-option></el-select></el-form-item><el-form-item label="状态" prop="sid"><el-select v-model="form.sid" placeholder="请选择状态"><el-option v-for="item in sidOptions" key="item.key" :value="item.value" /></el-select></el-form-item><el-form-item label="添加时间" prop="addtime"><el-date-picker clearable v-model="form.addtime" type="date" value-format="yyyy-MM-dd" placeholder="请选择添加时间"></el-date-picker></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog></div>
</template><script>
import { addIndent, delIndent, getIndent, listIndent, updateIndent } from "@/api/indents/indent";
import { listLine } from "@/api/routing/line";
import { listUser } from "@/api/system/user";
export default {name: "Indent",data() {return {// 遮罩层loading: true,lines: [],users: [],// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 预定表格数据indentList: [],// 弹出层标题title: "",// 是否显示弹出层open: false,sidOptions: [{ key: 1, value: "已支付" }, { key: 0, value: "未支付" }, { key: 2, value: "已完成" }],// 查询参数2queryParams: {pageNum: 1,pageSize: 10,lineid: null,lid: null,lname: null,start: null,end: null,lprice: null,number: null,time: null,uname: null,tel: null,sid: null,username: null,addtime: null},// 表单参数form: {},// 表单校验rules: {// lineid: [// { required: true, message: "订单号不能为空", trigger: "blur" }// ],// number: [// { required: true, message: "线路编号不能为空", trigger: "change" }// ],// sid: [// { required: true, message: "状态不能为空", trigger: "change" }// ],// userId: [// { required: true, message: "预订人姓名不能为空", trigger: "change" }// ],// addtime: [// { required: true, message: "添加时间不能为空", trigger: "blur" }// ]}};},created() {this.getLines();this.getList();this.getUser();},methods: {/** 查询预定列表 */getList() {this.loading = true;listIndent(this.queryParams).then(response => {console.log(response)this.indentList = response.rows;this.total = response.total;this.loading = false;});},getLines() {listLine().then(response => {console.log(response)this.lines = response.rows;})},getUser() {listUser().then(response => {console.log(response)this.users = response.rows;})},// 取消按钮cancel() {this.open = false;this.reset();},// 表单重置reset() {this.form = {iid: null,lineid: null,lid: null,lname: null,start: null,via: null,end: null,lprice: null,number: null,time: null,uname: null,tel: null,sid: null,rmark: null,username: null,addtime: null};this.resetForm("form");},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map(item => item.iid)this.single = selection.length !== 1this.multiple = !selection.length},/** 新增按钮操作 */handleAdd() {this.reset();this.open = true;this.title = "添加预定";},/** 修改按钮操作 */handleUpdate(row) {this.reset();const iid = row.iid || this.idsgetIndent(iid).then(response => {this.form = response.data;this.open = true;this.title = "修改预定";});},/** 提交按钮 */submitForm() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.iid != null) {updateIndent(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {addIndent(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});},/** 删除按钮操作 */handleDelete(row) {const iids = row.iid || this.ids;this.$modal.confirm('是否确认删除预定编号为"' + iids + '"的数据项？').then(function () {return delIndent(iids);}).then(() => {this.getList();this.$modal.msgSuccess("删除成功");}).catch(() => { });},/** 导出按钮操作 */handleExport() {this.download('system/indent/export', {...this.queryParams}, `indent_${new Date().getTime()}.xlsx`)},handleCommand(command, row) {switch (command) {case "getLine":this.getLine(row.lineid);break;case "getUser":this.getUser(row.userId);break;default:break;}},/** 分配角色操作 */getLine: function (id) {console.log(id);const userId = id;this.$router.push("/system/index/getLine/" + userId);},},computed: {}
};
</script>
总结
在这次的小组项目中，我们都收获颇多，组内积极讨论，互相帮助。 最开始，我们组开会讨论系统的大致方向，确定项目的题目，严格按照计划的时间进行。在制定项目计划时，大家积极讨论，提出各自的意见，选择自己要完成任务模块，最后确定了项目初期的功能模块。 在开发过程中，我们首先会完成基本的功能和展示效果，再在这个基础上，我们不断地优化用户界面和交互设计，力求提供直观、便捷的用户体验。开发过程中，我们也肯定或多或少遇到了相同或不同的问题，我们首先都是尝试自己解决，当自己无法解决当前问题时，会去求助组内成员，大家集思广益，一起解决问题，在这一点上，我觉得我们组做的很好，大部分的问题我们都可以自己内部解决。 项目的成功实施充分证明了团队合作的重要性。我们通过有效的沟通和协调，每个人都分工明确，每个团队成员都能在各自的岗位上发挥最大的效能。 总的来说，这个项目不仅提升了我们的技术水平，也增强了我们的团队合作和问题解决能力，为今后的项目实施和职业发展奠定了坚实的基础。
