建立java项目

java端:

在idea里面新建一个java,maven项目(springboot):

注意:JDK与java都得是一样的

添加基本的依赖项:

也可以在pom.xml中点击这个,从而跳转到添加依赖

建立三层架构:

在相应的java类中添加代码:

 <1.UserController

package com.example.demo.controller;import com.example.demo.pojo.Result;
import com.example.demo.pojo.User;
import com.example.demo.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 方法return Result.success(user); // 返回创建成功的用户对象}
}

<2.UserMapper

package com.example.demo.mapper;import com.example.demo.pojo.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Options;
import org.apache.ibatis.annotations.Select;@Mapper // 必须保留
public interface UserMapper {// 不能有方法实现@Select("select * from user where usename=#{userName} and age =#{age}")public User getByUsernameAndPassword(User user);@Insert("insert into user(usename, age) values (#{userName}, #{age})")@Options(useGeneratedKeys = true, keyProperty = "userId") // 假设您有一个自增的主键 idpublic int createNewUser(User user);
}

<3.Result 

package com.example.demo.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方法public Integer getCode() {return code;}public void setCode(Integer code) {this.code = code;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public Object getData() {return data;}public void setData(Object data) {this.data = data;}
}

<4.User

package com.example.demo.pojo;public class User {private Integer userId;private String userName;private Integer age;public User() {}public Integer getUserId() {return userId;}public void setUserId(Integer userId) {this.userId = userId;}public String getUserName() {return userName;}public void setUserName(String userName) {this.userName = userName;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}
}

<5.UserServiceImpl

package com.example.demo.service.impl;import com.example.demo.mapper.UserMapper;
import com.example.demo.pojo.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;@Service
public class UserServiceImpl implements UserService {@Autowiredpublic UserMapper userMapper;@Overridepublic int insertUser(User user) {return userMapper.createNewUser(user);}
}

<6. UserService

package com.example.demo.service;import com.example.demo.pojo.User;public interface UserService {int insertUser(User user);
}

<7.application.properties

spring.application.name=demo2//文件名(要改)
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/tesx//navicat创建的名字(要改)
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=9000//端口号(要改)

其中我的tesx名在这里:

<8.在pom.xml里面代码

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.4.5</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.text2</groupId><artifactId>demo2</artifactId><version>0.0.1-SNAPSHOT</version><name>demo2</name><description>demo2</description><url/><licenses><license/></licenses><developers><developer/></developers><scm><connection/><developerConnection/><tag/><url/></scm><properties><java.version>17</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jdbc</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>3.0.4</version></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter-test</artifactId><version>3.0.4</version><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configuration><annotationProcessorPaths><path><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId></path></annotationProcessorPaths></configuration></plugin><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

<9.添加数据库这是添加好的

这是相应的步骤:

<10.测试代码(检测代码是否可以正确操作):

在idea里面配置apifox插件(就是第一个)

生成个人访问令牌,在此之前要在电脑上下好apifox,并登录:

打开apifox,点击头像,账号管理

点击新建,复制API访问令牌:

 进行测试代码,里面会填我们复制的API访问令牌

打开apifox:

java前端:

<1.在vscode里面用pnpm创建vue3的文件:

<2.在终端里面输入口令,这样前端项目就创建好了

pnpm create vue

将下面这四个口令依次复制给终端

<3.页面,点击那个链接会跳转到Vue3界面

<4.把项目中的assets,components,stores,views中的文件清空

并在App.vue里面改成下面的代码

<template><RouterView />
</template>

<5.安装 sass 依赖和Pinia - 构建用户仓库 和 持久化:

在终端输入:(安装 sass 依赖)

pnpm add sass -D

输入:(Pinia - 构建用户仓库 和 持久化)

pnpm add pinia-plugin-persistedstate -D

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

<7.接下来依次向终端复制下面口令:

axios-数据交互

pnpm add axios

element-ui组件配置

pnpm install element-plus

pnpm add element-plus

pnpm add -D unplugin-vue-components unplugin-auto-import

<8.在main.js中全局导入

这样前后端都基本完成了