springboot实现前后端调用axios异步哀求（后端单体服务器static部门） ...

写过一篇  金牌会员 | 2024-8-31 23:44:35 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 734|帖子 734|积分 2202

目的：让页面调用controller，将数据加载到页面中（只不过这个前端页面我们直接就是放到了static内里了）。
第一步：导入文件

所必要的文件见本文末了“文件获取”：
（1）文件如下：

（2）全选并复制：

（3）粘贴到项目目录中去

第二步：利用clean举行革新

（1）点击右侧clean


（2）clean成功


假如没有clean成功，提示Error running 'demo4 [clean]' No valid Maven installation found. Either set the home directory in the configuration dialog or set the M2_HOME environment variable on your system，出现这种错误看我的博客：http://t.csdnimg.cn/Dd9ex
（3）第三步：开始运行

（1）输入以下链接并回车
留意：我用的是8080，假如你用的是别的，必要自行改一下。
  1. http://localhost:8080/pages/fuels.html
复制代码
第四步：代码知识详解

（1）<head>标签

界说了所有的头部信息，以及样式表的导入，以及页面的链接标题。
代码位置如下：

代码为：
  1. <head>
  2.     <!-- 页面meta -->
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <title>springboot实现fuel静态页面的展示</title>
  6.     <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  7.     <!-- 引入样式 -->
  8.     <link rel="stylesheet" href="../plugins/elementui/index.css">
  9.     <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
  10.     <link rel="stylesheet" href="../css/style.css">
  11. </head>
复制代码
（2）最左侧的头标签content-header


对应位置为：

代码为：
  1.     <div class="content-header">
  3.         <h1>fuels管理系统</h1>
  5.     </div>
复制代码
（3）标签和按钮

①输入标签


在代码中的位置：

代码为：
  1.           <el-input placeholder="id" style="width: 200px;" class="filter-item"></el-input>
  2.                 <el-input placeholder="fossialEnergyType" style="width: 200px;" class="filter-item"></el-input>
  3.                 <el-input placeholder="CAD：" style="width: 200px;" class="filter-item"></el-input>
  4.                 <el-input placeholder="CD" style="width: 200px;" class="filter-item"></el-input>
  5.                 <el-input placeholder="NaVar" style="width: 200px;" class="filter-item"></el-input>
  6.                 <el-input placeholder="FC：" style="width: 200px;" class="filter-item"></el-input>
  7.                 <el-input placeholder="FCbj" style="width: 200px;" class="filter-item"></el-input>
  8.                 <el-input placeholder="NCVbj：" style="width: 200px;" class="filter-item"></el-input>
复制代码
②按钮

  1. <el-button @click="getAll()" class="dalfBut">查询</el-button>
  2.                 <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
复制代码
（4）分页组件

  1. <!--分页组件-->
  2.             <div class="pagination-container">
  3.                 <el-pagination
  4.                         class="pagiantion"
  5.                         @current-change="handleCurrentChange"
  6.                         :current-page="pagination.currentPage"
  7.                         :page-size="pagination.pageSize"
  8.                         layout="total, prev, pager, next, jumper"
  9.                         :total="pagination.total">
  10.                 </el-pagination>
  12.             </div>
复制代码
（5）导入js组件，包罗vue组件和elementui组件


代码为：
  1. <!-- 引入组件库 -->
  3. <script src="../js/vue.js"></script>
  5. <script src="../plugins/elementui/index.js"></script>
  7. <script type="text/javascript" src="../js/jquery.min.js"></script>
  9. <script src="../js/axios-0.18.0.js"></script>
  11. <script>
复制代码
（6）vue的控制结构


①展示的列表数据list格式
  1. dataList: [],
复制代码
放到网页的页面上举行展示
②控制弹层（增删改必要用的弹出界面）
默认不可见，否则我们一打开网页就是七零八落的表单弹窗，而是等我们在增删改必要的时间再将这个置为true
第一个用于控制新增的，第二个用于控制修改的
  1. dialogFormVisible: false,//添加表单是否可见
  2. dialogFormVisible4Edit:false,//编辑表单是否可见
复制代码
③表单数据（新增修改用的每一条数据的具体信息）
  1. formData: {},//表单数据
复制代码
④分页控制参数
  1. pagination: {//分页相关模型数据
  2.                 currentPage: 1,//当前页码
  3.                 pageSize:10,//每页显示的记录数
  4.                 total:0//总记录数
  5.             }
