建立java项目-CSDN博客

本文链接：https://blog.csdn.net/2401_88704316/article/details/148049290

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 {
    @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 方法

        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") // 假设您有一个自增的主键 id
    public 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 {

    @Autowired
    public UserMapper userMapper;

    @Override
    public 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中全局导入

这样前后端都基本完成了