【JavaWeb】vue & vue.js框架 & Ajax（Axios）及前端动态渲染

promas

已于 2025-03-25 16:02:17 修改

阅读量1k

点赞数 19

分类专栏： Java全栈笔记文章标签：前端 vue.js ajax

于 2025-03-25 15:44:26 首次发布

本文链接：https://blog.youkuaiyun.com/2401_86079197/article/details/146490750

版权

Java全栈笔记专栏收录该内容

3 篇文章

订阅专栏

编程环境：visual studio code

vue.js技术栈:

HTML：HTML、css、Javascript相关插件

vue.js框架：Node.js（npm包管理）

前端交互：Axios

一：vue对象

1：引入vue对象实例

<!--实现目标：定义一个表格，使用vue动态导入数据；
        思路：1：定义一个vue结构，添加需要导入的元素；
              2：在表格数据栏，使用vue的方法，动态添加数据进入表格内容栏
        技术栈：vue的定义、
                vue的常用方法：循环遍历user元素：v-for；
                              动态设置显示：-if、v-else-if、vue-else
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--导入vue包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Axios 通过 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>


<body>
    <div class="select">
        <table align="center" border="2px" width="500px" height="200">      <!--定义基础表格骨架-->
            <caption>奥特曼登记处</caption>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>住址</th>
                <th>分数</th>
                <th>等级</th>
            </tr>
            <tr v-for="(user, index) in users" :key="index">           <!--定义一个遍历方式，按照遍历数组中的元素，使用user获取遍历的结果-->
                <td>{{index+1}}</td>            <!--使用正则表达式输出user的属性-->
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.adrs}}</td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score==100">奥特曼之王</span>      <!--使用判断式进行控制标签的显隐-->
                    <span v-else-if="user.score>=90">奥特曼之母</span>
                    <span v-else>凹凸曼</span>
                </td>
            </tr>
        </table>
        <!--在div内部表格外部在引入一个div盒子存放button按钮，使用onclick方法，如果这个按钮放在大div外面，vue将无法挂载-->
        <!--原因：vue的开发初衷是能够独立的操作特定区域，因此一个vue只能对应于一个html内部的结构，如果需要多个对应，可以再设计几个vue--->
        <div class="select" border="2px" align="center"><input type="button" value="保存" v-on:click="add()"></div>
    </div>
    <hr>
    <div border="2px" align="center"><input type="button" id="control" value="保存到本地" v-on:click="othersave()"></div>
    <input class="ax" type="button" align="center" style="color: red;" border="2px" value="获取GitHubu_ser数据" v-on:click="getdata">

    <script>
        //定义一个vue类，可包含：接管区、数据区、方法区、生命周期方法
        new Vue({
            el:".select",   //接管区，此处是接管select类（通html的选择器类似）
            data:{          //数据区，定义了一个users数组，每个花括号表示数组中的一个元素，每个key表示元素对应的属性        
                users:[ 
                    {
                    name:"陈林",
                    age:18,
                    adrs:"重庆",
                    score:100,
                    },{
                    name:"迪丽热巴",
                    age:18,
                    adrs:"新疆",
                    score:99,
                    },{
                        name:"迪迦",
                        age:1000,
                        adrs:"光之国",
                        score:70,
                    }]
                },
            methods:{
                    add:function(){
                        alert("表格内部保存成功");
                    },
            },
            mounted(){
                alert("第一个vue挂载完成")     //挂载完成，此时前端发送请求到服务端
            }
            })


            new Vue({
                el:"#control",
                methods:{
                    othersave:function(){
                        alert("表格外部保存成功")
                    }
                },
                mounted(){
                    alert("第二个vue挂载完成")
                }
            })

            /*构建一个vue展示axios的请求方式*/
            new Vue({
                el:".ax",
                methods:{
                    getdata:function(){
                        // 使用 Axios 向GitHub_user发送 GET 请求
                        axios.get('https://api.github.com/users').then(response => {
                            console.log('请求成功:', response.data);
                                })
                            .catch(error => {
                            console.error('请求失败:', error);
                     });
                    }
                }
            })
    </script>

    
</body>
</html>

2：引入vue对象 （接管区el、数据域data、函数区method、挂载完成区mounted）

