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

web开发全过程总结

news 来源：原创 2025/6/6 6:17:51

利用pnpm创建vue3的文件

使用pnpm创建项目

项目配置

在idea中创建Spring Boot项目

配置基础项目架构(三层架构)

利用pnpm创建vue3的文件

1.打开cmd,以管理员的身份运行

2.切换到自己想要建立项目的文件的目录下或者直接在文件中以cmd的形式打开

输入指令安装pnpm

npm install -g pnpm

结果为

使用pnpm创建项目

输入

pnpm create vue

输入指令后出现

根据提示输入项目名称，包名（需要小写）

因为含有了ESlint的插件，则无需勾选eslint和prettier

如果勾选了eslint和prettier，则应该这样选

依次将复制并运行

出现改页面则项目建立成功，可以在文件相应位置查看创立的文件。

项目配置

1.点击左上角的三条横线，点击文件，再点击打开文件夹，找到我们新创立的文件夹打开

2.删除不用的组件

将assets,components,stores,views中的文件清空。

3.打开App.vue，将组件中的内容修改为

4.打开终端，再打开GitBash

5.安装hushy（如果选择了ESlint和Prettier)

依次输入指令

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"pnpm lint-staged

修改husky/pre-commit中的内容为

git init
pnpm dlx husky-init && pnpm install
git add .
pnpm i lint-staged -D
git commit -m '描述性信息'

配置package.json

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

6.安装sass依赖

pnpm add sass -D

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

pnpm add pinia-plugin-persistedstate -D

在main.js中导入pinia

在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配置中正确地使用它。
);

8.安装axios(数据交互)

pnpm add axios

9.配置element-ui组件，依次输入指令

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

在main.js中全局导入

vue3就配置完成，前端部分基本配置好了.

在idea中创建Spring Boot项目

1.建立spring boot项目，按如下所选

勾选spring boot

点击pom.xml打开编辑启动器选择依赖项

配置基础项目架构(三层架构)

创立如下三层架构

控制器层(controller):用来接受前端发送的请求，对请求进行处理，并响应数据

服务层(service):主要处理业务逻辑,它介于控制器层和数据访问层之间。通过定义服务层接口和实现类 Impl，可以清晰地分离接口定义和具体实现，同时利用 MyBatis-Plus 提供的通用方法，减少重复代码，提高开发效率。因为使用MyBatis-Plus，需加入依赖

<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.10.1</version>
</dependency>

Dao层（mapper):数据访问层，主要与数据库相关，负责数据访问操作

实体类（POJO):定义实体类，用于映射数据库中的表。使用了 MyBatis-Plus 提供的注解来指定表名、字段名以及主键生成策略。

在pojo中封装一个响应类Reasult,用于封装 API 的响应结果。

package com.exercise.mybatisplus.pojo;public class Result {private Integer code;  // 1=成功, 0=失败private String msg;    // 响应信息private Object data;   // 返回数据public Result() {}public Result(Integer code, String msg, Object data) {this.code = code;this.msg = msg;this.data = data;}// 成功（无数据）public static Result success() {return new Result(1, "success", null);}// 成功（带数据）public static Result success(Object data) {return new Result(1, "success", data);}// 失败public static Result error(String msg) {return new Result(0, msg, null);}//Get和Set方法
}

后端的基本配置就配好了，后面主要就是创建数据库并连接和利用apifox测试。

更详细的web项目构建请跳转最新初学者入门JavaWeb——后端_如何做第一个后端java开源项目-CSDN博客

手把手教你轻松使用pnpm建立Vue3项目（包含配置）_pnpm 使用-CSDN博客