苍穹外卖新增功能之前端篇

学弟想用苍穹外卖当毕设 让我帮忙改一下前端和新增后端功能 顺手记录一下修改的过程 需要源码的可以留下邮箱

前端修改篇

1.部署篇

部署本身还是挺简单的，我用的node版本为：

Npm版本为：

不会切换版本的可以看我这个博客：

NVM安装管理node.js+配国内镜像源+配置环境变量 -优快云博客https://blog.youkuaiyun.com/qq_56622605/article/details/148239553?spm=1001.2014.3001.5501

2.首先 在首页上新增了一段动态字符

是动态的一个一个跳出来的

 <div class="dynamic-text-container">
      <span v-for="(char, index) in dynamicText" :key="index" :style="{ animationDelay: `${index * 0.1}s` }">{{ char }}</span>
</div>

private originalText = '你好，欢迎来到苍穹外卖商家平台'
  private dynamicText: string[] = []
  private timer: any

  @Watch('$route', { immediate: true })
  private onRouteChange(route: Route) {}

.dynamic-text-container {
  position: absolute;
  top: 30px; /* 调整距离顶部的位置 */
  right: 30px; /* 调整距离右侧的位置 */
  font-size: 24px; 
  font-weight: bold;
  color: #fff;
  white-space: nowrap; /* 防止文字换行 */
  
  span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
    
    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}

2.其次改变了色调颜色

新增ai客服功能

目前完成了一半 代码明天补发

新增功能

sidebar-item v-for="route in routes"
                      :key="route.path"
                      :item="route"
                      :base-path="route.path"
                      :is-collapse="isCollapse" />

通过源码我们发现 左侧菜单栏是按照路由表来循环遍历的

所以我们在路由表中新增

{
          path: '/ai-service',
          component: () => import(/* webpackChunkName: "ai-service" */ '@/views/ai-service/index.vue'),
          meta: {
            title: 'AI客服',
            icon: 'icon-vip' ,
          }
        },

跳转地址

在views/ai-service下新建一个index.vue

 

如果有哪里讲的不明白可以在评论区讨论 需要资源的可以留下邮箱 到时候会发给你