【VUE】vue程序设计----模仿菜谱做菜网站

1、引言

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

2、作品介绍

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

2.1、作品简介方面 

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

2.2、作品二次开发工具

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

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="home">
    <homeNavBar />
    <homeIconList/>
    <homeSwipe />
      <hiddenTopNav v-show="listShow" :listShow = "listShow"/>
    
    <tab1 />
    <tab2 />
    <tab3 />
    <tab4 />
    <tab5 />
    <tab6 />
    <bottomSwipe />
    <bottomBar />
  </div>
</template>

<script>
import {reactive,toRefs,onMounted,ref} from 'vue';
import bottomBar from '../components/bottomBar.vue';
import homeSwipe from '../components/homePage/homeSwipe.vue'
import homeNavBar from '../components/homePage/homeNavBar.vue'
import homeIconList from '../components/homePage/homeIconList.vue'
import hiddenTopNav from '../components/homePage/hiddenTopNav.vue'
import tab1 from '../components/homePage/tab1.vue'
import tab2 from '../components/homePage/tab2.vue'
import tab3 from '../components/homePage/tab3.vue'
import tab4 from '../components/homePage/tab4.vue'
import tab5 from '../components/homePage/tab5.vue'
import tab6 from '../components/homePage/tab6.vue'
import bottomSwipe from '../components/homePage/bottomSwipe.vue'
// @ is an alias to /src
export default{
  components:{
    homeSwipe,
    homeNavBar,
    homeIconList,
    hiddenTopNav,
    tab1,
    tab2,
    tab3,
    tab4,
    tab5,
    tab6,
    bottomSwipe,
    bottomBar
  },
  setup(){
    const state = reactive({
      listShow: false,
    })
    onMounted(()=>{
      window.addEventListener('scroll', () => {
        let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
        if(top>=197){
          state.listShow = true;
        }
        else {
          state.listShow = false;
        }
      })
    })
    return {
      ...toRefs(state),
    }
  }
 
}
</script>

3.2、课堂界面

 相关代码：

<template>
  <van-tabs v-model:active="active" >
  <transition enter-active-class="animate__animated animate__fadeInLeft animate__faster	" >
    <van-tab title="推荐" class="rec-box">
          <div class="item" v-for="item in list">
              <div  @click="jump(item.img,item.name)">
              <div class = "linkBox" >
                <img class="imgbox" :src="item.img" alt="">
                <span>{{item.name}}</span>
              </div>
            </div>
          </div>
      </van-tab>
  </transition>
  <transition enter-active-class="animate__animated animate__fadeInLeft animate__faster	" >
    <van-tab title="减脂">
      <fatLoss />
    </van-tab>
  </transition>
  <transition enter-active-class="animate__animated animate__fadeInLeft animate__faster	" >
    <van-tab title="分类"> 

      <kinds />
    </van-tab>
  </transition>
    
    <!-- <van-tab title="标签 4">内容 4</van-tab> -->
</van-tabs>
<div style="height: 2rem" ></div>



</template>

<script>
import { ref ,reactive ,toRefs,onMounted} from 'vue';
import { useStore } from 'vuex';
import { useRoute,useRouter } from 'vue-router';
import  fatLoss from '../classPage/fatLoss/fatLoss.vue'
import kinds from '@/views/kinds.vue';
export default {
  components:{
    fatLoss,
    kinds
  },
  setup(){
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      list:[
        {
         img: require('@/assets/class/1.jpg'),
         name:'炒合菜',
         url:'cook1',
        },
        {
         img: require('@/assets/class/2.jpg'),
         name:'土豆炖牛肉',
         url:'cook2',
        },
        {
         img: require('@/assets/class/3.jpg'),
         name:'清蒸鲈鱼🐟',
         url:'cook3',
        },
        {
         img: require('@/assets/class/4.jpg'),
         name:'娃娃菜粉丝汤',
         url:'cook4',
        },
        {
         img: require('@/assets/class/5.jpg'),
         name:'番茄炒蛋',
         url:'cook5',
        },
        {
         img: require('@/assets/class/6.jpg'),
         name:'皮蛋拌黄瓜',
         url:'cook6',
        },
        {
         img: require('@/assets/class/7.jpg'),
         name:'虾仁芦笋',
         url:'cook7',
        },
        {
         img: require('@/assets/class/8.jpg'),
         name:'鱼香茄子',
         url:'cook8',
        },
        {
         img: require('@/assets/class/9.jpg'),
         name:'烧腐竹',
         url:'cook9',
        },
        {
         img: require('@/assets/class/10.jpg'),
         name:'蒜蓉金针菇',
         url:'cook10',
        },

        
      ],
    })
    onMounted(()=>{
        console.log(store.state.cook);
      })
    const jump = (img,text)=>{
      console.log(text);
      router.push({name:'cook1',params:{img:img,text:text}});
      //改进要用store存储，点击之后存到信息里显示

    }
    return {  
      ...toRefs(state),
      jump
    }
  }
}

