1.js不能操纵不计算机本地硬盘上的内容
2.默认情况下不能脱离浏览器单独运行
nodejs 是基于谷歌浏览器的js解析器(V8解析引擎)所开发的一个javascript运行环境(因为有了这个运行环境 所以就可已让js在脱离浏览器的时候单独运行) nodejs是可以在任何操作系统都能运行(那么js就可以在任何操作系统上单独运行 就让js脱离之间的束缚 可以进行计算机硬盘内容的操作---同时就可以操纵数据库 )
1.电脑上必须安装
下载地址:Node.js 中文网
2.安装 打开那个软件 眼睛一闭 鼠标瞄准好下一步 一直点 点到不能点为止
3.测试安装 : 打开cmd 然后输入node -v 来查看node是否安装成功 如果出现版本 就是安装ok 出现不适内部或外部命令那么就是安装失败重新安装
因为node是运行环境所以我们可以在命令号中完成轻量级的js代码
如果想使用 那么在cmd中输入node 回车即可输入轻量级的js代码
1.把cmd的路径切换到你要运行的js文件夹中
2.输入 node空格你要运行的js文件名
npm 在装完node后自动存在在你的电脑上
就是包管理工具 可以很方便的进行你们需要的依赖包获取
1.把cmd的路径指定项目中(因为路径在哪 下载的东西就在那)
1-2 初始化项目 npm init -y (在项目的路径下就会出现一个package.json的文件 这个文件的作用就是帮助你记录你每次下载的内容 当你下载的内容出现了丢失或者是删除 可以通过这个package.json进行还原)
2.npm install --save 你要下载的内容 你要下载的第二个内容 。。。。。第n个内容
在下载完成之后 会在项目下出现一个node_modules文件夹 这个文件夹就是帮助我们用来存储你下载的内容的(但是注意 上面的下载方式如果下载依赖包 默认会帮助我们下载最新的版本)
扩展 ----下载指定版本
方式1
npm install --save 你要下载的包@你要下载的版本
方式2
有的时候我已经一次性下了好多包了 但是好几个版本都有问题 在此时就可以修改package.json文件来进行版本的修改
1.修改package.json文件中的指定以来版本号
2.重新让项目根据这个json文件下载指定内容 npm install
扩展---淘宝镜像
因为npm 的数据库是在国外 我们国内有的时候 有的网络可能访问很慢
阿里集团 给我们在国内建立了一个服务器 这个服务器会在每隔10分钟自动去npm 服务器把上面的所有内容拉取一次 我们只需要访问这个阿里的服务器就可以下载到npm上面的资源
所以我们只需要在电脑上安装淘宝镜像即可
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用 在今后下载内容的时候 就可以使用 cnpm inststall --save或者-g xxx
express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性和丰富的 HTTP 工具
功能: 扩展了web所需要的基本功能 丰富了HTTP工具 可以快速搭建一个网站
安装:npm install --save express
创建服务
var express=require("express"); var app=express(); app.get("/user/login",function(req,res){ res.send({msg:”ok”}) }) app.get("/ser/home",function(req,res){ res.send({msg:”ok”}) }) var server=app.listen(3000)
app.post() 接受post请求;
app.all() 方法让路由函数接收所有指定URL的HTTP方法。
Ajax=异步javaScript和XML
AJAX 不是编程语言,而是创建更好更快以及交互性更强的 Web 应用程序的技术
Ajax在不重载整个页面的情况下,对页面局部内容进行更新
传统方式实现Ajax的不足 步骤繁琐 方法、属性、常用值较多不好记忆 处理复杂结构的响应数据(如XML格式)比较烦琐 浏览器兼容问题
JQuery的Ajax操作,对JavaScript底层Ajax操作进行了封装
更简单的Ajax方法:$.get()(从指定的资源请求数据 )
更简单的Ajax方法:$.post()(从指定的资源请求数据 )
var express=require("express"); var app=express(); app.use(function(req,res,next){ res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS'); next(); }) app.get("/",function(req,res){ res.send(dataobj.obj); }) app.listen(3000);
1.1 Git 是什么
Git是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。 Git是目前世界上最先进的分布式版本控制系统(没有之一)
1.2 版本控制
版本控制是一种软体工程技巧,在开发的过程中,确保由不同人所编辑的同一档案都得到更新。 版本控制透过文档控制记录程序各个模组的改动,并为每次改动编上序号
思考?
如果你是个程序员那你一定有这样的经历:
想修改代码中的一段内容,又怕将来想恢复找不回来怎么办?有办法,先把当前文件另存为一份”一个新的文件再接着改,改到一定程度,再“另存为……”一个新文件,这样一直改下去,最后你的项目文档变成了这样:
过了一周,你想找回被修改的代码,但是已经记不清删除前保存在哪个文件里了,只好一个一个文件去找,真麻烦。
看着一堆乱七八糟的文件,想保留最新的一个,然后把其他的删掉,又怕哪天会用上,还不敢删,真郁闷。
更要命的是,有些部分需要你的项目组同事帮助填写,于是你把文件Copy到U盘里给她(也可能通过Email发送一份给她),然后,你继续修改项目。一天后,同事再把项目文件传给你,此时,你必须想想,发给她之后到你收到她的文件期间,你作了哪些改动,得把你的改动和她的部分合并,真困难。
于是你想,如果有一个软件,不但能自动帮我记录每次文件的改动,还可以让同事协作编辑,这样就不用自己管理一堆类似的文件了,也不需要把文件传来传去。如果想查看某次改动,只需要在软件里瞄一眼就可以,岂不是很方便?
1.3 集中式 vs 分布式
集中式版本控制工具:
CVS、SVN、VSS、...
分布式版本控制工具:
Git、Mercurial、Bazaar、Darcs、...
####
1.5 集中式vs分布式优缺点
集中式版本控制系统: 最大的毛病就是必须联网才能工作,如果在局域网内还好,带宽够大,速度够快,可如果在互联网上,遇到网速慢的话,可能提交一个10M的文件就需要5分钟 分布式版本控制系统: 安全性要高很多,因为每个人电脑里都有完整的版本库,某一个人的电脑坏掉了不要紧,随便从其他人那里复制一个就可以了。而集中式版本控制系统的中央服务器要是出了问题,所有人都没法干活了。
1.6 Git git三层结构-- 工作区、暂存区、版本库
1.工作区(working directory)
2.暂存区 (staging index)
3.版本库 (git directory)
1.7 Git和他的好基友(GitHub、Gitee、GitLab)
git 版本控制工具
github、gitee、gitlab 远程的代码托管平台
gitlab 一般是公司内部通过这玩意去在公司内部搭建一个代码托管平台。
1.8 GIt 安装
官网下载地址
国内淘宝镜像下载地址
2.1 本地库初始化
版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改、删除,Git都能跟踪,以便任何时刻都可以追踪历史,或者在将来某个时刻可以“还原”。
所以,创建一个版本库非常简单,首先,对需要管理的项目文件夹右键选择 git Bash Here 自动跳转到当前目录下
为了避免遇到各种莫名其妙的问题,请确保目录名(包括父目录)不包含中文不包含中文不包含中文不包含中文
git init 初始化
会生成一个 .git 隐藏文件夹,不要对这个文件夹进行操作,不然本地库就坏了。
如果我们想要把一个项目的版本库给去掉从新初始化的时候,就直接删除这个 .git 文件夹。重新 git init 操作
红色区域表示当前文件夹的目录 绿色区域标识git创建的子目录(是存放git对于当前文件夹的版本控制信息)
2.2 配置用户信息 !!!!(在没有重装系统或者重装git 只用执行一次)
因为Git是分布式版本控制系统,所以需要填写用户名和邮箱作为一个标识。
问题:提交代码时会出现下面的问题
原因:没有配置用户信息
配置作用:区分不同开发人员的身份
配置方式:
2.系统用户级别
git config命令的--global参数,用了这个参数,表示你这台机器上所有的Git仓库都会使用这个配置,当然也可以对某个仓库指定不同的用户名和Email地址。
git config --global user.name "你的名字" git config --global user.email "你的邮箱" # 配置信息存放在 系统的用户目录下 C:\Users\<当前系统的用户名>\.gitconfig 文件
查看git配置信息
git config --list查看 我们配置的用户名和邮箱
2.3 基本命令操作
1. 状态查看 git status
命令查看工作区文件是否被追踪(文件状态)
2. 添加到暂存区
git add 文件名
将单个文件添加到暂存区
git add .
将当前目录下所有修改或新增的文件全部添加到暂存区
3. 提交版本库
git commit -m "这次提交的日志"
回车之后直接提交了,不会进入 vim 中
git commit -am
将工作区的文件提交到版本库中(前提是文件之前被提交过)git add和git commit -m的组合技
4. 查看历史记录
git log
列出从当前版本为止全部的提交日志,
如果一屏展示不下,可以使用键盘操作翻页。这时使用 Ctrl + C 退出不了。可以使用 q 来退出
5. 版本回退
版本回退的本质:
就是一个 HEAD 指针的操作
git checkout -- 文件名
拉取暂存区的指定文件将其替换工作区的文件 注意文件名和--之间要有空格空格空格
git checkout -- .
拉取暂存区的全部文件将其替换工作区的全部修改:
git reset commitid .
拉取最近指定版本库中全部到暂存区,该操作不影响工作区
git reset --hard commitid
拉取指定版本库的文件将其替换工作区的文件
6. 删除文件
git rm --cached 文件名 将文件从缓存区删除
7.重命名
mv 文件名 新文件名会将工作区文件进行更名
2.4 分支管理
1. 什么是分支
在版本控制过程中,使用多条线同时推进多个任务。
例如:假设你准备开发一个新功能,但是需要两周才能完成,第一周你写了50%的代码,如果立刻提交,由于代码还没写完,不完整的代码库会导致别人不能干活了。如果等代码全部写完再一次提交,又存在丢失每天进度的巨大风险。现在有了分支,就不用怕了。你创建了一个属于你自己的分支,别人看不到,还继续在原来的分支上正常工作,而你在自己的分支上干活,想提交就提交,直到开发完毕后,再一次性合并到原来的分支上,这样,既安全,又不影响别人工作。
2. 分支的好处
几乎每一种版本控制系统都以某种形式支持分支。使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作。
同时并行推进多个功能迭代,提高开发效率
并行的多个分支之间不会互相冲突
3. 查看分支
查看本地仓库的分支情况
git branch
查看远程仓库的分支情况
git branch -r
查看本地与远程的所有分支情况
git branch -a
4. 创建分支
git branch <分支名字> 只是创建分支
git checkout -b <分支名字> 创建分支,并切换到新创建的这个分支上
5. 切换分支
git checkout <分支名字>
注意:本地如果不存在这个分支,则会把远程的给弄下来,如果远程也没有,就报错
6. 合并分支
合并分支必须先切换到master分支上
使用 git merge <需要合并的分支>
7. 合并时解决冲突
原因:两个分支在同一个代码上的某一个位置做了修改,这些 git 合并时不知道该听那个分支的。
1 找到有冲突的文件
2 删除这个文件中的特殊标记 (<<<<<<<,=======,>>>>>>>标记出不同分支的内容)
3 找到相应的开发人员去商量到底如何处理这个情况,用你的,还是用我的,或者两个都保留
4 git add
5 git commit
8. 删除分支
git branch -d <分支名字> 以及合并过的分支可以这样去删除
git branch -D <分支名字> 没有合并过的分支,但是里面有代码修改,使用 -d 删除,是删除不了的。确定要删除,就是用 -D
2.5 远程库(使用代码托管平台)
gitHub是一个面向开源及私有软件项目的托管平台(基于git实现代码管理平台),因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。
gitee(码云)是开源中国(OSCHINA - 中文开源技术交流社区)开发的一款基于git的代码托管平台,能够用码云实现代码托管、项目管理、协作开发,目前是国内最大的代码系统,gitee和github的作用和性质是类似的,但是相比于github而言,gitee有两个显著的优势:一是速度快,二是支持免费的私密项目。
模拟使用:
张三 (项目经理) [email protected]
李四 (普通开发人员)
王五 (普通开发人员)
1. 创建远程库
张三是个项目经理 在开发之初先进行初始化项目创建 于在远程仓库中创建对应仓库 写好的空框架可以在github或者码云上进行关联
需要新建一个库
2. 远程库与本地库关联(简化了每次链接不用每次在输入地址了 此步骤可以不进行 但是建议这样做)
git remote add 远程库链接别名一般是origin 远程库的https地址或者ssh地址
git remote add <远程连接别名,一般默认使用origin> <远程仓库的https地址或ssh地址>
码云方式:
github方式:
删除远程库与本地库关联
git remote remove 远程库链接别名
3. 查看本地库与远程库的关联信息
git remote -v
4.推送push到远程库
项目经理张三关联远程库之后就把空框架推送到远程库方便其他员工使用
注意可能会出现如下错误
出现的原因是 在这个电脑上登录过其他账号的gitee 或者github 需要删除之前的登陆信息
Windows:在控制面版 =》 用户账户 =》 凭据管理器 选中windows凭据,找到gitee点击删除 重新尝试即可
Mac:进入 钥匙串访问 ---》密码---〉找到gitee删除重新进行即可
git push 远程库链接别名 master
码云:
github:
下载远程库
git pull 地址
pull下载的东西没有之前的版本信息 并且在下载的时候先需要初始化
5. 克隆远程库
李四加入到张三的公司,李四需要将Apple项目克隆到本地 张三给李四一个远程仓库的地址
李四使用 git clone <远程仓库的地址> 克隆项目到本地 注意:克隆不需要git init初始化
git clone 远程仓库地址
5. 推送 push
李四已经克隆了代码,张三让李四做一个登陆的功能。(其他组员和李四操作一样)
不要直接在master上写代码,询问张三(老大)我基于那个分支做开发。
1.使用git branch 你的分支名 创建分支
2.使用git branch 查看分支
3.使用git checkout 你的分支名 切换到你的开发分支
4.切换到你的分支进行开发 一个功能一天做不完,也需要每天下班之前提交推送一下。所以可以推送到远程库的对应你的分支上(有些公司老大要看看工作饱和度)
git push 地址 你的分支名
此时远程库就会有多条分支
6合并分支
1.先把项目从远程库 pull下来 git pull 地址
2.然后切换到master主分支(但是不要忘了在原有分支上add 与 commit )git checkout master
3.开始合并git merge 你要合并的分支名 进行合并
但是此时可能会有冲突页面中出现
我是小白写的东1 我是小白写的东1
需要手动找到和你冲突的人 删除符号之后 重新push即可
sass介绍
sass的安装
sass的基本使用步骤
sass的语法
sass是世界上最为主流的css预编译语言之一 同时sass还是是CSS的扩展语言
1.sass
2.less
3.stylus
什么是预编译语言?
就是可以语言的形式来编写css样式。但是这种方式不能直接在浏览器上面直接运行,需要编译成css之后才可以运行,此时需要一个工具使用这个工具可以把sass转换成css文件 这个工具就是sass 但是工具需要安装
sass官网
1.sass依赖环境
1.最早依赖rube环境
2.后来依赖python环境
3.再后来依赖node环境
2.开始安装
因为rube环境与pythen环境不适用于前端开发所以 我们选择使用node环境
window: npm install -g sass
Mac: sudo npm install -g sass
3.检测安装
sass --version
1.sass文件形式
sass文件有两种创建方式
方式1:后缀名以.scss
.scss文件就是你怎么写css 就怎么写sass
div{ width:100px; height:100px; }
方式2:后缀名以.sass
.sass结尾的文件 通常在编写的时候没有大括号和分号,全部使用缩进保持关系
但是此种方式 是未来的趋势 只是现在的支持不太好
div width:100px height:100px
2、scss编译---单文件编译
sass 编译那个文件 输出的文件名 例如: sass aa.scss newaa.css
缺点:就是每次编写完都需要手工的进行命令执行编译
3、scss编译---单文件自动编译
sass --watch 要编译的文件:编译后的 css文件 如: sass --watch demo.scss:newdemo.css
缺点只能监控一个scss文件
4、scss编译---文件夹自动编译
能帮助我们监控一个文件夹的变化 只要文件夹的任何一个scss文件发生了改变 那么就会自动进行编译
sass --watch 要监听的目录:编译后的 css 文件的位置
1.注释
sass有三种注释
(1)单行注释
以//开头 后面编写注释
注意:
会在编译的时候被忽略掉(通常我们开发时候所使用的)
(2)多行注释
使用如下写法进行注释
/*我是内容*/
注意
会在编译的时候保留下来 但是打包(打包就是压缩文件)的时候会被忽略掉
(3)强力注释
在注释的开始写一个! 感叹号 此种方式编译和打包的时候都会被保留下来
/*! 我是强力注释*/ h1 { width: 100px; height: 200px; }
2、变量
SASS 中的变量,必须是$符号开头,后面紧跟变量名,变量名称和变量值之间要使用冒号:进行分隔,可以把反复使用的css
属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。
$nav-color: #F90; .nav { width: 100px; color: $nav-color; }
3、嵌套
1)、子代选择器嵌套
传统设置子选择器
Document 我是div的子
我是div的后代
改写成sass的写法
//子选择器 .demodiv{ // 嵌套使用前面加>表示子选择器 >p{ color:red; } }
2)、后代选择器嵌套
传统设置
Document 我是div的子
我是div的后代
改写成sass的写法
.demodiv{ // 直接嵌套表示后代选择器 p{ color:red; } }
3)、连接器选择器嵌套
&表示当前的选择器
大家会发现下面得代码鼠标移入会改变颜色
Document 奚大官人
改写成sass的写法
.demodiv{ color:red; // &表示当前的选择器 比如当前&就指向.demodiv &:hover{ color:pink; } }
4)、并集/群组选择器嵌套
Document 我是段落
我是标题
我是斜体
改写成sass的写法
.demodiv{ p,h1{ color:red; } }
4、混合器——Mixin
sass 中的混合器语法其实就是定义了一个函数
js中是:function 函数名(){}
scss中: @mixin 混合器名字{}
语法:
定义混合器
@mixin large-text { sass代码 }
使用混合器
使用的时候本质就是调用了混合器{}中的内容
@include 混合器的名字;
1)、无参数混合——不建议使用,复用率很低
定义:
@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; }
引用:
.page-title { @include large-text; }
2)、有参混合
有参混合器相当于是js的函数实参和形参
定义:
@mixin sexy-border($color, $width) { border: { color: $color; width: $width; style: dashed; } }
引用:
p { @include sexy-border(blue, 1in); }
3)、参数的默认值
定义:
@mixin redbox($width:300px,$height:300px) { width: $width; height: $height; background-color: red; }
引用:
#box6{ @include redbox(500px,400px); opacity: 0.5; font-size: 12px; }
5、继承——extend
在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。
.demodiv{ width: 100px; height: 100px; } // 此时又有一个div设置样式 .demodivb{ // 发现里面页面和上面一样的宽高样式 width: 100px; height: 100px; // 但是还多个了背景色 background-color: red; }
但是更好的写法是如下代码 这样写可以减少很多不必要的代码 减少体积 (通常我们不会这样写 因为已经把代码写好了 修改比较麻烦 所以通常还是用上面的代码)
// 其实更好的写法应该是 .demodiv,.demodivb{ width: 100px; height: 100px; } .demodivb{ background-color: red; }
这时sass给我们提供了继承语法方便我们复用已经写好的样式
语法:
@extend 你要继承的样式
.demodiv{ width: 100px; height: 100px; } .demodivb{ // 继承.demodiv的样式 @extend .demodiv; background-color: red; }
5、 @import导入
CSS 本身包含一个指令@import,但是 CSS 中的@import 每次执行都会发送一次新的请求都会消耗一定的资源
第一个css文件 p{ color:red; } 第二个css文件 /* 引用其他css的样式 */ @import "./ceshi.css"; h1{ color:yellow; }
SASS 中扩展了这个指令,会把被包含的文件和包含文件在编译的时候合并在一起。减少了一次HTTP请求。
/* 引用其他scss的样式 观察编译后的文件发现内容被合并了减少请求*/ @import "./demo.scss"; h1{ color:yellow; }
6、数据类型
Sass 支持 7 种主要的数据类型:
数字,1, 2, 13, 10px
字符串,有引号字符串与无引号字符串,"foo", 'bar', baz
颜色,blue, #04a3f9, rgba(255,0,0,0.5)
布尔型,true, false
空值,null
数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)
详细使用参照官网:Sass教程 Sass中文文档 | Sass中文网
7、控制指令——Control Directives
SASS 中为了更加方便的处理一些带有逻辑性的样式,如满足某些条件的时候使用指定的样式,或者根据指定列表中的项目循环输出样式等,提供了一些控制指令进行处理
@if:条件控制指令
@for:循环指令
@each:循环指令
@while:循环指令
1)、@if
@if 指令是 SASS 中的一个控制指令,用于在表达式满足条件(true)的时候输出指定的样式,在不满足条件(false)或者表达式为 null 的情况下输出其他的样式
$theme:light; // body的样式搜索 body{ @if $theme==dark{ background-color: black; }@else if $theme==light{ background-color: white; }@else{ background-color: red; } }
2)、@for
@for 指令在 SASS 中用于重复处理一组指令
有两种表现形式:
@for $var from <开始值> through <结束值>
@for $var from <开始值> to <结束值>
$i:5; @for $i from 1 to 5{ .p#{$i} { padding-left: $i*5; } }
3)、@while
$i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }