Web开发-前端基础

学Java开发捎带了一点前端开发的东西，放到这里

HTML、CSS

• HTML与CSS就先不看了，有需要现查吧

JS

引入方式

<script>xxx</script>
<script src="xxx.js"></script>,xxx.js中写js代码

基础语法(简单看下)

• 变量定义及初始化

  • JS是弱类型语言，变量可以存储不同类型的值且可以改变。
  • 用var来声明变量，var定义出来的是全局变量，可以重复定义。
  • ES6后可以用let定义变量，但定义的是局部变量，不允许重复声明;
  • ES后使用const定义常量，常量的值不可改变。

• 变量类型

  • number：数字(整数、小数、NaN(Nota Number))
  • string：字符串，单双引皆可
  • boolean：布尔。true，false
  • null：对象为空
  • undefined:当声明的变量未初始化时，该变量的默认值是 undefined
  • 可以用typeof value来查看数据类型（注意typeof null为object）

• 运算符

  • ==会自动进行类型转换，===不会进行类型转换
  • 其他的没啥区别

函数

• 方式一：function 函数名(参数1,参数2){要执行的代码}
• 形参不需要函数类型，因为js是弱类型语言
• 返回值也不需要定义类型，可以在函数内部直接调用return就行
• 方式二：var 变量名=function 函数名(参数1,参数2){要执行的代码}

对象

Array

• 定义及初始化

  var 变量名=new Array(元素列表)；
  var 变量名= [元素列表]；

• 属性

  • length：返回数组中元素的个数

• 方法

  • arr.foreach(函数)：遍历有值的元素，并调用传入的函数。传参可以用Lambda表达式简化。
  • arr.push()：添加元素，并返回新的长度
  • arr.splice(start, count)：从数组中删除元素

String

• 定义及初始化

  var 变量名 = new String("xxx");
  Var 变量名 = "xxx";

• 属性

  • length：返回数组中元素的个数

• 方法

  • charAt(index):返回index处的字符
  • indexOf(str):检索字符串
  • trim():去除字符串两边的空格
  • substring(start,end):提取字符串中两个指定的索引号之间的字符。

• 自定义对象

  • var 对象名={key1:value1, key2:value2, key3:function3}
  • 调用方式：对象名.属性名();

JSON（JavaScript Object Notation）：

• java是通过JavaScript对象标记法书写的文本
• {“key1”:”value1”,”key2”:”value2”,”key3”:”value3”}
• 由于语法简单，层次结构鲜明，现多用于作为数据载体
• 定义: var 变量=‘{“key”:value1}’,value值的类型如下：
  • 数字
  • 字符串(双引号)
  • 逻辑值
  • 数组（方括号）
  • 对象(方括号)
  • null
• 字符串与JSON转换
  • 字符串转JSON：var jsonObject = JSON.parse(str);
  • JSON转字符串： var jsonStr = JSON.stringify(jsonObject);

BOM(浏览器对象模型)

• 允许JS与浏览器进行对话
  • Window:浏览器窗口对象：
    • 获取
      • window.xxx
    • 属性
      • History:对History对象的只读引用
      • Location：用于窗口或框架的 Location 对象
      • Navigator：对 Navigator 对象的只读引用
    • 方法
      • alert()：显示带有一段消息和一个确认按钮的警告框。
      • confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
      • setInterval()：按照指定的周期(以毫秒计)来调用函数或计算表达式。
      • setTimeout()：在指定的毫秒数后调用函数或计算表达式。
  • Navigator：浏览器对象
  • Screen：屏幕对象
  • History：历史记录对象
  • Location：地址栏对象
    • 获取
      • window.location
    • 属性
      • href：设置或返回完整的url，并进行跳转

        DOM(文档对象模型)

• CoreDom：所有文档类型的标准模型
  • Document：整个文档对象
    • document.getElementById(‘h1’);
    • document.getElementsByTagName(‘div’);
    • document.getElementsByName(‘hobby’);
    • document.getElementsByClassName(‘cls’);
    • 其他的自己查手册
  • Element：元素对象
  • Attribute：属性对象
  • Text：属性对象
  • Comment：注释对象
• XML DOM-XML文档的标准模型
• HTML DOM-HTML文档的标准模型
  • Image：<img>
  • Button：<input type=‘button’>

事件监听

• 事件：HTML事件是发生在HTML元素上的事情，比如按钮点击、鼠标移动到元素上、按下键盘按键
• 事件监听：JavaScript可以在事件被侦测到时执行代码
• 事件绑定：
  • 通过HTML标签中的事件属性进行绑定:

    <input type="button" onclick="fun1()" value="xxx">\

  • 通过DOM元素进行属性绑定

    <input type="button" id="btn" value="xxx">
    <script>document.getElementById("btn").onclick=fuc1{}</script>

• 常见事件
  • onclick()：鼠标单击事件
  • onblur()：元素失去焦点
  • onfocus()：元素获得焦点
  • onload()：某个页面或图像被完成加载
  • onsubmit()：当表单提交时触发该事件
  • onkeydown()：某个键盘的键被按下
  • onmouseover()：鼠标被移到某元素之上
  • onmouseout()：鼠标从某元素移开

Vue

简介

• Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
• 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
  • Model：数据模型，Plain JavaScript Objects
  • View：只负责数据展示
  • ViewModel：View和Model通信的桥梁
• 官网：https://cn.vuejs.org/

快速入门

