两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术的个人学习心得、作业及bug记录 Day1

news2024/11/16 17:38:18

黑马程序员前端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>