SpringBoot + Vue 项目创建详细步骤

目录一、本地开发环境二、后端创建三、前端创建* *一、本地开发环境--------1. 后端开发软件IntelliJ IDEA 2022.1.32. 后端框架SpringBoot3. 前端框架vue/cli 5.0.8 Element UI4. 后端语言Java5. jdk版本1.8.0_3716. 数据库Oracle 19c7. 数据库操作PLSQL Developer 15 (64 bit)8. 接口测试工具Postman二、后端创建------1、New Project 开始创建新项目2、配置项目的名称、存储位置、语言、jdk等信息3、选择对应的依赖少选多选都没事创建完了可以在配置文件里面加选完了就点击 create4、这是加载完成的情况6、在pom文件里改一下 java 的版本为了每个模块的版本不发生冲突统一改成了适配 jdk1.8 的情况 有的版本冲突是启动不了的 ?xml version1.0 encodingUTF-8? 4.0.0 org.springframework.boot spring-boot-starter-parent 2.7.12 com.rabbitsystem carrot 0.0.1-SNAPSHOT rabbit-system rabbit-system java.version1.8/java.version org.springframework.boot spring-boot-starter-jdbc org.springframework.boot spring-boot-starter-web org.mybatis.spring.boot mybatis-spring-boot-starter 2.2.0 com.oracle.database.jdbc ojdbc8 runtime org.projectlombok lombok true org.springframework.boot spring-boot-starter-test test org.mybatis.spring.boot mybatis-spring-boot-starter-test 2.2.0 test org.apache.commons commons-lang3 3.12.0 log4j log4j 1.2.16 org.springframework.boot spring-boot-maven-plugin 2.7.12 org.projectlombok lombok 7、把 application.properties 文件的后缀改成 yml并进行项目配置 ## 指定web容器访问端口号 rabbit: name: 兔子系统 version: v-1.0 ## web容器端口号 server: port: 8080 ## 配置数据库连接 spring: datasource: driver-class-name: oracle.jdbc.OracleDriver url: jdbc:oracle:thin://localhost:1521/ORCL username: 用户名 password: 密码 ## 配置mybatis中mapper.xml文件扫描 mybatis: type-aliases-package: com.rabbitSystem.carrot.pojo.sel.mapper-locations: classpath:mapper/.xml # mapper.xml文件映射8、在数据库建一个用户表这里是拿来示范的建完表可以加一些测试数据 – 创建用户表 CREATE TABLE CUSTOMER ( ID VARCHAR2(32) NOT NULL, ACCOUNT VARCHAR2(9) NOT NULL, ROLE VARCHAR2(1) DEFAULT ‘2’ NOT NULL, HEAD_PROTRAIT_NAME VARCHAR2(200) NOT NULL, HEAD_PROTRAIT_FILE VARCHAR2(200) NOT NULL, NICK_NAME VARCHAR2(32) NOT NULL, PASSWORD VARCHAR2(64) NOT NULL, SALT VARCHAR2(32) NOT NULL, BIRTHDAY Date, AGE VARCHAR2(3), SEX VARCHAR(1), SAFETY1_QUESTION VARCHAR2(64) SAFETY2_QUESTION VARCHAR2(64) SAFETY3_QUESTION VARCHAR2(64) SAFETY1_ANSWER VARCHAR2(32) SAFETY2_ANSWER VARCHAR2(32) SAFETY3_ANSWER VARCHAR2(32) CREATE_TIME Date DEFAULT SYSDATE NOT NULL, UPDATE_TIME Date DEFAULT SYSDATE NOT NULL, IS_DELETE varchar(1) DEFAULT ‘N’ NOT NULL ); – 各个字段的注释 COMMENT ON TABLE CUSTOMER IS ‘用户表’; COMMENT ON COLUMN CUSTOMER.ID IS ‘用户表ID’; COMMENT ON COLUMN CUSTOMER.ACCOUNT IS ‘账号’; COMMENT ON COLUMN CUSTOMER.ROLE IS ‘角色 0 超级管理员1 管理员2 普通用户’; COMMENT ON COLUMN CUSTOMER.HEAD_PROTRAIT_NAME IS ‘头像图片名字’; COMMENT ON COLUMN CUSTOMER.HEAD_PROTRAIT_FILE IS ‘头像二进制文件’; COMMENT ON COLUMN CUSTOMER.NICK_NAME IS ‘昵称’; COMMENT ON COLUMN CUSTOMER.PASSWORD IS ‘密码’; COMMENT ON COLUMN CUSTOMER.SALT IS ‘盐加密’; COMMENT ON COLUMN CUSTOMER.BIRTHDAY IS ‘出生日期’; COMMENT ON COLUMN CUSTOMER.AGE IS ‘年龄’; COMMENT ON COLUMN CUSTOMER.SEX IS ‘性别 1 女0 男2 保密’; COMMENT ON COLUMN CUSTOMER.SAFETY1_QUESTION IS ‘安全问题1id’; COMMENT ON COLUMN CUSTOMER.SAFETY2_QUESTION IS ‘安全问题2id’; COMMENT ON COLUMN CUSTOMER.SAFETY3_QUESTION IS ‘安全问题3id’; COMMENT ON COLUMN CUSTOMER.SAFETY1_ANSWER IS ‘安全问题1答案’; COMMENT ON COLUMN CUSTOMER.SAFETY2_ANSWER IS ‘安全问题2答案’; COMMENT ON COLUMN CUSTOMER.SAFETY3_ANSWER IS ‘安全问题3答案’; COMMENT ON COLUMN CUSTOMER.CREATE_TIME IS ‘创建时间’; COMMENT ON COLUMN CUSTOMER.UPDATE_TIME IS ‘更新时间’; COMMENT ON COLUMN CUSTOMER.IS_DELETE IS ‘是否删除 Y 已删除N 未删除’;9、连接数据库我这里是Oracle这里面的sid可以在数据库里面查这样就可以直接在 IDEA 里面看到Oracle数据库了10、在运行类的同级目录下创建四个包controller控制层、service业务层、mapper映射层/持久层、pojo模型层、resources 下面的数据访问层及对应的类工具包里面的AjaxResult工具类下面会提供11、快捷生成实体类右击数据库的表选择生成的包下就可以了11、使用Data注解代替get/set方法下面的那些就可以删掉了我这里是单独建了一个查询用的类因为有时候联查的时候字段是不止一个表的所以之后查用户信息就直接用这个类缺什么字段就补什么不会乱13、控制层控制层会用到一个返回ajax类型数据的工具类我提供在下面package com.rabbitSystem.carrot.common.core; import com.rabbitSystem.carrot.common.utils.StringUtils; import java.util.HashMap; /** * 操作消息提醒 * * author ruoyi/ public class AjaxResult extends HashMapString, Object { private static final long serialVersionUID 1L; /* * 状态码/ public static final String CODE_TAG “code”; /* * 返回内容/ public static final String MSG_TAG “msg”; /* * 数据对象/ public static final String DATA_TAG “data”; /* * 数据总数量/ public static final String DATA_COUNT “count”; /* * 状态类型/ public enum Type { /* * 成功/ SUCCESS(200), /* * 警告/ WARN(301), /* * 校验失败/ FAILED(-1), /* * 错误/ ERROR(500); private final int value; Type(int value) { this.value value; } public int value() { return this.value; } } /* * 初始化一个新创建的 AjaxResult 对象使其表示一个空消息。/ public AjaxResult() { } /* * 初始化一个新创建的 AjaxResult 对象 * * param type 状态类型 * param msg 返回内容/ public AjaxResult(Type type, String msg) { super.put(CODE_TAG, type.value); super.put(MSG_TAG, msg); } /* * 初始化一个新创建的 AjaxResult 对象 * * param type 状态类型 * param msg 返回内容 * param data 数据对象/ public AjaxResult(Type type, String msg, Object data) { super.put(CODE_TAG, type.value); super.put(MSG_TAG, msg); if (StringUtils.isNotNull(data)) { super.put(DATA_TAG, data); } } /* * 初始化一个新创建的 AjaxResult 对象 * param type 状态类型 * param msg 返回内容 * param data 数据对象 * param count 数据总数量/ public AjaxResult(Type type, String msg, Object data,Integer count) { super.put(CODE_TAG, type.value); super.put(MSG_TAG, msg); if (StringUtils.isNotNull(data)) { super.put(DATA_TAG, data); } if(count!null){ super.put(DATA_COUNT,count); } } /* * 方便链式调用 * * param key 键 * param value 值 * return 数据对象/ Override public AjaxResult put(String key, Object value) { super.put(key, value); return this; } /* * 返回成功消息 * * return 成功消息/ public static AjaxResult success() { return AjaxResult.success(“操作成功”); } /* * 返回成功数据 * * return 成功消息/ public static AjaxResult success(Object data) { return AjaxResult.success(“操作成功”, data); } /* * 返回成功消息 * * param msg 返回内容 * return 成功消息/ public static AjaxResult success(String msg) { return AjaxResult.success(msg, null); } /* * 返回成功消息 * * param msg 返回内容 * param data 数据对象 * return 成功消息/ public static AjaxResult success(String msg, Object data) { return new AjaxResult(Type.SUCCESS, msg, data); } /* * 返回警告消息 * * param msg 返回内容 * return 警告消息/ public static AjaxResult warn(String msg) { return AjaxResult.warn(msg, null); } /* * 返回警告消息 * * param msg 返回内容 * param data 数据对象 * return 警告消息/ public static AjaxResult warn(String msg, Object data) { return new AjaxResult(Type.WARN, msg, data); } /* * 返回错误消息 * * return/ public static AjaxResult error() { return AjaxResult.error(“操作失败”); } /* * 返回错误消息 * * param msg 返回内容 * return 警告消息/ public static AjaxResult error(String msg) { return AjaxResult.error(msg, null); } /* * 返回错误消息 * * param msg 返回内容 * param data 数据对象 * return 警告消息/ public static AjaxResult error(String msg, Object data) { return new AjaxResult(Type.ERROR, msg, data); } } 控制层 package com.rabbitSystem.carrot.controller; import com.rabbitSystem.carrot.common.core.AjaxResult; import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo; import com.rabbitSystem.carrot.service.CustomerService; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; import java.util.List; /* * 标识控制层 * RestController 组合注解, Controller ResponseBody , * 在类头部指定RestController注解,就表示该控制器下所有的方法均以 json格式类型从服务端响应给客户端(前台)/ RestController /* * 处理 HTTP 请求/ RequestMapping(“/CustomerController”) /* * 用户的控制层/ public class CustomerController { /* * 调用业务访问层对象/ Resource private CustomerService customerService; /* * GetMapping处理 GET 请求查询一般用 get 请求 * 查询所有用户信息的方法/ GetMapping(“/selCustomers”) public AjaxResult selCustomers(){ List customerSelPojoList customerService.selCustomers(); int i 200; if (customerSelPojoList null){ i 0; }; String msg i 200 ? “查询成功” : “查询失败”; return new AjaxResult(i 200 ? AjaxResult.Type.SUCCESS : AjaxResult.Type.ERROR,msg, customerSelPojoList); } } 14、业务层 package com.rabbitSystem.carrot.service; import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo; import java.util.List; public interface CustomerService { List selCustomers(); } 15、业务层实现类 package com.rabbitSystem.carrot.service.impl; import com.rabbitSystem.carrot.mapper.CustomerMapper; import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo; import com.rabbitSystem.carrot.service.CustomerService; import org.springframework.stereotype.Service; import javax.annotation.Resource; import java.util.List; Service public class CustomerImpl implements CustomerService { //创建数据访问层对象 Resource private CustomerMapper customerMapper; Override public List selCustomers() { List customerSelPojo customerMapper.selCustomers(); return customerSelPojo; } }16、映射层 package com.rabbitSystem.carrot.mapper; import com.rabbitSystem.carrot.pojo.sel.CustomerSelPojo; import org.apache.ibatis.annotations.Mapper; import java.util.List; Mapper public interface CustomerMapper { List selCustomers(); }17、数据访问层 ?xml version1.0 encodingUTF-8? select T.ID,T.ACCOUNT,T.ROLE,T.HEAD_PROTRAIT_NAME, T.HEAD_PROTRAIT_FILE,T.NICK_NAME,T.PASSWORD,T.SALT,TO_CHAR(T.BIRTHDAY, ‘YYYY-MM-DD’) AS BIRTHDAY, T.AGE,T.SEX,T.SAFETY1_QUESTION,T.SAFETY2_QUESTION,T.SAFETY3_QUESTION, T.SAFETY1_ANSWER,T.SAFETY2_ANSWER,T.SAFETY3_ANSWER, T.CREATE_TIME,T.UPDATE_TIME, T.IS_DELETE from CUSTOMER T 18、后端校验启动服务下面就是成功了打开 Postman 接口测试工具输入地址控制层对应的然后点击 send 发送请求返回的状态码是200就表示成功了三、前端创建------1、检测一下vue是否安装好了直接查看vue的版本正常出来的话就没问题2、构建vue3、成功后项目的目录下就会出现刚才创建的文件夹4、我这里是觉得在IDEA里面比较方便大家也可以用其他软件打开然后进入命令行模式启动5、这是启动好的样子有两个网址可以复制第一个地址去浏览器打开看到 Welcome to Your Vue.js App 就表示成功了6、关闭的时候按 Ctrl C 然后输入 Y 回车就好了关闭之后刚才的网页就打不开了接下来就可以写前端的代码了7、在 Vue 组件中使用axios或fetch发送 HTTP 请求。例如安装axios在命令行模式下执行这段语句npm install axios安装好之后可以在该文件目录下找到这个文件8、安装Element Plus基于 Vue 3 的 UI 组件库可以加快开发速度并提高用户界面的美观性和一致性 npm install element-plus9、安装vue插件这样可以更好的适配vue的语法结构10、修改配置文件vue.config.js const { defineConfig } require(‘vue/cli-service’); const { DefinePlugin } require(‘webpack’); module.exports defineConfig({ // 配置开发服务器 devServer: { port: 8082, // 设置开发服务器的端口号为 8082 }, // 是否转译依赖依赖于 babel transpileDependencies: true, // 配置公共路径根据环境变量设置不同的路径 publicPath: process.env.NODE_ENV ‘production’ ? ‘/myapp/’ : ‘/’, // 配置 webpack configureWebpack: { plugins: [ new DefinePlugin({ // 定义全局常量用于在生产环境中关闭 Vue 的生产模式水合不匹配的详细信息VUE_PROD_HYDRATION_MISMATCH_DETAILS: JSON.stringify(false) }), ], }, });11、修改配置文件main.js import { createApp } from ‘vue’; import RabbitSystemVueApp from ‘./RabbitSystemVueApp’; // 引入主 Vue 组件 import router from ‘./router’; // 引入路由配置 import ElementPlus from ‘element-plus’; // 引入 Element Plus UI 库 import ‘element-plus/dist/index.css’; // 引入 Element Plus 的样式文件 // 创建 Vue 应用实例 const app createApp(RabbitSystemVueApp); // 使用插件 app.use(router); // 注册路由插件 app.use(ElementPlus); // 注册 Element Plus 插件 // 挂载应用到 DOM 元素 app.mount(‘#app’); // 将 Vue 应用挂载到 id 为 ‘app’ 的 DOM 元素上12、这里看一下最后的结构13、配置路由访问地址 // src/router/index.js import { createRouter, createWebHistory } from ‘vue-router’; import App from ‘/App’; // 示例主页组件 // import RabbitSystemVueApp from ‘/RabbitSystemVueApp’; // 示例根组件 import CustomerPage from ‘/module/rabbit-system/views/CustomerPage’; import NotFound from ‘/NotFoundPage’; const routes [ { path: ‘/’, component: App }, // { path: ‘/app’, component: RabbitSystemVueApp }, { path: ‘/CustomerPage’, component: CustomerPage }, { path: /:pathMatch(.), component: NotFound } // 404 路由,匹配所有未定义的路径 ]; const router createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); export default router;14、前端代码CustomerPage.vue 当访问地址不正确的时候会到这个页面19、为了解决前后端跨域的问题这里建了一个工具类package com.rabbitSystem.carrot.common.core; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; Configuration /* * 解决跨域问题/ public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(“/**”) .allowedOrigins() // 允许任意域名访问或者替换为特定的域名 .allowedMethods(“GET”, “POST”, “PUT”, “DELETE”) // 允许的请求方法 .allowedHeaders(“Content-Type”, “Authorization”) // 允许的请求头 .maxAge(3600); // 可选的设置预检请求的缓存时间 } } 20、这样就差不多了最后重启一下前后端这里展示一下最后页面的效果由于篇幅的原因这里就展示到这个位置如果这边代码有遗漏的也可以在评论区说一下后面会尽快补上后续会继续完善代码奉献给大家因为之前学过虽然现在没有做开发但是还是不想荒废了所以还是想练练如果有不对或者有需要修改优化的还请大佬指教谢谢结束…