1. Web前端开发-学习笔记

该笔记为笔者学习黑马程序员Web开发时做的笔记，便于知识遗漏时能及时查看查漏补缺。如果能帮助到您，那便更好了。

1.1 HTML

<span>标签是无实际意义的标签，仅用来将行内元素归类

   <span>行内第一段话。</span>  <span>行内第二段话。</span>
 <!-- 行内第一段话。行内第二段话。 -->

 ：HTML中的空格

<form>表单标签

包含method：表单提交方式，get和post两种 面试题

0. get：将表单数据直接拼接到浏览器的url地址后面，如https://…?username=Tom&passwd=123，但对表单的大小有限制
1. post：表单数据在请求体中携带，对表单的大小没有限制

1.2 CSS

CSS与HTML标签绑定的三种方式——CSS选择器

0. 元素选择器：所有使用这个元素的地方都会遵守这个样式

    <p> 这是一个段落 </p>
    ​
    // 所有有<p>标签的段落都是这个样式
    p{
      ...
    } 
   

1. id选择器（一个文件该id只能出现一次！！！ ）

    <p id="paragraph"> ... </p>
    ​
    #paragraph{ ... }
   

2. 类选择器（可给该文件的多个地方设置相同的class！！！ ）

    <p class="paragraph"> ... </p>
    ​
    .paragraph{ ... }
   

！！！注意：优先级：id选择器 > 类选择器 > 元素选择器

line-height：设置段落行距

text-align：规定元素内文字水平对齐方式：left, center, right

盒子模型

页面中的所有元素（即标签）可以视为一个盒子/矩形，便于布局

一个盒子是不包含外边距margin的，外边距相当于是隐藏的，用于控制与其它盒子的间隙

1.3 JavaScript

1.3.1 输出语句

0. alert("")：浏览器弹出框
1. document.wrtite("")：写入HTML，在浏览器页面展示
2. console.log("")：写入浏览器控制台

1.3.2 变量

用var来声明 全局变量，这个全局变量可以被重复定义被覆写

js是弱类型语言，同一个变量可以存储不同类型的值

 var a = 20
 a = "hello"

用let声明局部变量，只在代码块内有效（{}即为代码块），且不允许重复声明

用const声明只读常量，const pi = 3.14

1.3.3 运算符

0. ==会进行类型转换，如123 == ‘123’ 会将类型统一，认为是true
1. ===全等运算符，不会进行类型转换，123 === ‘123’ false

1.3.4 类型转换

0. 字符串转数字 parseInt('123')，若传入的不是数字的字符串，则返回NaN（Not a Number）

1.3.5 函数

 // 定义方法1：
 function funcName(param 1, param 2, ...){}

 // 定义方法2：
 var funcName = function(param 1, param 2, ...){}

1.3.6 JS对象

1. Array

 // 定义1：
 var 变量名 = new Array(1,2,3,4)
 // 定义2：
 var 变量名 = [1,2,3,4]

Array数组对象的长度可变！

 var arr = [1,2,3,4]
 arr[10] = 50
 console.log(arr[50]) // 50
 // arr[4...8]: undefined

Array数组对象的类型也可变！

 var arr = [1, 'a', true]

Array数组的遍历：

0. for循环

