怎样完成javascript之ssm vue前后端分离架构
时间:2021-03-30

这篇文章内容给大伙儿共享的是相关怎样完成Javascript之ssm vue前后端分离架构,我感觉挺好用的,因而共享给大伙儿学习培训,期待大伙儿阅读文章完本文后能够 有一定的获得,话不多说,跟随我一起来瞧瞧吧。

序言

文中对于Spring SpringMVC Mybatis后台管理开发架构(根据maven搭建)与vue前端框架(根据webpack搭建)的新项目融合开展详细介绍,针对ssm和vue独立新项目的构建不当作文中的关键,而主要详细介绍彼此之间互动的关键点。


SSM

新项目构造

怎样完成Javascript之ssm vue前后端分离架构

表明
新项目有service和web2个子项构成,web取决于service,在其中web主要是control层內容,service则相匹配service层,而MyBatis內容放到了service新项目中,spring环境变量放到了web项目中。将control层和service层分离出来成2个子项,有益于新项目的维护保养。

Vue

怎样完成Javascript之ssm vue前后端分离架构

2.能够 看得出,这个是规范的应用webpack构建的vue项目

前后左右端互动(关键)

关键来啦,前后左右端互动只不过是前面可以浏览后端开发插口,而且取得成功接受到后端开发回到数据信息。在配备全过程中,必须留意两个点,一是配备后端开发插口详细地址,二是跨域问题。

配备后端开发插口详细地址

在vue中,应用的是axios推送ajax要求和后台管理互动,大家必须main.js中配备axios默认设置浏览详细地址。

在src/main.js文件中提升

大家配备为全部axios的默认设置要求详细地址,在其中后台管理服务器端口为8080,而vue项目默认设置的服务器端口也为8080,全部必须改动vue项目中的默认设置浏览服务器端口,改成8090(不与后台管理端口号矛盾就可以)。

在config/index.js改动

怎样完成Javascript之ssm vue前后端分离架构

测试程序:

配备好以后,运作新项目发觉前面依然是无法打开后台管理插口,发生下列出错。能够 看得出是发生跨域问题了。

怎样完成Javascript之ssm vue前后端分离架构

处理跨域问题

针对跨域问题,SpringMVC出示了注释@CrossOrigin解决该难题(想要知道@CrossOrigin干了哪些,请移景Spring @CrossOrigin 注释基本原理),只必须在相匹配的插口中提升@CrossOrigin就可以(也可根据全局性配备的方法设定,这儿不做详细介绍)。

MainController.java:

重新启动新项目,回到恰当結果。

怎样完成Javascript之ssm vue前后端分离架构

源代码

后台管理编码:SSMDemo
前端代码:VueDemo

之上便是怎样完成Javascript之ssm vue前后端分离架构,我坚信有一部分知识要点可能是大家日常总结会看到或采用的。期待你可以根据本文学得大量专业知识。大量详细信息敬请期待程序猿领域文化频道。