</script>

<style lang="less" scoped>
.rec-box{
  width: 95%;
  height:auto;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: -.2rem auto;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  
  .item{
   width: 3.3rem;
    height: 4rem;
    display:flex;
    margin-top: .3rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:start;
    align-items:left;
  }
  .linkBox{
    width: 3.3rem;
    height: 4rem;
    display:flex;
    margin-top: .3rem;
    flex-direction: column;
    justify-content:center;
    align-items:left;
    img{
      width: 100%;
      height: 3.5rem;
      border-radius: .2rem;
      box-shadow: 2px 2px 2px rgb(178, 175, 175);
    }
    span{
      margin-top: .1rem;
      text-align: left;
      color: black;
      font-weight: 550;
    }
  }


}

</style>

3.3、步骤界面

 相关代码：

<template>
  <div class="cook"  >
    <div class="cookBar">
      <img class="btn1" :src = "imgs[0]" @click="$router.go(-1)">
      <img class="btn2" :src="imgs[1]" @click="share">
    </div>
    <div class="cookBar1" ></div>
    <img class="imgbox" :src="$route.params.img" alt="">
    <div class="text"> {{$route.params.text}}</div>
    <div class="need">
      <div class="title">
        <span>用料</span>
        <img :src="imgs[2]" alt="">
      </div>
      <div class = "shadow">
        <div class="need-item" v-for="item in needs">
        <div class="item-name">{{item.name}}</div>
        <div class="item-account">{{item.account}}</div>
      </div>
      </div>
      
      <div class="steps" v-for="(item,index) in steps">
        <span>步骤{{index+1}}</span>
        <img :src=item.img alt="">
        <div class="dis">{{item.dis}}</div>
        <el-divider border-style="dashed" />
      </div>
    </div>
  </div>

<cookBottom @event="addCollect"> </cookBottom>
  <van-share-sheet
  v-model:show="showShare"
  title="立即分享给好友"
  :options="options"
/>
</template>

<script>
import { StarFilled } from '@element-plus/icons-vue'
import cookBottom from '@/components/classPage/cooks/cookBottom.vue';
import {reactive,toRefs,onMounted,ref} from 'vue'
import { useStore } from 'vuex';
import {useRoute} from 'vue-router'
export default {
  components: {
    cookBottom
  },
  setup(){
    const route = useRoute();
    const store = useStore();
     const showShare = ref(false);
    const options = [
      [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
      ],
    ];
    const state = reactive({
      needs:[
        {
          name:'绿豆芽',
          account:'300克',
        },
         {
          name:'韭菜',
          account:'200克',
        },
         {
          name:'鸡蛋',
          account:'2个',
        },
         {
          name:'粉条',
          account:'一小把',
        },
         {
          name:'生抽',
          account:'2勺',
        },
         {
          name:'盐',
          account:'一小勺',
        },
         {
          name:'鸡精',
          account:'一小勺',
        },
         {
          name:'蒜末',
          account:'2瓣',
        },
        {
          name:'耗油',
          account:'一小勺',
        },
      ],
      steps:[
        {
          img: require('@/assets/cook/1.jpg'),
          dis:'绿豆芽洗净，控水'
        },
        {
          img: require('@/assets/cook/2.jpg'),
          dis:'绿豆芽洗净，控水'
        },
        {
          img: require('@/assets/cook/3.jpg'),
          dis:'绿豆芽洗净，控水'
        },
        {
          img: require('@/assets/cook/4.jpg'),
          dis:'绿豆芽洗净，控水'
        },
        {
          img: require('@/assets/cook/5.jpg'),
          dis:'绿豆芽洗净，控水'
        },
        {
          img: require('@/assets/cook/6.jpg'),
          dis:'绿豆芽洗净，控水'
        },
        {
          img: require('@/assets/cook/7.jpg'),
          dis:'绿豆芽洗净，控水'
        },
        {
          img: require('@/assets/cook/8.jpg'),
          dis:'绿豆芽洗净，控水'
        },
        {
          img: require('@/assets/cook/9.jpg'),
          dis:'绿豆芽洗净，控水'
        },
      ],
      imgs:[
        require('@/assets/class图标/1.png'),
        require('@/assets/class图标/2.png'),
        require('@/assets/class图标/3.png'),
      ],
      
    })
    onMounted(()=>{
      window.addEventListener('scroll',()=>{
        let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
        let o = document.querySelector('.cookBar1');
        o.style.opacity = top/400;
      })
      
    })
    const share = ()=>{
      showShare.value = true;
    }
    const addCollect = ()=>{
      console.log('收到消息')
      store.commit('setCook1',route.params.img);
      store.commit('setCook2',route.params.text);
      store.state.cook.isCollect = true;
      console.log(store.state.cook.isCollect)
      console.log(store.state.cook);
     
    }
    return{
      ...toRefs(state),
      options,
      showShare,
      share,
      addCollect
    }
  }
  
}
</script>

4、代码结构图

总结

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