怎樣搭建基于SpringBoot+Vue 的Web商城應用

怎樣搭建基于SpringBoot+Vue 的Web商城應用

引言

隨著互聯網技術的快速發展，電子商務已經成為現代商業的重要組成部分。為了滿足市場需求，開發一個高效、穩定且易于維護的Web商城應用顯得尤為重要。本文將詳細介紹如何基于Spring Boot和Vue.js搭建一個完整的Web商城應用。

技術棧

在開始之前，我們需要明確所使用的技術棧：

• 后端：Spring Boot
• 前端：Vue.js
• 數據庫：MySQL
• 構建工具：Maven（后端）、Webpack（前端）
• 版本控制：Git

項目結構

后端項目結構

src
├── main
│   ├── java
│   │   └── com
│   │       └── example
│   │           └── demo
│   │               ├── controller
│   │               ├── service
│   │               ├── repository
│   │               ├── model
│   │               └── DemoApplication.java
│   └── resources
│       ├── application.properties
│       └── static
└── test
    └── java
        └── com
            └── example
                └── demo

前端項目結構

src
├── assets
├── components
├── router
├── store
├── views
└── main.js

后端開發

1. 創建Spring Boot項目

首先，使用Spring Initializr創建一個新的Spring Boot項目。選擇以下依賴：

• Spring Web
• Spring Data JPA
• MySQL Driver
• Lombok

2. 配置數據庫

在application.properties中配置MySQL數據庫連接：

spring.datasource.url=jdbc:mysql://localhost:3306/mydb
spring.datasource.username=root
spring.datasource.password=password
spring.jpa.hibernate.ddl-auto=update

3. 創建實體類

在model包中創建商品實體類Product：

package com.example.demo.model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Product {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private double price;
    private String description;

    // Getters and Setters
}

4. 創建Repository接口

在repository包中創建ProductRepository接口：

package com.example.demo.repository;

import com.example.demo.model.Product;
import org.springframework.data.jpa.repository.JpaRepository;

public interface ProductRepository extends JpaRepository<Product, Long> {
}

5. 創建Service層

在service包中創建ProductService類：

package com.example.demo.service;

import com.example.demo.model.Product;
import com.example.demo.repository.ProductRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ProductService {

    @Autowired
    private ProductRepository productRepository;

    public List<Product> getAllProducts() {
        return productRepository.findAll();
    }

    public Product getProductById(Long id) {
        return productRepository.findById(id).orElse(null);
    }

    public Product saveProduct(Product product) {
        return productRepository.save(product);
    }

    public void deleteProduct(Long id) {
        productRepository.deleteById(id);
    }
}

6. 創建Controller層

在controller包中創建ProductController類：

package com.example.demo.controller;

import com.example.demo.model.Product;
import com.example.demo.service.ProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/products")
public class ProductController {

    @Autowired
    private ProductService productService;

    @GetMapping
    public List<Product> getAllProducts() {
        return productService.getAllProducts();
    }

    @GetMapping("/{id}")
    public Product getProductById(@PathVariable Long id) {
        return productService.getProductById(id);
    }

    @PostMapping
    public Product createProduct(@RequestBody Product product) {
        return productService.saveProduct(product);
    }

    @PutMapping("/{id}")
    public Product updateProduct(@PathVariable Long id, @RequestBody Product product) {
        product.setId(id);
        return productService.saveProduct(product);
    }

    @DeleteMapping("/{id}")
    public void deleteProduct(@PathVariable Long id) {
        productService.deleteProduct(id);
    }
}

前端開發

1. 創建Vue項目

使用Vue CLI創建一個新的Vue項目：

vue create web-mall

選擇默認配置或根據需求自定義配置。

2. 安裝依賴

安裝必要的依賴：

npm install axios vue-router vuex

3. 配置路由

在router/index.js中配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import ProductList from '../views/ProductList.vue';
import ProductDetail from '../views/ProductDetail.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/products',
      name: 'ProductList',
      component: ProductList
    },
    {
      path: '/products/:id',
      name: 'ProductDetail',
      component: ProductDetail
    }
  ]
});

4. 創建Vuex Store

在store/index.js中創建Vuex Store：

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    products: []
  },
  mutations: {
    SET_PRODUCTS(state, products) {
      state.products = products;
    }
  },
  actions: {
    fetchProducts({ commit }) {
      axios.get('/api/products')
        .then(response => {
          commit('SET_PRODUCTS', response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  },
  getters: {
    products: state => state.products
  }
});

5. 創建組件

在views目錄下創建ProductList.vue和ProductDetail.vue組件。

ProductList.vue

<template>
  <div>
    <h1>Product List</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        <router-link :to="`/products/${product.id}`">{{ product.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['products'])
  },
  created() {
    this.$store.dispatch('fetchProducts');
  }
};
</script>

ProductDetail.vue

<template>
  <div>
    <h1>{{ product.name }}</h1>
    <p>{{ product.description }}</p>
    <p>Price: ${{ product.price }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      product: {}
    };
  },
  created() {
    const productId = this.$route.params.id;
    axios.get(`/api/products/${productId}`)
      .then(response => {
        this.product = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
};
</script>

前后端聯調

1. 配置跨域

在后端的DemoApplication.java中添加跨域配置：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

2. 啟動項目

分別啟動后端和前端項目：

# 后端
mvn spring-boot:run

# 前端
npm run serve

3. 測試功能

訪問http://localhost:8080，測試商品列表和商品詳情功能。

部署

1. 打包前端項目

使用以下命令打包前端項目：

npm run build

2. 部署前端靜態文件

將打包生成的dist目錄中的文件復制到后端的src/main/resources/static目錄中。

3. 打包后端項目

使用以下命令打包后端項目：

mvn clean package

4. 部署后端項目

將生成的jar文件部署到服務器上，并啟動應用。

結論

通過本文的步驟，我們成功搭建了一個基于Spring Boot和Vue.js的Web商城應用。這個應用具備了基本的商品管理功能，并且可以通過前后端分離的方式實現高效的開發和部署。希望本文能為你的Web開發之旅提供幫助。