大纲:
前端三剑客:
1.html
- HTML：负责网页的结构（页面元素和内容）。
2.css
- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
3.js
- JavaScript：负责网页的行为（交互效果）。
4.json
5.YAPI
高级前端技术:
6.vue
7.ajax
8.element UI
9.nginx
1.html:
HyperText Markup Language，超文本标记语言。超文本就是超越了文本的限制,可以写入更多的元素,比如图片,音频,视频.而标记语言则是由标签构成的语言.可以在记事本中直接写html语言,然后本文件后缀改为".html"则可以打开一个浏览器页面.
其中,书写html页面时要注意,先写html根标签,其次分别为<head>,<body>.在<head>中,用<title>来定义网页标题,就是此次浏览器页面的名字.
注意!!!
1.html语法松散,标签不区分大小写,比如<HtmL>这样写也是可以的.
2.html标签的 属性值 用单引号,或者双引号都可以
2.css
Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。
引用css有三种方式:
1.行内样式(不推荐)
在标签内使用style属性，属性值是css属性键值对
eg:<h1 style = "xxxx"> 啦啦啦啦 </h1>
2.内嵌样式(初级)
定义<style>;标签，在标签内部定义css样式 .其中内嵌样式又有三种
1.可以直接写在标签里
2.在标签里写一个id,在style用(#id名的方法)里面规定该id的样式(注意每个id只能赋予一个 标签)
3. 用class名,这个可以多个标签用一个class名,在style里用(.cls方法)规定class的样式
eg:<style> <h1> style="xxxx" </h1> </style>
3.外联样式(高级)
定义 <link> 标签，通过href属性引入外部css文件
3.js
全名:JavaScript.这门语言会让我们的页面动态化做到和用户进行交互.
有两种方式引用:
1.内部引用脚本,可以在html文档中的任意位置放<script></script>,js语言只能写在 <script>里面.
eg:
<script>
alert("Hello JavaScript")
</script>
2.外部脚本引用,将js代码写到外部js文件,(注意:在外部写js代码不用再写<script>)引入到html文件中
eg:
<script src="js/demo.js"></script>
对于后端程序员,js当中比较重要的是事件绑定了.
eg:
<input type="button" id="btn1" value="事件绑定1" οnclick="on()">
<script>
function on(){
alert("按钮1被点击了...");
}
</script>
以上就是三剑客的基本知识了。
4.json
json语句,作为前后端都必须要会的一种数据格式,我们必须看到他就要在心里一秒转换成后端的数据格式,当项目经理写出了前后端的接口文档,我们要会从中获取到json数据要求,要给前端传递什么形式的数据.
在json语句中,对象,集合用{}来表示,数组用[]来表示.
eg: 以下json语句,你能瞬间看懂吗?
3订单信息:
{
"orderNumber":1314,
"data":"12-3-4",
"customer":{
"name":"王薪龙",
"id":110,
"phone":181609,
"email":"123995138@qq.com",
"address":{
"city":"包头市",
"street":"阿拉善大街"}
},
"items":[
{
"product":"switch",
"quantity":2,
"price":"199$"
},
{
"product":"ps5",
"quantity":1,
"price":"499$"
}
]
}
答: 显然,以上json表达式写的是我们最终要向前端传递一个对象,对象里面有普通对象:订单编号,订单日期,还有一个顾客对象,一个数组,在这个顾客集合里面,又有普通对象name,id,phone,email,和一个address对象,在这个数组里面又有两个对象,每个对象描述了一个商品的信息.
因为对象和集合都是用{}来表示,因此很多人分不清,所以我着重解释一手!
当它们是属于同一信息类别，将它们组合在一起的时候，构成一个对象。但如果它们是分开的单独的属性，那么就是一个集合了。
5.YAPI 前后台分离开发中，我们前后台开发人员都需要遵循接口文档，所以接下来我们介绍一款撰写接口文档的平台. 我们从中可以清楚的从json数据读取到信息.
但是再yapi中,我们只能清楚的看到我们提交的get方法,当我们使用post方法访问时,就会报错,比较麻烦,所以针对测试访问还是选择之后的postman更为方便.
6.vue 一款流行的基于JavaScript的前端框架 主要学习视图层和模型层的绑定,
当然我们使用vue的脚手架,要先安装nodeJs依赖,就像java中必须要有jdk才可以运行程序一样
v-bind指令 为HTML标签绑定属性值，如设置 href , css样式等
v-model指令。 在表单元素上创建双向数据绑定(比较重要)
双向绑定的作用：可以获取表单的数据的值，然后提交给服务器
我们主要是利用vue这个框架,在里面直接创建要写的页面,就可以直接打开,而且vue还支持热部署,使用很方便.
7.ajax 与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术.
由于原生ajax还是有一些复杂,于是我们现在主要掌握Axios,就够了.Axios是对原生的AJAX进行封装，简化书写.
Axios的使用:(注意第一次使用时,vue项目中是没有这个插件,需要到module那个文件夹下右键打开终端,安装Axios插件, import axios from 'axios')
第一步: 引入Axios文件
<script src="js/axios-0.18.0.js"></script>
第二步: 在我们用的那个vue界面的<script>中导入axios(import axios from 'axios')
再用ajax去后台获取数据
eg:
data(){
return {
dataDable:[]
}
},
creater(){
// ajax去后台获取数据
axios.get("http://......")
.then(response=>{
let jsonObj = response.data;
let jsonList = jsonObj.data;
this.tableData = jsonList;
})
}
8.element UI
是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。在这个网站中提供了很多的模型组件,我们可以在里面任意选择我们想要的组件,直接复制粘贴就可以,一般用来做我们自己比较简单的后台管理系统,用不到太花里胡哨的样式.
需要注意的是,在vue框架使用Element时,也需要我们手动下载插件,方法如上下载axios时类似.
语句更换为: (npm install element-ui@2.15.3 )
9.nginx
前端小型服务器.默认占用80端口,当我们打开它时,将我们打包好的dist文件中的前端项目cv到nginx的html的文件夹中,这样就可以被任意用户访问到我们的界面了,当然不在一个局域网内时,我们可能还需要额外购买域名,此时我们的电脑就相当于一个服务器了.当然nginx还有两个特点,分别是反向代理,和负载均衡.
反向代理可以提高系统的性能和安全性.主要作用就是客户端访问我们时,会先访问nginx服务器,有nigix服务器再向我们传达旨意,这样也可以缓存静态内容、拦截恶意请求和隐藏真实的后端服务器等。
负载均衡是当我们有多个服务器时,客户端访问我们服务器时,nginx会自动根据负载均衡策略把请求转发到后端的某一台服务器上，从而实现请求的负载均衡。
以上两点结合起来可以满足客户更高的并发访问需求。
扫一扫
3994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
