企业级门户网站设计与实现：基于SpringBoot + Vue3的全栈解决方案（Day 1）

呱牛doit
0 阅读5分钟

项目概述

继上一个实战项目《企业级绩效考核系统设计与实现：基于FastAPI + Vue3的全栈解决方案》，作者想继续“直播”第二个企业级项目从0搭建的过程。

本项目前端是基于Vue 3 + Vite + Tailwind CSS，后端基于JeecgBoot开源框架进行开发的企业级门户网站，主要用于金融科技领域的内容展示和信息分享。

下面内容将是每天的工作内容，如有纰漏请各位同学指正。

项目前端效果（静态页面访问地址：http://39.106.60.214:8000）：

​编辑

开发环境搭建

1. 项目初始化

使用Vite创建Vue 3项目：

npm create vite@latest fintech-vue3 -- --template vue
cd fintech-vue3
npm install

2. 依赖安装

安装Tailwind CSS和相关依赖：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. 配置Tailwind CSS

修改tailwind.config.js文件：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        bank: {
          primary: '#1a56db',
          secondary: '#0e7490',
          accent: '#f59e0b',
          success: '#059669',
        }
      },
      fontFamily: {
        sans: ['Inter', 'PingFang SC', 'Microsoft YaHei', 'sans-serif'],
      }
    },
  },
  plugins: [],
}

修改src/style.css文件：

@tailwind base;
@tailwind components;
@tailwind utilities;

.bank-gradient {
  background: linear-gradient(135deg, #1a56db 0%, #0e7490 100%);
}
.bank-card-shadow {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.bank-hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bank-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ad-container {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px dashed #cbd5e1;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* Banner Animation */
.banner-slide {
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
  position: absolute;
  inset: 0;
}
.banner-slide.active {
  opacity: 1;
  z-index: 10;
}
/* Progress Bar Animation */
@keyframes progress {
  from { width: 0%; }
  to { width: 100%; }
}
.progress-bar {
  animation: progress 5s linear infinite;
}
/* News Scroll */
.news-container {
  scroll-behavior: smooth;
}

页面结构搭建

1. 整体布局

采用响应式网格布局，主要分为头部、主内容区和页脚三部分：

  • 头部：包含Logo、导航菜单和搜索框
  • 主内容区：包含轮播图、广告位、快捷导航、精选文章、热门分类、金融科技每日速递和侧边栏
  • 页脚：包含网站信息、技术领域、职场指南、关于我们和版权信息

2. 组件结构

App.vue
├── 头部导航
├── 主内容区
│   ├── 轮播图
│   ├── 广告位
│   ├── 快捷导航
│   ├── 精选文章
│   ├── 热门分类
│   ├── 金融科技每日速递
│   └── 侧边栏
│       ├── 广告位
│       ├── 作者信息
│       ├── 热门标签
│       └── 最新评论
└── 页脚

功能开发

1. 轮播图功能

实现了自动轮播和手动控制功能：

// 初始化轮播图
function initBannerSlider() {
  const slides = document.querySelectorAll('.banner-slide');
  const dots = document.querySelectorAll('.banner-dot');
  const prevBtn = document.querySelector('.banner-prev');
  const nextBtn = document.querySelector('.banner-next');
  let currentSlide = 0;
  
  function showSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.remove('active');
      dots[i].classList.remove('active');
      dots[i].classList.remove('w-8');
      dots[i].classList.add('w-2');
    });
    
    slides[index].classList.add('active');
    dots[index].classList.add('active');
    dots[index].classList.add('w-8');
  }
  
  function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    showSlide(currentSlide);
  }
  
  function prevSlide() {
    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
    showSlide(currentSlide);
  }
  
  // 自动轮播
  setInterval(nextSlide, 5000);
  
  // 手动控制
  prevBtn?.addEventListener('click', prevSlide);
  nextBtn?.addEventListener('click', nextSlide);
  
  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      currentSlide = index;
      showSlide(currentSlide);
    });
  });
}

2. 移动菜单功能

实现了响应式移动菜单：

// 移动菜单状态
const mobileMenuOpen = ref(false);

// 切换移动菜单
function toggleMobileMenu() {
  mobileMenuOpen.value = !mobileMenuOpen.value;
}

3. 图标初始化

集成了Lucide Icons：

// 初始化Lucide图标
onMounted(() => {
  if (window.lucide) {
    window.lucide.createIcons();
  }
  
  // 初始化轮播图
  initBannerSlider();
});

样式设计

1. 配色方案

采用金融科技领域常用的蓝色系配色：

  • 主色：#1a56db（深蓝色）
  • 辅助色：#0e7490（青色）
  • 强调色：#f59e0b（橙色）
  • 成功色：#059669（绿色）

2. 排版设计

  • 标题：使用font-semibold和较大字号
  • 正文：使用text-slate-600和适中字号
  • 辅助文字：使用text-slate-400和较小字号

3. 响应式设计

  • 移动端：单列布局，菜单折叠
  • 平板：双列布局，适当调整间距
  • 桌面：三列布局，完整展示所有内容

问题解决

1. Tailwind CSS配置问题

问题：使用Tailwind CSS v4时出现PostCSS配置错误

解决方案：

  • 降级到Tailwind CSS v3.4.1
  • 修改postcss.config.js文件：
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

2. 布局调整

问题：统计信息栏位置不当

解决方案：将统计信息栏从顶部移动到页脚的版权信息下面

问题：轮播图高度过高

解决方案：将轮播图高度调整为原来的2/3左右：

  • 移动端：从380px调整为250px
  • 平板：从420px调整为280px
  • 桌面：从450px调整为300px

问题：侧边栏与主内容区底部不齐平

解决方案：在最新评论部分添加第4条评论，确保其底部与“金融科技 · 每日速递”的底部齐平

项目结构

fintech-vue3/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── style.css
├── index.html
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── vite.config.js

开发成果

  • ✅ 响应式布局设计
  • ✅ 轮播图功能（自动播放+手动控制）
  • ✅ 移动菜单功能
  • ✅ 图标集成
  • ✅ 页面结构搭建
  • ✅ 样式设计和实现

后续计划

  1. 功能优化：

    • 添加更多交互功能
    • 优化轮播图性能
    • 实现搜索功能

  2. 内容完善：

    • 添加更多文章内容
    • 完善侧边栏信息
    • 增加更多分类和标签

  3. 性能优化：

    • 图片懒加载
    • 代码分割
    • 缓存策略

  4. 部署上线：

    • 构建优化
    • 部署到服务器
    • 域名配置

总结

第一天的开发工作主要完成了项目的初始化、环境搭建、页面结构搭建和基础功能实现。通过使用Vue 3 + Vite + Tailwind CSS技术栈，成功创建了一个现代化的企业级门户网站，实现了响应式设计和核心功能。后续将继续完善功能和优化性能，确保网站的用户体验和性能表现。

​

avatar
文章
阅读
粉丝