//定义一个vue类，可包含：接管区、数据区、方法区、生命周期方法
        new Vue({
            el:".select",   //接管区，此处是接管select类（通html的选择器类似）
            
            data:{          //数据区，定义了一个users数组，每个花括号表示数组中的一个元素，每个key表示元素对应的属性        
                users:[ 
                    {
                    name:"陈林",
                    age:18,
                    adrs:"重庆",
                    score:100,
                    },{
                    name:"迪丽热巴",
                    age:18,
                    adrs:"新疆",
                    score:99,
                    },{
                        name:"迪迦",
                        age:1000,
                        adrs:"光之国",
                        score:70,
                    }]
                },
            
                methods:{
                    add:function(){
                        alert("表格内部保存成功");
                    },
            },
            
            mounted(){
                alert("第一个vue挂载完成")     //挂载完成，此时前端发送请求到服务端
            }
            })

vue对象的主要内容：1：el控制接管区；

2：Data控制数据结构；

3：method对应vue对象接管的区域对应的函数方法；（v-x控制）

4：生命周期方法；

注意事项：单独一个vue对象只能控制某一个区域的模块儿，故：对应关系应该是：一对一；

3：vue的引入方式（此处选择通过cdn的方式引入）：

<!--导入vue包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

4：常见v-‘x’指令

常用情况：v-if、v-else-if、v-else：可以用来动态设置引入的元素：

比如：外界元素gender为1，0；

可以：使用上面三个进行转换打印；使得前端渲染的内容是我们需求的内容；

v-on可以用来控制鼠标点击事件等；

eg：

1：使用vfor进行遍历：（根据index来逐步遍历users这个容器，设置一个user来接收遍历出来的对象）

2：使用vif、else、elseif进行动态渲染：（如果对应分数表格中的值等于100，打印出奥特曼之王、如果大于90，表格的内容显示奥特之母，如果上述两者都不满足，执行最后一行，打印出凹凸曼）

5：插值表达式：（用于动态插入需求的元素）

可插入的内容包括如下：

案例:(使用for循环遍历users，其中users是一个json格式的数组，里面包含多个user对象及他们各自的属性；通过{{x}}插值表达式完成user对象属性的动态打印，将user的属性展示在对应的表格)

6：vue的生命周期：

八大生命周期：

常用生命周期方法：

1：created：在这个钩子中，可以进行数据的初始化操作；eg：发送网络请求获取初始数据、对数据进行预处理（此时组件实例已经创建完成可以访问到data、method方法）；

<script>
new Vue({
        
        el:".center"
        data：{
            list:[],        //数据区引入一个list用于后续存放请求的数据
                
              }        
        methods:{
            
            click:function(){
                console.log("你点了哥们儿")，
            }，
             
            
            //方法区引入一个fetch函数，用于从“/api/initial-data”这个接口获取数据并存放在list数组中
            fetchInitialData() {
                axios.get('/api/initial-data').then(response => {
                    this.list = response.data;
              }).catch(error = >{
                console.error("数据获取失败")
                });
           }
        }，
        
            //在create钩子中挂载fetch方法
        created() {
          this.fetchInitialData();
             },
        })
</script>

2：mounted：组件成功挂载，此时可以进行Dom操作；

<script>
/*构建一个vue展示axios的请求方式*/
    new Vue({
       el:".ax",
       methods:{
       getdata:function(){
        // 使用 Axios 向GitHub_user发送 GET 请求
            axios.get('https://api.github.com/users').then(response => {
                console.log('请求成功:', response.data);
                    })
              .catch(error => {
                  console.error('请求失败:', error);
                     });
                    }
                }
            })
</script>

3:beforupdate:可以用于监听页面的变化情况，可以更具需要并作出对应的操作：

<script>

beforeUpdate() {
  console.log('数据即将更新');
  this.logDataChange();
},
methods: {
  logDataChange() {
    // 记录数据变更日志
  }
}
</script>

最后：

<!--总结-->
<!--
     vue只是一个框架，使得开发者更容易操作dom
     主要内容包括：1：主要流程（引入vue框架、js定义vue、定义html试图）
                  2：vue的常用指令（suchas：vbind、vmodel、von、vif、velseif、vshow、、、）
                  3：vue与其控制的结构是一一对应的关系；
                  4：生命周期（创建、挂载、更新、销毁前后）
                            客户端向服务器发送请求是发生在挂载完成阶段（挂载后）；
-->

二：Ajax（Axios）