复制代码
⑤钩子函数（vue初始化完成之后先调用它）
  1. //钩子函数，VUE对象初始化完成后自动执行
  2.         created() {
  3.         },
复制代码
⑥方法操作
  1.         methods: {
  2.             //列表
  3.             getAll() {
  4.             },
  6.             //弹出添加窗口
  7.             handleCreate() {
  8.             },
  10.             //重置表单
  11.             resetForm() {
  12.             },
  14.             //添加
  15.             handleAdd () {
  16.             },
  18.             //取消
  19.             cancel(){
  20.             },
  21.             // 删除
  22.             handleDelete(row) {
  23.             },
  25.             //弹出编辑窗口
  26.             handleUpdate(row) {
  27.             },
  29.             //修改
  30.             handleEdit() {
  31.             },
  33.             //分页查询
  35.             //切换页码
  36.             handleCurrentChange(currentPage) {
  37.             },
  39.             //条件查询
  40.         }
复制代码
第五步：功能实现

（1）展示全部数据

①配置钩子函数调用“展示全部数据”的方法

在created()内里书写this.getAll()方法：

②添加getAll方法内操作

先用postman确定访问的URL路径名（fuels）以及哀求方法(get)。

③然后我们在getAll方法内利用axios联合上面的哀求路径：

  1. getAll() {
  2.                 //使用axios发送异步请求
  3.                 //①路径为fuels
  4.                 //②方法为get
  5.                 //④使用then和res将数据提取
  6.                 //⑤提取的数据部分为R对象中的data
  7.                 //⑥使用console实现网页中控制台对数据的接受打印。
  8.                 axios.get("/fuels").then((res)=>{
  9.                    console.log(res.data);
  10.                 });
  11.             },
复制代码
步调运行：

④将数据在页面上展示出来

根据上面的③我们知道，我们传已往的data，对应网页控制端object（内部还包罗一个打他），因此，要想将获取的数据给传给list集合，我们就必要利用data.data。

因此我们就必要在前面③的内里加上：
  1. this.dataList=res.data.data;
复制代码
效果如下：

（2）增添数据功能

①找到按钮位置

点击之后会跳转到handleCreate位置。

②新建该方法并设置弹层可视化


对应代码为：
  1. this.dialogFormVisible=true;
复制代码
这样的话，点击之后这个增长数据的表单就会主动弹出来。
③设置对应的弹层内容

  1. <!-- 新增标签弹层 -->
  2. <div class="add-form">
  3.     <el-dialog title="新增燃料信息" :visible.sync="dialogFormVisible">
  4.         <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
  5.             <el-row>
  6.                 <el-col :span="12">
  7.                     <el-form-item label="燃料种类" prop="fossilEnergyType">
  8.                         <el-input v-model="formData.fossilEnergyType"/>
  9.                     </el-form-item>
  10.                 </el-col>
  11.                 <el-col :span="12">
  12.                     <el-form-item label="CAD值" prop="CAD">
  13.                         <el-input v-model.number="formData.CAD"/>
  14.                     </el-form-item>
  15.                 </el-col>
  16.             </el-row>
  17.             <el-row>
  18.                 <el-col :span="12">
  19.                     <el-form-item label="CD值" prop="CD">
  20.                         <el-input v-model.number="formData.CD"/>
  21.                     </el-form-item>
  22.                 </el-col>
  23.                 <el-col :span="12">
  24.                     <el-form-item label="NaVar值" prop="NaVar">
  25.                         <el-input v-model.number="formData.NaVar"/>
  26.                     </el-form-item>
  27.                 </el-col>
  28.             </el-row>
  29.             <el-row>
  30.                 <el-col :span="12">
  31.                     <el-form-item label="FC值" prop="FC">
  32.                         <el-input v-model.number="formData.FC"/>
  33.                     </el-form-item>
  34.                 </el-col>
  35.                 <el-col :span="12">
  36.                     <el-form-item label="FCbj值" prop="FCbj">
  37.                         <el-input v-model.number="formData.FCbj"/>
  38.                     </el-form-item>
  39.                 </el-col>
  40.             </el-row>
  41.             <el-row>
  42.                 <el-col :span="12">
  43.                     <el-form-item label="NCVbj值" prop="NCVbj">
  44.                         <el-input v-model.number="formData.NCVbj"/>
  45.                     </el-form-item>
  46.                 </el-col>
  47.             </el-row>
  48.         </el-form>
  49.         <div slot="footer" class="dialog-footer">
  50.             <el-button @click="cancel()">取消</el-button>
  51.             <el-button type="primary" @click="handleAdd()">确定</el-button>
  52.         </div>
  53.     </el-dialog>
  54. </div>
