当前位置： 首页 > news >正文

Web项目流程总结

news 2025/5/22 14:15:01

前端

1.下载pnpm管理器

pnpm是一种JavaScript包管理器。

前提：确保安装了Node.js 和 npm

   打开cmd，以管理员身份运行（输入以下指令）

npm install -g pnpm

安装成功后显示：

  • npm: 这是 Node.js 的包管理工具，用于安装、发布、管理 Node.js 包。

2.使用pnpm创建项目

继续在cmd里面输入指令下载vue3项目

pnpm create vue

输入指令后下面是项目配置

出现以上绿色字母说明项目创建成功。

字符串名词解释：

在cmd上输入指令pnpm dev，会得到一个网站地址，点击进入

如果呈现下面的界面说明项目建立成功。

3.项目精细化配置

a.删除不要的组件

将标号文件夹里面的文件全部清空，留下空文件夹。

b.打开App.vue文件进行修改，以下是修改后的模样。

c.打开终端

Vscode里面的右上角有打开终端的快捷键。第三个

下载安装好Git Bash

在终端里面打开Git Bash

4.husky：Git钩子（Git Hooks）管理器

Git Hooks允许开发者在Git操作的特定阶段（如提交commit、推送push等）运行自定义脚本，而Husky则提供了一个便捷的接口来配置和管理这些钩子。

在cmd管理员身份运行地输入以下指令进行安装

pnpm dlx husky-init && pnpm install

打开Git Bash后逐渐输入三个指令

1.git init
2.git add .
3.git commit -m '描述性信息'
（描述性信息改为自己想改的内容，如：项目初始化）

进行配置：

配置 `package.json`

将已存在的文件 `package.json`中修改为一下形式

