分页的操作
page(currentpage){ //得到的参数是我们的页码 const _this=this; axios.request("http://localhost:8181/findAll/"+currentpage+"/6").then(function(response) { console.log(response) // 传送数据- 页面信息 _this.tableData=response.data.content // 传递总页数- _this.totalPage=response.data.totalElements }).catch({ }).finally({ }) }
加载数据的操作
mounted() { const _this=this; axios.request("http://localhost:8181/findAll/1/6").then(function(response) { console.log(response) // 传送数据- 页面信息 _this.tableData=response.data.content // 传递总页数- _this.totalPage=response.data.totalElements }).catch({ }).finally({ }) },
(2).后端配置SpringBoot的数据
控制层: BookHandler.java
package com.jsxs.controller; import com.jsxs.pojo.Book; import com.jsxs.repository.BookRepository; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Pageable; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; /** * @Author Jsxs * @Date 2023/5/14 15:23 * @PackageName:com.jsxs.controller * @ClassName: BookHandler * @Description: TODO * @Version 1.0 */ @RestController public class BookHandler { @Resource private BookRepository bookRepository; @GetMapping("/findAll/{page}/{size}") public Page<Book> findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){ // 页数是从0开始的所以-1 Pageable pageable= PageRequest.of((page-1),size); // 第一个参数是 : 页数、 第二个数是: 一页几张 return bookRepository.findAll(pageable); } }
2.配置跨域的问题
package com.jsxs.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; /** * @Author Jsxs * @Date 2023/5/14 18:51 * @PackageName:com.jsxs.config * @ClassName: CrosConfig * @Description: TODO * @Version 1.0 */ @Configuration public class CrosConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS") .allowCredentials(false) .maxAge(3600) .allowedHeaders("*"); } }
3.ElementUI-表单数据分析
(1).表单数据校验
定义一个rules对象，在rules对象中设置表单各个选项的校验规则。
- 先绑定表单 (:roules)。
- 指定文本框绑定规则: prop=“规则名字”
- 在data区域设置规则及名字。
- 表单提交的时候验证规则。(先传递数据作为形参ref=“ruleForm”，然后在js中进行验证)
1. 绑定表单样式: :rules="rules" -》绑定规则。 2. prop="BookName"-》绑定文本框。 3. ref="ruleForm"-》传递参数给submit作为形参。 <!-- :model 用于绑定我们的数据 :rules用于绑定规则--> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="图书名称" prop="BookName"> <el-input v-model="ruleForm.BookName"></el-input> </el-form-item> <el-form-item label="图书作者" prop="BookAuthor"> <el-input v-model="ruleForm.BookAuthor"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" >立即创建</el-button > <el-button @click="resetForm('ruleForm')">重置</el-button> <el-button @click="test">测试</el-button> </el-form-item> </el-form> 4. 在data区域配置规则: rules: { BookName: [ // 是否强制? 提示信息? 触发条件? { required: true, message: "请输入图书名称", trigger: "blur" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }, ], BookAuthor: [ { required: true, message: "请输入图书作者", trigger: "blur" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }, ], }, 5.表单提交的时候验证规则。 submitForm(formName) { //获取到传递过来的规则名 this.$refs[formName].validate((valid) => { //判断表单全部校验是否为true if (valid) { // 假如表单数据验证成功。 alert("submit!"); } else { // 假如表单数据验证失败。 console.log("error submit!!"); return false; } }); },
当我们点击立即创建的时候就会触发 submint方法。这里是通过ref里面的名字
(2).表单数据的填充
我们给表单中的文本框进行绑定值，需要以下两个步骤
- 绑定表单 :model。
- v-model: 绑定属性值即(name)。
- 在data区域设置值。
1.绑定表单 :model="ruleForm" <!-- :model 用于绑定我们的数据 :rules用于绑定规则--> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="图书名称" prop="BookName"> <el-input v-model="ruleForm.BookName"></el-input> </el-form-item> <el-form-item label="图书作者" prop="BookAuthor"> <el-input v-model="ruleForm.BookAuthor"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" >立即创建</el-button > <el-button @click="resetForm('ruleForm')">重置</el-button> <el-button @click="test">测试</el-button> </el-form-item> </el-form> 2.数据 data() { return { // 1. 表单的数据 ruleForm: { BookName: "", BookAuthor: "", }, // 2. 校验的规则 rules: { BookName: [ // 是否强制? 提示信息? 触发条件? { required: true, message: "请输入图书名称", trigger: "blur" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }, ], BookAuthor: [ { required: true, message: "请输入图书作者", trigger: "blur" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }, ], }, }; },
(3).表单提交后数据到哪里?
1.因为按钮具有提交表单的功能，所以我们又新增了一个测试的按钮。这个按钮绑定一个方法，用于输出表单提交后数据的变化...
test() { // 我们通过测试发现我们的文本会出现在这里... console.log(this.ruleForm); },
<template> <div> <!-- :model 用于绑定我们的数据 :rules用于绑定规则--> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="图书名称" prop="BookName"> <el-input v-model="ruleForm.BookName"></el-input> </el-form-item> <el-form-item label="图书作者" prop="BookAuthor"> <el-input v-model="ruleForm.BookAuthor"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" >立即创建</el-button > <el-button @click="resetForm('ruleForm')">重置</el-button> <el-button @click="test">测试</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { // 1. 表单的数据 ruleForm: { BookName: "", BookAuthor: "", }, // 2. 校验的规则 rules: { BookName: [ // 是否强制? 提示信息? 触发条件? { required: true, message: "请输入图书名称", trigger: "blur" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }, ], BookAuthor: [ { required: true, message: "请输入图书作者", trigger: "blur" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }, ], }, }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert("submit!"); } else { console.log("error submit!!"); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, test() { // 我们通过测试发现我们的文本会出现在这里... console.log(this.ruleForm); }, }, }; </script>
我们发现数据提交后，就会进入表单绑定的data区域的对象
(4).全部置空的操作
这里依然是通过ref里面的这个名字进行传递的...
1. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="图书名称" prop="BookName"> <el-input v-model="ruleForm.BookName"></el-input> </el-form-item> <el-form-item label="图书作者" prop="BookAuthor"> <el-input v-model="ruleForm.BookAuthor"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" >立即创建</el-button > <el-button @click="resetForm('ruleForm')">重置</el-button> <el-button @click="test">测试</el-button> </el-form-item> </el-form> 2.置空的方法和数据.. resetForm(formName) { this.$refs[formName].resetFields(); },
