web开发全过程总结

利用pnpm创建vue3的文件

使用pnpm创建项目

项目配置

[在idea中创建Spring Boot项目](#在idea中创建Spring Boot项目)

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

利用pnpm创建vue3的文件

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

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

输入指令安装pnpm

java 复制代码

npm install -g pnpm

结果为

使用pnpm创建项目

输入

java 复制代码

pnpm create vue

输入指令后出现

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

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

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

依次将复制并运行

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

项目配置

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

2.删除不用的组件

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

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

4.打开终端，再打开GitBash

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

依次输入指令

java 复制代码

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

pnpm lint-staged

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

java 复制代码

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

配置package.json

java 复制代码

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

6.安装sass依赖

java 复制代码

pnpm add sass -D

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

java 复制代码

pnpm add pinia-plugin-persistedstate -D

在main.js中导入pinia

在stores中创建一个user.js文件

java 复制代码

// 从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(数据交互)

java 复制代码

pnpm add axios

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

java 复制代码

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，需加入依赖

java 复制代码

<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 的响应结果。

java 复制代码

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测试。

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