2025 后端自学UNIAPP【项目实战：旅游项目】4、完善首页（附源码）

本文介绍了一个基于Vue和UniApp的旅游景点展示应用的前端实现。应用包含搜索框、轮播图、分类标签和景点列表瀑布流等功能。前端代码通过index.vue文件实现，使用up-search、up-swiper、up-tabs和up-waterfall等组件构建页面。景点信息通过API获取，支持分类筛选和瀑布流加载。后端通过my_api.js和my_http.js封装HTTP请求，与数据库交互获取景点

假客套

289人浏览 · 2025-05-11 00:28:33

假客套 · 2025-05-11 00:28:33 发布

一、先看效果

二、前端源码

1、项目结构如图

2、index.vue

<template>
	<view class="container">
		<!-- 搜索框 -->
		<up-search class="search" bgColor="#f4f4f4" placeholder="搜索景点" v-model="keyword"></up-search>

		<!-- 轮播图 -->
		<up-swiper class="swiper" v-if="bannerList.length" :list="bannerList" keyName="img" radius="8" height="160"
			autoplay showTitle></up-swiper>


		<!-- 分类列表 tabs标签 -->
		<up-tabs class="type-list" v-if="bannerList.length" :list="typeList" keyName="title" @click="getTypeId">
		</up-tabs>

		<!-- 景点列表 瀑布流 -->
		<view class="attraction-list">
			<!-- 左侧 -->
			<up-waterfall v-model="attractionList" ref="uWaterfallRef">
				<template v-slot:left="{leftList}">
					<view class="attraction-warter" v-for="(item,index) in leftList" :key="index">
						<!-- 景点封面 -->
						<up-lazy-load threshold="-450" border-radius="10" :image="formatImagePath(item.cover)"
							:index="index"></up-lazy-load>

						<!-- 景点标题 -->
						<view class="attraction-title">
							{{item.title}}
						</view>
						<!-- 景点简介 -->
						<view class="attraction-introduction">
							{{item.introduction}}
						</view>
						<!-- 景点营业时间 -->
						<view class="attraction-times">
							营业时间:{{item.inbusinessTime1}}~{{item.inbusinessTime2}}
						</view>
						<!-- 景点其他信息 -->
						<view class="attraction-other">
							<!-- 是否需要预约 -->
							<view class="attraction-pay">
								{{item.enableAppointment?"要预约":"免预约"}}
							</view>
							<!-- 是否需要付费 -->
							<view class="attraction-appointment">
								{{item.enablePay?"购买门票":"无需门票"}}
							</view>
						</view>
						<!-- 是否需要推荐 -->
						<view class="isDot">
							推荐
						</view>
					</view>
				</template>
				<!-- 右侧 -->
				<template v-slot:right="{rightList}">
					<view class="attraction-warter" v-for="(item,index) in rightList" :key="index">
						<!-- 景点封面 -->
						<up-lazy-load threshold="-450" border-radius="10" :image="item.cover"
							:index="index"></up-lazy-load>

						<!-- 景点标题 -->
						<view class="attraction-title">
							{{item.title}}
						</view>
						<!-- 景点简介 -->
						<view class="attraction-introduction">
							{{item.introduction}}
						</view>
						<!-- 景点营业时间 -->
						<view class="attraction-times">
							营业时间:{{item.inbusinessTime1}}~{{item.inbusinessTime2}}
						</view>
						<!-- 景点其他信息 -->
						<view class="attraction-other">
							<!-- 是否需要预约 -->
							<view class="attraction-pay">
								{{item.enableAppointment?"要预约":"免预约"}}
							</view>
							<!-- 是否需要付费 -->
							<view class="attraction-appointment">
								{{item.enablePay?"购买门票":"无需门票"}}
							</view>
						</view>
						<!-- 是否需要推荐 -->
						<view class="isDot">
							推荐
						</view>
					</view>
				</template>

			</up-waterfall>
		</view>
		<view v-if="showTopBtn" @click="toTop" class="topClass">
			<up-icon name="arrow-upward" color="#fff" size="28"></up-icon>
		</view>
	</view>
