(Javaweb)Ajax，Axios，Vue

news2024/9/22 13:38:58

一.Ajax

二.Axios

三.前端工程化

四.接口文档的管理平台YAPI

五.Vue项目

六.Vue项目开发流程

一.Ajax

1.通过Ajax从服务器端获取数据

Ajax---JavaScript（网页行为）+XML（标记语言--用来存储数据）

客户端--浏览器服务端在处理逻辑的时候，客户端处于等待状态等到服务端处理完毕--

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div>
<body>
    
</body>
<script>
    function getData(){
        var xmlHttpRequest=new XMLHttpRequest();
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求
        //获取服务响应数据
        xmlHttpRequest.onreadystatechange=function(){
            if(xmlHttpRequest.readyState=4&&xmlHttpRequest.status==200){
                document.getElementById('div1').innerHTML=xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>

二.Axios

浏览器--以get请求的方式请求参数id=1

要使用axios，也必须引入axios文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="js/axios-0.18.0.js"></script>
<body>
    <input type="button" value="获取数据get" onclick="get()">
    <input type="button" value="删除数据post" onclick="post()">
    
</body>
<script>
    function get(){
        axios({
            //通过axios发送异步请求
            method:"get",
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
        }).then(result=>{
            console.log(result.data);
        })
    }
    function post(){
        axios({
            //通过axios发送异步请求
            method:"post",
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
            data:"id=1"
        }).then(result=>{
            console.log(result.data);
        })
    }
</script>
</html>

通过axios发送异步请求get和post post请求通过id来删除数据：引入id属性

方括号中的内容是可选的

.then用于获取数据：：成功回调函数 data中封装服务器端响应回来的数据

简化请求代码：

function get(){
        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
        console.log(result.data);
    })
    }
    function post(){
        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById").then(result=>{
        console.log(result.data);
    })
    }

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="js/axios-0.18.0.js" src="js/vue.js"></script>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>
            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index+1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="gender==1">男</span>
                    <span v-if="gender==1">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.emtrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            emps[]
        },
        methods: {
            
        },
        mounted () {
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
                this.emps=result.data.data;
            })
        }
    });
</script>
</html>

三.前端工程化

1.（早期）前后端混合开发：前端+Java--后端功能+数据库问题：沟通成本高+分工不明确+项目不便管理且不便维护扩展

2.后端：了解前端加以分析并得以修改+熟悉服务器开发

3.（现在）前后端分离开发：开发好的前端工程与后端程序进行交互两者相互独立开发遵守某种规范：定义在专门的文档当中---文档--接口文档（指的是一个业务功能）--添加员工删除员工

4.基于接口文档进行开发：接口文档描述了这个接口在请求的时候需要传递什么参数后端接收前端传递来的参数后端给前端

响应对应的数据前端再进行解析如果前端后端都遵循了同一份接口文档--最后开发出来的前端工程和后端工程可以无缝集成在一起。

5.接口文档如何去维护？在线方式（在线文档接口管理平台）和离线方式（word Markdown Excel）

6.要开发功能：（1）需求分析（2）定义API接口文档：写明请求的URL地址，请求方式，请求参数以及响应的结果

四.接口文档的管理平台YAPI

1.

//配置全局安装路径

//安装成功

五.Vue项目

1.在桌面新建文件夹vue，在上方地址栏输入cmd，打开终端输入vue ui调出图形化界面

Tomcat--默认端口8080

如何更改端口号？

在devServer下修改端口号

保存之后，在下方终端：ctrl+C

重新运行，发现端口号已发生改变

六.Vue项目开发流程

此为vue项目默认的首页index.html

import---引入模块

与import对应--export--将对象或函数导出为模块

将当前目录下的App.vue导入

//在index.html中可以找到

以.vue结尾---vue的组件文件

div是template中的根标签

template用来定义html代码----相当于vue中的视图部分

script中--定义的是js代码

style中--定义css样式

-------------含义：将定义的对象导出去---------然后在别的地方导入import

定义message数据模型：

-----------------省略写function

-----------展示数据模型中的数据