• 【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、首页

     相关代码：

    1. <template>
    2.   <div class="home">
    3.     <homeNavBar />
    4.     <homeIconList/>
    5.     <homeSwipe />
    6.       <hiddenTopNav v-show="listShow" :listShow = "listShow"/>
    7.     
    8.     <tab1 />
    9.     <tab2 />
    10.     <tab3 />
    11.     <tab4 />
    12.     <tab5 />
    13.     <tab6 />
    14.     <bottomSwipe />
    15.     <bottomBar />
    16.   div>
    17. template>
    18.  
    19. <script>
    20. import {reactive,toRefs,onMounted,ref} from 'vue';
    21. import bottomBar from '../components/bottomBar.vue';
    22. import homeSwipe from '../components/homePage/homeSwipe.vue'
    23. import homeNavBar from '../components/homePage/homeNavBar.vue'
    24. import homeIconList from '../components/homePage/homeIconList.vue'
    25. import hiddenTopNav from '../components/homePage/hiddenTopNav.vue'
    26. import tab1 from '../components/homePage/tab1.vue'
    27. import tab2 from '../components/homePage/tab2.vue'
    28. import tab3 from '../components/homePage/tab3.vue'
    29. import tab4 from '../components/homePage/tab4.vue'
    30. import tab5 from '../components/homePage/tab5.vue'
    31. import tab6 from '../components/homePage/tab6.vue'
    32. import bottomSwipe from '../components/homePage/bottomSwipe.vue'
    33. // @ is an alias to /src
    34. export default{
    35.   components:{
    36.     homeSwipe,
    37.     homeNavBar,
    38.     homeIconList,
    39.     hiddenTopNav,
    40.     tab1,
    41.     tab2,
    42.     tab3,
    43.     tab4,
    44.     tab5,
    45.     tab6,
    46.     bottomSwipe,
    47.     bottomBar
    48.   },
    49.   setup(){
    50.     const state = reactive({
    51.       listShow: false,
    52.     })
    53.     onMounted(()=>{
    54.       window.addEventListener('scroll', () => {
    55.         let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
    56.         if(top>=197){
    57.           state.listShow = true;
    58.         }
    59.         else {
    60.           state.listShow = false;
    61.         }
    62.       })
    63.     })
    64.     return {
    65.       ...toRefs(state),
    66.     }
    67.   }
    68.  
    69. }
    70. script>

    3.2、课堂界面

     相关代码：

    1. <template>
    2.   <van-tabs v-model:active="active" >
    3.   <transition enter-active-class="animate__animated animate__fadeInLeft animate__faster	" >
    4.     <van-tab title="推荐" class="rec-box">
    5.           <div class="item" v-for="item in list">
    6.               <div  @click="jump(item.img,item.name)">
    7.               <div class = "linkBox" >
    8.                 <img class="imgbox" :src="item.img" alt="">
    9.                 <span>{{item.name}}span>
    10.               div>
    11.             div>
    12.           div>
    13.       van-tab>
    14.   transition>
    15.   <transition enter-active-class="animate__animated animate__fadeInLeft animate__faster	" >
    16.     <van-tab title="减脂">
    17.       <fatLoss />
    18.     van-tab>
    19.   transition>
    20.   <transition enter-active-class="animate__animated animate__fadeInLeft animate__faster	" >
    21.     <van-tab title="分类"> 
    22.  
    23.       <kinds />
    24.     van-tab>
    25.   transition>
    26.     
    27.     
    28. van-tabs>
    29. <div style="height: 2rem" >div>
    30.  
    31.  
    32.  
    33. template>
    34.  
    35. <script>
    36. import { ref ,reactive ,toRefs,onMounted} from 'vue';
    37. import { useStore } from 'vuex';
    38. import { useRoute,useRouter } from 'vue-router';
    39. import  fatLoss from '../classPage/fatLoss/fatLoss.vue'
    40. import kinds from '@/views/kinds.vue';
    41. export default {
    42.   components:{
    43.     fatLoss,
    44.     kinds
    45.   },
    46.   setup(){
    47.     const router = useRouter();
    48.     const store = useStore();
    49.     const state = reactive({
    50.       list:[
    51.         {
    52.          img: require('@/assets/class/1.jpg'),
    53.          name:'炒合菜',
    54.          url:'cook1',
    55.         },
    56.         {
    57.          img: require('@/assets/class/2.jpg'),
    58.          name:'土豆炖牛肉',
    59.          url:'cook2',
    60.         },
    61.         {
    62.          img: require('@/assets/class/3.jpg'),
    63.          name:'清蒸鲈鱼🐟',
    64.          url:'cook3',
    65.         },
    66.         {
    67.          img: require('@/assets/class/4.jpg'),
    68.          name:'娃娃菜粉丝汤',
    69.          url:'cook4',
    70.         },
    71.         {
    72.          img: require('@/assets/class/5.jpg'),
    73.          name:'番茄炒蛋',
    74.          url:'cook5',
    75.         },
    76.         {
    77.          img: require('@/assets/class/6.jpg'),
    78.          name:'皮蛋拌黄瓜',
    79.          url:'cook6',
    80.         },
    81.         {
    82.          img: require('@/assets/class/7.jpg'),
    83.          name:'虾仁芦笋',
    84.          url:'cook7',
    85.         },
    86.         {
    87.          img: require('@/assets/class/8.jpg'),
    88.          name:'鱼香茄子',
    89.          url:'cook8',
    90.         },
    91.         {
    92.          img: require('@/assets/class/9.jpg'),
    93.          name:'烧腐竹',
    94.          url:'cook9',
    95.         },
    96.         {
    97.          img: require('@/assets/class/10.jpg'),
    98.          name:'蒜蓉金针菇',
    99.          url:'cook10',
    100.         },
    101.  
    102.         
    103.       ],
    104.     })
    105.     onMounted(()=>{
    106.         console.log(store.state.cook);
    107.       })
    108.     const jump = (img,text)=>{
    109.       console.log(text);
    110.       router.push({name:'cook1',params:{img:img,text:text}});
    111.       //改进要用store存储，点击之后存到信息里显示
    112.  
    113.     }
    114.     return {  
    115.       ...toRefs(state),
    116.       jump
    117.     }
    118.   }
    119. }
    120.  
    121. script>
    122.  
    123. <style lang="less" scoped>
    124. .rec-box{
    125.   width: 95%;
    126.   height:auto;
    127.   display:flex;
    128.   flex-direction: row;
    129.   flex-wrap: wrap;
    130.   margin: -.2rem auto;
    131.   justify-content: space-around;
    132.   align-items: center;
    133.   align-content: center;
    134.   
    135.   .item{
    136.    width: 3.3rem;
    137.     height: 4rem;
    138.     display:flex;
    139.     margin-top: .3rem;
    140.     flex-direction: row;
    141.     flex-wrap: wrap;
    142.     justify-content:start;
    143.     align-items:left;
    144.   }
    145.   .linkBox{
    146.     width: 3.3rem;
    147.     height: 4rem;
    148.     display:flex;
    149.     margin-top: .3rem;
    150.     flex-direction: column;
    151.     justify-content:center;
    152.     align-items:left;
    153.     img{
    154.       width: 100%;
    155.       height: 3.5rem;
    156.       border-radius: .2rem;
    157.       box-shadow: 2px 2px 2px rgb(178, 175, 175);
    158.     }
    159.     span{
    160.       margin-top: .1rem;
    161.       text-align: left;
    162.       color: black;
    163.       font-weight: 550;
    164.     }
    165.   }
    166.  
    167.  
    168. }
    169.  
    170. style>

    3.3、步骤界面

     相关代码：

    1. <template>
    2.   <div class="cook"  >
    3.     <div class="cookBar">
    4.       <img class="btn1" :src = "imgs[0]" @click="$router.go(-1)">
    5.       <img class="btn2" :src="imgs[1]" @click="share">
    6.     div>
    7.     <div class="cookBar1" >div>
    8.     <img class="imgbox" :src="$route.params.img" alt="">
    9.     <div class="text"> {{$route.params.text}}div>
    10.     <div class="need">
    11.       <div class="title">
    12.         <span>用料span>
    13.         <img :src="imgs[2]" alt="">
    14.       div>
    15.       <div class = "shadow">
    16.         <div class="need-item" v-for="item in needs">
    17.         <div class="item-name">{{item.name}}div>
    18.         <div class="item-account">{{item.account}}div>
    19.       div>
    20.       div>
    21.       
    22.       <div class="steps" v-for="(item,index) in steps">
    23.         <span>步骤{{index+1}}span>
    24.         <img :src=item.img alt="">
    25.         <div class="dis">{{item.dis}}div>
    26.         <el-divider border-style="dashed" />
    27.       div>
    28.     div>
    29.   div>
    30.  
    31. <cookBottom @event="addCollect"> cookBottom>
    32.   <van-share-sheet
    33.   v-model:show="showShare"
    34.   title="立即分享给好友"
    35.   :options="options"
    36. />
    37. template>
    38.  
    39. <script>
    40. import { StarFilled } from '@element-plus/icons-vue'
    41. import cookBottom from '@/components/classPage/cooks/cookBottom.vue';
    42. import {reactive,toRefs,onMounted,ref} from 'vue'
    43. import { useStore } from 'vuex';
    44. import {useRoute} from 'vue-router'
    45. export default {
    46.   components: {
    47.     cookBottom
    48.   },
    49.   setup(){
    50.     const route = useRoute();
    51.     const store = useStore();
    52.      const showShare = ref(false);
    53.     const options = [
    54.       [
    55.         { name: '微信', icon: 'wechat' },
    56.         { name: '朋友圈', icon: 'wechat-moments' },
    57.         { name: '微博', icon: 'weibo' },
    58.         { name: 'QQ', icon: 'qq' },
    59.       ],
    60.       [
    61.         { name: '复制链接', icon: 'link' },
    62.         { name: '分享海报', icon: 'poster' },
    63.         { name: '二维码', icon: 'qrcode' },
    64.         { name: '小程序码', icon: 'weapp-qrcode' },
    65.       ],
    66.     ];
    67.     const state = reactive({
    68.       needs:[
    69.         {
    70.           name:'绿豆芽',
    71.           account:'300克',
    72.         },
    73.          {
    74.           name:'韭菜',
    75.           account:'200克',
    76.         },
    77.          {
    78.           name:'鸡蛋',
    79.           account:'2个',
    80.         },
    81.          {
    82.           name:'粉条',
    83.           account:'一小把',
    84.         },
    85.          {
    86.           name:'生抽',
    87.           account:'2勺',
    88.         },
    89.          {
    90.           name:'盐',
    91.           account:'一小勺',
    92.         },
    93.          {
    94.           name:'鸡精',
    95.           account:'一小勺',
    96.         },
    97.          {
    98.           name:'蒜末',
    99.           account:'2瓣',
    100.         },
    101.         {
    102.           name:'耗油',
    103.           account:'一小勺',
    104.         },
    105.       ],
    106.       steps:[
    107.         {
    108.           img: require('@/assets/cook/1.jpg'),
    109.           dis:'绿豆芽洗净，控水'
    110.         },
    111.         {
    112.           img: require('@/assets/cook/2.jpg'),
    113.           dis:'绿豆芽洗净，控水'
    114.         },
    115.         {
    116.           img: require('@/assets/cook/3.jpg'),
    117.           dis:'绿豆芽洗净，控水'
    118.         },
    119.         {
    120.           img: require('@/assets/cook/4.jpg'),
    121.           dis:'绿豆芽洗净，控水'
    122.         },
    123.         {
    124.           img: require('@/assets/cook/5.jpg'),
    125.           dis:'绿豆芽洗净，控水'
    126.         },
    127.         {
    128.           img: require('@/assets/cook/6.jpg'),
    129.           dis:'绿豆芽洗净，控水'
    130.         },
    131.         {
    132.           img: require('@/assets/cook/7.jpg'),
    133.           dis:'绿豆芽洗净，控水'
    134.         },
    135.         {
    136.           img: require('@/assets/cook/8.jpg'),
    137.           dis:'绿豆芽洗净，控水'
    138.         },
    139.         {
    140.           img: require('@/assets/cook/9.jpg'),
    141.           dis:'绿豆芽洗净，控水'
    142.         },
    143.       ],
    144.       imgs:[
    145.         require('@/assets/class图标/1.png'),
    146.         require('@/assets/class图标/2.png'),
    147.         require('@/assets/class图标/3.png'),
    148.       ],
    149.       
    150.     })
    151.     onMounted(()=>{
    152.       window.addEventListener('scroll',()=>{
    153.         let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
    154.         let o = document.querySelector('.cookBar1');
    155.         o.style.opacity = top/400;
    156.       })
    157.       
    158.     })
    159.     const share = ()=>{
    160.       showShare.value = true;
    161.     }
    162.     const addCollect = ()=>{
    163.       console.log('收到消息')
    164.       store.commit('setCook1',route.params.img);
    165.       store.commit('setCook2',route.params.text);
    166.       store.state.cook.isCollect = true;
    167.       console.log(store.state.cook.isCollect)
    168.       console.log(store.state.cook);
    169.      
    170.     }
    171.     return{
    172.       ...toRefs(state),
    173.       options,
    174.       showShare,
    175.       share,
    176.       addCollect
    177.     }
    178.   }
    179.   
    180. }
    181. script>

    4、代码结构图

    总结

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

  • 相关阅读:
    [BUG]warn(f“Failed to load image Python extension: {e}“)的解决办法
    jenkins如何请求http接口及乱码问题解决
    技术实践｜高斯集群服务器双缺省网关故障分析
    springboot防止表单重复提交
    离散数学复习：命题逻辑
    [Vue]配置代理
    3.1、数据链路层概述
    乐高式扩展：在Seal软件供应链防火墙中轻松集成代码规范工具
    快来！！！学弟的这篇结构体让学姐老脸一红！！！
    python标准库操作
  • 原文地址：https://blog.csdn.net/pandas23/article/details/126612010