</template>

<script setup>
	// 引入api
	import {
		getBannerList,
		getTypeList,
		getAttractionList
	} from '../../api/my_api'
	// 生命周期，进来就加载
	import {
		onLoad,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app'
	//vue
	import {
		ref,
		reactive
	} from 'vue'

	// 定义搜索的关键字
	const keyword = ref('')
	//轮播图列表
	const bannerList = ref([])
	// 分类列表
	const typeList = ref([])
	//景点类型ID
	const typeId = ref('')
	//景点列表
	const attractionList = ref([])
	//滚动是否显示↑箭头图标按钮
	const showTopBtn = ref(false)

	// 先定义 loadAttractionList 函数
	const loadAttractionList = () => {

		getAttractionList(typeId.value).then(res => {
			attractionList.value = res
		})

	}
	// 在数据中或方法里转换路径
	const formatImagePath = (path) => {
		return path.replace('../../', '/')
	}
	//  然后定义 onLoad
	onLoad(() => {
		//获取banner结果列表
		getBannerList().then(res => {
			//将获取的值赋值给轮播图数组变量
			bannerList.value = res
		})
		//获取分类结果列表
		getTypeList().then(res => {
			//将获取的值赋值给轮播图数组变量
			typeList.value = [{
					id: '',
					title: '推荐'
				},
				...res
			]
		})

		// 加载景点列表
		loadAttractionList()

	})

	// 获取分类ID
	const getTypeId = (item) => {
		typeId.value = item.id
		// 清空之前的景点列表
		attractionList.value = []
		// 重新获取景点列表
		loadAttractionList()
		//多点假数据，实现瀑布流效果
		setTimeout(() => {
			addRandomData()
		}, 1000)
	}


	// 页面触底
	onReachBottom(() => {
		console.log("触底啦")
		//多点假数据，实现瀑布流效果
		setTimeout(() => {
			addRandomData()
		}, 1000)
	})


	//多点假数据，实现瀑布流效果
	const addRandomData = () => {
		for (let i = 0; i < 10; i++) {
			let index = uni.$u.random(0, attractionList.value.length - 1)
			let item = JSON.parse(JSON.stringify(attractionList.value[index]))
			item.id = uni.$u.guid()
			attractionList.value.push(item)
		}
	}
	//检测上下互动的滚动条
	onPageScroll((e) => {
		// console.log("滚动啦")
		if (e.scrollTop > 0) {
			showTopBtn.value = true
		} else {
			showTopBtn.value = false
		}
	})

	// 回到顶部
	const toTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		})
	}
