旅游网站SpringBoot

13旅游网站的设计与实现

登录窗口，用户通过登录窗口可以进行登录或注册。还没注册的用户可以进行填写用户名、密码进行注册操作，，

旅游路线管理：通过列表可以获取路线名称、路线分类、封面图、景点名称、出发地、目的地、交通方式、出行时间、费用包含、价格等信息，进行查看旅游详情或修改、查看评论操作，或新增、删除，。

旅游资讯：管理员通过列表可以进行查看标题、简介、图片等信息，进行详情、修改或删除操作，并通过新增进行添加旅游资讯信息或删除操作，。

订单管理：管理员通过列表可以进行查看订单编号、商品名称、商品图片、购买数量、价格、折扣价格、总价格、支付类型、地址等信息，进行详情、发货或删除操作，并通过输入进行订单编号、商品名称操作，。

用户登录成功后，可以进行查看旅游路线、最新线路、旅游资讯、个人中心、后台管理、购物车、客服等功能模块。进行相对应操作。。

个人中心：通过列表可以进行查看个人中心、我的订单、我的地址、我的收藏等功能，进行相对应操作，个人中心：通过页面可以进行修改用户名、密码、姓名、头像、性别、联系电话、余额等信息，进行更新信息操作，。

个人中心：通过列表可以进行查看个人中心、我的订单、我的地址、我的收藏等功能，进行相对应操作，个人中心：通过页面可以进行修改用户名、密码、姓名、头像、性别、联系电话、余额等信息，进行更新信息操作，。我的地址：通过列表可以进行查看联系人、手机号码、默认地址等信息、进行添加地址或重置操作，。

图5-8个人中心界面

旅游线路：通过列表可以进行查看路线名称、价格、路线分类、景点名称、出发地、目的地、交通方式、出行时间、费用包含、点击次数等信息、进行添加购物车或立即购买、收藏操作，。用户通过点击立即购买进入页面可以进行选择收货地址进行查看订单信息，进行在线支付操作，。

图5-11旅游路线界面图

我的订单：通过列表可以进行查看订单编号、商品、价格、数量、总价、地址等信息、进行查看订单信息或退款操作，。

CommonUtil.java

package com.utils;

import java.util.Random;

public class CommonUtil {
	/**
     * 获取随机字符串
     *
     * @param num
     * @return
     */
    public static String getRandomString(Integer num) {
        String base = "abcdefghijklmnopqrstuvwxyz0123456789";
        Random random = new Random();
        StringBuffer sb = new StringBuffer();
        for (int i = 0; i < num; i++) {
            int number = random.nextInt(base.length());
            sb.append(base.charAt(number));
        }
        return sb.toString();
    }
}

LvyouxianluServiceImpl.java

package com.service.impl;

import org.springframework.stereotype.Service;
import java.util.Map;
import java.util.List;

import com.baomidou.mybatisplus.mapper.Wrapper;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.utils.PageUtils;
import com.utils.Query;


import com.dao.LvyouxianluDao;
import com.entity.LvyouxianluEntity;
import com.service.LvyouxianluService;
import com.entity.vo.LvyouxianluVO;
import com.entity.view.LvyouxianluView;

@Service("lvyouxianluService")
public class LvyouxianluServiceImpl extends ServiceImpl<LvyouxianluDao, LvyouxianluEntity> implements LvyouxianluService {
	
	
    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<LvyouxianluEntity> page = this.selectPage(
                new Query<LvyouxianluEntity>(params).getPage(),
                new EntityWrapper<LvyouxianluEntity>()
        );
        return new PageUtils(page);
    }
    
    @Override
	public PageUtils queryPage(Map<String, Object> params, Wrapper<LvyouxianluEntity> wrapper) {
		  Page<LvyouxianluView> page =new Query<LvyouxianluView>(params).getPage();
	        page.setRecords(baseMapper.selectListView(page,wrapper));
	    	PageUtils pageUtil = new PageUtils(page);
	    	return pageUtil;
 	}
    
    @Override
	public List<LvyouxianluVO> selectListVO(Wrapper<LvyouxianluEntity> wrapper) {
 		return baseMapper.selectListVO(wrapper);
	}
	
	@Override
	public LvyouxianluVO selectVO(Wrapper<LvyouxianluEntity> wrapper) {
 		return baseMapper.selectVO(wrapper);
	}
	
	@Override
	public List<LvyouxianluView> selectListView(Wrapper<LvyouxianluEntity> wrapper) {
		return baseMapper.selectListView(wrapper);
	}

	@Override
	public LvyouxianluView selectView(Wrapper<LvyouxianluEntity> wrapper) {
		return baseMapper.selectView(wrapper);
	}

}

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

BreadCrumbs.vue

<template>
  <el-breadcrumb class="app-breadcrumb" separator="/" style="height:80px;backgroundColor:rgba(255, 255, 255, 1);borderRadius:0px;padding:0px 20px 0px 20px;boxShadow:;borderWidth:0px;borderStyle:none;borderColor:rgba(255, 255, 255, 1);">
    <transition-group name="breadcrumb" class="box" :style="1==1?'justifyContent:flex-start;':1==2?'justifyContent:center;':'justifyContent:flex-end;'">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.name }}</span>
        <a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import pathToRegexp from 'path-to-regexp'
import { generateTitle } from '@/utils/i18n'
export default {
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
    this.breadcrumbStyleChange()
  },
  methods: {
    generateTitle,
    getBreadcrumb() {
      // only show routes with meta.title
      let route = this.$route
      let matched = route.matched.filter(item => item.meta)
      const first = matched[0]
      matched = [{ path: '/index' }].concat(matched)

      this.levelList = matched.filter(item => item.meta)
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase()
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(path)
    },
    breadcrumbStyleChange(val) {
      this.$nextTick(()=>{
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el=>{
          el.innerText = "/"
          el.style.color = "#C0C4CC"
        })
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner a').forEach(el=>{
          el.style.color = "rgba(140, 145, 171, 1)"
        })
        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner .no-redirect').forEach(el=>{
          el.style.color = "rgba(162, 169, 212, 1)"
        })

        let str = "vertical"
        if("vertical" === str) {
          let headHeight = "60px"
          headHeight = parseInt(headHeight) + 10 + 'px'
          document.querySelectorAll('.app-breadcrumb').forEach(el=>{
            el.style.marginTop = headHeight
          })
        }

      })
    },
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb {
  display: block;
  font-size: 14px;
  line-height: 50px;

  .box {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
  }

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>