基于Web的旅游信息管理系统的设计与实现

08060210邓菁锋

基于Web的旅游信息管理系统的设计与实现

08060210邓菁锋

数据库设计与实现数据库的设计在一个系统中的作用十分重要，数据库建立的是否完善直接影响到你个系统的实现。数据库的设计既要满足用户的需求又要尽最大可能的降低数据的冗余，尽可能降低数据间的依赖，将他们分离。在各种信息的提供，保存，更新和查询，这就要求数据库结构能充分满足各种信息的输出和输入，收集基本数据，数据结构，以及数据处理的流程，组成一份详尽的数据字典，为后面的具体设计打下基础。本系统主要数据库管理系统：mysql数据库管理系统，数据库可视化工具：Navicat for MySQL，在mysql中建立了一个名为travel_manage的数据库用来存放与本系统相关的表的信息。admins表该表记录管理员的信息，id是管理员编号，是表中的主键，username是管理员登入系统的账户名，pwd是管理员登入系统的密码，addtime是增加管理员账户时的时间，admins表如表3-1所示:表3-1 admins表difangmeishi表该表记录地方美食的信息，id是主键，meishibianhao是美食编号，mingcheng是名称，fujinjingdian是附近景点，fenlei是分类，tupian是图片，jiage是价格，meishijianjie是美食简介，addtime是美食添加时间，difangmeishi表如表3-2所示:表3-2 difangmeishi表diqu表该表记录地区的信息，id是地区编号，是表中的主键，diqumingcheng是地区名称，addtime是地区添加时间，diqu表如表3-3所示:表3-3 diqu表jingdianxinxi表该表记录景点信息，id是主键，jingqubianhao是景区编号，jingdianmingcheng是景点名称，suoshudiqu是所属地区，tupian是图片，kaifangshijian是开放时间，fujinmeishi是附近美食，dizhi是地址，piaojia是票价，liulanliang是浏览量，miaoshu是描述，addtime是景点添加时间，jingdianxinxi表如表3-4所示:表3-4 jingdianxinxi表liuyanban表该表记录留言板信息，id是主键，xingming是姓名，lianxidianhua是联系电话，liuyanneirong是留言内容，liuyanren是留言人，huifuneirong是回复内容，addtime是留言添加时间，liuyanban表如表3-5所示:表3-5 liuyanban表

08060210邓菁锋

地区管理模块的搜索表单使用<el-form>组件，包含一个地区名称的输入框和查询按钮。数据表格使用<el-table>组件显示地区列表，包含序号列、地区名称列和操作列，操作列提供编辑和删除按钮，使用<el-button-group>组件分组。分页控制使用<el-pagination>组件实现。在脚本部分，导入了api、extend和objectDiff等工具。组件的data部分定义了loading、list、search、total、page、pagesize和totalCount等状态变量。methods部分实现了查询、分页加载、删除操作等功能。searchSubmit方法用于提交搜索，调用loadList方法重新加载列表。sizeChange方法用于处理分页大小改变，重新加载第一页数据。loadList方法用于加载列表数据，防止重复加载，设置加载状态，根据筛选条件构造查询参数，通过objectDiff.diff检测查询条件变化，更新路由查询参数，发送POST请求获取数据，更新组件状态或显示错误信息。deleteItem方法用于删除列表项，显示确认框，确认后发送POST请求删除数据，成功则从列表中移除该项，失败则显示错误信息。

08060210邓菁锋

景点信息管理模块使用<el-card>组件创建卡片布局，包含一个<el-page-header>用于返回按钮，一个表单用于输入景点信息。表单使用<el-form>组件管理，表单项包括景点编号、景点名称、所属地区、图片、开放时间、附近美食、地址、票价和描述，分别由<el-form-item>和相应的<el-input>、<el-select>等组件实现。每个表单项都有验证规则，确保输入内容的有效性。提交按钮根据btnText属性决定是否显示。在脚本部分，导入了api、rule和extend工具。组件的data部分定义了loading、form、diquList和difangmeishiList等状态变量。form初始化包含景点相关信息。props部分定义了isRead、btnText和id属性，id用于获取和更新景点信息。methods部分实现了提交表单和加载信息的功能。submit方法首先进行表单验证，如果通过，则设置loading状态为true，发送POST请求更新景点信息，如果成功则显示成功消息并重置表单，否则显示错误消息。

08060210邓菁锋

地方美食管理模块使用了<e-container>组件创建容器，并使用<e-module-model-box>组件包含美食详情内容，详情部分分为左侧的图片展示和右侧的文字描述。图片展示使用<e-shangpinban>组件，文字描述部分包括美食名称、附近景点、分类、人均价格和美食简介等信息，这些信息通过map对象从后端获取。脚本部分导入了api和extend工具。组件的data部分定义了loading状态、isCollect状态和map对象，map对象初始化了美食的各个属性。props部分定义了id属性，watch部分监听id属性的变化，变化时调用loadDetail方法加载详情数据。methods部分实现了loadDetail方法，该方法首先检查是否在加载状态，如果是则返回，否则设置loading状态为true，然后发送GET请求获取美食详情数据，如果请求成功则使用extend工具扩展组件实例的map对象为后端返回的数据，否则显示错误消息。

08060210邓菁锋

旅游线路管理模块使用<el-page-header>组件创建返回按钮和页面标题，主体内容通过<div>标签包裹，并用不同的<div>标签显示每个字段的详细信息，每个字段的标题和内容分别放在.detail-title和.detail-content中，通过Vue的数据绑定将数据展示出来，如线路编号、线路名称、出发地、途经地、终点、价格、浏览量、添加时间、图片、线路特色和线路简介。图片使用<e-images>组件展示，线路特色和线路简介使用v-html指令渲染HTML内容。页面底部有返回按钮和打印按钮，分别通过@click事件绑定返回上一页和打印页面的功能。在样式部分，使用了SCSS来定义组件的样式，主要包括布局和内容的显示方式，通过flex布局使详情信息整齐排列。脚本部分导入了api和extend工具，在data中定义了loading状态和map对象，props部分定义了id属性，watch部分监听id属性的变化并在变化时调用loadDetail方法，methods部分实现了goBack和loadDetail方法，goBack方法用于返回上一页，loadDetail方法用于加载详情数据，首先检查是否在加载状态，如果是则返回，否则设置loading状态为true，然后发送GET请求获取旅游线路的详情数据，如果请求成功则使用extend工具扩展组件实例的map对象为后端返回的数据，否则显示错误消息。