SpringBoot是一款开箱即用框架，提供各种默认配置来简化项目配置。让我们的Spring应用变的更轻量化、更快的入门。在主程序执行main函数就可以运行。你也可以打包你的应用为jar并通过使用java-jar来运行你的Web应用。它遵循"约定优先于配置"的原则，使用SpringBoot只需很少的配置，大部分的时候直接使用默认的配置即可。同时可以与SpringCloud的微服务无缝结合。
优点：
(1)下载代码后，使用IntelliJIDEA打开server目录
(2)配置application.yml文件，配置数据库DB_NAME和BASE_LOCATION
(3)安装mysql5.7数据库后，创建数据库，创建SQL如下：
CREATEDATABASEIFNOTEXISTSjava_bookDEFAULTCHARSETutf8COLLATEutf8_general_ci(4)恢复sql数据。在mysql下依次执行如下命令：
mysql>usejava_book;mysql>sourceD:/xxx/xxx/java_book.sql;(5)启动后端服务：点击IDEA顶部run按钮
(1)安装node16
(2)cmd进入web目录下，安装依赖，执行:
npminstall(3)运行项目
实体设计如下：
关系如下：
数据表设计如下：
下面用图书管理功能来演绎这个流程，其它的管理功能都是这个流程。
第一步：编写实体类
在server的entity文件夹中，新建Thing.java文件。并写入如下代码：
@Data@TableName("b_thing")publicclassThingimplementsSerializable{@TableId(value="id",type=IdType.AUTO)publicLongid;@TableFieldpublicStringtitle;@TableFieldpublicStringcover;@TableFieldpublicStringdescription;@TableFieldpublicStringstatus;@TableFieldpublicStringcreateTime;@TableFieldpublicStringmobile;@TableFieldpublicStringemail;@TableFieldpublicStringlocation;@TableFieldpublicStringpv;@TableFieldpublicStringrecommendCount;@TableFieldpublicStringwishCount;@TableFieldpublicStringcollectCount;@TableFieldpublicLongclassificationId;@TableField(exist=false)publicList
在server的mapper文件夹下，新建ThingMapper.java文件，并写入代码：
//Mapper是mybatis里面的技术，用于操作mysql中的数据@MapperpublicinterfaceThingMapperextendsBaseMapper
在server的service文件夹中，新建ThingService.java代码，并写入代码：
publicinterfaceThingService{List
第四步：编写controller层
在server的controller文件夹新建ThingController.java文件，实现增删改查接口，并编写代码：
打开前端web工程，在views文件夹下新建thing.vue文件，并编写代码：
基于ant-design框架的a-table的分页插件。
constservice:AxiosInstance=axios.create({//baseURL:import.meta.env.BASE_URL+'',baseURL:BASE_URL+'',timeout:15000,});//axios实例拦截请求service.interceptors.request.use((config:InternalAxiosRequestConfig)=>{config.headers.ADMINTOKEN=localStorage.getItem(ADMIN_USER_TOKEN);config.headers.TOKEN=localStorage.getItem(USER_TOKEN);returnconfig;},(error:AxiosError)=>{returnPromise.reject(error);},);//axios实例拦截响应service.interceptors.response.use((response:AxiosResponse)=>{if(response.status==200){if(response.data.code==0||response.data.code==200){returnresponse;}else{returnPromise.reject(response.data);}}else{returnPromise.reject(response.data);}},//请求失败(error:any)=>{console.log(error.response.status);if(error.response.status==404){//todo}elseif(error.response.status==403){//todo}returnPromise.reject(error);},);权限控制模块权限控制使用了Access和AccessLevel注解实现的，通过设置访问常量实现访问权限的控制，
@Access(level=AccessLevel.ADMIN)@RequestMapping(value="/update",method=RequestMethod.POST)@TransactionalpublicAPIResponseupdate(Thingthing)throwsIOException{System.out.println(thing);Stringurl=saveThing(thing);if(!StringUtils.isEmpty(url)){thing.cover=url;}service.updateThing(thing);returnnewAPIResponse(ResponeCode.SUCCESS,"更新成功");}底层原理实现是通过实现HandlerInterceptorAdapter接口来运行的。参见interceptor文件夹下的AccessInterceptor.java
@ComponentpublicclassAccessInterceptorextendsHandlerInterceptorAdapter{privateLoggerlogger=LoggerFactory.getLogger(AccessInterceptor.class);privatestaticOpLogServiceservice;privatestaticUserServiceuserService;@AutowiredpublicvoidsetOpLogService(OpLogServiceservice){//为解决先@Component后@Autowired失效的方案AccessInterceptor.service=service;}@AutowiredpublicvoidsetUserService(UserServiceuserService){//为解决先@Component后@Autowired失效的方案AccessInterceptor.userService=userService;}@OverridepublicbooleanpreHandle(HttpServletRequestrequest,HttpServletResponseresponse,Objecthandler)throwsException{//权限判断}路由模块实现前端的路由是基于vue-router框架实现的，路由文件位于src的rooter的root.js文件中。预览如下：
使用国内镜像安装，设置命令为：
修改store文件夹下的constants.js文件中的BASE_URL，改成你自己的后端地址
在views文件夹下创建新的vue文件，写入界面代码，然后在router的root.js中添加路由即可。