隨著互聯網技術的快速發展,電子商務已經成為現代商業的重要組成部分。為了滿足市場需求,開發一個高效、穩定且易于維護的Web商城應用顯得尤為重要。本文將詳細介紹如何基于Spring Boot和Vue.js搭建一個完整的Web商城應用。
在開始之前,我們需要明確所使用的技術棧:
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
首先,使用Spring Initializr創建一個新的Spring Boot項目。選擇以下依賴:
在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
在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
}
在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> {
}
在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);
}
}
在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);
}
}
使用Vue CLI創建一個新的Vue項目:
vue create web-mall
選擇默認配置或根據需求自定義配置。
安裝必要的依賴:
npm install axios vue-router vuex
在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
}
]
});
在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
}
});
在views
目錄下創建ProductList.vue
和ProductDetail.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>
<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>
在后端的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);
}
}
分別啟動后端和前端項目:
# 后端
mvn spring-boot:run
# 前端
npm run serve
訪問http://localhost:8080
,測試商品列表和商品詳情功能。
使用以下命令打包前端項目:
npm run build
將打包生成的dist
目錄中的文件復制到后端的src/main/resources/static
目錄中。
使用以下命令打包后端項目:
mvn clean package
將生成的jar
文件部署到服務器上,并啟動應用。
通過本文的步驟,我們成功搭建了一個基于Spring Boot和Vue.js的Web商城應用。這個應用具備了基本的商品管理功能,并且可以通過前后端分離的方式實現高效的開發和部署。希望本文能為你的Web開發之旅提供幫助。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。