• el：绑定元素与vue组
• data：存储变
• methods：创建方
• mounted()等生命周期方法：在不同的声明周期执行不同的方法。

常用指令

• v-bind：为HTML标签绑定属性值，如设置href，css样式等，变量必须要在数据模型中声明

  <a v-bind:href="url">测试链接1</a>
  <a :href="url">测试链接2</a>

• v-model：为表单元素上创建双向数据绑定，变量必须在数据模型中声明

  <input type="text" v-model="url">

• v-on：为HTML标签绑定事件, 此处的click可以是其他的事件名

  <input type="submit" v-on:click="func1()">
  <input type="submit" @click="func1()" value="button2">

• v-if/v-else-if/v-else：条件下的与渲染某元素，判定为true时渲染，否则不渲染

  <input type="text" v-model="age">
  <span v-if="age<=30">年轻人</span>
  <span v-if="age>30 && age<59">中年人</span>
  <span v-if="age>=60">老年人</span>

• v-show：根据条件展示某元素，区别在于切换的是display属性的值

  <input type="text" v-model="age">
  <span v-show="age<=30">年轻人</span>
  <span v-show="age>30 && age<59">中年人</span>
  <span v-show="age>=60">老年人</span>

• v-for：列表渲染，遍历容器的元素或者对象的属性

  <span v-for="a in arr">{{a}}<br></span>
  <span v-for="(value, key) in arr">arr[{{key}}]={{value}}<br></span>

  生命周期

• 生命周期：指一个对象从创建到销毁的整个过程

• 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

  • beforeCreate：创建前

  • created：创建后

  • beforeMount：挂载前

  • mounted：挂载完成，vue初始化成功，HTML页面渲染成功。发送请求到服务端，加载数据。

  • beforeUpdate：更新前

  • updated：更新后

  • beforeDestroy：销毁前

  • destroyed：销毁后

    

Ajax与Axios

• 概念：asynchronous JavaScript and XML，异步的JavaScript和XML
• 作用：
  • 数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据。
  • 异步交互：在不重新加载整个页面的情况下，与服务器交换数据并更新网页
• 同步与异步：串行和并行
• 原生Ajax（参考w3c手册即可）：繁琐
  • 创建XMLHttpRequest
  • 发送异步请求
  • 获取服务响应数据并更新页面
• AXIOS：对于Ajax进行的封装，简化书写，快速开发
  • 使用步骤
    • 安装axios

      npm install axios

    • 代码引入

      import axios from 'axios'
      axios({method:"",url:"",data:""}).then((result）=>{console.log(result.data);});
      axios.post(url,data).then((result）=>{console.log(result.data);});

前后端分离开发

• 前端工程与后端工程分别开发，通过接口文档（需求+产品经理交付）约定调用。
• 接口文档管理：https://yapi.pro/

前端工程化

• 在企业级的前端项目开发中，把前端开发所需的工具、技术、经验等进行规范化、标准化

  • 模块化：js、css
  • 组件化：UI结构、样式、行为
  • 模块化：目录结构、编码、接口
  • 自动化：构建、部署、测试

• Vue脚手架Vue-cli（依赖于nodejs）

  • 统一的目录结构、本地调试、热部署、单元测试、集成打包上线
  • NodeJs：安装、换源、安装vue-cli( npm install -g @vue/cli)
  • 创建Vue项目： vue create project_name或者vue ui
  • Vue目录结构

    node_modules：依赖包
    public：静态文件
    src：源代码
        assets：静态资源
        components：可重用的组件
        router：路由配置
        views：视图组件（页面）
        App.vue：入口页面(根组件)
        main.js：入口js文件
    package.json：项目基本信息，项目开发所需要模块，版本信息
    vue.config.js：保存vue配置的文件，如代理、端口的配置等

  • 项目运行：npm run serve
  • Vue文件
    • template：模版部分，由其生成HTML代码
    • script：控制模块的数据来源和行为，比如定义变量、声明函数等
    • style：css样式部分

Element-对应VUE2

• 饿了么研发的基于Vue2.0的桌面端组件库，Vue3.0使用Element Plus

• 组件：组成网页的部分，例如如超链接、按钮、图片、表格、表单、分页条等

• 快速使用

  • 安装：

    # vue2: 
    npm install element-ui@2.15.3

  • 引入:

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-cjalk/index.css'；
    Vue.use(ElementUI)

  • 访问代码，复制组件代码，调整格式(CV工程师)

    • Vue2使用Element：https://element.eleme.cn/#/zh-CN
    • Vue3使用Element-plus：https://element-plus.org/zh-CN/

  • 常用组件：表格、分页、对话框等

• Vue路由

  • 前端路由：URL中的hash 与组件之间的对应关系

  • Vue中使用Vue Router

    • VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
    • <router-link>：请求链接组件，浏览器会解析为<a>
    • <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

  • 安装

    npm install vue-router@3.5.1

打包部署-NGINX

• Vue项目打包: npm run build，打包成功后生成dist目录
• Nginx代理服务器 https://nginx.org/en/download.html，
• Nginx目录结构：
  • conf：配置文件目录
  • html：静态资源文件目录
  • logs：日志文件目录
  • temps：临时文件目录

本文作者： yd0ng
本文链接： https://blog.yd0ng.top/2025/04/29/Web%E5%BC%80%E5%8F%91-%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！

赏

谢谢您的打赏，大家一起加油喔~

支付宝

微信