前端基础概念

最新推荐文章于 2023-05-19 20:48:34 发布

置顶 dzx.

最新推荐文章于 2023-05-19 20:48:34 发布

阅读量667

点赞数 8

分类专栏：基础知识文章标签：前端基础概念前端基础

本文链接：https://blog.csdn.net/qq_44432090/article/details/86095521

版权

基础知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端基础概念

1.HTML

HTML并不是真正的程序语言，它是一种标记语言，用来结构化和含义化你想要放在web网站上的那些内容。它由一系列的元素（elements）所组成，这些元素可以用来封装你的内容中担任不同工作的各部分各角色。

2.CSS

CSS指层叠样式表（Cascading Style Sheets），就像 HTML，CSS 也不是真正的编程语言。它是样式表语言，也就是说，它允许你有选择性的为 HTML 文档的元素添加样式。

3.JavaScript

JavaScript（缩写：JS）是一门成熟的动态编程语言，当应用于 HTML文档时，可以在网站上提供动态交互性。（轻量级的脚本语言）。

4.jQuery

JQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的js 库，它兼容 CSS3，还兼容各种浏览器(IE6.0+，FF1.5+，Safari 2.0+，Opera 9.0+)，jQuery2.0及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML(标准通用标记语言下的一个应用)、events、实现动画效果，并且方便地为网站提供 AJAX 交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html页面保持代码和 html 内容分离，也就是说，不用再在 html里面插入一堆 js 来调用命令了，只需要定义 id即可。
jQuery 是一个兼容多浏览器的 javascript 库，核心理念是write less，do more(写得更少，做得更多)。 jQuery是免费、开源的，使用 MIT 许可协议。jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用Ajax 以及其他功能。除此以外，jQuery 提供 API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

5.AJAX

ajax是一种创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。（页面没有刷新或者没有跳转的情况下还能更新一部分数据）。

AJAX请求数据步骤是什么？传输的数据是用的get还是post？
var xhr；
xhr = new XMLHttpRequest()； //创建一个异步对象
xhr.open("Get"， "test.ashx"， true)；
//Get 方式括号中的三个参数分别为：1.发送请求的方式 2.y 要请求的页面 3.是否异步
//xhr.open("post"，"test.ashx"，true)；
//xhr.setRequestHeader("Content-Type"，"application/x-www-form-urlencoded")；
//Post 方式发送数据
//这个回调函数主要用来检测服务器是否把数据返回给异步对象
xhr.setRequestHeader("If-Modified-Since"，"0")；//设置浏览器不使用缓存
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
//readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。
//XMLHttpRequest 对象会经历5种不同的状态。
//0、未初始化。对象已经创建，但还未初始化，即还没调用 open方法；
//1、已打开。对象已经创建并初始化，但还未调用 send方法；
//2、已发送。已经调用 send 方法，但该对象正在等待状态码和头的返回；
//3、正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
//4、已加载。所有数据接收完毕
if(xhr.status==200){ //检测服务器返回的响应报文的状态码是否为 200
alert(xhr.responseText)；//服务器返回的 Response 数据
//解析服务器返回的 json格式的数据
var s=xhr.responseText；
var json=eval("("+s+")")；
alert(jason.data)；
}
}；
}；
xhr.send(null)；//异步对象发送请求
//xhr.send("txtName=roger&txtPwd=123")； 以post 方式发送数据
//ajax中get 和 post方式请求数据都是明文的

6.JSON

json 是一种键值对结构的数据（轻量级数据交互格式）

//例如：
"name":"json","age":"18","gender":"男"

7.php

PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。主要适用于Web领域的开发，能够完成动态网页的制作。

//例如：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><?php echo '我是php'; ?></title>
</head>
<body>
	<?php 
		echo "<h1 style='color:red'>Hello World</h1>";
	?>
</body>
</html>

PHP操作MySQL

链接MySQL服务器 — mysqli_connect(var1, var2, var3)
参数1: MySQL数据库的主机地址
参数2: 用户名
参数3: 用户名对应的密码
返回值: 数据库链接资源

$conn = mysqli_connect('localhost', 'root', 'root');

选择要操作的数据库 — mysqli_select_db(var1, var2)
参数1: 数据库链接资源
参数2: 数据库名称

mysqli_select_db($conn, 'demo');

设置字符集 — mysqli_query(var1, var2)
参数1: 数据库链接资源
参数2: sql 语句 ---- set names utf8 (设置字符集的sql语句)

mysqli_query($conn, 'set names utf8');

执行SQL语句 — mysqli_query(var1, var2)
参数1: 数据库链接资源
参数2: sql 语句 ---- 增删改查SQL语句
返回值: 如果是查询，则返回结果对象，该对象里面包含了从数据表中取出的数据如果是增删改，则返回布尔值，执行成功返回true，失败返回false

$result = mysqli_query($conn, $sql);

处理查询结果
参数: 查询结果对象
返回值: 一维数组，下标是数据表字段
将当前行的数据取出并返回成一维数组，同时将指针向下移动一行。
如果已经无法返回一维数组时，则返回false

  mysqli_fetch_assoc(var);

关闭MySQL链接资源 — mysqli_close(var)
参数: 数据库链接资源

8.Node

Node是一个基于Chrome v8引擎的javascript运行环境。（可以搭建web服务器）

Node不是一种独立的语言、不是javascript框架,是一个除了浏览器之外的、可以让javascript运行的环境

安装Node
下载：https://nodejs.org/en/download/