复制代码
效果：

上述的所有内容被放到了formData内里：

④点击“确认”将上述表单中的数据担当并传给后端

首先找到确认按钮的位置：

然后对应找到handleAdd()函数的位置,编写内容如下：
  1.         //添加
  2.             handleAdd () {
  3.                 //①使用的是post请求
  4.                 //②传递的路径是fuels
  5.                 //③传到后端的数据是formData
  6.                 axios.post("/fuels",this.formData).then((res)=>{
  7.                     if(res.data.flag==true)
  8.                     {
  9.                         //④关闭弹层表单
  10.                         this.dialogFormVisible=false;
  11.                     }
  12.                     //⑤重新加载更新后的数据并展示
  13.                     this.getAll();
  14.                 })
  15.             },
复制代码
⑤测试数据传送效果

输入数据并点击确定：

可以发现数据成功被添加并展示：

⑥优化

每一次我们添加完成之后，再次打开网页点击添加，还是会出现上次留下来的数据，因此我们必要在每次添加完成之后把表单中的数据清除一下：
因此我们必要界说一个“重置表单”的操作：
  1.   //重置表单
  2.             resetForm() {
  3.                 this.formData={};//直接将数据置空
  4.             },
复制代码
然后我们设置每一次打开表单的时间举行一次重置表单，也就是必要在handleCreate()内里调用resetForm()功能：

⑦设置取消按钮的功能

找到“取消”按钮地点的位置：

找到“cancel()”函数的位置，并书写内部关闭表单弹窗的代码语句：
 
  1. //取消
  2.             cancel(){
  3.                 this.dialogFormVisible=false;
  4.                 this.$message.info("当前操作取消");//灰色
  5.             },
复制代码
之后我们点击“取消”这个添加的弹窗就可以被关闭了。

（3）删除数据功能

①首先要先找到删除的按钮位置

可以看到，我们必要去找handleDelete()操作

解析参数scope.row；它将整个行对象封装成为scope，而这个row指的是这一行的数据。
②找到handleDelete()函数位置：


先利用console.log举行测试：
可以发现当我们在网页上点击删除按钮的时间，网页能够正常获取这一行的数据：

③handleDelete()函数代码

  1. // 删除
  2.             handleDelete(row) {
  3.                 //打印出这一行的数据
  4.                 console.log(row);
  5.                 //①路径是/fuels/id,我们这里用字符串拼接的方式来做的
  6.                 //②设置删除失败与成功的判断操作
  7.                 axios.delete("/fuels/"+row.id).then((res)=>{
  8.                     if(res.data.flag==true)
  9.                     {
  10.                         //⑥删除成功提示绿色
  11.                         this.$message.success("删除成功！");
  12.                     }
  13.                     else
  14.                     {
  15.                         //⑦删除失败为红色
  16.                         this.$message.error("删除失败！");
  17.                     }
  18.                     //删除完成之后重新刷新页面
  19.                     this.getAll();
  20.                 })
  21.             },
复制代码
点击删除举行测试效果：

④拓展

利用提示“此操作永久删除当前信息，是否继续”功能：
代码：
  1. this.$confirm("此操作永久删除当前信息，是否继续？","警告",{type:"info"}).then(()=>
  2.                 {
  3.                     console.log("success");//点击确认之后跳转到这里
  4.                 }).catch(()=>{
  5.                     console.log("cancel");
  6.                 })
复制代码

同时点击确认之后，也可以在网页控制台上看到success:

我们将③和④整合到一块：

代码为：
  1. // 删除
  2.             handleDelete(row) {
  3.                 this.$confirm("此操作永久删除当前信息，是否继续？","警告",{type:"info"}).then(()=>
  4.                 {
  5.                     console.log("success");//点击确认之后跳转到这里
  7.                     //打印出这一行的数据
  8.                     console.log(row);
  9.                     //①路径是/fuels/id,我们这里用字符串拼接的方式来做的
  10.                     //②设置删除失败与成功的判断操作
  11.                     axios.delete("/fuels/"+row.id).then((res)=>{
  12.                         if(res.data.flag==true)
  13.                         {
  14.                             //⑥删除成功提示绿色
  15.                             this.$message.success("删除成功！");
  16.                         }
  17.                         else
  18.                         {
  19.                             //⑦删除失败为红色
  20.                             this.$message.error("删除失败！");
  21.                         }
  22.                         //删除完成之后重新刷新页面
  23.                         this.getAll();
  24.                     })
  25.                 }).catch(()=>{
  26.                     console.log("concel");
  27.                     this.$message.info("当前操作取消");
  28.                 })
  29.             },
复制代码
（4）修改数据功能

①先找到修改功能对应的操作位置


②找到对应的handleUpdate位置


1.我们首先要先获取全部的数据，并将数据展示到表单上
  1. //弹出编辑窗口
  2.             handleUpdate(row) {
  3.                 //①先获取全部数据
  4.                 axios.get("/fuels").then((res)=>{
  5.                     console.log(res.data);
  6.                     this.dataList=res.data.data;
  7.                 });
  8.                 //②获取我们点的这行的数据，并展示到表单
  9.                 axios.get("/fuels/"+row.id).then((res)=>{
  10.                     this.dialogFormVisible4Edit=true;
  11.                     this.formData=res.data.data;
  12.                 });
  13.             },
复制代码
这样我们每一次点击“编辑”按钮后，就会出现这行的全部信息，如下：
2.增长数据没有展示不出来的环境（核心是由于开了多个界面，导致没革新上）
利用if-else判断代码：
  1. //弹出编辑窗口
  2.             handleUpdate(row) {
  3.                 //①先获取全部数据
  4.                 axios.get("/fuels").then((res)=>{
  5.                     console.log(res.data);
  6.                     this.dataList=res.data.data;
  7.                 });
  8.                 //②获取我们点的这行的数据，并展示到表单
  9.                 axios.get("/fuels/"+row.id).then((res)=>{
  10.                     if(res.data.flag==true)
  11.                     {
  12.                         this.dialogFormVisible4Edit=true;
  13.                         this.formData=res.data.data;
  14.                     }
  15.                     else
  16.                     {
  17.                         this.$message.error("数据同步失败，自动刷新！");
  18.                         this.getAll();
  19.                     }
  20.                 });
  21.             },
复制代码
效果：

③点击“确定”的时间将数据同步到后端

先找到对应的“确认”按钮：

接着找到handleEdit位置部门：
内容如下（类似于上面的添加操作）：
  1. //修改
  2.             handleEdit() {
  3.                 //①使用的是put请求
  4.                 //②传递的路径是fuels
  5.                 //③传到后端的数据是formData
  6.                 axios.put("/fuels",this.formData).then((res)=>{
  8.                     if(res.data.flag==true)
  9.                     {
  10.                         //④关闭弹层表单
  11.                         this.dialogFormVisible4Edit=false;
  12.                         //⑥添加成功提示绿色
  13.                         this.$message.success("修改成功！");
  14.                     }
  15.                     else
  16.                     {
  17.                         //⑦添加失败为红色
  18.                         this.$message.error("修改失败！");
  19.                     }
  21.                     //⑤重新加载更新后的数据并展示
  22.                     this.getAll();
  23.                 })
  24.             },
复制代码
④设置“取消”按钮操作


找到cancel()位置：

效果：

（5）非常消息处理

非常举例：

可以发现，这个于我们通例界说的前后端联调时间用的同一数据格式R不一样，所以这就给我们的开发造成了困扰。
因此：我们就必要对所有的非常格式举行一个同一的处理，并且要处理成跟原来一样的格式。
①我们创建新的类，类名为：projectExceptionAdvice


此中：我们将这个非常处理放到了controller层，而没有放到业务层和dao层，原因是就算放了最终非常也会传到controller这里，所以干脆直接就在这做了。

②给我们的同一数据格式R类加上一个新的属性量msg，代表错误信息


③在projectExceptionAdvice类内里书写非常处理操作
利用@RestControllerAdvice或者@ControllerAdvice界说这是一个非常类，此中@RestControllerAdvice包罗了@ControllerAdvice
类中代码为：
  2. //作为springmvc的异常处理器
  3. //@ControllerAdvice
  4. @RestControllerAdvice
  5. public class projectExceptionAdvice {
  6.     @ExceptionHandler
  7.     public R exception(Exception e) {
  8.         e.printStackTrace();//将异常打印到控制台里面进行显示
  9.         R r = new R();
  10.         r.setFlag(false);
  11.         r.setData(null);
  12.         r.setMsg("服务器故障，请稍后再试！");
  13.         return r;
  14.     }
  15. }
