网络安全概述
网络安全背景网络空间定义网络空间(Cyberspace) 的概念是伴随着互联网的成长逐步产生、发展、演变的
2003 美国 《保护网络空间的国家战略》 指出 Cyberspace的含义:一个由信息基础设施组成的相互依赖的网络
2009 美国 《网络空间政策评估》 定义 Cyberspace: 信息技术基础设施相互储存的网络,包括互联网,电信网,计算机系统以及重要工业中的处理器和控制器。常见的用法还指信息及人与人交互构成的虚拟环境
网络空间不是虚拟空间,而是人类线上活动空间的认为、自然延伸,是人类崭新的存在方式和形态
我国官方文件指出: 互联网,通信网,计算机系统,自动化控制系统,数字设备及其承载的应用、服务和数据构成了网络空间,其已经成为陆地、海洋、天空、太空同等重要的人类活动新领域
网络空间存在的安全威胁
政治安全: 相比传统媒体,网络空间对现实问题有极大的催化和放大作用
经济安全: 2016年乌克兰电网被攻击
文化安全: 幕后推手,网络大V
社会安全: 恐怖主义,分裂主义,极端主义等势力对网络的利用
国防安全: 网络空间已经成为国际战略博弈的新领域
网络强国战略2014年2月2 ...
ajax学习
AJAX 简介AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。
AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。
XML 简介XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和 HTML 类似,不同的是 HTML 中都是预定义标签,而 XML 中没有预定义标签,
全都是自定义标签,用来表示一些数据。
现在已经被JSON取代了
AJAX 的特点AJAX 的优点
可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。
AJAX的缺点
没有浏览历史,不能回退
存在跨域问题(同源)
SEO 不友好 (爬虫爬不到)
HTTPHTTP(hypertext transport protocol)协议『超文本传输协议』,协议详细规定了浏览器和万维网服务器之间互相通信的规则。约定, 规则
请求报文重点是格式与参数
1234567行 POST /s?ie= ...
vite的使用
vite 与 vue-cli相比于 vue-cli ,vite 只支持 Vue3.x 的项目的创建,不是基于 webpack 的打包工具 运行速度比较快,比较小巧,实际开发中还是 vue-cli 使用比较多
vite的基本使用下面使用vite来创建vue3的项目
初始化项目
1npm init vite-app 项目名称
运行vue3的项目
123cd 项目名称npm installnpm run dev
vite 构建的项目结构整体结构图
src目录结构
vite项目的运行流程在工程化的项目中,vue要做的就是通过main.js 把 App.vue 渲染到 index.html 的指定取域中
其中:
App.vue 用来编写待渲染的模板结构
index.html 中需要预留一个el区域
main.js 把 App.vue 渲染到 index.html 所预留的区域中
看一下main.js 中进行渲染的步骤
12345678910111213// 1. 从vue中按需导入 createApp函数// createApp函数的作用,是创建 Vue 的单页面应用程序 ...
vue路由
路由的概念和原理什么是路由路由(英文:router)就是对应关系
SPA和路由SPA(单页面应用程序) 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。此时,不同组件之间的切换需要通过前端路由来实现。
在 SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成!
前端路由的工作方式
用户点击了页面上的路由链接
导致了 URL 地址栏中的 Hash 值发生了变化
前端路由监听了到 Hash 地址的变化
前端路由把当前 Hash 地址对应的组件渲染都浏览器中
vue-router什么是 vue-routervue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。
vue-router 的官方文档地址
vue-router 安装和配置
安装 vue-router 包1npm install vue-router@3.5.2 -S
创建路由模块在 src 源代码目录下,新建 router/index.js 路由模块,并初始化如下的代码12 ...
vscode插件推荐
ESLint插件
安装插件后,进入vscode的settings 进行配置
1234// ESLint插件配置"editor.codeActionsOnSave": { "source.fixAll": true},
Prettier - Code formatter 插件
安装插件后,进入vscode的settings 进行配置
123456// Prettier配置"prettier.trailingComma": "none","prettier.semi": false,"prettier.printWidth": 300,//每行文字数超过此限制会被迫换行"prettier.singleQuote": true,//单引号替换双引号"prettier.arrowParens": "avoid",//当箭头函数只有一个参数时加上括号
我们也可以直接创建一个 . ...
Eslint使用
什么是ESLint官网传送门
中文传送门
ESLint 是用来规范代码风格的,特别是团队开发时,一般都会使用ESLint
在项目中使用ESLint下面通过使用 vue-cil 来创建包含 ESLint 的项目,不清楚 vue-cil 可以看 vue-cil的使用
创建新项目
1vue create demo
选择最后的一项进行项目定义
前面的三个一个是之前创建vue2的时候用的,另外两个是自带的
选择需要的包,记得把css预处理器加上
回车后,选择vue的版本 我还是创建 vue2项目
在选择CSS预处理时,我使用的是 less
下面就是选择ESLint规范了
我们选择倒数第二项,标准规范
回车后会询问我们是在保存的时候触发 Lint 还是提交时触发
一般我们就保存时触发代码规划的检查就好了
剩下的操作和之前的就一样了
选择将配置文件独立开,以及选择是否保存预设,是否保存这个无所为,看需求
在项目根目录下,我们会看到 。eslintrc.js 这个文件,可以用来配置规则
1234567891011121314151617module.ex ...
动态组件 & 插槽 & 自定义指令
动态组件什么是动态组件动态组件指的是动态切换组件的显示与隐藏
动态组件的渲染vue 提供了一个内置的 <component> 组件,专门用来实现动态组件的渲染,它就相当于组件的占位符,提供一个 is 属性用来指定该位置实际需要渲染的组件,通过控制 is 属性的值可以实现组件的切换
1234567891011121314151617181920212223242526272829<template> <div class="app-container"> <h1>App 根组件</h1> <button @click="comName = 'Left'">展示 Left</button> <button @click="comName = 'Right'">展示 Right</button> <div class="box"> ...
组件的生命周期和数据共享
组件的生命周期什么是生命周期生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段。
当我们想要在组件的生命周期过程中进行一些操作时,我们就需要使用生命周期函数来进行操作
生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。
注意:生命周期强调的是时间段,生命周期函数强调的是时间点。
生命周期函数的分类
创建阶段
beforeCreate
created 发起 Ajax 最早的时机,请求数据,还不可以操作DOM元素
beforeMount
mounted 组件第一次被渲染到浏览器中 操作 DOM 的最早的时机
创建阶段的生命周期函数只执行一次
运行阶段
beforeUpdate
updated 能够操作到最新的 DOM 元素
运行阶段的生命周期函数可以执行多次
销毁阶段
beforeDestroy
destroyed
组件的数据共享在开发中,组件之间的关系一般分为 父子关系 和 兄弟关系
父组件向子组件传递数据通过在子组件中定义自定义属性,在父组件中绑定 ...
vue组件入门
vue组件什么是组件化开发组件化开发指的是:根据封装的思想,把页面上可重用的UI 结构封装为组件,从而方便项目的开发和维护。
vue 中的组件化开发vue 是一个支持组件化开发的前端框架。
vue 中规定:组件的后缀名是.vue。之前接触到的App.vue 文件本质上就是一个 vue 的组件。
vue 组件的三个组成部分每个.vue 组件都由3 部分构成,分别是:
template -> 组件的模板结构
script-> 组件的JavaScript 行为
style -> 组件的样式
其中每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。
三个完整部分组成的组件如下
注意:.vue 组件中的 data 不能指向对象,组件中的 data 必须是一个函数,在函数中 return 一个对象用来定义数据
在组件中 this 指向的是当前组件
1234567891011121314151617181920212223242526272829303132333435363738<template> ...
vue-cil的使用
单页面应用程序单页面应用程序(Single Page Application) 简称 SPA,指一个Web网站中只有唯一的一个HTML页面,所有的功能与交互都在这个唯一的一个页面完成
vue-clivue-cli 是Vue.js 开发的标准工具。它简化了程序员基于webpack 创建工程化的Vue 项目的过程
官网传送
安装 vue-clivue-cli 是 npm 上的一个全局包,使用 npm install 命令,即可方便的把它安装到自己的电脑上
1npm install -g @vue/cli
在命令行输入vue -V 如果回显 @vue/cli 版本号 就说明安装成功了
如果之前安装过低版本的可以通过下面两个命令来卸载重装
12npm uninstall -g vue-clinpm install -g @vue/cli
vue-cli 的使用
在终端下运行如下的命令,创建指定名称的项目,注意我们项目名称最好是英文
1vue cerate 项目的名称
输入后我们会看到控制台有一些提示
我们可以通过控制方向键来选择创建项目使用的vue版本,其中前两个就是创建vue2 ...