对于已经装过的，重新安装就会升级确认 Node 环境是否安装成功
打开命令行，输入 node --version或者 node -v

Node中的js
node中的js和浏览器中的js不同:
浏览器中的js
- ECMAScript
- BOM
- DOM
node中的js
- ECMAScript
- 自己的API
- 没有BOM和DOM
Node中的模块
- 一个js文件就是一个具有独立功能的模块
- Node中按照模块去划分功能,有一套模块加载机制:
  - module.exports导出模块成员
  - require()导入模块成员
- 核心模块
  - 由 Node 本身提供，例如fs 、http 等
  fs模块用来读写文件
  http模块快速搭建服务器
- 自定义(用户)模块
  - 自己写的.js文件，按照路径来加载，注意 ./ 或者 …/ 不能省略
- 第三方模块
1. 在npm网站找包(模块)
2. 打开cmd, 使用命令 npm install 包名安装包
3. 在需要使用的位置, 通过require(‘第三方包名’) 加载包
4. 看文档调用 API
Node中的简单命令

node  + 回车   测试node   可以写一些js代码   
node  index.js    执行这个js文件
全局命令： http – server -g 搭建服务器   -o打开浏览器    -p 8080  修改端口号

Node中使用mysql

mysql包
用mysql包操作数据库来实现数据持久化
前提: 已经安装完Navicat客户端
1. 安装mysql包: cmd中 npm i mysql
2. 配置+使用mysql包:

// 1. 导包
var mysql = require('mysql');
// 2. 配置mysql
var connection = mysql.createConnection({
    host: 'localhost', // 要连接的主机名
    user: 'root', // 要连接的数据库的用户名
    password: '123456', // 数据库密码
    database: 'sqldemo' // 数据库
});

// 3. 开启连接
connection.connect();

// 4. 执行增删改查语句
connection.query('SELECT *FROM posts', function(error, results, fields) {
    if (error) throw error;
    console.log(results);

});
// 5. 关闭连接
connection.end();

9.Git

Git最初是在2005年由Linux之父Linus TorvaLinus领导开发的一套为Linux内核维护的版本管理系统.
git 安装
– Window安装
- http://git-scm.com/download/win 下载Git客户端软件，和普通软件安装方式一样。
– Linux安装
- CentOS发行版：sudo yum install git
- Ubuntu发行版：sudo apt-get install git
–Mac安装
- 打开Terminal直接输入git命令，会自动提示，按提示引导安装即可。
基本的Git工作流程如下：
1、在工作目录中修改文件。
2、暂存文件，将文件的快照放入暂存区域。
3、提交文件，找到暂存区域的文件，将快照永久性存储到Git仓库目录。
git基本操作

配置新用户：
git  config --global  user.email   邮箱.com 
git  config --global  user.name   姓名
注： global 全局意思，不更换电脑不需要重复执行！！重复执行会覆盖以前的内容！！！！！！

命令
git  init   初始化    （会多出来一个隐藏的git文件夹）
注： 一个项目只需要执行1次！！！
git  clone  地址...       （把代码克隆下来）
git  add  index.html    （管理index.html文件）
git  add  */-A      （管理所有文件）
git  status      （检查是否被修改 ）
git  commit -m ‘初始化了项目’（将已经修改的储存）
git   log   （查看commit的记录）
git  branch  user   （创建了user分支）
git  checkout  user   （切换到user分支）
git  checkout -b demo   （创建了demo分支并切换到demo分支）
git  branch   （查看一共多少分支）
git    merge   user   （来到主分支，把user合并到主分支）
git   push  地址.....    （将代码放入到   ...地址...）
git  pull   地址 ... (拿谁index.html)    
git   remote    add    origin    地址......    （以后地址.....就写  origin）
gitignore  不想用git管理的文件放入

10.Vue

vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue与Angular、React的对比：
1、vue.js 更轻量，gzip后只有20K+，angular:56K ,react:44K
2、vue.js 更易上手，学习曲线平稳
3、吸收两家之长，有angular 的指令和 react组件化思想
Vue.js核心思想
1、数据驱动（基于操作 dom的方式）
（1）、Dom是数据的一种自然映射（双向数据绑定）手动改变 DOM 非常麻烦使用 vue.js
之后，只需要改变数据，通过改变Directives 指令,当数据发生变化，会通过数据指令去修改对应的 DOM
（2）、Vue.js 还会对事件进行一定的监听，当我们改变视图（view）的时候通过DOM Listeners 来改变数据
通过以上两点就实现了数据的双向绑定
2、组件化
Vue-cli:(它是 vue的脚手架工具)
作用：帮助我们完成基础的代码（包括：目录结构、本地调试、代码部署、热加载、单元测试）
组件的设计原则：
- 页面上每一个独立的可视/可交互区域视为一个组件
- 每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护
- 展示面不过是组件的容器，组件可以嵌套自由组合形成完整的页面
Vue父子组件间传值
总结：子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为其自定义事件的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

dzx.

关注

8
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
前端基础概念

前端基础概念1.HTMLHTML并不是真正的程序语言，它是一种标记语言，用来结构化和含义化你想要放在web网站上的那些内容。它由一系列的元素（elements）所组成，这些元素可以用来封装你的内容中担任不同工作的各部分各角色。2.CSSCSS指层叠样式表（Cascading Style Sheets），就像 HTML，CSS 也不是真正的编程语言。它是样式表语言，也就是说，它允许你有...
复制链接

扫一扫