基于Angular+BootStrap+SpringBoot简单的购物网站

目录

一、项目结构图

二、目录结构解析

后端 (Spring Boot)

前端 (Angular)

三、技术栈

四、具体功能实现

五、数据库设计

六、后端实现

1. 设置Spring Boot项目

2. 数据库实体类

3. 创建Repository

4. 创建Service层

5. 创建Controller层

七、前端实现（Angular）

1、创建 Angular 服务层  

2、创建 Angular 路由配置

3、配置文件

4、用户登录与注册

5、商品浏览与添加购物车

6、订单管理与收货地址

7、后台管理系统

八、部署与测试

一、项目结构图

/shopping-website
├── /backend (Spring Boot 项目)
│   ├── /src
│   │   ├── /main
│   │   │   ├── /java
│   │   │   │   ├── /com
│   │   │   │   │   ├── /example
│   │   │   │   │   │   ├── /shopping
│   │   │   │   │   │   │   ├── /config              # 配置文件，如Spring Security等
│   │   │   │   │   │   │   ├── /controller          # 控制器，处理API请求
│   │   │   │   │   │   │   ├── /entity              # 实体类，映射数据库表
│   │   │   │   │   │   │   ├── /exception           # 异常处理类
│   │   │   │   │   │   │   ├── /repository          # 数据访问层（JPA）
│   │   │   │   │   │   │   ├── /security            # 安全配置，Spring Security配置
│   │   │   │   │   │   │   ├── /service             # 业务逻辑层
│   │   │   │   │   │   │   └── /util                # 工具类
│   │   │   │   │   │   ├── /resources
│   │   │   │   │   │   │   └── application.yml      # 配置文件，数据库连接等
│   │   │   │   │   │   └── /static
│   │   └── /test
│   ├── /pom.xml                                       # Maven 配置文件，包含所有依赖
│
├── /frontend (Angular 项目)
│   ├── /src
│   │   ├── /app
│   │   │   ├── /components                           # 公共组件
│   │   │   │   ├── /login
│   │   │   │   ├── /register
│   │   │   │   ├── /product-list
│   │   │   │   ├── /cart
│   │   │   │   └── /order
│   │   │   ├── /services                             # 服务层，处理API请求
│   │   │   │   ├── /auth.service.ts
│   │   │   │   ├── /product.service.ts
│   │   │   │   ├── /cart.service.ts
│   │   │   │   ├── /order.service.ts
│   │   │   ├── /guards                               # 路由守卫
│   │   │   │   └── /auth.guard.ts
│   │   │   ├── /models                               # 数据模型类
│   │   │   │   ├── /user.ts
│   │   │   │   ├── /product.ts
│   │   │   │   ├── /order.ts
│   │   │   └── /app.module.ts                        # Angular 主模块
│   │   ├── /assets                                   # 静态资源（图片、字体等）
│   │   └── /environments                            # 环境配置文件
│   ├── /angular.json                                 # Angular 配置文件
│   ├── /package.json                                 # Node.js 配置文件
│   └── /tsconfig.json                               # TypeScript 配置文件
│
└── README.md                                          # 项目说明文件

二、目录结构解析

后端 (Spring Boot)

  • /src/main/java/com/example/shopping/config

    • SecurityConfig.java：Spring Security 配置类，设置权限控制。
    • PaymentConfig.java：支付接口配置类（集成支付宝、微信支付等）。

  • /controller
    处理HTTP请求的Controller类，通常负责接收前端请求、调用服务层逻辑并返回数据。例如：

    • UserController.java：处理用户注册、登录请求。
    • ProductController.java：处理商品展示、商品查询等请求。
    • OrderController.java：处理订单相关请求，订单创建、查询、状态更新等。

  • /entity

    • User.java：用户实体类。
    • Product.java：商品实体类。
    • Order.java：订单实体类，包含订单的各个字段，如商品、用户、支付状态等。

  • /repository

    • UserRepository.java：操作用户数据的JPA接口。
    • ProductRepository.java：操作商品数据的JPA接口。
    • OrderRepository.java：操作订单数据的JPA接口。

  • /security

    • UserDetailsServiceImpl.java：用户认证服务，实现UserDetailsService接口，加载用户信息。

  • /service

    • UserService.java：处理用户逻辑，包含注册、登录等业务逻辑。
    • ProductService.java：商品逻辑处理，处理商品的添加、修改、查询等。
    • OrderService.java：订单管理，处理订单的创建、支付、发货等业务。
    • PaymentService.java：支付相关的服务，集成支付宝、微信支付等接口。

  • /util

    • PaymentUtil.java：支付工具类，封装与第三方支付平台交互的工具方法。
    • OrderUtil.java：订单处理工具类，包含生成订单号、处理订单状态等功能。