1. forEach遍历数组中有值的元素，undefined值就不会被遍历

    var arr = [1,2,3,4,5]
    arr.forEach(// 参数接收一个函数，用来处理forEach取出的每一个元素)
    arr.forEach( function(e){
      console.log(e)
    } )
    /************************************************/
    // 上述函数没有名字，可以简化：使用箭头函数简化函数定义
    arr.forEach( (接收forEach的参数)=>{
      // 函数体
    } )
    arr.forEach( (e)=>{
      console.log(e)
    } )
   

添加（多个）元素

arr.push(6,7,8)

删除（多个）元素

arr.splice(param 1, param 2)

param 1：从哪个下标开始删除

param 2：删除几个元素

2. String

定义：

 // 定义1：
 var str = new String("hello")
 // 定义2：
 var str = "hello"

方法：

 var str = "hello"
 // 1.charAt() 返回指定下标的字符
 console.log( str.charAt(3) ) // l
 ​
 // 2.indexOf() 检索字符串中某个字符的下标，若传入的是字符串，则检索第一个字符的小标
 console.log( str.indexOf('el') ) // 1
 ​
 // 3.trim() 去除字符串两边的空格，返回一个新的字符串
 var newStr = str.trim()
 ​
 // 4.substring() 提取字符串中两个指定下标之间的字符串
 var subStr = str.substring(start, end) // start--开始下标；end--结束下标（含头不含尾）

3. JSON

0. JS的自定义对象

    var 对象名 = {
      属性1：值,
      属性2：值,
      属性3：值,
      函数1：function(形参列表){...},
      函数2(形参列表){...}.
    };
    对象名.属性
    对象名.函数()                   
                         
    var user = {
      name: "Tom",
      age: 20,
      gender: "male",
      eat: function(){
        console.log("吃饭啦！！！")
      },
      drink(){
        console.log("吨吨吨！！！")
      },
    }
    user.name
    user.eat()                     
   

1. JSON（JavaScript Object Notation JS对象标记法，网络交互的数据载体）

    {
      "name": "Tom",
      "age": 21,
      "male": true,
    }
   

    // 定义一个JSON字符串 '{...}'注意单引号
    var userStr = '{
      "name": "Tommy",
      "age": 21,
      "male": true,
      "schools":["科大实验", "石室中学", "东大"],
      "subObject": {
        ...
      },
    }'
    ​
    // 将JSON字符串转换为JSON对象——JSON.parse()
    var jsonObj = JSON.parse(userStr)
    console.log(jsonObj.name, jsonObj.schools[0], ...)
    // 将JSON对象转换为JSON字符串——JSON.stringify()
    var jsonStr = JSON.stringify(jsonObj)            
   

4. BOM

浏览器对象，将浏览器的各个组成部分封装为对象(Browser Object Model)

BOM对象的组成：（需要了解的只有两个）

0. Window对象（将浏览器窗口封装为对象）

   

    window.setInterval(function(){...}, time/ms) // 每隔time时间就执行一次函数
    ​
    window.setTimeout(function(){...}, time/ms) // time毫秒之后才执行这个函数（只执行一次）
   

1. Location对象（将地址栏封装为对象）

   

    console.log(location.href) // 直接获取地址栏地址
    ​
    location.href = "..." //设置地址栏地址
   

5. DOM

文档对象，将每个HTML标签封装为一个对象(Document Object Model)

通过修改DOM的属性，可以实现修改页面

1.4 Vue

Vue：渐进式JavaScript框架

左下图：

View即为视图层，只负责页面数据的展示

Model即为模型层，只包含纯JS对象数据

Vue通过DOM Listeners来监听View层的DOM元素的变化，传递给Model层

通过Data Bindings来将Model层的数据绑定到View层的DOM元素上

从而实现了数据的双向绑定

1.4.1 Vue常用指令

1. v-bind

 // 为HTML标签绑定属性值，如href, css样式
 <script>
 ...
 data:{
   myURL:"...",
 }
 ...
 </script>
 ​
 // 将标签里的myURL绑定为data中的myURL
 <a v-bind:href="myURL">传智教育</a>
 <a :href="myURL">传智教育</a>  // 这里v-bind可以省略，直接写一个:

2. v-model

 // 为表单元素创建双向数据绑定
 <script>
 ...
 data:{
   myURL:"...",
   formContent: null,
 },
 methods:{}
 ...
 </script>
 ​
 <input v-model="formContent">  // 输入框的输入值将与data中的formContent进行双向绑定

3. v-on

 // 为HTML标签绑定事件
 <script>
   data:{},
   methods:{
     clickhandler: function(){},
   }
 </script>
 ​
 <button v-on:click="clickHandler()">
   提交
 </button>
 ​
 //v-on:可以简写为@
 <button @click="clickHandler()">
   提交
 </button>

4. v-if, v-else-if, v-else

条件性的渲染元素，判断为true时渲染，为false时不渲染

 <span v-if="age < 35">年龄小</span>

5. v-show

通过控制该元素的CSS display样式来显示隐藏(display:none)元素

当元素需要频繁的显示和隐藏时，推荐使用v-show，以避免频繁地渲染元素

6. v-for

列表渲染，遍历容器的元素或者对象的属性

 <srcipt>
   ...
   data:{
     ...
     addrs:['北京', '上海','广州','深圳','成都'],
   },
   ...
 </srcipt>
 ​
 <div v-for="item in addrs"> {{item}} </div> // item名字随便起
 // 或者
 <div v-for="(item, index) in addrs">{{index+1}}: {{item}}</div> // 注意顺序

1.4.2 Vue生命周期

