基于SpringBoot的项目以及功能实现

　　1。项目介绍
　　这是一个简单的项目练习，用于掌握新学习的SpringBoot技术。项目操作界面
　　技术栈
　　Vue3ElementPlusAxiosMyBatisPlusSpringBoot前后端分离
　　前后端分离开发，前端主体框架Vue3后端基础框架SpringBoot前端技术栈：Vue3AxiosElementPlus后端技术栈：SpringBootMyBatisPlus数据库MySQL项目的依赖管理Maven分页MyBatisPlus的分页插件2。功能01搭建Vue前端工程2。1代码实现
　　以下过程，前面在讲解SSMVUE项目时已经安装过了，包括整个vue项目的创建过程、项目结构，具体看SSM整合day02的功能01实现的笔记先下载node。jsLTS并安装node。js的npm，用于管理前端项目包依赖创建Vue项目（需要联网）1）创建项目，指令vuecreate项目名2）选择Manuallyselectfeatures3）用空格键选择Bebel、Router、Vuex4）选择3。x5）Usehistorymodeforrouter？输入Y，回车6）WheredoyoupreferplacingconfigforBabel，ESLint，etc。？选择Inpackage。json7）Savethisasapresetforfutureprojects？（yN）是否要保存当前的设置，根据你意思随意选择，如果选择了的话会有Savepresetas：让你命名当前保存的设置8）最后回车9）创建完毕的显示结果如下使用idea打开刚创建的vue项目，并配置项目启动1）点击配置Configuration，配置npm方式启动项目2）选择serve，其他保持默认，保存3）点击运行，即可在提示的地址访问项目停止项目，安装elementplus插件，在项目中运行指令npminstallelementplussave在vue。config。js中修改项目的端口，防止端口占用module。exports｛devServer：｛port：10000启动端口｝｝3。功能02创建项目基础界面
　　这个功能步骤在ssm整合框架day01功能02中也有详细描述，这里不再赘述3。1需求分析
　　页面原型：
　　3。2思路分析
　　使用vue3ElementPlus完成3。3代码实现
　　（1）修改Home。vue，引入表单、搜索框、按钮组件templateelbuttontypeprimary新增elbuttonelbutton其它elbutton！搜索elinputvmodelsearchplaceholder请输入关键字stylewidth：30elinputelbuttonstylemarginleft：10pxtypeprimary查询elbuttoneltable：datatableDatastripestylewidth：100eltablecolumnsortablepropdatelabel日期eltablecolumneltablecolumnpropnamelabel姓名eltablecolumneltablecolumnpropaddresslabel地址eltablecolumneltablecolumnfixedrightlabel操作width100templatedefaultscopeelbuttonclickhandleEdit（scope。row）typetext编辑elbuttonelbuttontypetext删除elbuttontemplateeltablecolumneltabletemplate
　　（2）删除HelloWorld。vue组件
　　（3）创建componentsHeader。vue
　　（4）创建全局的global。css（srcassetscssglobal。css），以后有全局样式可以放在这里｛margin：0；padding：0；boxsizing：｝
　　（5）修改srcmain。js，引入global。css，同时引入ElementPlus，顺便国际化import｛createApp｝fromvueimportAppfrom。App。vueimportrouterfrom。routerimportstorefrom。store引入cssimportassetscssglobal。css引入ElementPlusimportElementPlusfromelementplusimportelementplusdistindex。css国际化importzhCnfromelementpluseslocalelangzhcncreateApp（App）。use（store）。use（router）。use（ElementPlus，｛locale：zhCn｝）。mount（app）
　　（6）Header。vue，引入ElementPlus组件的下拉框template后台管理eldropdownspanclasseldropdownlinkstylepadding：18pxtomiclasseliconarrowdowneliconrightispantemplatedropdowneldropdownmenueldropdownitem个人信息eldropdownitemeldropdownitem退出登录eldropdownitemeldropdownmenutemplateeldropdowntemplatestylescopedstyle
　　（7）创建侧边栏组件Aside。vue，引入导航菜单组件template！说明先去掉这两个方法，否则会报错！openhandleOpen！closehandleCloseelmenustylewidth：200pxdefaultactive2classelmenuverticaldemoelsubmenuindex14templatetitle选项4templateelmenuitemindex141选项1elmenuitemelsubmenuelmenuitemindex2iclasseliconmenuitemplatetitle导航二templateelmenuitemelmenuitemindex3disablediclasselicondocumentitemplatetitle导航三templateelmenuitemelmenuitemindex4iclasseliconsettingitemplatetitle导航四templateelmenuitemelmenutemplatestylescopedstyle
　　（8）在App。vue将页面分成三部分template！头部Header！主体！侧边栏！内容区域，表格，这个部分是从HomeView。vue组件来的routerviewstyleflex：1templatestylestyle
　　（9）项目的基本页面如下：
　　4。功能03创建SpringBoot后端项目4。1需求分析
　　项目前后端分离情况如下：分成两个子项目（前端和后端），现在来完成后端的子项目创建。4。2代码实现
　　（1）创建maven项目，引入需要的依赖！导入SpringBoot父工程parentspringbootstarterparentartifactIdgroupIdorg。springframework。bootgroupIdversion2。5。3versionparentdependencies！webstarterdependencygroupIdorg。springframework。bootgroupIdspringbootstarterwebartifactIdversion2。5。3versiondependency！mysql驱动dependencygroupIdmysqlgroupIdmysqlconnectorjavaartifactIdversion8。0。26versiondependency！配置处理器dependencygroupIdorg。springframework。bootgroupIdspringbootconfigurationprocessorartifactIddependency！lombokdependencygroupIdorg。projectlombokgroupIdlombokartifactIddependency！teststarterdependencygroupIdorg。springframework。bootgroupIdspringbootstartertestartifactIddependency！druid依赖dependencygroupIdcom。alibabagroupIddruidartifactIdversion1。1。17versiondependency！mybatisplusstarterdependencygroupIdcom。baomidougroupIdmybatisplusbootstarterartifactIdversion3。4。3versiondependencydependencies
　　（2）application。yml中配置port和配置DB连接信息server：port：9090spring：datasource：driverclassname：com。mysql。cj。jdbc。Driverurl：jdbc：mysql：localhost：3306springbootfurn？useSSLtrueuseUnicodetruecharacterEncodingUTF8username：rootpassword：123456
　　（3）主程序SpringBootApplicationpublicclassApplication｛publicstaticvoidmain（String〔〕args）｛SpringApplication。run（Application。class，args）；｝｝
　　测试启动，运行成功：
　　（4）配置数据源packagecom。li。furn。importcom。alibaba。druid。pool。DruidDataSimportorg。springframework。boot。context。properties。ConfigurationPimportorg。springframework。context。annotation。Bimportorg。springframework。context。annotation。Cimportjavax。sql。DataSauthor李version1。0ConfigurationpublicclassDruidInitConfig｛ConfigurationProperties（spring。datasource）BeanpublicDataSourcegetDataSource（）｛DruidDataSourcedruidDataSourcenewDruidDataSource（）；returndruidDataS｝｝5。功能04添加家居信息5。1需求分析
　　在前端点击添加家居，弹出一个对话框，可以让我们填写家居的数据，填完之后点击确定，可以将数据发送到后端，然后保存到数据库表中。5。2思路分析完成后台代码从mapperservicecontroller，并第每层代码进行测试，到controller这一层，使用postman发送http请求完成测试。完成前台代码，使用axios发送json数据给后台，实现添加家居信息5。3代码实现5。3。1创建数据库和表创建数据库DROPDATABASEIFEXISTSCREATEDATABASEUSE创建表CREATETABLEfurn（idINT（11）PRIMARYKEYAUTOINCREMENT，idnameVARCHAR（64）NOTNULL，家居名makerVARCHAR（64）NOTNULL，厂商priceDECIMAL（11，2）NOTNULL，价格salesINT（11）NOTNULL，销量stockINT（11）NOTNULL库存）CHARSETutf8；
　　5。3。2工具类
　　（2）创建comlifurnutilResult。java，该工具类用于返回结果（json格式）packagecom。li。furn。author李version1。0publicclassResultT｛privateS状态码200success400failprivateS状态说明privateT返回的数据，使用泛型publicResult（）｛｝publicResult（Tdata）｛this。｝返回需要的result对象，表示成功publicstaticResultsuccess（）｛ResultresultnewResult（）；result。setCode（200）；result。setMsg（success）；｝返回成功的result对象，表示成功，同时携带数据如果需要在static方法中使用泛型，需要在static关键字后添加TpublicstaticTResultTsuccess（Tdata）｛ResultTresultnewResult（data）；result。setCode（200）；result。setMsg（success）；｝返回需要的result对象表示失败因为失败的原因有很多中，因此直接将其作为参数传进来publicstaticResulterror（Stringcode，Stringmsg）｛ResultresultnewResult（）；result。setCode（code）；result。setMsg（msg）；｝返回成功的result对象，表示失败，同时携带数据publicstaticTResultTerror（Stringcode，Stringmsg，Tdata）｛ResultTresultnewResult（data）；result。setCode（code）；result。setMsg（msg）；｝publicStringgetCode（）｛｝publicvoidsetCode（Stringcode）｛this。｝publicStringgetMsg（）｛｝publicvoidsetMsg（Stringmsg）｛this。｝publicTgetData（）｛｝publicvoidsetData（Tdata）｛this。｝｝5。3。3bean层
　　创建furn表映射的beanFurn。javapackagecom。li。furn。importlombok。AllArgsCimportlombok。Dimportlombok。NoArgsCauthor李version1。0DataNoArgsConstructorAllArgsConstructorpublicclassFurn｛privateIprivateSprivateSprivateIprivateI｝5。3。4mapper层
　　创建funMapper。java接口packagecom。li。furn。importcom。baomidou。mybatisplus。core。mapper。BaseMimportcom。li。furn。bean。Fimportorg。apache。ibatis。annotations。Mauthor李version1。0如果是MyBatisPlus，FurnMapper接口可以通过mp提供的BaseMapper接口来扩展功能Mapper这里如果没有添加mapper注解，可以在主程序中指定扫描publicinterfaceFurnMapperextendsBaseMapperFurn｛｝
　　如果使用MapperScan（basePackagesxxx），需要指定到确切的包
　　测试FurnMapper接口packagecom。li。importcom。li。furn。bean。Fimportcom。li。furn。mapper。FurnMimportorg。junit。jupiter。api。Timportorg。springframework。boot。test。context。SpringBootTimportjavax。annotation。Rauthor李version1。0注意，测试时，如果测试的类和对应源码中的类的包名不同，需要手动指定SpringBootTestpublicclassFurnMapperTest｛装配FurnMapper对象（实际上是该接口的代理对象）ResourceprivateFurnMapperfurnMTestpublicvoidfurnMapperTest（）｛FurnfurnfurnMapper。selectById（1）；System。out。println（furnfurn）；｝｝
　　测试结果：
　　5。3。5service层
　　FurnService接口：packagecom。li。furn。importcom。baomidou。mybatisplus。extension。service。ISimportcom。li。furn。bean。Fauthor李version1。0publicinterfaceFurnServiceextendsIServiceFurn｛｝
　　FurnServiceImpl实现类：packagecom。li。furn。service。importcom。baomidou。mybatisplus。extension。service。impl。ServiceIimportcom。li。furn。bean。Fimportcom。li。furn。mapper。FurnMimportcom。li。furn。service。FurnSimportorg。springframework。stereotype。Sauthor李version1。0ServicepublicclassFurnServiceImplextendsServiceImplFurnMapper，FurnimplementsFurnService｛｝
　　service层测试：测试成功packagecom。li。。。。SpringBootTestpublicclassApplicationTest｛ResourceprivateFurnServicefurnSTestpublicvoidfurnServiceTest（）｛ListFurnfurnsfurnService。list（）；for（Furnfurn：furns）｛System。out。println（furnfurn）；｝｝｝
　　5。3。6controller层
　　注意：如果是以表单形式提交数据，则不需要在参数前添加RequestBody注解；如果使用了RequestBody注解，要注意测试时，向后端发送的数据是json格式（ContentType）。packagecom。li。furn。importcom。li。furn。bean。Fimportcom。li。furn。service。FurnSimportcom。li。furn。util。Rimportlombok。extern。slf4j。Slf4j；importorg。springframework。web。bind。annotation。PostMimportorg。springframework。web。bind。annotation。RequestBimportorg。springframework。web。bind。annotation。RestCimportjavax。annotation。Rauthor李version1。0因为当前项目为前后端分离，在默认情况下，前端发出请求后端返回json数据，为了方便，我们就在类上使用RestControllerRestControllerResponseBodyControllerSlf4jpublicclassFurnController｛ResourceprivateFurnServicefurnS完成添加添加家居信息的功能1。因为前端发送的数据通常也是使用json格式的，因此使用RequestBody将前端提交的json数据，封装成Javabean对象2。如果前端是以表单形式提交的，则不能使用RequestBodyparamfurnreturnPostMapping（save）publicResultsave（RequestBodyFurnfurn）｛log。info（furn｛｝，furn）；furnService。save（furn）；returnResult。success（）；返回成功数据｝｝
　　postman进行测试：（注意Headers中的ContentType属性要指定为applicationjson，否则会出错）
　　测试结果：
　　数据库显示插入成功：
　　5。3。7解决id自增长问题
　　furn表的id字段被设计为自增长，但是当实际插入数据时，如果没有给定id的值，底层执行的时候将会报错：org。mybatis。spring。MyBatisSystemException：nestedexceptionisorg。apache。ibatis。reflection。ReflectionException：Couldnotsetpropertyidofclasscom。li。furn。bean。Furnwithvalue1640682391397732353Cause：java。lang。IllegalArgumentException：argumenttypemismatch
　　这是因为底层没有获取到自增长字段的值。我们可以使用TableId来解决，该注解可以标识表的主键，并且如果指定的是自增主键，会将自增主键值返回到实体类中。
　　Mybatis中需要使用useGeneratedKeys，keyProperty，keyColumn设置自增主键值的回返，在实体类对象中获取即可。在MybatisPlus中在进行数据新增时，在新增成功后，会自动的将自增的主键值返回到实体类对象中，前提是需要在实体类中使用TableId表明主键字段，并且为自增类型。
　　5。3。8前端代码
　　（1）在前端项目中安装axios，用于发送ajax请求给后台：npmiaxiosS
　　（2）创建工具文件srcutilsrequest。js，用于创建axiosrequest对象引入axios如果在启动前端项目，提示找不到axios，把光标放在importaxiosfromaxios的axios上会有一个修复提示，导入axios，点击导入即可正常使用通过axios创建对象request对象，用于发送请求到后端constrequestaxios。create（｛timeout：5000｝）对request拦截器的处理1。可以对请求做统一的处理2。比如统一地加入token，ContentType等request。interceptors。request。use（config｛config。headers〔ContentType〕charsetuft8；｝，error｛returnPromise。reject（error）｝）导出request对象
　　（3）在Home。vue中添加表单，添加添加按钮，可以出现添加家居的对话框：代码略
　　（4）解决跨域问题
　　浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。在请求的过程中我们要想回去数据一般都postget请求，所以跨域问题出现。
　　解决跨域问题的方案很多，这里在vue。config。js文件中修改跨域配置来解决：
　　const｛defineConfig｝require（vuecliservice）module。exportsdefineConfig（｛transpileDependencies：true｝）module。exports｛devServer：｛port：10000，启动端口proxy：｛设置代理api：｛设置拦截器拦截器格式（斜杠拦截器名字）target：http：localhost：9090，目标地址（后端地址）changeOrigin：true，是否设置同源，实现跨域pathRewrite：｛路径重写api：选择忽略拦截器里面的单词｝｝｝｝｝
　　注意，设置之后需要重新启动前端项目。
　　注意两点问题：一定要确定request。post（apisave）替换后是项目后台服务对应提供的API接口url，否则报404错误当执行跨域请求时，如果浏览器仍然提示http：localhost：9090apixxx