两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术 Day1

2024-07-09 前端 0

黑马程序员前端AJAX入门到实战全套教程，包含学前端框架必会的（ajax+node.js+webpack+git），一套全覆盖 Day1

你好,我是Qiuner. 为帮助别人少走弯路和记录自己编程学习过程而写博客

这是我的 github https://github.com/Qiuner ⭐️

gitee https://gitee.com/Qiuner 🌹

如果本篇文章帮到了你不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^)

想看更多那就点个关注吧我会尽力带来有趣的内容 😎

本人已经做过多个前后端项目，这些技术也早就学过了，此次重学，一为服务其他人，让别人少走弯路。二为查缺补漏

本文档是黑马程序员公开学习视频的学习笔记，记录了bug、作业等。

官方笔记、资源在 https://pan.baidu.com/s/1Gd-ANtinWR7kh8TPTto10A&pwd=9987
官方接口文档在欢迎使用 - B站-AJAX和黑马头条-数据管理平台 (apifox.com)
在这篇文档中，我总结了一些思路与如做到与视频同步的办法
封面背景颜色是淡茜红

大致课程安排

AJAX

达到视频中效果课使用的插件

安装插件

 Preview on Web Server

使用插件

注意视频中其实是开了一个浏览器，然后实现一半一半屏幕

然后通过open in browser来

快速入门小案例

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>axios基本使用</title></head><body>  <p class="my-p"></p></body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>  axios({    url:'http://hmajax.itheima.net/api/province'  }).then(result => {    console.log(result)    console.log(result.data.list)    document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')})</script></html>

URL介绍

对资源

axios为什么这么写介绍

使用.then的方式来进行处理返回结果，result就是请求成功后服务器返回的东西

axios参数

axios查询参数

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>axios基本使用</title></head><body>  <p class="my-p"></p></body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({  url:'http://hmajax.itheima.net/api/city',  params:{    pname:'福建省'  }}).then(result =>{  console.log(result.data.list)  document.querySelector('p').innerHTML = result.data.list.join('<br>')})</script></html>