Vue生命周期——我们通过创建一个Vue对象来使用Vue，Vue对象有生命周期。

每到达一个新的生命周期，会自动触发一个生命周期方法（钩子方法）

生命周期阶段	释义
beforeCreate	Vue对象被创建前
created	Vue对象被创建后
beforeMount	Vue对象被挂载到DOM元素前
mounted	Vue对象被挂载到DOM元素后
beforeUpdate	DOM元素的数据被修改，数据模型还未更新时；数据模型被修改，DOM元素的数据还未更新时
updated	更新后
beforeDestroy	Vue对象被销毁前
destroyed	Vue对象被销毁后

主要掌握mounted生命周期

通常在mounted()方法里面发送消息给服务器，或从服务器获取数据

 <script>
   new Vue({
     el:"#app",
     data:{...},
     mounted(){
       console.log("挂载完毕，请求服务器数据...")
     },
     methods:{...},
   })
 </script>

1.5 Ajax

概念： Asynchronous JavaScript And XML，即异步的JavaScript和XML（XML标记语言，用于存储数据）

作用：

• 数据交换：通过Ajax向服务器发送请求，并获取服务器响应数据
• 异步交互：在不重新加载整个页面的情况下，与服务器交互并更新部分网页。如搜索引擎键入不同关键字有不同的搜索推荐、登录页面显示用户是否存在

1.5.1 异步交互

1.5.2 原生Ajax

1.5.3 Axios

对原生Ajax的封装，简化使用

 // 先引入axios
 axios({
   method: "get",
   url: "..."
 }).then( (result)=>{
   // 成功回调函数
   console.log(result.data)
 } )
 ​
 // 或者
 axios.get("这里写get的url").then( (result)=>{
   // 成功回调函数的内容
 } )
 ​
 // 这里用到了箭头函数简化函数写法

 // 先引入axios
 axios({
   method: "post",
   url: "...",
   data: "要发送的数据"
 }).then( (result)=>{
   // 成功回调函数
   console.log(result.data)
 } )
 ​
 // 或者
 axios.post("这里写post的url", "post的内容").then( (result)=>{
   // 成功回调函数的内容
 } )
 ​
 // 这里用到了箭头函数简化函数写法

Vue中axios的使用：

在项目目录下安装：npm install axios;

需要使用axios时，导入：import axios from 'axios';

1.6 前端工程化

1.6.1 前后端分离的开发模式

1.6.2 前端工程化

1.6.3 Vue脚手架

用于快速生成一个Vue项目，提供统一的目录结构，本地调试，热部署等功能

依赖环境：NodeJS JavaScript运行环境，就像Java运行需要jre(java runtime environment)一样

0. vite
1. vue-cli
2. 。。。

1.7 Vue组件库Element

1.8 Vue路由（前端路由）

前端路由： URL中的hash（#号）与组件之间的对应关系。比如浏览器地址栏输入.../#/user/login跳转到登录页面；.../#/user/homepage跳转到主页

功能： 实现点击侧边栏或其它按钮，页面部分区域跳转（本质上是点击按钮，改变了url地址）

vue-rouer在Vue中使用：

以下为黑马项目的参考

！！！建议参照暑期实训hotpot的路由使用

0. 项目目录下：npm install vue-router@版本号（如3.5.1）
1. 定义路由表：在/src/router目录下，创建index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 ​
 Vue.use(VueRouter)
 ​
 const routes = [
   {
     path: '/department',
     name: 'department',
     component:() => import('../views/department/DeptView.vue')
   },
   {
     path: '/userlist',
     name: 'userlist',
     component:() => import('../views/department/userlist.vue')
   },
 ]
 ​
 const router = new VueRouter({
   routes
 })
 ​
 export default router

3. 在main.js中导入router

    import router from './router'
    ​
    ...
    ​
    new Vue({
      router,
      ...
    }).$mount('#app')
   

1.9 打包部署

0. 打包：项目下运行npm run build，会生成dist文件夹，后续将dist文件夹部署在服务器上

1. 将文件夹部署在nginx

   

直接将dist文件夹中的内容放入html文件夹

双击nginx.exe文件很多时候没反应，是因为80端口被占用了，可在logs/error.log查看报错信息

在/conf/nginx.conf中修改nginx的端口为90后，再双击exe文件

无反应，但是可在进程管理器中查到nginx进程

现在浏览器访问localhost:90即可访问到部署成功的前端项目