Web项目流程总结

发布于：2025-05-22 ⋅ 阅读:(25) ⋅ 点赞:(0)

前端

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 {
    @Autowired
    private 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 {
    @Autowired
    private UserMapper userMapper;
    @Override
    public 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中。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布