中山精品网站建设咨询,东软实训网站开发,一个网站怎么绑定很多个域名,平面设计主要有哪些稻草快速开发平台
开发背景就是通过此项目介绍使用SpringBoot Vue3两大技术栈开发一个拥有动态权限、路由的前后端分离项目#xff0c;此项目可以继续完善#xff0c;成为一个模板为将来快速开发做铺垫。
实现功能 开发流程
通过命令构建前端项目在VSCode中开发#xff…稻草快速开发平台
开发背景就是通过此项目介绍使用SpringBoot Vue3两大技术栈开发一个拥有动态权限、路由的前后端分离项目此项目可以继续完善成为一个模板为将来快速开发做铺垫。
实现功能 开发流程
通过命令构建前端项目在VSCode中开发在IDEA中通过maven开发后端项目此后在gitee上创建仓库测试完功能之后上传到代码仓库中。最后通过云服务器实现项目上线的完整流程。
前后端分离
前后端分离顾名思义是将前端和后端拆分出来开发前后端分离也为微服务架构多端化服务等打下基础。前后端分离主要目的是解耦。核心思想是前端 Html 页面通过 Ajax 调用后端的 RestFul API 并使用 Json 数据【或其他类型数据如xml、csv、yaml等】进行数据交互。
前端项目部署到Web服务器上web服务器一般只能解析静态资源如html、css、图片、文档等。一般性能较强常用的有nginx、Apache
后端服务部署到应用服务器上可以解析动态资源和静态资源解析静态资源的性能没有web服务器好常用的有Tomcat、Jetty等 一般来说Web服务器暴露在公网上应用服务器只允许内网访问前后端http请求通过web服务器代理到对应的后端服务端口上 交互形式
前后端不分离
后端将数据和页面组装【SpringMVC中的ModelAndView没出现JSP之前Servlet写页面】、渲染好了之后向浏览器输出最终的html浏览器接收到后会解析html解析引入的css、执行js脚本完成最终的页面展示。甚至后端还涉及到了页面跳转的工作0.0。
前后端分离
后端只需要和前端约定好接收以及返回的数据格式一般用JSON格式向前端提供API接口。前端就可以通过HTTP请求调用API的方式进行交互。前端获取到数据后进行页面组装、渲染最终在浏览器呈现。页面的跳转也交由前端控制
代码组成形式
前后端不分离在web应用早期的时候前端页面以及后台业务数据处理的代码都放在一个工程下甚至放在同一目录下前端页面夹杂着后端代码。前、后端开发工程师都需要把整套代码导入开发工具才能开发。此阶段下前后端代码以及工作耦合度太高前端不能独立开发和测试后端人员也要依赖前端完成页面后才能完成开发。最糟糕的情况是前端工程师需要会后端模板技术jsp后端工程师还要会点前端技术需要口头说明页面数据接口才能配合完成开发。否则前端只能当一个“切图仔”只输出HTML、CSS、以及很少量与业务逻辑无关的js然后由后端转化为后端jsp并且还要写业务的js代码。后来的Thymealf这些模板引擎也都不是前后端分离其实就是JSP的另一种包装代码还是在同一个项目中
前后端分离前后端代码放在不同的工程下前端代码可以独立开发通过mock/easy-mock技术模拟后端API服务可以独立运行、测试后端代码也可以独立开发运行、测试通过swagger技术能自动生成API文档供前端阅读还可以进行自动化接口测试保证API的可用性降低集成风险。
开发模式与流程
前后端不分离在项目开发阶段前端根据原型和UI设计稿编写HTML、CSS以及少量与业务无关的js纯效果那些完成后交给后台人员后台人员将HTML转为jsp并通过JSP的模板语法进行数据绑定以及一些逻辑操作。后台完成后将全部代码打包包含前端代码、后端代码打成一个war然后部署到同一台服务器运行。顶多做一下动静分离也就是把图片、css、js分开部署到nginx。
前后端分离实现前后端分离之后前端根据原型和UI设计稿编写HTML、CSS以及少量与业务无关的 js纯效果那些后端也同时根据原型进行API设计并与前端协定API数据规范。等到后台API完成或仅仅是API数据规范设定完成之后。前端即可通过HTTP调用API或通过mock数据完成数据组装以及业务逻辑编写。前后端可以并行或者前端先行于后端开发了。
部署架构 项目架构
实现前后端分离主要是前端的技术架构变化较大后端主要变为restfull 风格API然后加上Swagger技术自动生成在线接口文档。
前后端分离意义
提高开发效率前后端分离以后可以实现前后端代码的解耦只要前后端沟通约定好应用所需接口以及接口参数便可以开始并行开发无需等待对方的开发工作结束。与此同时即使需求发生变更只要接口与数据格式不变后端开发人员就不需要修改代码只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。
完美应对复杂多变的前端需求如果开发团队能完成前后端分离的转型打造优秀的前后端团队开发独立化让开发人员做到专注专精开发能力必然会有所提升能够完美应对各种复杂多变的前端需求。
增强代码可维护性前后端分离后应用的代码不再是前后端混合只有在运行期才会有调用依赖关系。应用代码将会变得整洁清晰不论是代码阅读还是代码维护都会比以前轻松。
故障定位前后端分离之后更能快速定位问题通过接口响应数据可定位到是前端还是后端问题。
当然随着前后端分离思想出现随之出现了具体的落地实现就要去学习对应的技术增加了项目的复杂度。甚至还要求前后端都要会的现象。从而引出了全栈工程师这样的代名词
技术栈
后端
JDK17SpringBoot3.XSpringSecurity6.XMySQL8.XMyBatis-Plus3.5.XJWTRedis7maven等其他工具类技术
前端
Node.js 20.XVue3vue-router4painaviteElement-plus
其他工具
nginxgit
开发环境准备
首先电脑上应安装以下环境和工具
JDK17IDEAMySQLRedisNodeJSVS CodegitMaven
构建后端项目
使用maven构建
父工程定义依赖并不实现什么代码common模块主要定义使用的公共模块工具类support模块定义项目中的核心支持如springsecurityredis等starter模块定义项目入口各种业务模块user模块、system模块
构建前端项目
vue3推荐我们使用vite作为构建工具之前使用webpack构建项目
vscode安装插件
Auto Close Tag自动闭合标签Vue VSCode Snippets生成代码片段Vue Peek快速跳转到组件、模块定义的文件Vue Theme主题Image preview图片预览
IDEA插件
CodeGlance缩略图GenerateAllSetter生成默认set方法
上传项目到Gitee中
上传代码流程
创建远程仓库【github、gitee、coder、gitlab等等】首先将代码上传到本地仓库再将本地库推送的远程仓库
数据表
数据表以仓库中sql文件为准
CREATE TABLE ums_sys_user (id bigint NOT NULL AUTO_INCREMENT COMMENT 用户ID,username varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 用户账号,nickname varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 用户昵称,email varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT COMMENT 用户邮箱,mobile varchar(11) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT COMMENT 手机号码,sex int DEFAULT 0 COMMENT 用户性别0男 1女 2未知,avatar varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT COMMENT 头像地址,password varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT COMMENT 密码,status int DEFAULT 0 COMMENT 帐号状态0正常 1停用,creator varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 创建者,create_time datetime DEFAULT NULL COMMENT 创建时间,updater varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 更新者,update_time datetime DEFAULT NULL COMMENT 更新时间,remark varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT 备注,deleted tinyint DEFAULT 0,PRIMARY KEY (id) USING BTREE
) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_0900_ai_ci ROW_FORMATDYNAMIC COMMENT后台用户表;CREATE TABLE ums_role (id bigint NOT NULL AUTO_INCREMENT COMMENT 角色id,role_label varchar(255) DEFAULT NULL COMMENT 角色标识,role_name varchar(255) DEFAULT NULL COMMENT 角色名字,sort int DEFAULT NULL COMMENT 排序,status int DEFAULT NULL COMMENT 状态0可用1不可用,deleted int DEFAULT NULL COMMENT 是否删除0: 未删除1已删除,remark varchar(255) DEFAULT NULL COMMENT 备注,creator varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 创建者,updater varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 更新者,create_time datetime DEFAULT NULL COMMENT 创建时间,update_time datetime DEFAULT NULL COMMENT 修改时间,PRIMARY KEY (id)
) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_0900_ai_ci;CREATE TABLE ums_menu (id bigint NOT NULL AUTO_INCREMENT COMMENT 主键,parent_id bigint NOT NULL DEFAULT 0 COMMENT 父id,menu_name varchar(255) DEFAULT NULL COMMENT 菜单名,sort int DEFAULT 0 COMMENT 排序,menu_type int DEFAULT NULL COMMENT 类型0目录1菜单2按钮,path varchar(255) DEFAULT NULL COMMENT 路由路径 umsUser,component_path varchar(255) DEFAULT NULL COMMENT 组件路径 如ums/user/index,perms varchar(255) DEFAULT NULL COMMENT 权限标识,icon varchar(255) DEFAULT NULL COMMENT 图标,deleted int DEFAULT NULL COMMENT 是否删除,status int DEFAULT NULL COMMENT 状态0可用1不可用,creator varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 创建者,updater varchar(30) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 更新者,create_time datetime DEFAULT NULL COMMENT 创建时间,update_time datetime DEFAULT NULL COMMENT 修改时间,PRIMARY KEY (id)
) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_0900_ai_ci;CREATE TABLE ums_sys_user_role (id bigint NOT NULL AUTO_INCREMENT COMMENT 主键id,user_id bigint NOT NULL COMMENT 用户id,role_id bigint NOT NULL COMMENT 角色id,PRIMARY KEY (id)
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_0900_ai_ci;CREATE TABLE ums_role_menu (id bigint NOT NULL AUTO_INCREMENT,role_id bigint DEFAULT NULL,menu_id bigint DEFAULT NULL,PRIMARY KEY (id)
) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_0900_ai_ci;Auth模块
创建实体创建service、mapper
common模块
定义公共功能
定义响应码
定义前后端判断请求状态的响应码。当然可以是自己定义的除HTTP状态码之外的数据
public class HttpStatus {/*** 操作成功*/public static final int SUCCESS 200;/*** 对象创建成功*/public static final int CREATED 201;/*** 请求已经被接受*/public static final int ACCEPTED 202;/*** 操作已经执行成功但是没有返回数据*/public static final int NO_CONTENT 204;/*** 资源已被移除*/public static final int MOVED_PERM 301;/*** 重定向*/public static final int SEE_OTHER 303;/*** 资源没有被修改*/public static final int NOT_MODIFIED 304;/*** 参数列表错误缺少格式不匹配*/public static final int BAD_REQUEST 400;/*** 未授权*/public static final int UNAUTHORIZED 401;/*** 访问受限授权过期*/public static final int FORBIDDEN 403;/*** 资源服务未找到*/public static final int NOT_FOUND 404;/*** 不允许的http方法*/public static final int BAD_METHOD 405;/*** 资源冲突或者资源被锁*/public static final int CONFLICT 409;/*** 不支持的数据媒体类型*/public static final int UNSUPPORTED_TYPE 415;/*** 系统内部错误*/public static final int ERROR 500;/*** 接口未实现*/public static final int NOT_IMPLEMENTED 501;/*** 系统警告消息*/public static final int WARN 601;
}统一返回结果集
前端返回数据的时候数据格式是JSON结构是
{code: HttpStatus.SUCCESS,data: data,msg: 响应信息
}code前端根据code判断请求的状态
msg根据msg的值做一些提示
data数据可以是单个数据对象或者集合【数组】
Data
public class DaoCaoResult 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;/*** 初始化一个新创建的 AjaxResult 对象使其表示一个空消息。*/public DaoCaoResult() {}/*** 初始化一个新创建的 AjaxResult 对象** param code 状态码* param msg 返回内容*/public DaoCaoResult(int code, String msg) {super.put(CODE_TAG, code);super.put(MSG_TAG, msg);}/*** 初始化一个新创建的 AjaxResult 对象** param code 状态码* param msg 返回内容* param data 数据对象*/public DaoCaoResult(int code, String msg, Object data) {super.put(CODE_TAG, code);super.put(MSG_TAG, msg);if (ObjectUtil.isNull(data)) {super.put(DATA_TAG, data);}}/*** 返回成功消息** return 成功消息*/public static DaoCaoResult success() {return DaoCaoResult.success(操作成功);}/*** 返回成功数据** return 成功消息*/public static DaoCaoResult success(Object data) {return DaoCaoResult.success(操作成功, data);}/*** 返回成功消息** param msg 返回内容* return 成功消息*/public static DaoCaoResult success(String msg) {return DaoCaoResult.success(msg, null);}/*** 返回成功消息** param msg 返回内容* param data 数据对象* return 成功消息*/public static DaoCaoResult success(String msg, Object data) {return new DaoCaoResult(HttpStatus.SUCCESS, msg, data);}/*** 返回警告消息** param msg 返回内容* return 警告消息*/public static DaoCaoResult warn(String msg) {return DaoCaoResult.warn(msg, null);}/*** 返回警告消息** param msg 返回内容* param data 数据对象* return 警告消息*/public static DaoCaoResult warn(String msg, Object data) {return new DaoCaoResult(HttpStatus.WARN, msg, data);}/*** 返回错误消息** return 错误消息*/public static DaoCaoResult error() {return DaoCaoResult.error(操作失败);}/*** 返回错误消息** param msg 返回内容* return 错误消息*/public static DaoCaoResult error(String msg) {return DaoCaoResult.error(msg, null);}/*** 返回错误消息** param msg 返回内容* param data 数据对象* return 错误消息*/public static DaoCaoResult error(String msg, Object data) {return new DaoCaoResult(HttpStatus.ERROR, msg, data);}/*** 返回错误消息** param code 状态码* param msg 返回内容* return 错误消息*/public static DaoCaoResult error(int code, String msg) {return new DaoCaoResult(code, msg, null);}/*** 是否为成功消息** return 结果*/public boolean isSuccess() {return Objects.equals(HttpStatus.SUCCESS, this.get(CODE_TAG));}/*** 是否为警告消息** return 结果*/public boolean isWarn() {return Objects.equals(HttpStatus.WARN, this.get(CODE_TAG));}/*** 是否为错误消息** return 结果*/public boolean isError() {return Objects.equals(HttpStatus.ERROR, this.get(CODE_TAG));}/*** 方便链式调用** param key 键* param value 值* return 数据对象*/Overridepublic DaoCaoResult put(String key, Object value) {super.put(key, value);return this;}
}定义业务异常
/*** author 石添* date 2023/11/14 16:24*/
public class ServiceException extends RuntimeException {private static final long serialVersionUID 1L;/*** 错误码*/private Integer code;/*** 错误提示*/private String message;/*** 错误明细内部调试错误*/private String detailMessage;/*** 空构造方法避免反序列化问题*/public ServiceException() {}public ServiceException(String message) {this.message message;}public ServiceException(Integer code,String message) {this.message message;this.code code;}public String getDetailMessage() {return detailMessage;}public String getMessage() {return message;}public Integer getCode() {return code;}public ServiceException setMessage(String message) {this.message message;return this;}
}创建dev分支
先拉取仓库的最新代码再做开发提交
如果在拉取代码之前操作了仓库中已有的文件将该文件复制出来删除掉再拉取最新仓库代码再修改提交避免版本冲突问题
MybatisPlus配置
分页插件自动填充功能
在daocao_support模块中做核心组件的配置
模块间的关联关系
parent模块父工程作用是定义依赖和版本并不是实现任何功能
|-----common模块定义一些最基础通用的工具类或者公用的类比如lombokhutool
|-----support模块核心配置模块做一些项目中引入的第三方组件的配置比如MyBatisPlus、SpringSecurity、Redis、支付support依赖common模块
|-----业务模块主要实现系统功能auth认证模块用户模块菜单模块系统模块代码生成模块支付模块数据分析模块这些模块依赖support模块
|-----入口模块依赖其他的业务模块提供一个项目入口即可
common是最基础的模块--------》被support模块引用------》support被其他的业务模块引用-------》auth/sysuser/引用----------》被starter模块引用