1：Ajax：一种无需加载整个网页就能够更新部分网页的技术。可以使得前后端完成异步通信，实现动态更新页面内容、提交数据等；（异步通信、灵活的数据格式、支持广泛）

// 使用 Axios 发送 GET 请求
axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

// 使用 Axios 发送 POST 请求
axios.post('/api/submit', {
  name: 'John Doe',
  email: 'john.doe@example.com'
})
  .then(response => {
    console.log('提交成功');
  })
  .catch(error => {
    console.error('提交失败:', error);
  });

我们要聊的主要就是基于Ajax的简化版本，Axios ：

特点：

Promise 支持：基于 promise，可以轻松地进行链式调用和错误处理。
拦截请求和响应：可以在请求发送前和响应返回后进行拦截，进行统一的处理（如添加认证头、处理错误等）。
取消请求：支持请求的取消，避免不必要的网络请求。
自动转换 JSON 数据：自动解析 JSON 数据，无需手动处理。

我们在之前的生命周期已经使用了Axios方法完成了对应的get请求，用于向所需url发送请求；

具体模板：

1：在vue组件创造期完成初始化数据获取(/api/initial-data)：

<script>
// 在 Vue 组件中获取数据
created() {
  axios.get('/api/initial-data')
    .then(response => {
      this.data = response.data;
    });
}
</script>

2：前端向后端(/api/submit)提交表单

<script>
// 提交表单数据
submitForm() {
  axios.post('/api/submit', this.form)
    .then(response => {
      console.log('提交成功');
    });
}
</script>

2：引入方式：（此处同样采用加载在cdn中开源的js文件）

在html文档引入：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

在vue.js中引入 ：

npm install axios        //下载axios

import axios from 'axios'; //组件中引入

3：请求方式：

其他常见请求（提交put，删除delete）

<script>
// PUT 请求
axios.put('/api/data/12345', {
    firstName: 'Barney',    //提交的参数
    lastName: 'Rubble'
})
.then(response => {
    console.log(response.data);//抛出响应结果
})
.catch(error => {
    console.error('Error:', error);
});


// DELETE 请求
axios.delete('/api/data/12345')
.then(response => {
    console.log('Data deleted');//抛出：成功删除
})
.catch(error => {
    console.error('Error:', error);
});
</script>

特别地：实例请求方法：

<script>

//初始化instance的axios对象，包括请求路径url、请求超时时长、请求头；
const instance = axios.create({
    baseURL: 'https://example.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
});

// 使用实例发送请求
instance.get('/data', {
    params: {
        ID: 12345
    }
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error('Error:', error);
});
</script>

4：axios获取github的json_user文档

<!--解读：
        数据源：Github开源的json数据；
        目的：利用axios在vue组件挂载完成之后，通过鼠标点击按键从github获取数据
        本着只是测试案例、且我们主要任务是做后端的目的，因此和css渲染交给了AI完成
        提前访问了json源，确定选取id、login、type作为列表头
