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

news2024/11/29 21:07:38

目录

一、项目结构图

二、目录结构解析

后端 (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交互。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

uniapp组建scroll-view初始化页面设置scrollTop无效解决办法

uniapp组建scroll-view初始化页面设置scrollTop无效解决办法

官方文档&#xff1a;scroll-view | uni-app官网 一 . scroll-view的基本用法 使用竖向滚动时&#xff0c;需要给 <scroll-view> 一个固定高度&#xff0c;通过 css 设置 height&#xff1b; <scroll-view :scroll-top"scrollTop" scroll-y"true&quo…
阅读更多...
Web day02 Js Vue Ajax

Web day02 Js Vue Ajax

目录 1.javascript: 1.js的引入方式&#xff1a; 2.js变量 & 数据类型 & 输出语句&#xff1a; 模板字符串&#xff1a; 3.函数 & 自定义对象&#xff1a; 4. json 字符串 & DOM操作&#xff1a; 5. js事件监听&#xff1a; 6.js的模块化导入或者导出&a…
阅读更多...
【面向对象的程序设计——集合框架】主要接口

【面向对象的程序设计——集合框架】主要接口

文章目录 主要接口集合框架的主要接口Collect接口Set接口实现Set接口的类SortedSet接口 List接口&#xff1a;线性表实现List接口的类&#xff1a; Queue接口实现Queue接口的类 Map接口Map接口的定义Map接口的方法SortedMap接口 主要接口 集合框架的主要接口 声明了对各种集合…
阅读更多...
工业物联网网关在设备接入物联网中的核心作用

工业物联网网关在设备接入物联网中的核心作用

一、工业物联网网关的定义与功能 工业物联网网关是工业领域中的一种重要设备&#xff0c;它位于工业物联网系统的边缘位置&#xff0c;负责连接、管理和协调工业设备与云平台之间的通信。作为边缘计算的关键组件&#xff0c;工业物联网网关能够实现工业设备、传感器、PLC、DCS…
阅读更多...
2024年第十三届”认证杯“数学中国数学建模国际赛（小美赛）

2024年第十三届”认证杯“数学中国数学建模国际赛（小美赛）

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
阅读更多...
selinux和防火墙实验

selinux和防火墙实验

1 、 selinux 的说明 SELinux 是 Security-Enhanced Linux 的缩写&#xff0c;意思是安全强化的 linux 。 SELinux 主要由美国国家安全局&#xff08; NSA &#xff09;开发&#xff0c;当初开发的目的是为了避免资源的误用。 系统资源都是通过程序进行访问的&#xff0c;如…
阅读更多...
flink学习（12）——checkPoint

flink学习（12）——checkPoint

如何设置checkPoint package com.bigdata.day06;/** * 1、需要三句话 * 2、设置完checkPoint后若程序出现异常&#xff0c;会一直重启 * 3、此时是自动进行checkPoint保存 * 4、注意&#xff1a;此时如果有checkpoint ,是不会出现异常的&#xff0c;需要将checkpoint的代码关…
阅读更多...
前端面试题-1(详解事件循环）

前端面试题-1(详解事件循环）

1.了解浏览器的进程模型 1.什么是进程&#xff1f; 程序运行需要有它自己专属的内存空间&#xff0c;可以把这块内存空间简单的理解为进程 每个应用至少有一个进程&#xff0c;进程之间相互独立&#xff0c;即使要通信&#xff0c;也需要双方同意。 2.什么是线程&#xff1f…
阅读更多...
http的文件上传和下载原理

http的文件上传和下载原理

目录 一&#xff1a;上传 1&#xff1a;http请求格式 2&#xff1a;文件上传类型分析 1&#xff1a;md5秒传 2&#xff1a;分片上传 1. 什么是分片上传 2. 分片上传的场景 3&#xff1a;断点续传 1. 什么是断点续传 2. 应用场景 3. 实现断点续传的核心逻辑 4. 实现流…
阅读更多...
【计算机视觉】图像基本操作

【计算机视觉】图像基本操作

1. 数字图像表示 一幅尺寸为MN的图像可以用矩阵表示&#xff0c;每个矩阵元素代表一个像素&#xff0c;元素的值代表这个位置图像的亮度&#xff1b;其中&#xff0c;彩色图像使用3维矩阵MN3表示&#xff1b;对于图像显示来说&#xff0c;一般使用无符号8位整数来表示图像亮度&…
阅读更多...
VSCode 下载 安装

VSCode 下载 安装

VSCode【下载】【安装】【汉化】【配置C环境&#xff08;超快&#xff09;】&#xff08;Windows环境&#xff09;-CSDN博客 Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/Downloadhttps://code.visualstudio.com/Download 注意&#xff0…
阅读更多...
【Python入门】Python数据类型

【Python入门】Python数据类型

文章一览 前言一、变量1.1.如何使用变量1.2.如何定义变量的名字&#xff08;标识符&#xff09; 二、数据类型2.1 整型数据2.2 浮点型数据2.3 布尔型&#xff08;bool&#xff09;数据2.4 复数型数据2.5 字符串类型1 > 字符串相加&#xff08;合并&#xff09;&#xff08;&…
阅读更多...
算法基础 - 高斯牛顿法（曲线拟合）

算法基础 - 高斯牛顿法（曲线拟合）

文章目录 1. 高斯牛顿法发展历程2、问题的引出3、高斯牛顿法的前世3.1、一阶&#xff0c;二阶梯度法共有原理3.2、最速下降法&#xff08;一阶梯度法&#xff09;3.3、牛顿法&#xff08;二阶梯度法&#xff09; 4、高斯牛顿法4.1 高斯牛顿法的思想4.2 最小二乘问题4.3 高斯牛顿…
阅读更多...
Vue+Element Plus实现自定义表单弹窗

Vue+Element Plus实现自定义表单弹窗

目录 一、基本框架 1.父组件index.vue 2.子组件FormPop.vue 二、细节补充 1&#xff09;input、textarea、select、input number 2&#xff09;daterange、date、monthrange 3&#xff09;数据定义 4&#xff09;没改样式的效果 5&#xff09;最终效果 三、最终代码 …
阅读更多...
VMware Workstation Pro下载安装及简单设置

VMware Workstation Pro下载安装及简单设置

VMware Workstation Pro下载 方法一&#xff1a;官网下载 https://support.broadcom.com/group/ecx/productdownloads?subfamilyVMwareWorkstationPro账号请自行注册&#xff0c;选择最新版本17.6.1 下载后用md5sum_x64.exe验证下载的文件完整性 方法二 百度网盘 通过网…
阅读更多...
ospf协议（动态路由协议）

ospf协议（动态路由协议）

ospf基本概念 定义 OSPF 是典型的链路状态路由协议&#xff0c;是目前业内使用非常广泛的 IGP 协议之一。 目前针对 IPv4 协议使用的是 OSPF Version 2 &#xff08; RFC2328 &#xff09;&#xff1b;针对 IPv6 协议使用 OSPF Version 3 &#xff08; RFC2740 &#xff09;。…
阅读更多...
数据结构之循环链表和栈

数据结构之循环链表和栈

一、循环链表 1、概念 循环链表&#xff1a;就是首尾相连的链表&#xff0c;通过任意一个节点&#xff0c;都能将整个链表遍历一遍 分类&#xff1a;单向循环链表、双向循环链表 2、单向循环链表的类格式 单向循环链表也就是单向链表的最后一个节点的next域不再为None,而是…
阅读更多...
linux安装部署mysql资料

linux安装部署mysql资料

安装虚拟机 等待检查完成 选择中文 软件选择 网络和主机名 开始安装 设置root密码 ADH-password 创建用户 等待安装完成 重启 接受许可证 Centos 7 64安装完成 安装mysql开始 Putty连接指定服务器 在 opt目录下新建download目录 将mysql文件传到该目录下 查看linux服务器的…
阅读更多...
HTML 霓虹灯开关效果

HTML 霓虹灯开关效果

HTML 霓虹灯开关效果 1.简介&#xff1a;该代码为纯html&#xff0c;CSS写在了内部&#xff0c;不需要额外引入&#xff0c;霓虹灯开关效果很漂亮&#xff0c;应用在个人物联网项目中是一个比较不错的选择。 2.运行效果&#xff1a; 3.源码&#xff1a; <!DOCTYPE html&g…
阅读更多...
uniapp开发支付宝小程序自定义tabbar样式异常

uniapp开发支付宝小程序自定义tabbar样式异常

解决方案&#xff1a; 这个问题应该是支付宝基础库的问题&#xff0c;除了依赖于官方更新之外&#xff0c;开发者可以利用《自定义 tabBar》曲线救国 也就是创建一个空内容的自定义tabBar&#xff0c;这样即使 tabBar 被渲染出来&#xff0c;但从视觉上也不会有问题 1.官方文…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023