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

news2024/11/16 5:46:37

目的：让页面调用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，如果你用的是别的，需要自行改一下。

http://localhost:8080/pages/fuels.html

第四步：代码知识详解

（1）<head>标签

定义了所有的头部信息，以及样式表的导入，以及页面的链接标题。

代码位置如下：

代码为：

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>springboot实现fuel静态页面的展示</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

（2）最左侧的头标签content-header

对应位置为：

代码为：

    <div class="content-header">

        <h1>fuels管理系统</h1>

    </div>

（3）标签和按钮

①输入标签

在代码中的位置：

代码为：

          <el-input placeholder="id" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="fossialEnergyType" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="CAD：" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="CD" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="NaVar" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="FC：" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="FCbj" style="width: 200px;" class="filter-item"></el-input>
                <el-input placeholder="NCVbj：" style="width: 200px;" class="filter-item"></el-input>

②按钮

<el-button @click="getAll()" class="dalfBut">查询</el-button>
                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>

（4）加载并接受数据部分

（5）分页组件

（5）导入js组件，包括vue组件和elementui组件

代码为：

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>

<script>

（5）vue的控制结构

①展示的列表数据list格式

dataList: [],

放到网页的页面上进行展示

②控制弹层（增删改需要用的弹出界面）

默认不可见，不然我们一打开网页就是乱七八糟的表单弹窗，而是等我们在增删改需要的时候再将这个置为true

第一个用于控制新增的，第二个用于控制修改的

dialogFormVisible: false,//添加表单是否可见
dialogFormVisible4Edit:false,//编辑表单是否可见

③表单数据（新增修改用的每一条数据的详细信息）

formData: {},//表单数据

④分页控制参数

 pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0//总记录数
            }

⑤钩子函数（vue初始化完成之后先调用它）

//钩子函数，VUE对象初始化完成后自动执行
        created() {
        },

⑥方法操作

        methods: {
            //列表
            getAll() {
            },

            //弹出添加窗口
            handleCreate() {
            },

            //重置表单
            resetForm() {
            },

            //添加
            handleAdd () {
            },

            //取消
            cancel(){
            },
            // 删除
            handleDelete(row) {
            },

            //弹出编辑窗口
            handleUpdate(row) {
            },

            //修改
            handleEdit() {
            },

            //分页查询

            //切换页码
            handleCurrentChange(currentPage) {
            },

            //条件查询
        }

第五步：功能实现

（1）展示全部数据

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

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

②添加getAll方法内操作

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

③然后我们在getAll方法内使用axios结合上面的请求路径：

 getAll() {
                //使用axios发送异步请求
                //①路径为fuels
                //②方法为get
                //④使用then和res将数据提取
                //⑤提取的数据部分为R对象中的data
                //⑥使用console实现网页中控制台对数据的接受打印。
                axios.get("/fuels").then((res)=>{
                   console.log(res.data);
                });
            },

程序运行：

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

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

因此我们就需要在前面③的里面加上：

 this.dataList=res.data.data;

效果如下：

（2）增添数据功能

①找到按钮位置

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

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

对应代码为：

 this.dialogFormVisible=true;

这样的话，点击之后这个增加数据的表单就会自动弹出来。

③设置对应的弹层内容

<!-- 新增标签弹层 -->
<div class="add-form">
    <el-dialog title="新增燃料信息" :visible.sync="dialogFormVisible">
        <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="燃料种类" prop="fossilEnergyType">
                        <el-input v-model="formData.fossilEnergyType"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="CAD值" prop="CAD">
                        <el-input v-model.number="formData.CAD"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="CD值" prop="CD">
                        <el-input v-model.number="formData.CD"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="NaVar值" prop="NaVar">
                        <el-input v-model.number="formData.NaVar"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="FC值" prop="FC">
                        <el-input v-model.number="formData.FC"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="FCbj值" prop="FCbj">
                        <el-input v-model.number="formData.FCbj"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="NCVbj值" prop="NCVbj">
                        <el-input v-model.number="formData.NCVbj"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取消</el-button>
            <el-button type="primary" @click="handleAdd()">确定</el-button>
        </div>
    </el-dialog>
</div>

效果：