首先,先来讲讲最重要的前端和后端整体的实现的一个思路。
前端要实现功能的图形化,也是必然要实现的,不然后端的功能就不能被我们所看到。
通过前端页面的调转,接而去调动后段的接口。对接接口的实现是项目中十分重要的部分。也就是在后端中,我们需要用
@RequestMapping(“/接口”)
来在controller层中的类和里面的方法,
上面加上这一个部分,以方便前端调用,前端好几种的调用方式,我列举其中的一种,前端的页面属性中 methods中
this.$http.post("test")
这里面的这个$http 的挂载方式是axios,axios可以实现前后端页面的一个交互,可以在vue-cli中来下载这个插件,使用方式就是需要
在main.js中导入它 ,并且在下面加上
Vue.prototype.$http=axios
axios.defaults.baseURL="http://localhost:9000"
9000是默认的端口号,用于和后端做一个跨域和交互,另外需要提一下的是,每一个服务器中有几万个端口,每个端口里又有无数个接口,
所以这第一步,实现跨域是非常重要的,端口号要首先完成映射,然后再是第二部,连接接口。8080映射9000端口,接着在Vue页面中,
浏览器翻译html语言,通过上面来调用接口。只要语法方面没什么太大的问题,就可以实现前后端的交互了。 接着就是Vue中的一些问题
,Vue中有component,olugins,router,views,这些部分,其中router中是做每一个接口的调用,比如你在
local host:8080/login
这种类似的,/login这一部分就需要在router中去定义,并且,SpringBoot中的
@RequestMapping(“/接口”)
也是可以用来做这一个部分的功能。
有不对的地方,欢迎评论区修正
|