</script>
<style>
	page{
		background-color: #efefef;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 20rpx;

		// 轮播图
		.swiper {
			margin-top: 20rpx;

		}

		// 分类列表
		.type-list {
			margin-top: 20rpx;
		}

		// 景点列表
		.attraction-list {
			margin-top: 20rpx;

			// 瀑布流
			.attraction-warter {
				margin: 10rpx 10rpx 10rpx 0rpx;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 16rpx;
				position: relative;

				// 景点标题
				.attraction-title {
					font-size: 30rpx;
					margin-top: 10rpx;
					color: #303133;
				}

				// 景点简介
				.attraction-introduction {
					font-size: 20rpx;
					margin-top: 10rpx;
					color: #c2c6ce;
				}

				// 景点时间
				.attraction-times {
					font-size: 24rpx;
					margin-top: 10rpx;
					color: #777;
				}

				// 景点其他信息
				.attraction-other {
					display: flex;
					margin-top: 10rpx;

					// 景点是否需要付费
					.attraction-pay {
						border: 1px solid orange;
						color: orange;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						padding: 4rpx 14rpx;
						border-radius: 50rpx;
					}

					// 景点是否需要预约
					.attraction-appointment {
						border: 1px solid #00afff;
						color: #00afff;
						margin-left: 20rpx;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						padding: 4rpx 14rpx;
						border-radius: 50rpx;
					}
				}

				// 推荐
				.isDot {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					font-size: 24rpx;
					color: #fff;
					line-height: 32rpx;
					background-color: red;
					text-align: center;
					border-radius: 10rpx;
					padding: 4rpx 10rpx;
				}
			}
		}

		// 回到顶部
		.topClass {
			position: fixed;
			bottom: 120rpx;
			right: 30rpx;
			background-color: rgba(0, 0, 0, 0.5);
			padding: 20rpx;
			width: 44rpx;
			height: 44rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>

3、my_api.js

// 引入公共的请求封装
import http from './my_http.js'

// 获取bannner列表
export const getBannerList=()=>{
	return http('/banner/list')
}
// 获取景点列表（支持传入typeId参数）
export const getTypeList = () => {
 	return http('/type/list')
}
// 获取景点列表
export const getAttractionList=(typeId = '')=>{
	// 如果有typeId就拼接到URL，没有就不加
	const url = typeId ? `/attraction/list?typeId=${typeId}` : '/attraction/list'
	return http(url)

}

4、my_http.js

/**
 * 基础API请求地址（常量，全大写命名规范）
 * @type {string}
 * @constant
 */
let BASE_URL = 'https://自己的基础接口URL/'
 
 
/**
 * 封装的HTTP请求核心函数
 * @param {string} url - 请求的接口路径（不需要包含基础接口URL）
 * @param {Object} [data={}] - 请求参数，默认为空对象
 * @param {string} [method='GET'] - HTTP方法，默认GET,支持GET/POST/DELETE/PUT等
 * @returns {Promise} - 返回Promise便于链式调用
 * 
 */
export default function http(url, data = {}, method = 'GET') {
	// 返回一个Promise对象，支持外部链式调用
	return new Promise((resolve, reject) => {
		// 调用uni-app的底层请求API
		uni.request({
			// 拼接完整请求地址（基础接口URL +  请求的接口路径）
			url: BASE_URL + url,
 
			// 请求参数（GET请求时会自动转为query string）
			data: data,
 
			// 请求方法（转换为大写保证兼容性）
			method: method.toUpperCase(),
 
			// 请求头配置
			header: {
				// 从本地存储获取token，没有就位空
				'token': uni.getStorageSync('token') || '',
				// 默认JSON格式
				'Content-Type': 'application/json'
			},
 
			// 请求成功回调（注意：只要收到服务器响应就会触发，无论HTTP状态码）
			success: (res) => {
				/* HTTP层状态码处理（4xx/5xx等也会进入success回调） */
				if (res.statusCode !== 200) {
					const errMsg = `[${res.statusCode}]${res.errMsg || '请求失败'}`
					showErrorToast(errMsg)
					// 使用Error对象传递更多错误信息
					reject(errMsg)
				}
 
				/* 业务层状态码处理（假设1表示成功） */
				if (res.data.code === 1) {
					// 提取业务数据（约定data字段为有效载荷）
					resolve(res.data.data)
				} else {
					// 业务错误处理
					const errMsg = res.data.msg || `业务错误[${res.data.code}]`
					showErrorToast(errMsg)
					reject(res.data.msg)
				}
			},
 
			// 请求失败回调（网络错误、超时等）
			fail: (err) => {
				const errMsg = `网络连接失败: ${err.errMsg || '未知错误'}`
				showErrorToast(errMsg)
				reject(new Error(errMsg))
			},
 
 
		})
	})
}
 
/**
 * 显示统一格式的错误提示（私有工具方法）
 * @param {string} message - 需要显示的错误信息
 * @private
 */
function showErrorToast(message) {
	uni.showToast({
		title: message, // 提示内容
		icon: 'none', // 不显示图标
		duration: 3000 // 3秒后自动关闭
	})
}

5、tabbar是换了图片，pages.json中配置如下，图标在阿里巴巴图标库中找的

{
	"easycom": {
		"autoscan": true,
		// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
		"custom": {
			"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
			"^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
		}
	},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			// 页面路径
			"path": "pages/index/index",
			"style": {
				// 页面标题
				"navigationBarTitleText": "首页"
			}
		},
		{
			// 页面路径
			"path": "pages/favourite/favourite",
			"style": {
				// 页面标题
				"navigationBarTitleText": "我的收藏"
			}
		},
		{
			// 页面路径
			"path": "pages/personal_center/personal_center",
			"style": {
				// 页面标题
				"navigationBarTitleText": "个人中心"
			}
		}
	],
	// 底部导航tabBar
	"tabBar": {
		// 所有底部导航文字颜色
		"color": "#8183ff",
		// 所有底部导航文字选中后的颜色
		"selectedColor": "#0901ff",
		// 所有底部导航背景色颜色
		"backgroundColor": "#fff",
		// 底部导航列表
		"list": [
			// 第一个导航：
			// text：底部导航文本，
			// pagePath：底部导航链接路径，例如如果是favourte页面路径，那么点击就会跳转到我的收藏页面
			// iconPath：底部导航图标，这里是uniapp默认的
			{

				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static//tabbar/首页.png"
			},
			{
				"text": "我的收藏",
				"pagePath": "pages/favourite/favourite",
				"iconPath": "static/tabbar/最爱.png"
			},
			{
				"text": "个人中心",
				"pagePath": "pages/personal_center/personal_center",
				"iconPath": "static/tabbar/我的.png"
			}
		]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

三、数据库文件

-- phpMyAdmin SQL Dump
-- version 5.1.3
-- https://www.phpmyadmin.net/
--
-- 主机： localhost
-- 生成日期： 2025-05-11 00:12:07
-- 服务器版本： 8.0.12
-- PHP 版本： 7.3.4

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- 数据库： `travel`
--

-- --------------------------------------------------------

--
-- 表的结构 `appointment`
--

CREATE TABLE `appointment` (
  `id` int(11) NOT NULL COMMENT '预约ID',
  `user_id` int(11) DEFAULT NULL COMMENT '预约用户,外键用户ID',
  `attraction_id` int(11) DEFAULT NULL COMMENT '预约的景点,外键景点ID',
  `appointment_num` varchar(30) DEFAULT NULL COMMENT '预约编号',
  `cancel_num` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '取消预约编号',
  `appointment_date` date DEFAULT NULL COMMENT '预约日期',
  `appointment_time1` time DEFAULT NULL COMMENT '预约时间开始',
  `appointment_time2` time DEFAULT NULL COMMENT '预约时间结束',
  `name` varchar(20) DEFAULT NULL COMMENT '预约姓名',
  `tel` varchar(11) DEFAULT NULL COMMENT '预约电话',
  `idcard` varchar(18) DEFAULT NULL COMMENT '预约身份证号',
  `status1` enum('true','false') CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT 'false' COMMENT '预约是否成功',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `status2` enum('true','false') CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT 'false' COMMENT '预约是否核销',
  `offset_time` datetime DEFAULT NULL COMMENT '核销时间',
  `status3` enum('true','false') CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT 'false' COMMENT '预约是否过期',
  `expire_time` datetime DEFAULT NULL COMMENT '过期时间',
  `status4` enum('true','false') CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT 'false' COMMENT '预约是否取消',
  `cancel_time` datetime DEFAULT NULL COMMENT '取消时间',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='预约信息';

-- --------------------------------------------------------

--
-- 表的结构 `attraction`
--

CREATE TABLE `attraction` (
  `id` int(11) NOT NULL COMMENT '景点ID',
  `title` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '景点标题',
  `cover` text CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '景点封面',
  `introduction` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '景点简介',
  `start` int(11) DEFAULT NULL COMMENT '景点评分',
  `browse` int(11) DEFAULT NULL COMMENT '浏览量',
  `img` text CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '照片链接',
  `description` text CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '景点详情',
  `inbusiness_time1` time DEFAULT NULL COMMENT '营业时间开始',
  `inbusiness_time2` time DEFAULT NULL COMMENT '营业时间结束',
  `address` varchar(100) DEFAULT NULL COMMENT '景点地址',
  `province` varchar(15) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '景点省',
  `city` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '景点市',
  `area` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '景点区',
  `longitude` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '景点经度',
  `latitude` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '景点纬度',
  `location` text CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '景点地点',
  `enable_type` enum('true','false') CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT 'false' COMMENT '是否分类',
  `type_id` int(11) DEFAULT NULL COMMENT '景点分类,外键分类ID',
  `enable_appointment` enum('true','false') CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT 'false' COMMENT '是否预约',
  `enable_pay` enum('true','false') CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT 'false' COMMENT '是否付费',
  `tel` varchar(11) DEFAULT NULL COMMENT '景点电话'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='景点信息';

--
-- 转存表中的数据 `attraction`
--

INSERT INTO `attraction` (`id`, `title`, `cover`, `introduction`, `start`, `browse`, `img`, `description`, `inbusiness_time1`, `inbusiness_time2`, `address`, `province`, `city`, `area`, `longitude`, `latitude`, `location`, `enable_type`, `type_id`, `enable_appointment`, `enable_pay`, `tel`) VALUES
(1, '动物园', '../../static/attraction/动物园封面.png', '众多可爱动物', NULL, NULL, NULL, NULL, '06:00:00', '18:00:00', NULL, NULL, NULL, NULL, NULL, NULL, NULL, 'true', 1, 'false', 'false', NULL),
(2, '丛林露营', '../../static/attraction/丛林露营封面.png', '聆听大自然的声音', NULL, NULL, NULL, NULL, '06:00:00', '18:00:00', NULL, NULL, NULL, NULL, NULL, NULL, NULL, 'true', 3, 'false', 'false', NULL),
(3, '植物园', '../../static/attraction/植物园封面.png', '春暖花开来看郁金香', NULL, NULL, NULL, NULL, '06:00:00', '18:00:00', NULL, NULL, NULL, NULL, NULL, NULL, NULL, 'true', 1, 'false', 'false', NULL),
(4, '划船游湖', '../../static/attraction/划船游湖封面.png', '划船游水不亦乐乎', NULL, NULL, NULL, NULL, '06:00:00', '18:00:00', NULL, NULL, NULL, NULL, NULL, NULL, NULL, 'true', 3, 'false', 'false', NULL);

-- --------------------------------------------------------

--
-- 表的结构 `banner`
--

CREATE TABLE `banner` (
  `id` int(11) NOT NULL COMMENT '轮播图ID',
  `title` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '轮播图标题',
  `img` text CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '轮播图图片链接',
  `link` text CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '轮播图跳转链接',
  `sort` int(11) DEFAULT '1' COMMENT '轮播图排序',
  `enable_use` enum('true','false') CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT 'false' COMMENT '轮播图是否禁用'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='轮播图信息';

--
-- 转存表中的数据 `banner`
--

INSERT INTO `banner` (`id`, `title`, `img`, `link`, `sort`, `enable_use`) VALUES
(1, '标题1', '../../static/banner/banner1.png', NULL, 1, 'false'),
(2, '标题2', '../../static/banner/banner2.png', NULL, 1, 'false');

-- --------------------------------------------------------

--
-- 表的结构 `browse`
--

CREATE TABLE `browse` (
  `id` int(11) NOT NULL COMMENT '浏览ID',
  `user_id` int(11) DEFAULT NULL COMMENT '浏览用户,外键用户ID',
  `attraction_id` int(11) DEFAULT NULL COMMENT '浏览景点,外键景点ID',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='浏览信息';

-- --------------------------------------------------------

--
-- 表的结构 `favourite`
--

CREATE TABLE `favourite` (
  `id` int(11) NOT NULL COMMENT '喜欢ID',
  `user_id` int(11) DEFAULT NULL COMMENT '喜欢用户,外键用户ID',
  `attraction_id` int(11) DEFAULT NULL COMMENT '喜欢景点,外键景点ID',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='喜欢信息';

-- --------------------------------------------------------

--
-- 表的结构 `icon`
--

CREATE TABLE `icon` (
  `id` int(11) NOT NULL COMMENT '图标ID',
  `title` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '图标标题',
  `img` text CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '图标图片链接',
  `link` text CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '图标跳转链接',
  `color` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '字体颜色',
  `enable_use` enum('true','false') CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT 'false' COMMENT '图标是否禁用',
  `background_color` varchar(20) DEFAULT NULL COMMENT '背景颜色',
  `selected_color` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '选中字体颜色',
  `sort` int(11) DEFAULT '1' COMMENT '图标排序'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='图标信息';

-- --------------------------------------------------------

--
-- 表的结构 `ticket`
--

CREATE TABLE `ticket` (
  `id` int(11) NOT NULL COMMENT '门票ID',
  `ticket_category_id` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '票种,外键票种ID',
  `price` float(10,2) DEFAULT NULL COMMENT '门票价格',
  `discount` float(10,2) DEFAULT NULL COMMENT '优惠价格',
  `description` text COMMENT '门票说明',
  `inventory` text COMMENT '库存数量',
  `enable_limited` enum('true','false') DEFAULT 'false' COMMENT '是否限量',
  `limited_num` int(11) DEFAULT '2' COMMENT '限量数量',
  `title` varchar(30) DEFAULT NULL COMMENT '门票标题',
  `enable_use` enum('true','false') DEFAULT 'false' COMMENT '是否禁用'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='门票信息';

-- --------------------------------------------------------

--
-- 表的结构 `ticket_category`
--

CREATE TABLE `ticket_category` (
  `id` int(11) NOT NULL COMMENT '票种ID',
  `title` varchar(30) DEFAULT NULL COMMENT '票种标题',
  `description` text COMMENT '票种说明'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='票种信息';

-- --------------------------------------------------------

--
-- 表的结构 `type`
--

CREATE TABLE `type` (
  `id` int(11) NOT NULL COMMENT '分类ID',
  `parent_id` int(11) DEFAULT '0' COMMENT '父级ID',
  `title` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '分类标题',
  `img` text CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '分类图标',
  `introduction` text CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '分类简介',
  `sort` int(11) DEFAULT '1' COMMENT '分类排序'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='分类信息';

--
-- 转存表中的数据 `type`
--

INSERT INTO `type` (`id`, `parent_id`, `title`, `img`, `introduction`, `sort`) VALUES
(1, 0, '遇见动植物', NULL, NULL, 1),
(2, 0, '逛博物馆', NULL, NULL, 1),
(3, 0, '游山玩水', NULL, NULL, 1),
(4, 0, '一日游', NULL, NULL, 1),
(5, 0, '周边游', NULL, NULL, 1);

-- --------------------------------------------------------

--
-- 表的结构 `user`
--

CREATE TABLE `user` (
  `id` int(11) NOT NULL COMMENT '用户ID',
  `role` enum('管理员','用户','景点') CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '用户' COMMENT '用户角色',
  `user_num` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '用户编号',
  `openid` varchar(100) DEFAULT NULL COMMENT '用户微信openid',
  `nikename` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '用户昵称',
  `avatar` text CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '用户头像',
  `username` varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '用户昵称',
  `pwd` varchar(30) DEFAULT NULL COMMENT '用户密码',
  `tel` varchar(11) DEFAULT NULL COMMENT '用户电话',
  `sex` enum('男','女','未知') DEFAULT '未知' COMMENT '用户性别',
  `idcard` varchar(18) DEFAULT NULL COMMENT '身份证号',
  `introduction` varchar(30) DEFAULT NULL COMMENT '用户简介',
  `birthday` date DEFAULT NULL COMMENT '用户生日',
  `status` enum('true','false') CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT 'false' COMMENT '用户状态是否禁用',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='用户信息';

--
-- 转储表的索引
--

--
-- 表的索引 `appointment`
--
ALTER TABLE `appointment`
  ADD PRIMARY KEY (`id`);

--
-- 表的索引 `attraction`
--
ALTER TABLE `attraction`
  ADD PRIMARY KEY (`id`);

--
-- 表的索引 `banner`
--
ALTER TABLE `banner`
  ADD PRIMARY KEY (`id`);

--
-- 表的索引 `browse`
--
ALTER TABLE `browse`
  ADD PRIMARY KEY (`id`);

--
-- 表的索引 `favourite`
--
ALTER TABLE `favourite`
  ADD PRIMARY KEY (`id`);

--
-- 表的索引 `icon`
--
ALTER TABLE `icon`
  ADD PRIMARY KEY (`id`);

--
-- 表的索引 `ticket`
--
ALTER TABLE `ticket`
  ADD PRIMARY KEY (`id`);

--
-- 表的索引 `ticket_category`
--
ALTER TABLE `ticket_category`
  ADD PRIMARY KEY (`id`);

--
-- 表的索引 `type`
--
ALTER TABLE `type`
  ADD PRIMARY KEY (`id`);

--
-- 表的索引 `user`
--
ALTER TABLE `user`
  ADD PRIMARY KEY (`id`);

--
-- 在导出的表使用AUTO_INCREMENT
--

--
-- 使用表AUTO_INCREMENT `appointment`
--
ALTER TABLE `appointment`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '预约ID';

--
-- 使用表AUTO_INCREMENT `attraction`
--
ALTER TABLE `attraction`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '景点ID', AUTO_INCREMENT=5;

--
-- 使用表AUTO_INCREMENT `banner`
--
ALTER TABLE `banner`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '轮播图ID', AUTO_INCREMENT=3;

--
-- 使用表AUTO_INCREMENT `browse`
--
ALTER TABLE `browse`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '浏览ID';

--
-- 使用表AUTO_INCREMENT `favourite`
--
ALTER TABLE `favourite`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '喜欢ID';

--
-- 使用表AUTO_INCREMENT `icon`
--
ALTER TABLE `icon`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '图标ID';

--
-- 使用表AUTO_INCREMENT `ticket`
--
ALTER TABLE `ticket`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '门票ID';

--
-- 使用表AUTO_INCREMENT `ticket_category`
--
ALTER TABLE `ticket_category`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '票种ID';

--
-- 使用表AUTO_INCREMENT `type`
--
ALTER TABLE `type`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '分类ID', AUTO_INCREMENT=6;

--
-- 使用表AUTO_INCREMENT `user`
--
ALTER TABLE `user`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户ID';
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

四、Java源码

share: 共享/java共享/travel.7zhttps://gitee.com/jiaketao/share.git

技术共进，成长同行——讯飞AI开发者社区

更多推荐

587章:汽车制造的主要流程

设计团队使用CAD软件进行三维建模，确保车辆的外观、结构和性能满足要求。总装工艺总装是将发动机、底盘、内饰和电子系统等组装到车身上的过程。智能制造工业4.0技术应用于汽车制造，包括物联网、大数据分析和人工智能。智能工厂实现生产过程的实时监控和优化，提高生产效率和产品质量。路试与台架测试成品车辆需经过多种路况测试和实验室台架测试，确保性能和安全达标。在线检测生产线上安装多种传感器和视觉系统，

讯飞AI开发者社区

648章:汽车制造的主要流程

讯飞AI开发者社区

AI革新药物研发：基因组大数据新突破

基因组大数据分析已成为药物研发的核心环节，人工智能（AI）技术通过高效处理海量数据，显著加速了靶点发现、药物筛选和个性化治疗等流程。来源网站：pyklqwq.cn/article/25jNXMc/39830.html。来源网站：pyklqwq.cn/article/25KljJd/61632.html。来源网站：pyklqwq.cn/article/25AECkl/15960.html。来源网站：