{// ... 省略 ..."lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
}{"scripts": {// ... 省略 ..."lint-staged": "lint-staged"}
}

5.安装sass依赖（Git Bash界面上）

pnpm add sass -D

6.Pinia - 构建用户仓库和持久化

pnpm add pinia-plugin-persistedstate -D

修改main.js文件，修改为：


import { createApp } from 'vue'
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
import App from './App.vue'
import router from './router'const app = createApp(App)app.use(createPinia().use(persist))
app.use(router)
app.mount('#app')​

使用：在stores文件夹下面建一个小文件user.js

文件中添加内容：

// 从pinia库中导入defineStore函数，用于定义一个新的store
import { defineStore } from 'pinia';
// 从vue库中导入ref函数，用于创建一个响应式引用
import { ref } from 'vue';// 定义一个名为useUserStore的store，用于管理用户相关的状态
export const useUserStore = defineStore(// store的唯一标识符，通常用于调试和持久化'user',// 一个函数，返回一个包含state和actions的对象() => {// 使用ref创建一个响应式的token变量，初始值为空字符串const token = ref(''); // 定义一个设置token的函数，该函数接收一个参数t，并将其赋值给token.value// 这样做可以确保token是一个响应式引用，并且当它的值改变时，任何依赖于它的Vue组件都会重新渲染const setToken = (t) => (token.value = t); // 返回包含token和setToken的对象，这样它们就可以在store的外部被访问和使用了return { token, setToken };},// store的配置对象，这里启用了持久化功能{// 设置persist为true以启用持久化，这意味着store的状态将在页面刷新或重新加载时被保存和恢复// 注意：这里只是简单地启用了持久化，但没有指定具体的持久化策略（如存储位置、密钥等）persist: true // -->持久化}// 注意：上面的代码示例中，直接使用{ persist: true }可能不会按预期工作，// 因为Pinia本身并不直接支持持久化配置。持久化通常是通过插件（如pinia-plugin-persistedstate）来实现的。// 因此，需要先安装该插件，并在Pinia配置中正确地使用它。
);

7.axios-数据交互

Axios是一个基于Promise的网络请求库

pnpm add axios

8.element-ui组件配置

pnpm install element-plus
pnpm add element-plus
pnpm add -D unplugin-vue-components unplugin-auto-import

导入进main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'const app = createApp(App)app.use(createPinia().use(persist))
app.use(router)
app.use(ElementPlus)
app.mount('#app')

后端IDEA

建立SpringBoot框架

在idea里面新建一个项目，生成器选择SpringBoot，类型为Maven。

下一步选择依赖项：

三层架构

1.表示层（Presentation Layer）

表示层是用户与应用程序交互的界面，负责接收用户输入并展示处理结果。

  • 前端界面：如 HTML、CSS、JavaScript 等。

  • 后端控制器：如 Spring MVC 中的 @Controller 或 @RestController。

职责：

  • 接收用户请求。

  • 调用业务逻辑层处理请求。

  • 将处理结果返回给用户。

2. 业务逻辑层（Business Logic Layer）

业务逻辑层是应用程序的核心，负责处理业务规则和逻辑。

  • 服务类：如 Spring 中的 @Service。

  • 业务逻辑处理：如数据验证、业务规则计算等。

职责：

  • 接收表示层的请求。

  • 调用数据访问层获取或操作数据。

  • 处理业务逻辑并返回结果。

3.数据访问层（Data Access Layer）

数据访问层负责与数据库交互，执行数据的增、删、改、查操作。

  • Mapper 接口：如 MyBatis 中的 @Mapper。

  • 数据访问对象（DAO）：如 JPA 中的 JpaRepository。

职责：

  • 提供数据访问接口。

  • 封装数据库操作细节。

  • 返回数据给业务逻辑层。

三层架构优势：

  1. 解耦：各层之间相对独立，便于维护和扩展。

  2. 可重用性：业务逻辑和数据访问逻辑可以被多个表示层复用。

  3. 可测试性：各层可以独立进行单元测试，提高代码质量。

  4. 可扩展性：便于添加新的功能或修改现有功能，而无需影响其他层。

三层架构交互流程：

   1.用户请求：用户通过表示层发起请求。

   2.表示层调用业务逻辑层：表示层将请求转发给业务逻辑层。

   3.业务逻辑层调用数据访问层：业务逻辑层根据业务规则调用数据访问层获取或操作数据。

   4.数据访问层返回数据：数据访问层执行数据库操作后返回数据。

   5.业务逻辑层处理数据：业务逻辑层处理返回的数据并返回结果。

   6.表示层返回结果：表示层将处理结果返回给用户。

实现代码解释：

控制器层（Controller）

存放控制器层代码，通常使用 @Controller 或 @RestController 注解。控制器层负责处理 HTTP 请求，并调用服务层的方法。

直接导入文件

package com.exercise.mybatisplus.controller;import com.exercise.mybatisplus.pojo.Result;
import com.exercise.mybatisplus.pojo.User;
import com.exercise.mybatisplus.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.bind.annotation.*;/*** 用户相关接口* 这个类定义了与用户相关的所有 RESTful API 接口。*/
@Configuration
@CrossOrigin(origins = "http://localhost:5173", allowCredentials = "true")
@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService;/*** 创建新用户* @param user 用户对象，包含用户的基本信息* @return 返回一个 Result 对象，表示操作的结果*/@PostMapping("/add")public Result addUser(@RequestBody User user){System.out.println("创建新用户");int code = userService.insertUser(user); // 调用服务层的 insertUser 方法if (code == 0) { // 如果返回码为 0，表示用户已存在return Result.success("该用户已存在");}return Result.success(user); // 返回创建成功的用户对象}
}

MyBatis-Plus Mapper接口(DAO层）

package com.exercise.mybatisplus.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.exercise.mybatisplus.pojo.User;
import org.apache.ibatis.annotations.Mapper;@Mapper
public interface UserMapper extends BaseMapper<User> {
}

实体类(POJO/DTO/VO等)

package com.exercise.mybatisplus.pojo;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;@TableName("user") // 指定数据库表名
public class User {@TableId(type= IdType.AUTO)// 关键注解：指定数据库自增private Integer userId;@TableField("username")   // 指定数据库中的字段名private String userName;private Integer age;public User() {}public User(Integer userId, String userName, Integer age) {this.userId = userId;this.userName = userName;this.age = age;}//Get和Set方法
}

服务层(Service) 

package com.exercise.mybatisplus.service;import com.baomidou.mybatisplus.extension.service.IService;
import com.exercise.mybatisplus.pojo.User;public interface UserService extends IService<User> {int insertUser(User user);
}

服务层作用：

服务层的主要作用是处理业务逻辑，

  • 业务规则：实现业务逻辑，如验证、计算、转换等。

  • 事务管理：管理事务，确保数据的一致性。

  • 调用数据访问层：调用数据访问层（DAO 层）的方法，执行数据库操作。

  • 与控制器层交互：接收控制器层的请求，返回处理结果给控制器层。

impl文件内导入：

package com.exercise.mybatisplus.service.impl;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.exercise.mybatisplus.mapper.UserMapper;
import com.exercise.mybatisplus.pojo.User;
import com.exercise.mybatisplus.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {@Autowiredprivate UserMapper userMapper;@Overridepublic int insertUser(User user) {return userMapper.insert(user);}
}

Navicat数据库：

创建一个数据库、表，跟后端idea连接。

配置application.properties 文件内容。

spring.application.name=_______自己的
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/______自己的
spring.datasource.username=root
spring.datasource.password=______自己的
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
mybatis.configuration.map-underscore-to-camel-case=true
server.port=______自己的，端口号可修改

Apifox：

在idea中配置apifox相关信息。

操作步骤：

先下载apifox插件在idea中。

http://www.xdnf.cn/news/578629.html

相关文章：

  • 第七章：数据存储策略与状态恢复机制实录
  • Bently Nevada 3500/61 非隔离I/O模块 (133819-02)
  • 一命通关单调栈
  • 工业轴承故障检测技术现状：中国智造的突破与挑战
  • 微信小程序自行diy选择器有效果图
  • 第20天-python生成word文档
  • 《MQTT 从 0 到 1：原理、实战与面试指南全解》
  • PostgreSQL相比Oracle有哪些优势？
  • 一朵由钢片织成的云 ——超“限”的结构
  • 精通Python：使用Pandas进行数据处理与分析
  • PortgreSQL常用操作
  • AI应用电商篇汇总（持续补充）
  • 让蜂鸣器报警并退出
  • 判断一个元素是否在可视区域
  • 嵌入式学习的第二十五天-系统编程-标准I0与文件IO
  • Agentic Loop与MCP：大模型能力扩展技术解析
  • 06 接口自动化-框架封装思想建立之httprunner框架（下）
  • 算法--js--电话号码的字母组合
  • Manus与DeepSeek 的区别
  • 从0开始学linux韦东山教程第四章问题小结（2）
  • Java异步编程利器：CompletableFuture 深度解析与实战
  • 【C++ Primer 学习札记】函数传参问题
  • 轻量级高性能Rust HTTP服务器库Hyperlane，助力现代网络服务开发
  • C++：vector容器
  • 心知天气 API 获取天气预报 2025/5/21
  • QML定时器Timer和线程任务WorkerScript
  • 大模型评测与可解释性
  • Day 27 训练
  • Linux中的文件介绍
  • 通过美图秀秀将多张图片合并