Day3-Ajax-Axios-前端工程化

已于 2023-08-30 15:06:22 修改
阅读量53 收藏
点赞数
分类专栏： JavaWeb 文章标签： ajax okhttp 前端
于 2023-08-28 22:26:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rc4gyyc/article/details/132536148
版权

一、Ajax

  • 概念：Asynchronous JavaScript And XML,异步的JavaScript和XML
  • 作用：
    • 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
    • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。在这里插入图片描述

同步和异步

在这里插入图片描述
在这里插入图片描述

Axios在这里插入图片描述

Axios入门

在这里插入图片描述
在这里插入图片描述

案例在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="vue.js"></script>
</head>

<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 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 new Vue({
        el: "#app",
        data() {
            emps : [];
        },
        mounted() {
            //发送异步请求，加载数据
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list".then(result)=>(
                this.emps=result.data.data;
            ))
        },
    });
</script>
</html>

二、前端工程化

早期开发模式：前后端混合开发
在这里插入图片描述

1. 前后端分离开发 （当前最为主流的开发模式）

在这里插入图片描述

1.1接口文档-示例

根据ID查询员工

1. 基本信息

请求路径：/emp

请求方式：GET

接口描述：该接口用于根据ID查询员工信息

2. 请求参数

参数说明：

参数名类型是否必须备注
idnumber必须员工ID

请求样例：

GET	http://localhost:8080/emp?id=15
3. 响应数据

参数格式：application/json

参数说明：

名称类型是否必须备注其他信息
codenumber必须响应码, 1 成功 , 0 失败
msgstring非必须提示信息
dataobject必须返回的数据
|- idnumber非必须id
|- namestring非必须姓名
|- gendernumber非必须性别 , 1 男 ; 2 女
|- imagestring非必须图像
|- jobnumber非必须职位
|- entrydatestring非必须入职日期
|- updateTimestring非必须更新时间

响应数据样例：

{
    "code": 1,
    "message": "success",
    "data": {
        "id": 15,
        "name": "谢逊",
        "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
        "gender": 1,
        "job": "班主任",
        "entrydate": "2008-05-09",
        "updatetime": "2022-10-01 12:00:00"
    }
}

前端工程化

在这里插入图片描述

2. 环境准备

在这里插入图片描述

NodeJS安装

2.1

NodeJS下载地址

2.2 选择安装目录

选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）

2.3 验证NodeJS环境变量

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v

2.4 配置npm的全局安装路径

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set prefix "E:\develop\NodeJS"
执行
npm config get prefix
可以确认配置成功

注意：E:\develop\NodeJS 这个目录是NodeJS的安装目录

2.5 切换npm的淘宝镜像

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set registry https://registry.npm.taobao.org

2.6 安装Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli
#安装完成后可以执行：
vue --version
查看版本号，确认安装成功

在这里插入图片描述

3. Vue项目创建

3.1 打开UI界面

在命令行中，执行如下指令：

 vue ui

在这里插入图片描述
在这里插入图片描述

3.2 打开项目管理器

在这里插入图片描述
在这里插入图片描述

3.3 创建项目

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
创建项目的过程，需要联网进行，这可能会耗时比较长的时间，请耐心等待。 windows的命令行，容易卡顿，我们可以虽然敲击一下键盘。

在这里插入图片描述

如果出现如下字样，就说明前端工程已经创建完毕了。
在这里插入图片描述
创建完毕后，就可以直接关闭页面和命令行了，到此工程创建完毕。

4. vue 项目

4.1目录结构

在这里插入图片描述

4.2启动

在这里插入图片描述
#方式一需在资源管理器中勾选npm脚本
在这里插入图片描述

4.3 配置端口

#双击项目中的vue.config.js,补充一下代码

devServer{
	port:7000,
)

在这里插入图片描述

Ciian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Day03-JavaWeb开发-Ajax&Ajax-Axios2&前端工程化&Element&Vue路由&打包部署
weixin_68063226的博客
05-05 403
安装过程见参考文档2.4 前端工程化-Vue项目。
Day03-03：前端工程化
m0_63464979的博客
07-03 131
在之前的前端开发当中，我们需要什么样的资源，我们就在工程当中引入对应的字眼，然后直接使用就可以了。这种结构的工程在开发大型项目的时候会存在很多的问题，比如说我们每一次开发一个功能都是从0开始，多个页面中的组件或者是功能复用性并不好，并且我们的JS文件，图片资源文件没有规范化的存储目录。我们使用了前端工程化以后，使用Vue开发大型项目的时候，我们就需要考虑代码的目录结构、代码的部署和测试等事情。自动化：指的是项目的构建、项目的部署、项目的测试都可以自动化的进行。​ 这些就组成了前端的工程化开发。
Day03-Ajax，前后端分离开发，前端工程化，Vue组件库Element，Vue路由，打包部署
没有人的博客
05-22 559
nodejs安装过程的。
Day03-作业（Axios&ElementUI）
chuanchengdabing的博客
07-31 1633
能够通过Axios发送ajax请求; 能够理解前后端分离的开发模式; 了解前端工程化开发; 能够说出ElementUI的作用; 能够参照ElementUI的官网组件, 适当修改，完成员工列表页面制作; 了解Vue的路由; 了解前端工程的打包部署;
01-ajax-fetch-axios-区别.md
03-31
大厂前端面试题目|# 前端基础知识 HTML CSS JS HTTP 等基础知识是前端面试的第一步，基础知识不过关将直接被拒。本章将通过多个面试题，讲解前端常考的基础知识面试题，同时复习一些重要的知识点。 ## 为何要考察 ...
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
axios-rate-limit:Axios的速率限制
05-11
正在安装yarn add axios-rate-limit用法import axios from 'axios' ;import rateLimit from 'axios-rate-limit' ;// sets max 2 requests per 1 second, other will be delayed// note maxRPS is a shorthand for ...
在vue-cli3中使用axios获取本地json操作
10-15
总的来说，Vue CLI 3配合axios提供了方便的数据获取手段，同时Vue的组件化特性让我们能够灵活地复用和定制组件，满足各种场景的需求。在开发过程中，理解这些基础知识对于提高开发效率和优化用户体验至关重要。
前端-JavaScript-ajax (axios、 promise、git...)
11-19
ajax--ajax原生写法。axios发送请求。promise概念。git版本管理器使用。具体：请求与相应、浏览器和服务器、接口、回调函数、事件循环、宏任务与微任务、form表单提交、serialize插件、JSON、async，await、git仓库...
快速入门了解Ajax
音符犹如代码的博客
07-25 859
上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios。意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML。介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具。下边是两个来自官网的post的请求和get请求的代码。
掌握AJAX技术：从基础到实战
2301_80064376的博客
07-26 877
在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术已经成为一个不可或缺的工具。**它不仅提升了用户体验，还显著提高了网页的动态交互能力**。本文将为初学者详细介绍AJAX技术的基础知识，并通过简单的实例帮助大家快速上手。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 407
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
07-30 191
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 269
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
electron 主进程和渲染进程
qq_21087199的博客
07-29 261
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 436
对于上云api开发学习过程中的错误教训积累总结
前端 axios 封装
清云
07-29 442
前端 axios 封装
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1284
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
前端代码混淆加密（使用Terser、WebpackObfuscator）
最新发布
@Fonden
07-30 224
（注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）② 在 Terser 之后使用 WebpackObfuscator 进行混淆。以此在网上查找到相应工具有：Terser、WebpackObfuscator。① 使用 Terser 进行代码压缩和 source map 生成，② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。压缩代码、变量和函数名混淆、删除未使用代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值