前端 (Angular)

  • /components

    • login/：登录组件，提供用户登录界面和逻辑。
    • register/：注册组件，提供用户注册界面和逻辑。
    • product-list/：商品列表组件，展示商品信息。
    • cart/：购物车组件，展示购物车中的商品，支持修改商品数量和删除商品。
    • order/：订单组件，展示订单信息和订单管理功能。

  • /services

    • auth.service.ts：认证服务，处理用户的登录、注册、权限检查等操作。
    • product.service.ts：商品服务，提供与商品相关的API调用。
    • cart.service.ts：购物车服务，提供购物车操作功能。
    • order.service.ts：订单服务，提供订单创建、查询、支付等功能。

  • /guards

    • auth.guard.ts：路由守卫，用于保护用户路由，确保未登录用户无法访问需要登录的页面。

  • /models

    • user.ts：用户模型类，定义用户的数据结构。
    • product.ts：商品模型类，定义商品的数据结构。
    • order.ts：订单模型类，定义订单的数据结构。

  • /app.module.ts：主模块，包含Angular应用的模块配置，声明所有组件、服务和路由。

三、技术栈

  • 前端：Angular + Bootstrap
  • 后端：Spring Boot + Spring Security + JPA + MySQL
  • 数据库：MySQL

四、具体功能实现

  1. 用户管理（登录、注册、权限控制）

    • 前端：使用 Angular 路由守卫和服务实现登录、注册和角色管理。
    • 后端：通过 Spring Security 配置用户权限，确保不同角色用户的不同访问权限。

  2. 支付功能（支付宝、微信支付等）

    • 后端：集成支付宝和微信支付接口，处理支付请求、支付回调等。
    • 前端：在订单确认页面显示支付二维码（支付宝、微信支付），并处理支付回调。

  3. 商品管理和购物车

    • 后端：提供商品的增删改查接口，支持用户浏览商品，添加到购物车。
    • 前端：购物车组件提供购物车的管理功能，支持增加、删除商品和修改商品数量。

  4. 订单管理（创建、支付、发货）

    • 后端：管理订单的创建、支付、发货等流程，处理订单状态的更新。
    • 前端：用户可以查看自己的订单，并进行支付和查看订单详情。管理员可以查看所有订单并发货。

  5. 后台管理

    • 后端：管理员角色可以访问商品管理、订单管理、用户管理等功能。
    • 前端：管理界面提供商品、订单、用户管理的后台页面。

