创建简单的 AngularJS/Spring Boot Web 市场应用程序
在这篇文章中，我们将创建一个简单的电子市场应用程序，使用 AngularJS 作为前端框架和 Spring Boot 作为后端框架。我们的应用程序将允许用户查看产品列表，并能通过 RESTful API 来管理这些产品。
环境准备
首先，你需要安装以下工具： 1. JDK 8 或更高版本 2. Maven 3. Node.js 和 npm 4. 一个合适的 IDE（如 IntelliJ IDEA 或 Visual Studio Code）
后端：Spring Boot 项目
- 创建 Spring Boot 项目
可以通过 Spring Initializr 创建一个新的 Spring Boot 项目，选择需要的依赖项：Spring Web 和 Spring Data JPA。
- 项目结构
在项目中，我们将创建一个简单的产品模型和控制器。
Product.java（模型）：
package com.example.market.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;
// getters 和 setters
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Double getPrice() {
return price;
}
public void setPrice(Double price) {
this.price = price;
}
}
ProductController.java（控制器）：
package com.example.market.controller;
import com.example.market.model.Product;
import com.example.market.repository.ProductRepository;
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 ProductRepository productRepository;
@GetMapping("/")
public List<Product> getAllProducts() {
return productRepository.findAll();
}
@PostMapping("/")
public Product createProduct(@RequestBody Product product) {
return productRepository.save(product);
}
// 其他 CRUD 操作可以在这里实现
}
ProductRepository.java（存储库）：
package com.example.market.repository;
import com.example.market.model.Product;
import org.springframework.data.jpa.repository.JpaRepository;
public interface ProductRepository extends JpaRepository<Product, Long> {
}
- 配置数据库
在 application.properties 中配置数据库连接（以 H2 数据库为例）：
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.h2.console.enabled=true
前端：AngularJS 项目
- 创建一个新的 AngularJS 项目
使用 AngularJS 创建一个简单的项目结构。可以使用 Angular CLI 创建新的项目，或手动创建。
- 项目结构
确保项目中有一个 index.html 文件和一个主控制器。
index.html：
<!DOCTYPE html>
<html ng-app="marketApp">
<head>
<title>市场应用</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="ProductController">
<h1>产品列表</h1>
<div ng-repeat="product in products">
<h2>{{ product.name }}</h2>
<p>价格：{{ product.price }}</p>
</div>
<div>
<h3>添加产品</h3>
<input type="text" ng-model="newProduct.name" placeholder="产品名称">
<input type="number" ng-model="newProduct.price" placeholder="产品价格">
<button ng-click="addProduct()">添加</button>
</div>
</div>
</body>
</html>
app.js（AngularJS 控制器）：
var app = angular.module('marketApp', []);
app.controller('ProductController', ['$scope', '$http', function($scope, $http) {
$scope.products = [];
$scope.newProduct = {};
$http.get('/api/products/')
.then(function(response) {
$scope.products = response.data;
});
$scope.addProduct = function() {
$http.post('/api/products/', $scope.newProduct)
.then(function(response) {
$scope.products.push(response.data);
$scope.newProduct = {}; // 清空输入
});
};
}]);
启动应用
- 启动 Spring Boot 应用程序
- 使用一个简单的 HTTP 服务器或 IDE 内置的服务器打开 AngularJS 项目
- 访问你的应用，应该能够查看和添加产品。
结论
通过这个简单的示例，我们展示了如何使用 Spring Boot 作为后端 RESTful API 来处理数据，并使用 AngularJS 作为前端框架来展示这些数据。可以根据需求进一步扩展功能，比如实现搜索、删除和编辑等功能。希望这篇文章能帮助你入门使用 AngularJS 和 Spring Boot 开发现代 Web 应用程序。
