JavaWeb学习第八天之web前端开发

最新推荐文章于 2024-09-14 21:53:48 发布

丹柒七

最新推荐文章于 2024-09-14 21:53:48 发布

阅读量780

点赞数 8

文章标签：学习前端

本文链接：https://blog.csdn.net/m0_75213259/article/details/135989680

版权

本文介绍了Ajax的基本概念和使用原生XMLHttpRequest进行异步数据交换的过程，同时对比了Axios的封装简化。文章还涵盖了前后端分离开发、Vue.js应用的开发流程、目录结构和热部署功能的讲解。

摘要由CSDN通过智能技术生成

Ajax-介绍

概念

Asynchronous JavaScript and XML，异步的JavaScript和XML。

作用

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

ps 同步与异步操作的区别

原生Ajax

准备数据地址：https://jsonplaceholder.typicode.com/posts

创建XMLHttpRequest对象：用于和服务器交换数据。

向服务器发送请求

获取服务器响应数据。

Ajax-AXIOS

介绍

Axios对原生的Ajax进行了封装，简化书写，快速开发。

入门

引入Axios的js文件
使用Axios发送请求，并获取响应结果

相关代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 确保页面在各种设备上正确渲染和触屏缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩表</title>
    <!-- 引入Vue库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入Axios库，用于发送HTTP请求 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        /* CSS样式定义 */
        table, th, td {
            border: 1px solid black; /* 表格边框样式 */
            border-collapse: collapse; /* 表格边框合并 */
        }
        th, td {
            padding: 10px; /* 单元格内边距 */
            text-align: left; /* 文本对齐方式 */
        }
    </style>
</head>
<body>

<div id="app">
    <!-- Vue实例的挂载点 -->
    <h2>学生成绩表</h2>
    <table>
        <!-- 表格头部 -->
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        <!-- 表格主体，使用v-for指令动态渲染每一行数据 -->
        <tbody>
            <tr v-for="post in posts" :key="post.id">
                <td>{{ post.id }}</td> <!-- 使用花括号插值显示数据 -->
                <td>{{ post.title }}</td>
                <td>{{ post.body }}</td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    // 创建Vue实例
    new Vue({
        el: '#app', // 指定挂载点为id为'app'的DOM元素
        data: {
            posts: [] // 初始化posts数组，用于存储从API获取的数据
        },
        mounted() {
            // 生命周期钩子，在实例被挂载后调用
            this.fetchPosts(); // 调用fetchPosts方法获取数据
        },
        methods: {
            fetchPosts() {
                // 定义方法以使用Axios从API获取数据
                axios.get('https://jsonplaceholder.typicode.com/posts')
                    .then(response => {
                        this.posts = response.data.slice(0, 10); // 将响应数据的前10项赋值给posts
                    })
                    .catch(error => {
                        console.error("发生错误：", error); // 错误处理
                    });
            }
        }
    });
</script>

</body>
</html>

这段代码构建了一个简单的Web页面，用于展示从外部API获取的数据。它使用Vue.js作为前端框架和Axios作为HTTP客户端。以下是代码的结构和逻辑解释：

HTML结构

在<head>部分引入了Vue.js和Axios的CDN链接，确保了这两个库在页面中可用。还包含了一些基本的元数据和样式定义。
<body>部分有一个`div`元素，其`id`为`app`。这个div是Vue实例的挂载点，Vue实例将控制这个元素内的DOM。
在div内部，有一个<h2>标题和一个<table>元素。表格的头部（<thead>）定义了三列：学号、姓名、成绩。表格的主体（<tbody>）将用于动态展示从API获取的数据。

Vue实例

在<script>标签中，创建了一个新的Vue实例。`el: '#app'`告诉Vue实例要控制哪个DOM元素（即ID为`app`的那个`div`）。
data属性定义了一个名为`posts`的空数组，它将用于存储从外部API获取的数据。
mounted是一个生命周期钩子，它在Vue实例挂载到DOM后自动执行。在这个钩子函数中，调用了fetchPosts方法来从外部API获取数据。
methods对象定义了fetchPosts方法。这个方法使用Axios 向`https://jsonplaceholder.typicode.com/posts`发送GET请求。`.then`回调函数处理成功的响应，将获取的数据（这里是前10项）赋值给`posts`数组。`.catch`回调函数处理可能发生的错误。

数据渲染

在表格的主体（<tbody>）中，使用了Vue的v-for指令来遍历posts数组中的每个项（每个帖子）。对于数组中的每个项，都会渲染一个表格行<tr>，其中包含帖子的id、title和body。
使用Vue的双花括号语法（{{ }}）来插值表达式，动态地将帖子的数据插入到表格单元格中。

注意点

尽管这个示例展示了如何从外部API获取数据并在Vue应用中渲染这些数据，但使用的API（`jsonplaceholder.typicode.com`）并不提供成绩表类型的数据。这里的数据（帖子的`id`、`title`和`body`）只是为了演示目的。
在实际应用中，可能需要根据实际使用的API调整数据属性和表格列，以确保正确地展示数据。

前后端分离开发

在介绍前后端分离开发之前，先简单介绍一下前后端混合开发：