五、数据库设计

  • 用户表：用于存储用户信息。
  • 角色表：用于存储用户角色（如管理员、普通用户等）。
  • 商品表：用于存储商品信息。
  • 订单表：用于存储订单信息。
  • 订单项表：用于存储每个订单中的商品项。
  • 购物车表：用于存储用户的购物车商品。
  • 支付表：用于记录支付信息（与支付宝、微信等支付集成相关）。

  1. User (用户表)

    CREATE TABLE `user` (
  `id` BIGINT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT '用户ID',
  `username` VARCHAR(100) NOT NULL UNIQUE COMMENT '用户名',
  `password` VARCHAR(255) NOT NULL COMMENT '用户密码',
  `email` VARCHAR(255) DEFAULT NULL COMMENT '邮箱',
  `phone` VARCHAR(15) DEFAULT NULL COMMENT '手机号',
  `address` TEXT DEFAULT NULL COMMENT '收货地址',
  `status` TINYINT(1) DEFAULT 1 COMMENT '状态 1-启用 0-禁用',
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';

  2. Role(角色表)

    CREATE TABLE `role` (
  `id` BIGINT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT '角色ID',
  `role_name` VARCHAR(50) NOT NULL UNIQUE COMMENT '角色名称',
  `description` VARCHAR(255) DEFAULT NULL COMMENT '角色描述',
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='角色表';

  3. user_role(用户角色关联表)

    CREATE TABLE `user_role` (
  `user_id` BIGINT(20) NOT NULL COMMENT '用户ID',
  `role_id` BIGINT(20) NOT NULL COMMENT '角色ID',
  PRIMARY KEY (`user_id`, `role_id`),
  CONSTRAINT `fk_user` FOREIGN KEY (`user_id`) REFERENCES `user`(`id`) ON DELETE CASCADE,
  CONSTRAINT `fk_role` FOREIGN KEY (`role_id`) REFERENCES `role`(`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户角色关联表';

  4. product(商品表)

    CREATE TABLE `product` (
  `id` BIGINT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT '商品ID',
  `name` VARCHAR(255) NOT NULL COMMENT '商品名称',
  `description` TEXT DEFAULT NULL COMMENT '商品描述',
  `price` DECIMAL(10, 2) NOT NULL COMMENT '商品价格',
  `stock` INT(11) NOT NULL DEFAULT 0 COMMENT '商品库存',
  `category_id` BIGINT(20) DEFAULT NULL COMMENT '商品类别ID',
  `image_url` VARCHAR(255) DEFAULT NULL COMMENT '商品图片URL',
  `status` TINYINT(1) DEFAULT 1 COMMENT '商品状态 1-上架 0-下架',
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品表';

  5. order(订单表)

    CREATE TABLE `order` (
  `id` BIGINT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT '订单ID',
  `user_id` BIGINT(20) NOT NULL COMMENT '用户ID',
  `total_price` DECIMAL(10, 2) NOT NULL COMMENT '订单总价',
  `status` ENUM('PENDING', 'PAID', 'SHIPPED', 'DELIVERED', 'CANCELLED') NOT NULL DEFAULT 'PENDING' COMMENT '订单状态',
  `shipping_address` TEXT NOT NULL COMMENT '收货地址',
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  `payment_method` VARCHAR(50) DEFAULT NULL COMMENT '支付方式',
  `payment_status` ENUM('PENDING', 'SUCCESS', 'FAILED') NOT NULL DEFAULT 'PENDING' COMMENT '支付状态',
  CONSTRAINT `fk_user_order` FOREIGN KEY (`user_id`) REFERENCES `user`(`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='订单表';
  6. order_item(订单项表) 
    CREATE TABLE `order_item` (
  `id` BIGINT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT '订单项ID',
  `order_id` BIGINT(20) NOT NULL COMMENT '订单ID',
  `product_id` BIGINT(20) NOT NULL COMMENT '商品ID',
  `quantity` INT(11) NOT NULL DEFAULT 1 COMMENT '商品数量',
  `unit_price` DECIMAL(10, 2) NOT NULL COMMENT '商品单价',
  CONSTRAINT `fk_order` FOREIGN KEY (`order_id`) REFERENCES `order`(`id`) ON DELETE CASCADE,
  CONSTRAINT `fk_product` FOREIGN KEY (`product_id`) REFERENCES `product`(`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='订单项表';
  7. cart(购物车表) 
    CREATE TABLE `cart` (
  `id` BIGINT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT '购物车ID',
  `user_id` BIGINT(20) NOT NULL COMMENT '用户ID',
  `product_id` BIGINT(20) NOT NULL COMMENT '商品ID',
  `quantity` INT(11) NOT NULL DEFAULT 1 COMMENT '商品数量',
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '添加时间',
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
  CONSTRAINT `fk_user_cart` FOREIGN KEY (`user_id`) REFERENCES `user`(`id`) ON DELETE CASCADE,
  CONSTRAINT `fk_product_cart` FOREIGN KEY (`product_id`) REFERENCES `product`(`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='购物车表';
  8. payment(支付表) 
    ​
CREATE TABLE `payment` (
  `id` BIGINT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT '支付ID',
  `order_id` BIGINT(20) NOT NULL COMMENT '订单ID',
  `payment_method` ENUM('ALIPAY', 'WECHAT', 'CREDIT_CARD') NOT NULL COMMENT '支付方式',
  `payment_status` ENUM('PENDING', 'SUCCESS', 'FAILED') NOT NULL DEFAULT 'PENDING' COMMENT '支付状态',
  `payment_date` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '支付时间',
  `transaction_id` VARCHAR(255) DEFAULT NULL COMMENT '交易流水号',
  `amount` DECIMAL(10, 2) NOT NULL COMMENT '支付金额',
  CONSTRAINT `fk_order_payment` FOREIGN KEY (`order_id`) REFERENCES `order`(`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='支付表';

​

  9. 商品类别表 category（可选)

    CREATE TABLE `category` (
  `id` BIGINT(20) NOT NULL AUTO_INCREMENT PRIMARY KEY COMMENT '类别ID',
  `name` VARCHAR(255) NOT NULL COMMENT '类别名称',
  `description` TEXT DEFAULT NULL COMMENT '类别描述',
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品类别表';

  10. 触发器（可选）

    在某些情况下，你可能需要一些触发器来自动更新库存或记录日志。

    DELIMITER $$

CREATE TRIGGER update_stock_after_order_insert
AFTER INSERT ON `order_item`
FOR EACH ROW
BEGIN
  UPDATE `product`
  SET `stock` = `stock` - NEW.quantity
  WHERE `id` = NEW.product_id;
END$$

DELIMITER ;

六、后端实现

1. 设置Spring Boot项目

首先，创建一个Spring Boot项目，集成Spring Web, Spring Data JPA, Spring Security。

<dependencies>
    <!-- Spring Boot Starter Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- Spring Boot Starter Data JPA -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>

    <!-- Spring Security -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>

    <!-- MySQL Connector -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>

    <!-- Thymeleaf for templates -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

2. 数据库实体类

  • User.java
@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    private String email;
    private String role;  // ROLE_USER, ROLE_ADMIN

    // getters and setters
}
  • Product.java                                                                                                                      
@Entity
public class Product {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String description;
    private double price;
    private int stock;

    // getters and setters
}

  • Cart.java 
    @Entity
public class Cart {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    @ManyToOne
    private User user;
    @ManyToOne
    private Product product;
    private int quantity;

    // getters and setters
}
  • Order.java 
    @Entity
public class Order {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    @ManyToOne
    private User user;
    private double totalPrice;
    private String status;  // PENDING, COMPLETED
    private String address;
    private LocalDateTime createTime;

    @OneToMany(mappedBy = "order")
    private List<OrderItem> orderItems;

    // getters and setters
}
  • OrderItem.java 
    @Entity
public class OrderItem {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    @ManyToOne
    private Order order;
    @ManyToOne
    private Product product;
    private int quantity;
    private double price;

    // getters and setters
}

3. 创建Repository

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
    Optional<User> findByUsername(String username);
}

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

@Repository
public interface CartRepository extends JpaRepository<Cart, Long> {
    List<Cart> findByUser(User user);
}

@Repository
public interface OrderRepository extends JpaRepository<Order, Long> {
    List<Order> findByUser(User user);
}

4. 创建Service层

  • UserService.java 
    @Service
public class UserService {
    @Autowired
    private UserRepository userRepository;

    public User register(User user) {
        // 处理密码加密
        return userRepository.save(user);
    }

    public User login(String username, String password) {
        // 密码验证逻辑
        return userRepository.findByUsername(username).orElse(null);
    }
}
  • ProductService.java 
    @Service
public class ProductService {
    @Autowired
    private ProductRepository productRepository;

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

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

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

5. 创建Controller层

  • UserController.java 
    @RestController
@RequestMapping("/api/user")
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping("/register")
    public ResponseEntity<User> register(@RequestBody User user) {
        return ResponseEntity.ok(userService.register(user));
    }

    @PostMapping("/login")
    public ResponseEntity<User> login(@RequestParam String username, @RequestParam String password) {
        User user = userService.login(username, password);
        if (user == null) {
            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(null);
        }
        return ResponseEntity.ok(user);
    }
}
  • ProductController.java 
    @RestController
@RequestMapping("/api/products")
public class ProductController {
    @Autowired
    private ProductService productService;

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

    @GetMapping("/{id}")
    public Product getProduct(@PathVariable Long id) {
        return productService.getProduct(id);
    }
}
  • CartController.java 
    @RestController
@RequestMapping("/api/cart")
public class CartController {
    @Autowired
    private CartRepository cartRepository;

    @PostMapping("/add")
    public ResponseEntity<Cart> addToCart(@RequestBody Cart cart) {
        return ResponseEntity.ok(cartRepository.save(cart));
    }

    @GetMapping("/list")
    public List<Cart> getCartItems(@RequestParam Long userId) {
        return cartRepository.findByUser(new User(userId));
    }
}

七、前端实现（Angular）

1、创建 Angular 服务层  

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private baseUrl = `${environment.apiBaseUrl}/api/user`;

  constructor(private http: HttpClient) {}

  register(user: any): Observable<any> {
    return this.http.post(`${this.baseUrl}/register`, user);
  }

  getUserByUsername(username: string): Observable<any> {
    return this.http.get(`${this.baseUrl}/${username}`);
  }
}

2、创建 Angular 路由配置

在 app-routing.module.ts 中配置路由，指向用户注册和商品展示页面。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RegisterComponent } from './register/register.component';
import { ProductListComponent } from './product-list/product-list.component';

const routes: Routes = [
  { path: 'register', component: RegisterComponent },
  { path: 'products', component: ProductListComponent },
  { path: '', redirectTo: '/register', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

3、配置文件

确保在前端项目中配置了 API 基本路径和其他环境配置。比如，在 environments/environment.ts 中配置：

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8080'
};

4、用户登录与注册

  • 使用Angular表单来处理用户输入。 
    register.component.ts


import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent {
  user = {
    username: '',
    password: '',
    email: '',
    phone: '',
    address: ''
  };

  constructor(private authService: AuthService) {}

  register() {
    this.authService.register(this.user).subscribe(response => {
      console.log('User registered successfully!', response);
    }, error => {
      console.error('Error registering user', error);
    });
  }
}

  • 与后端的/api/user/register和/api/user/login接口交互。

5、商品浏览与添加购物车

  • 显示商品列表（调用/api/products接口）。product.service.ts 
    import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private baseUrl = `${environment.apiBaseUrl}/api/products`;

  constructor(private http: HttpClient) {}

  addProduct(product: any): Observable<any> {
    return this.http.post(`${this.baseUrl}/add`, product);
  }

  getProduct(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/${id}`);
  }
}

    product-list.component.ts

    import { Component, OnInit } from '@angular/core';
import { ProductService } from '../services/product.service';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  products: any[] = [];

  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.productService.getProduct(1).subscribe(data => {
      this.products = [data];
    });
  }
}

  • 添加商品到购物车（调用/api/cart/add接口）。

6、订单管理与收货地址

  • 用户下单，提交购物车中的商品到订单接口。
  • 用户管理自己的订单和收货地址。

7、后台管理系统

  • 管理员可以增、删、改商品，查看所有用户和订单。

八、部署与测试

  1. 配置Spring Boot与数据库连接。
  2. 在MySQL中创建数据库并运行Spring Boot应用。
  3. 使用Angular构建前端并与后端API交互。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/923163.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

运维Tips：Docker或K8s集群拉取Harbor私有容器镜像仓库配置指南

运维Tips：Docker或K8s集群拉取Harbor私有容器镜像仓库配置指南

[ 知识是人生的灯塔，只有不断学习，才能照亮前行的道路 ] Docker与Kubernetes集群拉取Harbor私有容器镜像仓库配置 描述：在现在微服务、云原生的环境下，通常我们会在企业中部署Docker和Kubernetes集群，并且会在企业内部搭建Harbor私有镜像仓库以保证开发源码安全，以及加快…
阅读更多...
Qt：信号槽

Qt：信号槽

一. 信号槽概念 信号槽 是 Qt 框架中一种用于对象间通信的机制 。它通过让一个对象发出信号&#xff0c;另一个对象连接到这个信号的槽上来实现通信。信号槽机制是 Qt 的核心特性之一&#xff0c;提供了一种灵活且类型安全的方式来处理事件和数据传递。 1. 信号的本质 QT中&a…
阅读更多...
《硬件架构的艺术》笔记（七）：处理字节顺序

《硬件架构的艺术》笔记（七）：处理字节顺序

介绍 本章主要介绍字节顺序的的基本规则。&#xff08;感觉偏软件了&#xff0c;不知道为啥那么会放进《硬件架构的艺术》这本书&#xff09;。 定义 字节顺序定义数据在计算机系统中的存储格式&#xff0c;描述存储器中的MSB和LSB的位置。对于数据始终以32位形式保存在存储器…
阅读更多...
【Linux】内核的编译和加载

【Linux】内核的编译和加载

Linux内核是操作系统的核心&#xff0c;负责管理系统的硬件资源&#xff0c;并为用户空间的应用程序提供必要的服务。内核的编译和加载是操作系统开发和维护的重要环节。本文将详细介绍Linux内核的编译过程以及如何加载内核到系统中。 1. 引言 Linux内核的编译是一个复杂的过…
阅读更多...
【Linux】DHCP服务实验

【Linux】DHCP服务实验

DHCP实验 实验前提 1、两个linux操作系统，一个为服务器端，一个为客户端 2、两个操作系统设置为仅主机模式 3、在客户端-虚拟网络编辑器-仅主机模式VMnet1-关闭DHCP 实验步骤 新建虚拟机
阅读更多...
2022年计算机网络408考研真题解析

2022年计算机网络408考研真题解析

第一题&#xff1a; 解析&#xff1a;网络体系结构-数据链路层 在ISO网络参考模型中&#xff0c;运输层&#xff0c;网络层和数据链路层都实现了流量的控制功能&#xff0c;其中运输层实现的是端到端的流量控制&#xff0c;网络层实现的是整个网络的流量控制&#xff0c;数据链…
阅读更多...
详解 【AVL树】

详解 【AVL树】

AVL树实现 1. AVL的概念AVL树的实现2.1 AVL树的结点结构2.2 AVL树的插入2.2.1 AVL树的插入的一个大概操作&#xff1a;2.2.2 AVL树的平衡因子更新2.2.3 平衡因子的停止条件2.2.4 再不考虑旋转的角度上实现AVL树的插入 2.3 旋转2.3.1 旋转的原则2.3.2 右单旋2.2.3 右单旋代码实现…
阅读更多...
Python 爬虫从入门到（不）入狱学习笔记

Python 爬虫从入门到（不）入狱学习笔记

爬虫的流程&#xff1a;从入门到入狱 1 获取网页内容1.1 发送 HTTP 请求1.2 Python 的 Requests 库1.2 实战&#xff1a;豆瓣电影 scrape_douban.py 2 解析网页内容2.1 HTML 网页结构2.2 Python 的 Beautiful Soup 库 3 存储或分析数据&#xff08;略&#xff09; 一般爬虫的基…
阅读更多...
一区北方苍鹰算法优化+创新改进Transformer！NGO-Transformer-LSTM多变量回归预测

一区北方苍鹰算法优化+创新改进Transformer！NGO-Transformer-LSTM多变量回归预测

一区北方苍鹰算法优化创新改进Transformer&#xff01;NGO-Transformer-LSTM多变量回归预测 目录 一区北方苍鹰算法优化创新改进Transformer&#xff01;NGO-Transformer-LSTM多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab NGO-Transformer-LST…
阅读更多...
[Unity Demo]从零开始制作空洞骑士Hollow Knight第二十集：制作专门渲染HUD的相机HUD Camera和画布HUD Canvas

[Unity Demo]从零开始制作空洞骑士Hollow Knight第二十集：制作专门渲染HUD的相机HUD Camera和画布HUD Canvas

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、制作HUD Camera以及让两个相机同时渲染屏幕二、制作HUD Canvas 1.制作法力条Soul Orb引入库2.制作生命条Health读入数据3.制作吉欧统计数Geo Counter4.制作…
阅读更多...
Opencv+ROS自编相机驱动

Opencv+ROS自编相机驱动

目录 一、工具 二、原理 代码 标定 三、总结 参考&#xff1a; 一、工具 opencv2ros ubuntu18.04 usb摄像头 二、原理 这里模仿usb_cam功能包对Opencv_ros进行修饰&#xff0c;加上相机参数和相机状态&#xff0c;难点在于相机参数的读取。 对于相机参数话题 camera…
阅读更多...
计算机网络 | 7.网络安全

计算机网络 | 7.网络安全

1.网络安全问题概述 &#xff08;1&#xff09;计算机网络面临的安全性威胁 <1>计算机网络面临的完全性威胁 计算机网络面临的两大类安全威胁&#xff1a;被动攻击和主动攻击 被动攻击 截获&#xff1a;从网络上窃听他人的通信内容。主动攻击 篡改&#xff1a;故意篡改…
阅读更多...
机器翻译基础与模型 之四：模型训练

机器翻译基础与模型 之四：模型训练

1、开放词表 1.1 大词表和未登陆词问题 理想情况下&#xff0c;机器翻译应该是一个开放词表&#xff08;Open Vocabulary&#xff09;的翻译任务。也就是&#xff0c;无论测试数据中包含什么样的词&#xff0c;机器翻译系统都应该能够正常翻译。 现实的情况是即使不断扩充词…
阅读更多...
ThingsBoard规则链节点：Azure IoT Hub 节点详解

ThingsBoard规则链节点：Azure IoT Hub 节点详解

目录 引言 1. Azure IoT Hub 节点简介 2. 节点配置 2.1 基本配置示例 3. 使用场景 3.1 数据传输 3.2 数据分析 3.3 设备管理 4. 实际项目中的应用 4.1 项目背景 4.2 项目需求 4.3 实现步骤 5. 总结 引言 ThingsBoard 是一个开源的物联网平台&#xff0c;提供了设备…
阅读更多...
MongoDB相关问题

MongoDB相关问题

视频教程 【GeekHour】20分钟掌握MongoDB Complete MongoDB Tutorial by Net Ninja MongoDB开机后调用缓慢的原因及解决方法 问题分析&#xff1a; MongoDB开机后调用缓慢&#xff0c;通常是由于以下原因导致&#xff1a; 索引重建&#xff1a; MongoDB在启动时会重建索引…
阅读更多...
三种蓝牙架构实现方案

三种蓝牙架构实现方案

一、蓝牙架构方案 1、hostcontroller双芯片标准架构 手机里面包含很多SoC或者模块&#xff0c;每颗SoC或者模块都有自己独有的功能&#xff0c;比如手机应用跑在AP芯片上&#xff0c;显示屏&#xff0c;3G/4G通信&#xff0c;WiFi/蓝牙等都有自己专门的SoC或者模块&#xff0…
阅读更多...
sql工具！好用！爱用！

sql工具！好用！爱用！

SQLynx的界面设计简洁明了&#xff0c;操作逻辑清晰易懂&#xff0c;没有复杂的图标和按钮&#xff0c;想对哪部分操作就在哪里点击右键&#xff0c;即使你是数据库小白也能轻松上手。 尽管SQLynx是一款免费的工具&#xff0c;但是它的功能却丝毫不逊色于其他付费产品&#xff…
阅读更多...
UE5肉鸽游戏教程学习

UE5肉鸽游戏教程学习

学习地址推荐&#xff1a;UE5肉鸽项目实战教程_哔哩哔哩_bilibili
阅读更多...
反向代理服务器的用途

反向代理服务器的用途

代理服务器在网络中扮演着重要的角色&#xff0c;它们可以优化流量、保护服务器以及提高安全性。在代理服务器中&#xff0c;反向代理服务器是一种特殊类型&#xff0c;常用于Web服务器前&#xff0c;它具备多种功能&#xff0c;能够确保网络流量的顺畅传输。那么&#xff0c;让…
阅读更多...
面试经典 150 题:205,55

面试经典 150 题:205,55

205. 同构字符串 【解题思路】 来自大佬Krahets 【参考代码】 class Solution { public:bool isIsomorphic(string s, string t) {map<char, char> Smap, Tmap;for(int i0; i<s.size(); i){char a s[i], b t[i];//map容器存在该字符&#xff0c;且不等于之前映射…
阅读更多...
最新文章

Copyright @ 2022~2023