我这里引用的是element UI框架,在这个里面的数据流动需要一下几个文件夹,也就是需要我们经常改动的地方。

将前端vue获取和传递后端spring boot数据-LMLPHP

下面以此介绍:

1.app.vue:最下面的app.vue是运行vue的主文件,例如在hbuider中直接运行这个文件就可以把前端跑起来

2.api文件夹:通过名字可以猜个差不多,api叫接口。他相当于桥梁,(在参数处)接收前端vue数据,(通过url)找到后端Controller,后端再把查询出的结果返回回来,最后return返回给vue。

文件夹中存放的是js文件,每个js文件都是连接后端(spring boot)的接口,如图1:  url:根据路径去controller里面找,具体后端controller怎么写能让他找到,一会儿会说。 method:就是get post 传递方式,具体区别可以去百度一下,,这里面要不就是get 要不就是post 。params:是传递的参数把vue给自己的参数传递给后端Controller。基本上是一个vue文件对应一个js文件,一个js文件里面有增删改查几种方法。

——>js文件 :将前端vue获取和传递后端spring boot数据-LMLPHP

——>vue文件:将前端vue获取和传递后端spring boot数据-LMLPHP

3.router文件夹:英文翻译叫轨迹,其中有一个index.js文件夹,此文件的作用是路径。把每一个vue文件写在这里,这样程序就知道你写的vue页面时放在哪的。

4.views文件夹:叫视图,这里面放的就是我们总改动的也是显示在界面的页面,起到的作用就像html似的。

将前端vue获取和传递后端spring boot数据-LMLPHP

主页显示:里面跟html似的,由标签组成界面想要显示的样子;css:和传统的css一样;js:和传统的js一样

04-04 23:36