【vue】vue网站设计----汽车导航网站

coding加油站

已于 2023-02-20 20:24:15 修改

阅读量1k

点赞数

分类专栏： web前端作业 vue Html+Css+JavaScript期末大作业文章标签： vue.js 汽车 javascript

于 2022-08-18 20:27:08 首次发布

本文链接：https://blog.csdn.net/pandas23/article/details/126413056

版权

web前端作业同时被 3 个专栏收录

58 篇文章 63 订阅

订阅专栏

Html+Css+JavaScript期末大作业

31 篇文章 21 订阅

订阅专栏

vue

20 篇文章 8 订阅

订阅专栏

1、引言

设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

汽车导航网站采用vue技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面

汽车导航网站采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

vue作品技术方面：使用vue技术开发的网站，涉及常见的vue指令，如v-for，v-if，v-show，v-html等的使用，包含watch，计算属性等常见功能的开发，以及组件的使用，使用vue相关全家桶的使用，运用了v-router来作为路由，完全符合常见的网站开发技术。同时也会使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。

3、作品演示

【coding加油站】vue网站设计---汽车询价网站

3.1、汽车列表页

相关代码：

<template>
  <div class="detail">
    <div class="content">

    <!-- 顶部图片   -->
    <DetailImg :imgdata="Object.assign({},{url:cardetaildata.CoverPhoto,pic_group_count:cardetaildata.pic_group_count,SerialID:cardetaildata.SerialID})"></DetailImg>
    
    <!-- 图片下的询问底价 -->
    <DetailInfo v-if="cardetaildata.market_attribute" :infodata="Object.assign({},{dealer_price:cardetaildata.market_attribute.dealer_price,official_refer_price:cardetaildata.market_attribute.official_refer_price})"></DetailInfo>
    
    <!-- 详情车型列 -->
    <DetailCarList :currentlist="currentlist" :currentindex="currentindex" :newarr="newarr"></DetailCarList>
    
    </div>

    <!-- 底部询问底价按钮 -->
    <DetailBottom></DetailBottom>
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex';
import DetailImg from '@/components/Detail/DetailImg/DetailImg.vue';
import DetailInfo from '@/components/Detail/DetailInfo/DetailInfo.vue';
import DetailCarList from '@/components/Detail/DetailCarList/DetailCarList.vue';
import DetailBottom from '@/components/Detail/DetailBottom/DetailBottom.vue'


export default {
  components:{
    DetailImg,
    DetailInfo,
    DetailCarList,
    DetailBottom
  },

  computed:{
    ...mapState({
      cardetaildata: state => state.detail.cardetaildata,//详情页全部数据
      currentindex: state => state.detail.currentindex,//选中年份的下标
      currentlist: state => state.detail.currentlist,//选中的数据列表
      newarr: state => state.detail.newarr//年份数组
    })
  },

  methods:{
    ...mapActions({
      getMasterCarDetail:'detail/getMasterCarDetail' //抛出详情页异步函数
    })
  },

  created(){
    this.getMasterCarDetail(this.$route.query.SerialID); //请求详情页数据
  }
}
</script>

<style lang="stylus" scoped>
@import './Detail.styl';
</style>

3.3、汽车图片展示页

相关代码：

<template>
    <div class="type">
      <p @click="toback">全部车款</p>
      <div>
        <div class="c_type">
          <span
            @click="setCurrentIndex(index)"
            :class="currentindex == index ? 'active':''"
            v-for="(item,index) in newarr"
            :key="index"
          >{{item}}</span>
        </div>
        <div>
          <div v-for="(item,index) in currentlist" :key="index">
            <p class="tip">{{item.key}}</p>
            <ul>
              <li  @click="setCaridFn(item1)" :car-id="item1.car_id" v-for="(item1,index1) in item.list" :key="index1">
                <p>
                  <span>{{item1.market_attribute.year}}款{{item1.car_name}}</span>
                  <span>{{item1.market_attribute.dealer_price_min}}万起</span>
                </p>
                <p>
                  <span>{{item1.horse_power}}马力{{item1.gear_num}}档{{item1.trans_type}}</span>
                  <span>指导价:{{item1.market_attribute.official_refer_price}}</span>
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import {mapState,mapActions,mapMutations} from 'vuex';

export default {
  computed:{
    ...mapState({
      newarr: state => state.type.newarr,
      typelist: state => state.type.typelist,
      currentlist: state => state.type.currentlist,
      currentindex: state => state.type.currentindex,
      carinfo:state => state.img.carinfo
    })
  },
  methods: {
    ...mapMutations({
      setCarId:'type/setCarId',
      setCarInfo:'img/setCarInfo'
    }),
    ...mapActions({
      getCurrentList:'type/getCurrentList',
      getImgList:'img/getImgList'
    }),
    setCurrentIndex(index) {
      this.getCurrentList(index);
    },
    setCarid(item1){
      this.setCarId(item1);
      this.setCarInfo();
      let obj = {SerialID:this.carinfo.SerialID, CarId:this.carinfo.car_Id, ColorID:this.carinfo.ColorId };
      this.getImgList(obj);
      this.hideTypePage();
    },
    toback(){
      this.$router.go(-1);
    },
    setCaridFn(item){
      this.setCarId(item);
      this.$router.go(-1);
    }
  },
  created() {
    this.getCurrentList(0);
  }
};
</script>

<style lang="stylus" scoped>
@import './Type.styl';
</style>

总结

以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取