复制代码
实现效果：（同一的数据返回格式）

③将这个返回的信息能够返回到页面上

例如：原先我们在（2）添加数据功能“添加失败”部门：

我们可以将这个改成：
效果：

（6）分页查询

我们只必要在原先getAll（）方法的基础上增长分页操作即可。
①分页组件

总代码：
  1. <!--分页组件-->
  2.             <div class="pagination-container">
  3.                 <el-pagination
  4.                         class="pagiantion"
  5.                         @current-change="handleCurrentChange"
  6.                         :current-page="pagination.currentPage"
  7.                         :page-size="pagination.pageSize"
  8.                         layout="total, prev, pager, next, jumper"
  9.                         :total="pagination.total">
  10.                 </el-pagination>
  12.             </div>
复制代码
分别介绍：
1.class="pagiantion"代表样式表
2.@current-change="handleCurrentChange"实现页码跳转操作的时间用这个
3.加载数据部门
:current-page="pagination.currentPage"当前页码
:page-size="pagination.pageSize"每页展示的条目数
:total="pagination.total">统共有多少条数据
4：layout="total, prev, pager, next, jumper"布局模式部门        
分别代表的含义如下：

②样式表pagiantion的信息设置


代码为：
  1. pagination: {//分页相关模型数据
  2.                 currentPage: 1,//当前页码
  3.                 pageSize:10,//每页显示的记录数
  4.                 total:0//总记录数
  5.             }
复制代码
③然后我们修改getAll()方法
  1. getAll() {
  2.                 //使用axios发送异步请求
  3.                 //①路径为fuels
  4.                 //②方法为get
  5.                 //④使用then和res将数据提取
  6.                 //⑤提取的数据部分为R对象中的data
  7.                 //⑥使用console实现网页中控制台对数据的接受打印。
  8.                 // axios.get("/fuels").then((res)=>{
  9.                 //    console.log(res.data);
  10.                 //    this.dataList=res.data.data;
  11.                 // });
  12.                 axios.get("/fuels/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res)=>{
  13.                     console.log(res.data);
  14.                     this.dataList=res.data.data;
  15.                 });
  16.             },
复制代码
在页面的运行效果为：
我们可以看到分页查询的哀求已经精确发送给后端了：

并且我们点击“相应”部门也可以看到，分页的数据前端也的确获取到了：

并且我们可以看到数据是在record内里的，也就是担当的数据格式有一些必要变动，因此我们必要将this.dataList=res.data.data;改成对应的records的相干操作为。
修改后的代码为：
  1. getAll() {
  2.                 //使用axios发送异步请求
  3.                 //①路径为fuels
  4.                 //②方法为get
  5.                 //④使用then和res将数据提取
  6.                 //⑤提取的数据部分为R对象中的data
  7.                 //⑥使用console实现网页中控制台对数据的接受打印。
  8.                 // axios.get("/fuels").then((res)=>{
  9.                 //    console.log(res.data);
  10.                 //    this.dataList=res.data.data;
  11.                 // });
  12.                 axios.get("/fuels/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res)=>{
  13.                     console.log(res.data);
  14.                     //this.dataList=res.data.data;
  15.                     this.dataList=res.data.data.records;
  16.                 });
  17.             },
复制代码
这样我们的页面就能把数据加载进去了：

③更新右下角的数据显示

也就是我们要更新pagination中的currentPage、pageSize和total的值 

总代码为：
  1. getAll() {
  2.                 //使用axios发送异步请求
  3.                 //①路径为fuels
  4.                 //②方法为get
  5.                 //④使用then和res将数据提取
  6.                 //⑤提取的数据部分为R对象中的data
  7.                 //⑥使用console实现网页中控制台对数据的接受打印。
  8.                 // axios.get("/fuels").then((res)=>{
  9.                 //    console.log(res.data);
  10.                 //    this.dataList=res.data.data;
  11.                 // });
  12.                 axios.get("/fuels/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res)=>{
  13.                     console.log(res.data);
  14.                     //this.dataList=res.data.data;
  15.                     this.pagination.pageSize=res.data.data.size;
  16.                     this.pagination.currentPage=res.data.data.current;
  17.                     this.pagination.total=res.data.data.total;
  18.                     
  19.                     this.dataList=res.data.data.records;
  20.                 });
  21.             },
