JavaWeb学习Day03 Ajax、Vue-cli和Element组件库

最新推荐文章于 2024-07-22 14:10:07 发布

李帅朋

最新推荐文章于 2024-07-22 14:10:07 发布

阅读量970

点赞数 23

文章标签：学习 ajax 前端

本文链接：https://blog.csdn.net/2301_79295255/article/details/140440836

版权

一、Ajax

（一）Ajax介绍

Ajax(Asynchronous JavaScript And XML)，异步的JavaScript和XML。可以通过异步交互的方式从后端获取数据。

同步交互与异步交互：

同步交互：浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。比如，我们在打开一个网页时，只有等到页面加载完成我们才能进行后续操作，这种方式就为同步交互。

异步交互：浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。比如，我们在搜索框中输入内容的过程中，下面的联想数据也一直在变，但页面的其余部分并没有改变，这种方式就是异步交互方式。

（二）原生Ajax

原生Ajax请求有如下三步：

<!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>
<body>
    <!-- 设置一个按钮，单击后可获得数据 -->
    <input type="button" value="请求数据" onclick="getData()">

    <!-- 请求的数据放在此标签中 -->
    <div id="div1"></div>
</body>

<script>
    
    function getData(){
        //1.创建XMLHttpRequest对象，用于和服务器交换数据，也是原生Ajax请求的核心对象，提供了各种方法
        var xmlHttpRequest = new XMLHttpRequest();

        //2.调用对象的open()方法设置请求的参数信息，例如请求地址，请求方式。然后调用send()方法向服务器发送请求
        xmlHttpRequest.open('GET', 'http://localhost:10010/emp/list');
        xmlHttpRequest.send();

        //3.获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是一个正确的Http请求，没有错误
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){

                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;

            }
        }


    }
</script>
</html>

点击按钮后，数据请求成功：

（三）Axios

我们可以感觉到上面的原生Ajax非常繁琐，下面我们要讲一下axios，它是对Ajax的封装，更加简便。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 演示</title>

    <!-- 引入axios文件 -->
    <script src="js/axios-0.18.0.js"></script>
</head>

<body>

    <input type="button" value="get" onclick="get()">
    <input type="button" value="post" onclick="post()">

</body>

<script>

    function get() {

        // 发送get请求
        axios({
            method: "get",
            url: "http://localhost:10010/emp/list"
        }).then(function (resp) {
            console.log(resp.data);
        })
        
    }

    function post(){

        // 发送post请求
        axios({
            method:'post',
            url:"http://localhost:10010/emp/deleteById",
            data:"username=zhangsan"
        }).then(function(resp){
            console.log(resp.data);
        })
    }
    
</script>

</html>

其中：

method用来设置请求方式；

url是资源的请求路径。get方式中需要将请求参数拼接到url后面，格式为：url?参数名=参数值&参数名=参数值。

data是作为请求体被发送的数据，当请求方式是post时，请求参数就作为data的值发送。

then()中需要传递一个回调函数，当响应成功时会调用该函数，函数中的变量是响应数据封装成的对象，resp.data即为响应的数据

其实axios还提供了一些方法，进一步简化了我们的操作：

上面方括号里面的内容可以有（由请求参数时）也可以没有（没有请求参数时）。

所以我们的get和post请求方式就可以用如下的形式：

    axios.get("http://localhost:10010/emp/list").then(function (resp) {
        alert(resp.data);
    })

    axios.post("http://localhost:10010/emp/list","username=zhangsan").then(function (resp) {
        alert(resp.data);
    })

（四）案例

将请求后端的数据以表格的形式展示。

请求的数据如图，：

根据上图，假定我们写的代码中，resulst是请求数据封装成的对象，所以result.data即为上图中的数据，而我们需要的是数据中数组data中的数据，即result.data.data

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 案例</title>

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

<body>

    <div id="app">
        <table border="1px" 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>
                    <!-- 将src与emp.image绑定 -->
                    <img v-bind:src="emp.image" width="70px" height="50px">
                </td>

                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>

                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>

            </tr>


        </table>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            emps: []
        },
        mounted() {
            axios.get('http://localhost:10010/emp/list').then((result) => {
                this.emps = result.data.data;//因为我们还要把数据以表格的形式展示，所以我们需要将请求的数据赋值给emps
            })
        },
    })
</script>

</html>

显示效果：

二、前端工程化

我们以前的开发中存在以下缺点，首先我们每次编写代码都是从零开始，比较麻烦；其次每个组件之间的复用性不好；最后没有统一的目录规范，不方便维护。

所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点：

模块化：将我们写的js、css都形成一个个的模块；

组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理；

规范化：使所有开发人员都遵守一个相同的开发规范；

自动化：项目的构建、测试、部署都是自动完成；

（一）Vue-cli

我们要完成以上的要求可以使用Vue官方提供的脚手架Vue-cli，它提供的功能有：统一的文件目录、本地调试、热部署、单元测试和集成打包上线。其中热部署的意思是，在修改代码时，页面不需要重新加载，而是会随着代码的改变而改变。

要想使用Vue-cli，我们需要先配置一下运行环境安装Node JS，就好比我们运行java代码要配置jdk一样。（配置、安装过程略）。

用VScode打开我们的创建的项目，目录结构如图：

项目运行方法：

方法一：通过vscode提供的图形界面直接点击运行

方法二：通过命令行的方式

直接基于cmd命令窗口，在vue目录下，执行输入命令npm run serve即可，如下图所示：

运行结果如图：

public中的index.html是我们访问的首页，但是我们发现index.html中仅有少量的代码，却可以显示出这么丰富的内容，下面我们来分析一下：

我们将App.vue中的代码更改为如下：

<template>
  <div id="app">
    {{message}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

浏览器中的页面变为：

三、Vue组件库Element

Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如超链接、按钮、图片、表格等等。官网地址：https://element.eleme.cn/#/zh-CN

Element的使用：

npm install element-ui@2.15.3//使用该命令安装组件库

具体操作如下图所示：

然后我们需要在main.js这个入口js文件中引入ElementUI的组件库，其代码如下：

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

至此有关Element的配置已经完成。

我们如果要使用组件的话，可以在src下面创建一个.vue文件：

例如我们创建一个ElementView.vue初始代码为:

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>


我们还要在App.vue中引入ElementView.vue文件，App.vue中的代码如下：
<template>
  <div id="app">
    
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/Element/ElementView.vue'
export default {
  components: { ElementView },
  
}
</script>
<style>

</style>

下面我们要在页面中显示button组件：

1.首先我们在官网中找到对应组件的代码，复制到ElementView.vue的template部分：

将上图的代码复制，

代码如下：

<template>

    <!-- button按钮 -->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

</template>

<script>
export default {

}
</script>

<style>

</style>

效果如下图：

李帅朋

关注

23
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习Day03 Ajax、Vue-cli和Element组件库

Ajax(Asynchronous JavaScript And XML)，异步的JavaScript和XML。可以通过异步交互的方式从后端获取数据。同步交互与异步交互：同步交互：浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。比如，我们在打开一个网页时，只有等到页面加载完成我们才能进行后续操作，这种方式就为同步交互。
复制链接

扫一扫