当前位置：首页 > news >正文

Spring Boot + Vue 企业产品展示网站搭建方案

news 2026/7/29 7:39:11

企业产品网站通常包括首页、产品中心、案例展示、新闻资讯和留言咨询。简单项目可以使用静态页面快速上线；如果需要后台发布内容、管理产品和保存客户线索，则更适合采用 Vue 前端加 Spring Boot 后端的前后端分离架构。

两种网站建设方案对比

对比维度	方案一：静态响应式网站	方案二：Vue + Spring Boot
页面技术	HTML、CSS、JavaScript	Vue、Element Plus
后端能力	无，或使用第三方表单	Spring Boot、MySQL
内容维护	修改代码后重新发布	登录管理后台在线发布
SEO	页面结构简单，易于基础优化	需处理预渲染或服务端渲染
推荐场景	内容较少、更新频率低	产品多、经常发布新闻和案例

方案一：搭建响应式产品页面

1. 页面结构

<section class="product-section"> <div class="section-title"> <h2>核心产品</h2> <p>面向不同业务场景提供稳定、易扩展的数字化产品</p> </div> <div id="productList" class="product-grid"></div> </section>

2. 响应式样式

.product-section { max-width: 1200px; margin: 0 auto; padding: 72px 24px; } .section-title { margin-bottom: 36px; text-align: center; } .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .product-card { padding: 28px; border: 1px solid #e8ebf0; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(24, 39, 75, 0.06); } @media (max-width: 768px) { .product-grid { grid-template-columns: 1fr; } }

3. 渲染产品数据

const products = [ { name: '智能客户管理系统', summary: '统一管理客户资料和销售进度' }, { name: '数据分析平台', summary: '通过可视化报表观察业务变化' }, { name: '移动协作工具', summary: '支持团队任务、审批和消息协同' } ] const productList = document.querySelector('#productList') productList.innerHTML = products.map(item => ` <article class="product-card"> <h3>${item.name}</h3> <p>${item.summary}</p> <a href="./product-detail.html?name=${encodeURIComponent(item.name)}"> 查看详情 </a> </article> `).join('')

这种方案不依赖数据库，使用 Nginx、对象存储或静态托管平台即可发布。需要注意图片压缩、标题层级、页面描述和移动端适配。

方案二：Vue + Spring Boot 内容管理网站

1. 数据表设计

CREATE TABLE product ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL, summary VARCHAR(255) NOT NULL, cover_url VARCHAR(500), content TEXT, status TINYINT NOT NULL DEFAULT 1, sort_number INT NOT NULL DEFAULT 0, created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP );

2. Spring Boot 产品接口

@RestController @RequestMapping("/api/products") public class ProductController { private final ProductService productService; public ProductController(ProductService productService) { this.productService = productService; } @GetMapping public Result<List<ProductVO>> list() { return Result.success(productService.listPublishedProducts()); } @GetMapping("/{id}") public Result<ProductVO> detail(@PathVariable Long id) { return Result.success(productService.getPublishedProduct(id)); } }

3. Vue 页面请求与展示

<script setup> import { onMounted, ref } from 'vue' import axios from 'axios' const products = ref([]) const loading = ref(false) onMounted(async () => { loading.value = true try { const { data } = await axios.get('/api/products') products.value = data.data } finally { loading.value = false } }) </script> <template> <section class="product-grid" v-loading="loading"> <article v-for="item in products" :key="item.id" class="product-card"> <img :src="item.coverUrl" :alt="item.name"> <h3>{{ item.name }}</h3> <p>{{ item.summary }}</p> <RouterLink :to="`/products/${item.id}`">查看详情</RouterLink> </article> </section> </template>

4. 留言接口

企业网站的留言表单容易收到垃圾内容，因此要增加参数校验、访问频率限制和验证码。

@PostMapping("/api/inquiries") public Result<Void> submitInquiry(@Valid @RequestBody InquiryRequest request) { inquiryService.save(request); return Result.success(); }

public class InquiryRequest { @NotBlank(message = "姓名不能为空") private String name; @Pattern(regexp = "^1[3-9]\\d{9}$", message = "手机号格式不正确") private String mobile; @Size(max = 500, message = "留言内容不能超过500字") private String content; }