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

JavaWeb 开发流程

news 来源：原创 2025/5/23 13:31:49

项目建立

SpringBoot框架构建

Spring Boot 是基于 Spring 框架的开源 Java 基础框架，用于创建独立、生产级的基于 Spring Framework 的应用程序。

我们可以使用IDEA建立SpringBoot框架。

语言选择Java，类型选择Maven，JDK和Java要保持一致，尽量选择长期支持版本

点击下一步，配置依赖项

选择Spring Boot的版本，注意不要选择后面带(SNAPSHOT)的版本

添加如图所示依赖项，点击创建，就成功的建立了一个项目

我们可以点击pom.xml，点击编辑启动器，来添加其他依赖项

如图是一些常见的依赖项

配置基础项目结构

三层架构

三层架构分别是表示层、业务逻辑层和数据访问层，具有“高内聚、低耦合”的特点

建立如图架构

控制器层(controller)

控制器层可以处理来自客户端的请求，验证请求参数的合法性，协调业务逻辑，将结果封装为适合客户端的形式返回。

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); // 返回创建成功的用户对象}
}

实体类(pojo)

实体类是用来表示业务领域中核心数据概念的Java类，对应数据库中的表结构

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方法
}

DAO层(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> {
}

服务层(service)

服务层（Service Layer）是JavaWeb三层架构中的核心业务层，位于表示层（Controller）与数据访问层（DAO）之间，承担着系统的核心业务逻辑处理职责。

可以清晰地分离接口定义和具体实现，同时利用 MyBatis-Plus 提供的通用方法，减少重复代码，提高开发效率。

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);
}

由于使用的是mybatis-plus。所以需要把对应的依赖项放到pom.xml文件里面 .

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

数据库

Navicat新建数据库

点击我的连接->新建连接->选择MySQL

输入信息后点击测试连接，确保成功连接，随后点就确定

点开新建的连接，新建数据库并输入名称(字符集和排序规则不管)。

点开新建的数据库，新建表，表中数据如图所示；

注意：主键要设置为自动递增

IDEA连接数据库

在IDEA中找到数据库，点击+，选择数据源，选择MySQL

输入个人信息，如图所示

注意：数据库中一行输入的是数据库的名字，而非连接名称

随后点击连接测试，成功后确定

随后点开application.properties 文件，完成配置

Apifox

进入IDEA→ 设置→ Apifox Helper

点击“+”，选择代码模块，以及Apifox中，相关项目的名字，确定

生成Apifox文档

在我们写接口的控制器层controller包，找到我们的测试代码UserController类。右键，点击Upload to Apifox，自动生成Apifox文档。

接口文档测试

把后端的服务器打开，进入Apifox软件

将请求参数复制后点击运行

将复制结构丢在图片上方，去掉userId（主键会递增），点击发送，右下角返回值为两百，即为成功。

前端

使用pnpm创建项目

以管理员身份运行命令提示符

切换到想要建立项目的目录，输入以下指令下载vue3项目。


pnpm create vue

把上图三个绿色的指令丢进命令提示符

点开Vue3界面

出现这个界面代表项目建立成功

项目精细化配置

此时打开VSCode

1.删除不要的文件，把这些文件夹内的东西清空

2.修改app.vue中的代码

3.打开终端选择Git

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

依次输入以下指令

pnpm dlx husky-init && pnpm install

git init

git add .

git commit -m '描述性信息'

pnpm i lint-staged -D

配置 `package.json`

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

修改 .husky/pre-commit 文件

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

5.安装 sass 依赖

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-数据交互

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')