复制代码
效果：
可以看到我们的右下角的页面信息被精确加载进来了。

④切换页码操作，点击页码实现跳转

对应的按钮位置就是：

因此我们必要向下寻找到对应的handleCurrentChange()方法的位置并书写代码：
  1. //切换页码
  2.             handleCurrentChange(currentPage) {
  3.                 //①修改页码值为当前选中的页码值
  4.                 this.pagination.currentPage=currentPage;
  5.                 //②执行查询
  6.                 this.getAll();
  7.             },
复制代码
效果：
可以发现，当我们点击2的时间能够实现跳转：

（7）条件查询

①将条件查询与分页查询举行绑定

由于条件查询的效果一样平常输出可以是多条数据，而多条数据必然和分页精密相连，所以我们更改原先的条件查询属性内容：

②将条件查询输入框和分页查询相干联

对应就是将条件查询的输入框中的数据用分页查询这个模型中我们新界说的属性参数来接收：

③测试数据输入的数据可否被接收到

用id来做测试：（在getAll()内里的）

效果：

因此发现可以接收到我们输入在输入框中的内容！
④书写条件查询表达式

表达式为：

效果为：

⑤将上述条件表达式和条件查询连一起

在原有的get函数后面连接上我们上面写的condition就行。

测试效果：

可以发现条件查询拼凑成功了。
⑤测试后端能不能拿到数据

输入框输入：

在原有条件查询的基础上加上fuel对象，并观察得到能够接收来自前端的输入框输入：

⑥下面我们本身写一个独立的分页和条件查询的函数（重载形式）

1.fuel.html的getAll()部门（增长对主键id非空的判断）
  1. getAll() {
  2.                 //使用axios发送异步请求
  3.                 //①路径为fuels
  4.                 //②方法为get
  5.                 //④使用then和res将数据提取
  6.                 //⑤提取的数据部分为R对象中的data
  7.                 //⑥使用console实现网页中控制台对数据的接受打印。
  8.                 // axios.get("/fuels").then((res)=>{
  9.                 //    console.log(res.data);
  10.                 //    this.dataList=res.data.data;
  11.                 // });
  12.                 //console.log(this.pagination.id);//测试能否接收到条件查询数据
  13.                 //拼接条件查询/fuels/2/5?id=&fossilEnergyType&……
  14.                 condition="?q";//一个无效前缀，主要是为了后面的格式能够统一
  15.                 if (this.pagination.id==null)
  16.                 {
  17.                     condition+="&id="+1234567890;
  18.                 }
  19.                 else
  20.                 {
  21.                     condition+="&id="+this.pagination.id;
  22.                 }
  23.                 condition+="&fossilEnergyType="+this.pagination.fossilEnergyType;
  24.                 condition+="&CAD="+this.pagination.CAD;
  25.                 condition+="&CD="+this.pagination.CD;
  26.                 condition+="&NAVar="+this.pagination.NAVar;
  27.                 condition+="&FC="+this.pagination.FC;
  28.                 condition+="&FCbj="+this.pagination.FCbj;
  29.                 condition+="&NCVbj="+this.pagination.NCVbj;
  30.                 //测试条件查询
  31.                 console.log(condition);
  33.                 axios.get("/fuels/"+this.pagination.currentPage+"/"+this.pagination.pageSize+condition).then((res)=>{
  34.                     console.log(res.data);
  35.                     //this.dataList=res.data.data;
  36.                     this.pagination.pageSize=res.data.data.size;
  37.                     this.pagination.currentPage=res.data.data.current;
  38.                     this.pagination.total=res.data.data.total;
  40.                     this.dataList=res.data.data.records;
  41.                 });
  42.             },
复制代码
2.FuelController部门
  1. //分页+条件
  2.     @GetMapping("{currentPage}/{pageSize}")
  3.     public R getPage(@PathVariable int currentPage, @PathVariable int pageSize,Fuel fuel) {
  4.         System.out.println(fuel);
  5.         R r=new R();
  6.         boolean flag=true;//走到了这一步，都是查询成功
  7.         IPage iPage=fuelService.getPage(currentPage, pageSize,fuel);
  8.        if(currentPage>iPage.getPages())
  9.        {
  10.           iPage=fuelService.getPage((int)iPage.getPages(), pageSize,fuel);
  11.        }
  12.         r.setFlag(flag);
  13.         r.setData(iPage);
  14.         return r;
  16.     }