前后端混合开发机需要使用前端的技术栈来开发前端的功能，又需要使用java技术栈来编写后端的功能实现，还需要操作数据库。此时前后端代码都写在一个工程当中（不过这个时候也还存在少量的前端工程师用于开发静态的html页面，然后将开发好的html页面提供给后端开发人员）。这种开发方式有几个比较显著的缺点：；1.沟通成本较高（后端开发人员在使用html模版进行开发的时候一旦发现模版存在问题就得反馈给前端让前端进行修改前端修改成功后才能再交给后端人员进行使用）。2.分工不明确（后端开发人员即需要开发前端的功能实现还需要开发服务器端的功能）3.项目不便于管理也不便于后期的维护和扩展。

前后端分离开发指的是：前端由前端开发人员负责开发，后端由后端开发人员进行开发。二者通过接口文档保持开发的一致性。

具体开发步骤如下：

需求分析
根据需求分析进行定义接口文档（API接口文档）。
前后端开发人员并行开发（遵守规范）
测试（前端，后端）
最后进行前后端的联调测试（当前后端都开发完毕后通过前端调用后端进行联调测试）

前端工程化

前端开发的“四化”：模块化（JS,CSS），组件化（UI结构，样式，行为），规范化（目录结构，编码，接口），自动化（构建，部署，测试）。

这里我们将前端工程化所需的环境（vue脚手架安装成功后）创建一个vue项目。

这里我们将简单介绍一下Vue项目的目录结构

Vue项目-目录结构

Vue项目是基于Vue脚手架创建出来的工程，有着标准的目录结构，如下：

了解了这些，我们可以在vs code中导入Vue的脚手架文件，并通过vs code的图形化界面来运行Vue项目。同时我们也可以根据所学的知识修改该Vue项目的入口页面根组件（如将HOME字样换为Vue HOME），通过这个小小的修改我们会发现vue项目的一个特性：热部署功能。

Vue项目的热部署功能，也称为热重载或热更新（Hot Module Replacement，HMR），是一种在开发过程中实时更新应用程序的技术，无需进行完整的页面刷新。这意味着当我们在开发Vue项目时，可以立即看到代码变更的效果，而不需要手动刷新浏览器页面。

热部署的工作原理如下：

1. 监测代码变化：开发工具（如Webpack、Vue CLI）会监测你的源代码文件是否有变化。一旦检测到文件改动，就会立即进行下一步。

2. 模块更新：开发工具会构建那些发生变化的模块，并将更新的模块发送到浏览器端。

3. 替换模块：在浏览器端，特定的HMR逻辑会接收到更新的模块，并替换掉旧的模块，而无需刷新整个页面。

4. 保持应用状态：HMR的一个关键特点是它能够保持应用的状态。这意味着，例如，如果你正在编辑一个Vue组件的样式或逻辑，应用的其他部分（如用户数据输入）将不会受到影响，这极大地提高了开发效率和体验。

Vue项目的开发流程

这里我们先介绍几个语句：

export：将对象或函数导出为模块。

import：将相关的模块导入。

接下来我们将通过Vue脚手架中的main.js部分来解释Vue应用的启动。

已知源代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

其中

import Vue from 'vue'

这行代码导入了Vue库。在使用Vue开发项目时，首先需要引用Vue库，以便于能够使用Vue提供的功能和API。

import App from './App.vue'

这行代码导入‘App.vue’文件。‘App.vue’是一个单文件组件，通常是作为整个Vue应用的根组件来使用的。它包含了应用的模版，脚本以及样式。

import router from './router'

这行代码导入了路由配置。‘./router’是一个目录或文件，通常用于定义应用中的路由信息，，即不同的URL应该显示应用中的哪个组件。使用Vue Router库可以很容易地在Vue应用中添加路由功能。

Vue.config.productionTip = false

这行代码通过设置‘Vue.config.productionTip = false’关闭了Vue在启动时在控制台显示的生产提示。这是一个在开发阶段有用的提示，但是在生产环境中通常会关闭。

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这段代码是Vue应用的启动核心。解释如下：

‘new Vue（{...}）’创建了一个新的Vue实例。
‘router’：将导入的路由配置添加到Vue实例中。这样做可以让整个应用使用路由功能，从而根据不同的URL显示不同的内容。
‘render: h => h(App)’这是一个渲染函数，用于渲染根组件。‘h’是‘createElement’的别名，一个用于创建虚拟DOM元素的函数。‘h（App）’表示创建一个‘App’组件的虚拟DOM节点。这种写法是在Vue 2.x版本引入的，用于替代‘template’属性或‘e1’属性指定的模版。
‘.$mount('#app')’：这个方法用于将Vue实例挂载到DOM中。
‘#app’是指定的挂载点的选择器，通常是index.html文件中的一个元素的id。这意味着Vue实例将其输出（即App组件的内容）渲染到页面上id为‘app’的元素内。

综上所述，这段代码实际上就是初始化了一个Vue应用，设置了路由，定义了根组件，并将Vue实例挂载到HTML页面的特定元素上。这是Vue应用运行的起点，所有的组件渲染和路由跳转都是从这里开始。