-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios动态渲染表格</title>
    <!-- 引入 Vue.js 和 Axios -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        th {
            background-color: #4a90e2;
            color: white;
            font-weight: bold;
        }
        
        tr:hover {
            background-color: #f5f5f5;
        }
        
        .button-container {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        .get-data {
            background-color: #4a90e2;
            color: white;
        }
        
        .submit-data {
            background-color: #2ecc71;
            color: white;
        }
        
        button:hover {
            opacity: 0.9;
        }
        
        button:active {
            transform: scale(0.98);
        }
    </style>
</head>
<body>

<div class="container">
    <h1>GitHub 用户数据</h1>
    
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Login</th>
                <th>Type</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(user, index) in users" :key="index">
                <td>{{ user.id }}</td>
                <td>{{ user.login }}</td>
                <td>{{ user.type }}</td>
            </tr>
        </tbody>
    </table>
    
    <div class="button-container">
        <button class="get-data" @click="getdata">获取 GitHub 用户数据</button>
        <button class="submit-data">提交数据</button>
    </div>
</div>

<script>
    new Vue({
        el: '.container',
        data: {
            users: [],
            loading: false,
            error: null
        },
        methods: {
            getdata: function () {
                this.loading = true;
                this.error = null;

                axios.get('https://api.github.com/users')
                    .then(response => {
                        this.users = response.data;
                        this.loading = false;
                    })
                    .catch(error => {
                        console.error('请求失败:', error);
                        this.error = '数据加载失败';
                        this.loading = false;
                    });
            }
        }
    });
</script>

</body>
</html>

效果展示：first初始url：

效果展示：点击获取数据后，通过vue控制点击事件完成axios.get：

5：Axios的其他应用场景;

前后端交互（请求get\post,,,）：前端vue.js+后端springboot

前端向后端提交数据/请求；前端向后端获取数据；前端下载后端数据；

（此交互框架需要确保vue.js请求的API与后端对于业务完成的API的一致）

三：vue.js框架（工程化脚手架）

1：什么是vue.js框架?

——>一种结构化的、方便我们构造、测试、打包的一种前端（全栈）开发人员的脚手架

为什么要使用这种框架？

——>正如其称，脚手架，因此它的出现让我们在进行前端项目搭建的时候提供了一个格式化的模板，其集成node.js环境，方便我们一键打包项目文档。

2：项目结构：

配置文件：（用于配置前端项目启动的端口，同时后期可以通过这里配置代理进行转发）

项目入口文件：

视口组件块儿：（新建了一个element文件夹，用于存放element组件块）

视口根文件：（总领所以组件块儿，包含：导入组件块儿、导入组件、声明组件）

ps：其中导入的组件名应当与views里面的驼峰命名法的文件名一致! ! !

！！！视口文件配置：

<template>
    //定义HTML代码，定义视口的模块儿部分
    //一般采用CV开发法，前往element这种组件官网copy自己所需的源码
    //然后粘贴在这里，此外还需要在根组件APP.vue中引入、导入、声明
</template>

<script>
    //script部分，用于控制模块儿数据来源
</script>

<style>
    //css样式部分
</style>

案例： 使用element组件库进行实践：

1：前往组件 | Element找到自己需要的组件，复制源码

2：配置对应视口文件并引入源码：

3：在根组件APP.vue中引入组件同时在script标签中导入并声明组件

4：最后在入口文件中导入所需要使用的组件，并使用

5：结果展示：引入了一排button、一个表格、已经分页展示

ps：其页面结构主要是在视口组件中定义的（如果我们需要对于的网页结构，element也为我们提供了源码，可以在其基础上进行修改）

四：Nginx部署

1：前端项目打包：我们的前端项目是基于node.js环境搭建的，所以我们对于前端的项目可以直接采用npm进行包管理；（两种方式：一种直接如下点击build后面的启动按钮；另外一种通过终端直接运行“npm run build”进行打包）

打包效果：在项目中生成一份dist文件夹

2：下载nginx文件：

nginx: download访问此网站，下载对应的nginx文件至本地（没有中文的文件夹）

3：nginx项目结构：

3.1conf 配置启动端口：

3.2：检查端口号占用情况

netstat -ano | findstr :端口号

3.3：设置Hase or history模式：

区别：

实现原理： Hase通过浏览器的hashchange事件监听url中的hash值的变化，从而实现页面的跳转；在js中通过监听hash值的变化来响应路由变化；

history基于html5 history API提供的方法来实现；

———————————————————————————————————————————

兼容性：Hase：支持所有现代浏览器；

history：需要能够提供HTML5 Histroy API的浏览器；

———————————————————————————————————————————

表现：Hase的URL上面通常带有#，性能比较稳定，但是不好看；

History上的URL更符合国人审美，不稳定，易抛出404，但是好看；

———————————————————————————————————————————

配置方法：

第一步：在vue项目中选中index.js文件：

第二步：在nginx的conf文件中服务器模块儿修改为如下结构：

关键配置解读：

location / {
    try_files $uri $uri/ /index.html;
}

      //第一个：$uri   表示用户期望访问的url；
      // 第二个 $uri/  表示如果期望的url不存在，就将uri这个路径视为一个文件夹，去访问文件夹下的index.html；
       //最后：/index.html  表示若上面的都不存在，直接返回根目录下的index页面；


/*原型：try_files file ... uri;
       
        file：要尝试访问的文件路径；
        如果file以及...里面的文件路径都不存在，则最终返回uri的路径

*/

综上：该指令其实就当 Nginx 收到一个请求时，它会按照 try_files 指令中指定的顺序检查文件是否存在。如果找到存在的文件，就直接返回该文件；如果所有指定的文件都不存在，则返回最后一个参数指定的 URI。