一周Spring Boot + VUE入门（6）-- VUE 前端代码分析

 这个是前端的页面的总体的概貌，包括了查询条件，数据列表，数据如输入（修改）和各种操作按钮，下面我们分析这个页面的实现方式。

数据处理页面

RuoYi系统生成的代码中，前端代码vue中是分为两个文件夹，分别是api和views。然后我们分别将这两部分代码复制到ruoyi-ui的src目录中。

其中，api目录是同后端的数据交互。我们进入api的student目录，右键用sublime Text打开生成的student.js。

最前面是引用的utils目录中封装好的request方法，感兴趣的可以过去打开看一下，request方法中封装了request的认证、get，post，put，delete方法，以及参数接收和数据返回等。我们有机会在后续的“一周进阶”系列中再做介绍。

我们看一下查询学生信息列表，这个函数叫listStudent，有个参数是query。页面部分在查询条件部分，有三个条件字段，分别是姓名，出生年月和专业，如果用户在条件部分填写了条件的信息，点击查询，会调用这个函数listStudent，并通过query参数把输入的条件传递过来。

然后这里就调用request，参数分别设置为

url: '/student/student/list', 就是提交到后台的路径。

我们打开后端的代码的controlller的student目录，看一下后端对外的接口部分

 可以看到，后端的@requestMapping将整个类映射的接收/student/student/这个目录，然后下面的查询学生信息列表用@GetMapping映射了一个get方法，映射到这个/student/student/这个目录下的/list目录，所以后台接受前端的学生信息管理部分的学生信息查询的数据，是在

“/student/student/”总目录下的“/list”目录，凑到一起就是刚才全段api数据处理目录下的url参数对应的

url: '/student/student/list',

方法就是get，参数是query，后端这里接收query这个参数，到Student这个类的实例student中（首字母大小写不同以区分类和实例）。然后后端经过service处理，到数据库读取符合条件的数据，获得list，然后通过getDataTable(list)返回到前端

在前端，我们在页面中调用listStudent这个函数，就得到了后端返回的数据了。这个在下面的页面部分再讲。

其他的添加，删除和修改同查询类似，大家可以对比分析一下。

页面部分代码分析

我们打开view目录下的student目录，可以看到目录中还有一个sudent，里面是页面文件index.vue。右键，用Sublime text打开。

我们前面介绍过，vue页面分为两个部分，页面显示部分和数据处理部分（应该还有个样式部分，统一放到src/assets/styles/ruoyi.scss文件中了，如果是单独这个页面使用的样式，可以在本页面的css部分定义，如果是很多页面都需要的，需要预加载的，可以到这个页面中添加）

页面显示部分 

我们先看页面显示部分。

是否你看到很陌生，跟以前的html标识不一样了。因为系统采用了element ui组件来代替html。

Element - The world's most popular Vue UI framework

Element Ui是一个非常优秀的组件，将传统的HTML进行了封装，在美观、功能等方面都有了极大的提升，由饿了吗团队提供开源，可惜这个系统貌似是停止了维护。由阿里融入到另外一个开源的组件Ant Design - 一套企业级 UI 设计语言和 React 组件库。RuoYi也有Ant Design的分支。

我们首先按第一部分

 采用了element的form，是一个表单，里面是我们的条件输入的文本框，日期组件和下拉框组件，最后是俺就搜索和重置，对应页面的显示部分是这样的。

 具体的表单中的元素，可以参考element 手册Element - The world's most popular Vue UI framework

 

第二部分是功能条，分别放置了【新增】、【修改】、【删除】和【导出】四个功能，选中记录后，可以对选中的记录执行这个操作。

 然后，后面还有一个打开或者关闭查询部分的按键和刷新页面数据的按键。

对应到页面显示部分，就是

 第三部分是表格，数据绑定studentList，就是查询条件传输到后端后，后端查询出符合条件的记录，反馈给前端，前端放到StudentList对象中，然后绑定到表格控件，通过表格控件显示。在表格空间的最后，针对这一行数据，有个操作栏目，分别对应修改和删除。

 对应表格的显示效果是这样的。

 第四部分是弹出的窗体部分，输入新增或者修改的时候，会弹出窗体作为输入或者修改的界面。

 对应显示的页面效果是这样的

 分别用到了文本框、下拉框、日期控件、多选、富文本编辑器等element-ui的组件，具体可以查看element-ui的说明Element - The world's most popular Vue UI framework

数据处理部分

数据处理部分分别以开头和结束，编程语言是javascript

首先是从api目录中引入数据处理方法，我们看到从我们刚才讲到的/api/student/student目录下引入默认的index.js，里面是文件中的方法，我们看到有我们刚才讲到的listStudent显示数据的方法。

下面data部分是初始化的数据，定义了显示部分用到的变量。

 下面是created（）部分，就是页面加载完成后，调用getList()方法，就是到后端取数据。

下面是methods部分，所有的方法集中在这里，有读取数据的方法getList(),修改，提交等对应操作按钮对应的方法，可以查看注释理解。

 由于我们是入门的讲座，具体的方法就不进行分析，后续的进级讲座再进一步分析具体的实现。