复制代码
3.FuelService接口部门
  1. //分页+条件
  2.     IPage<Fuel> getPage(int currentPage, int pageSize,Fuel fuel);
复制代码
4.FuelServiceImpl部门
  1.   //分页+条件
  2.     @Override
  3.     public IPage<Fuel> getPage(int currentPage, int pageSize, Fuel fuel) {
  4.         LambdaQueryWrapper<Fuel> wrapper=new LambdaQueryWrapper<>();
  5.         if(fuel.getId()!=null) {//避免查询的字段为null名字的字段
  6.             if(fuel.getId()!=1234567890)
  7.             {
  8.                 wrapper.like(Fuel::getId, fuel.getId());//第一个是属性名字，第二个是我们输入要like的内容
  9.             }
  10.             //如果等于1234567890代表我们没有进行任何查询，因为id不可以为null,所以我们设置一个非null来表示
  12.         }
  13.         if(fuel.getFossilEnergyType()!=null) {//避免查询的字段为null名字的字段
  14.             wrapper.like(Fuel::getFossilEnergyType, fuel.getFossilEnergyType());//第一个是属性名字，第二个是我们输入要like的内容
  15.         }
  17.         if(fuel.getCAD()!=null) {//避免查询的字段为null名字的字段
  18.             wrapper.like(Fuel::getCAD, fuel.getCAD());//第一个是属性名字，第二个是我们输入要like的内容
  19.         }
  21.         if(fuel.getCD()!=null) {//避免查询的字段为null名字的字段
  22.             wrapper.like(Fuel::getCD, fuel.getCD());//第一个是属性名字，第二个是我们输入要like的内容
  23.         }
  25.         if(fuel.getNAVar()!=null) {//避免查询的字段为null名字的字段
  26.             wrapper.like(Fuel::getNAVar, fuel.getNAVar());//第一个是属性名字，第二个是我们输入要like的内容
  27.         }
  29.         if(fuel.getFC()!=null) {//避免查询的字段为null名字的字段
  30.             wrapper.like(Fuel::getFC, fuel.getFC());//第一个是属性名字，第二个是我们输入要like的内容
  31.         }
  32.         if(fuel.getFCbj()!=null) {//避免查询的字段为null名字的字段
  33.             wrapper.like(Fuel::getFCbj, fuel.getFCbj());//第一个是属性名字，第二个是我们输入要like的内容
  34.         }
  35.         if(fuel.getNCVbj()!=null) {//避免查询的字段为null名字的字段
  36.             wrapper.like(Fuel::getNCVbj, fuel.getNCVbj());//第一个是属性名字，第二个是我们输入要like的内容
  37.         }
  39.         IPage page=new Page<>(currentPage,pageSize);
  40.         return fuelDao.selectPage(page,wrapper);
  41.     }
复制代码
效果展示：

文件获取：

（1）网页测试URL

http://localhost:8080/pages/fuels.html
（必要按照你的端口更换一下这个8080）
 （2）数据库

通过百度网盘分享的文件：燃煤热电数据库2.2.zip
链接：https://pan.baidu.com/s/1CobrQkEb7i0bAdUOcmxIIg?pwd=vebf 
提取码：vebf 
--来自百度网盘超级会员V5的分享
（3）后端代码

通过百度网盘分享的文件：springboot实现前后端调用axios异步哀求（后端单体服务器s...
链接：https://pan.baidu.com/s/1o9RFrwjWa3ipvjVY8W2hlQ?pwd=gi6b 
提取码：gi6b 
--来自百度网盘超级会员V5的分享
（3）静态页面文件（参考利用的是黑马步调员的文件并举行修改调整）

通过百度网盘分享的文件：static.zip
链接：https://pan.baidu.com/s/148WsM22v96-5sIh2QQ_IDg?pwd=2l68 
提取码：2l68 
--来自百度网盘超级会员V5的分享

 假如运行我打包的项目，为了能够正常运行（必要兼容maven以及java版本），具体的调整方法看我博客：http://t.csdnimg.cn/Uovig
好啦，盼望能够帮助到大家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

写过一篇

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表