基于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
BEGINUPDATE `product`SET `stock` = `stock` - NEW.quantityWHERE `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;@ManyToOneprivate User user;@ManyToOneprivate Product product;private int quantity;// getters and setters
}
  • Order.java 
    @Entity
public class Order {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;@ManyToOneprivate User user;private double totalPrice;private String status;  // PENDING, COMPLETEDprivate 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;@ManyToOneprivate Order order;@ManyToOneprivate 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 {@Autowiredprivate 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 {@Autowiredprivate 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 {@Autowiredprivate 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 {@Autowiredprivate ProductService productService;@GetMappingpublic 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 {@Autowiredprivate 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.tsimport { 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.mzph.cn/diannao/61973.shtml

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

相关文章

JavaScript的基础数据类型

JavaScript的基础数据类型

一、JavaScript中的数组 定义 数组是一种特殊的对象&#xff0c;用于存储多个值。在JavaScript中&#xff0c;数组可以包含不同的数据类型&#xff0c;如数字、字符串、对象、甚至其他数组。数组的创建有两种常见方式&#xff1a; 字面量表示法&#xff1a;let fruits [apple…
阅读更多...
5.5 W5500 TCP服务端与客户端

5.5 W5500 TCP服务端与客户端

文章目录 1、TCP介绍2、W5500简介2.1 关键函数socketlistensendgetSn_RX_RSRrecv自动心跳包检测getSn_SR 1、TCP介绍 TCP 服务端&#xff1a; 创建套接字[socket]&#xff1a;服务器首先创建一个套接字&#xff0c;这是网络通信的端点。绑定套接字[bind]&#xff1a;服务器将…
阅读更多...
Android 15 版本更新及功能介绍

Android 15 版本更新及功能介绍

Android 15版本时间戳 Android 15，代号Vanilla Ice Cream（香草冰淇淋），是当下 Android 移动操作系统的最新主要版本。 开发者预览阶段：2024年2月，谷歌发布了Android 15的第一个开发者预览版本(DP1)，这标志着新系统开发的正式启动。随后，在3月和4月，谷歌又相继推出了D…
阅读更多...
第02章_MySQL环境搭建（基础）

第02章_MySQL环境搭建（基础）

1. MySQL 的卸载 1.1 步骤1&#xff1a;停止 MySQL 服务 在卸载之前&#xff0c;先停止 MySQL8.0 的服务。按键盘上的 “Ctrl Alt Delete” 组合键&#xff0c;打开“任务管理器”对话 框&#xff0c;可以在“服务”列表找到“MySQL8.0” 的服务&#xff0c;如果现在“正在…
阅读更多...
红队笔记--W1R3S、JARBAS、SickOS、Prime打靶练习记录

红队笔记--W1R3S、JARBAS、SickOS、Prime打靶练习记录

W1R3S(思路为主) 信息收集 首先使用nmap探测主机&#xff0c;得到192.168.190.147 接下来扫描端口&#xff0c;可以看到ports文件保存了三种格式 其中.nmap和屏幕输出的一样&#xff1b;xml这种的适合机器 nmap -sT --min-rate 10000 -p- 192.168.190.147 -oA nmapscan/ports…
阅读更多...
学习笔记｜MaxKB对接本地大模型时，选择Ollma还是vLLM？

学习笔记｜MaxKB对接本地大模型时，选择Ollma还是vLLM？

在使用MaxKB开源知识库问答系统的过程中&#xff0c;除了对接在线大模型&#xff0c;一些用户出于资源配置、长期使用成本、安全性等多方面考虑&#xff0c;还在积极尝试通过Ollama、vLLM等模型推理框架对接本地离线大模型。而在用户实践的过程中&#xff0c;经常会对候选的模型…
阅读更多...
计算机网络八股整理（一）

计算机网络八股整理（一）

计算机网络八股文整理 一&#xff1a;网络模型 1&#xff1a;网络osi模型和tcp/ip模型分别介绍一下 osi模型是国际标准的网络模型&#xff0c;它由七层组成&#xff0c;从上到下分别是&#xff1a;应用层&#xff0c;表示层&#xff0c;会话层&#xff0c;传输层&#xff0c;…
阅读更多...
Spring Boot教程之五：在 IntelliJ IDEA 中运行第一个 Spring Boot 应用程序

Spring Boot教程之五：在 IntelliJ IDEA 中运行第一个 Spring Boot 应用程序

在 IntelliJ IDEA 中运行第一个 Spring Boot 应用程序 IntelliJ IDEA 是一个用 Java 编写的集成开发环境 (IDE)。它用于开发计算机软件。此 IDE 由 Jetbrains 开发&#xff0c;提供 Apache 2 许可社区版和商业版。它是一种智能的上下文感知 IDE&#xff0c;可用于在各种应用程序…
阅读更多...
单片机学习笔记 9. 8×8LED点阵屏

单片机学习笔记 9. 8×8LED点阵屏

更多单片机学习笔记&#xff1a;单片机学习笔记 1. 点亮一个LED灯单片机学习笔记 2. LED灯闪烁单片机学习笔记 3. LED灯流水灯单片机学习笔记 4. 蜂鸣器滴~滴~滴~单片机学习笔记 5. 数码管静态显示单片机学习笔记 6. 数码管动态显示单片机学习笔记 7. 独立键盘单片机学习笔记 8…
阅读更多...
vue 预览pdf 【@sunsetglow/vue-pdf-viewer】开箱即用，无需开发

vue 预览pdf 【@sunsetglow/vue-pdf-viewer】开箱即用，无需开发

sunsetglow/vue-pdf-viewer 开箱即用的pdf插件sunsetglow/vue-pdf-viewer, vue3 版本 无需多余开发&#xff0c;操作简单&#xff0c;支持大文件 pdf 滚动加载&#xff0c;缩放&#xff0c;左侧导航&#xff0c;下载&#xff0c;页码&#xff0c;打印&#xff0c;文本复制&…
阅读更多...
Css—实现3D导航栏

Css—实现3D导航栏

一、背景 最近在其他的网页中看到了一个很有趣的3d效果&#xff0c;这个效果就是使用css3中的3D转换实现的&#xff0c;所以今天的内容就是3D的导航栏效果。那么话不多说&#xff0c;直接开始主要内容的讲解。 二、效果展示 三、思路解析 1、首先我们需要将这个导航使用一个大…
阅读更多...
重新定义社媒引流：AI社媒引流王如何为品牌赋能？

重新定义社媒引流：AI社媒引流王如何为品牌赋能？

在社交媒体高度竞争的时代&#xff0c;引流已经不再是单纯追求流量的数字游戏&#xff0c;而是要找到“对的用户”&#xff0c;并与他们建立真实的连接。AI社媒引流王通过技术创新和智能策略&#xff0c;重新定义了社媒引流的方式&#xff0c;帮助品牌在精准触达和高效互动中脱…
阅读更多...
Docker1：认识docker、在Linux中安装docker

Docker1：认识docker、在Linux中安装docker

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…
阅读更多...
Centos 8, add repo

Centos 8, add repo

Centos repo前言 Centos 8更换在线阿里云创建一键更换repo 自动化脚本 华为Centos 源 , 阿里云Centos 源 华为epel 源 , 阿里云epel 源vim /centos8_repo.sh #!/bin/bash # -*- coding: utf-8 -*- # Author: make.han
阅读更多...
《硬件架构的艺术》笔记（五）：低功耗设计

《硬件架构的艺术》笔记（五）：低功耗设计

介绍 能量以热量形式消耗&#xff0c;温度升高芯片失效率也会增加&#xff0c;增加散热片或风扇会增加整体重量和成本&#xff0c;在SoC级别对功耗进行控制就可以减少甚至可能消除掉这些开支&#xff0c;产品也更小更便宜更可靠。本章描述了减少动态功耗和静态功耗的各种技术。…
阅读更多...
Matlab 深度学习工具箱 案例学习与测试————求二阶微分方程

Matlab 深度学习工具箱 案例学习与测试————求二阶微分方程

clc clear% 定义输入变量 x linspace(0,2,10000);% 定义网络的层参数 inputSize 1; layers [featureInputLayer(inputSize,Normalization"none")fullyConnectedLayer(10)sigmoidLayerfullyConnectedLayer(1)sigmoidLayer]; % 创建网络 net dlnetwork(layers);% 训…
阅读更多...
LM2904运算放大器的应用：测电池电压

LM2904运算放大器的应用：测电池电压

在电子设备的广泛应用中&#xff0c;电池作为便携设备的能量来源&#xff0c;其电压监测显得尤为关键。LM2904作为一款低功耗、高增益带宽积和高共模抑制比的双运算放大器&#xff0c;非常适用于电池电压的测量与监测。本文详细介绍了LM2904在电池电压测量方面的应用&#xff0…
阅读更多...
C/C++逆向：虚函数逆向分析

C/C++逆向：虚函数逆向分析

虚函数&#xff08;Virtual Function&#xff09;是C中实现多态的一种机制&#xff0c;它允许在运行时通过基类的指针或引用调用派生类中的函数&#xff0c;而不是基类中的版本。虚函数通常与继承和多态结合使用。通过在基类中使用 virtual 关键字声明函数&#xff0c;允许派生…
阅读更多...
永磁同步电机末端振动抑制（输入整形）

永磁同步电机末端振动抑制（输入整形）

文章目录 1、前言2、双惯量系统3、输入整形3.1 ZV整形器3.2 ZVD整形器3.3 EI整形器 4、伺服系统位置环控制模型5、仿真5.1 快速性分析5.2 鲁棒性分析 参考 1、前言 什么是振动抑制&#xff1f;对于一个需要精确定位的系统&#xff0c;比如机械臂、塔吊、码头集装箱等&#xff…
阅读更多...
pywinauto常见用法详解

pywinauto常见用法详解

1 安装 pip install pywinauto0.6.3 -i https://pypi.tuna.tsinghua.edu.cn/simple 2 启动app appApplication(backenduia).start(程序路径) backend 参数有2种 win32和uia 3 窗口选择 3.1通过类选择 dlgapp["类名"] dlgapp.类名 3.2通过标题选择 dlgapp[&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023