1.单页面应用程序(single page application)简称SPA.
- 网站交互式方式经典的多页面
- 例如:京东商城,唯品会
- 前后端揉合在一起,开发和维护效率低,
- 用户体验一般,点击刷新跳转,等待时间长,
- 每个页面都需要重新加载渲染,速度慢,
- 有利于SEO搜索引擎搜索(蜘蛛会爬链接)
- 现代式的单页面
- 例如:网易云音乐,coding
- 开发方式好,前后端分离,开发效率高,可维护好(服务器不关心页面,只关系数据,客户端不关心数据及数据操 作,只关心通过接口拿数据和服务器交互,处理页面)
- 用户体验好,像原生的客户端软件一样使用,
- 只需要加载渲染局部视图即可,不需要整页刷新,
- 单页面应用开发技术复杂,所以诞生了一堆的开发框架(ng,react,vue),
- 应用技术.目前单页面技术已经很成熟了,但是都无法兼顾低版本浏览器,
- 现在除了一些电商网站(需要盈利),其实已经很少有系统需要去兼容低版本的浏览器,大部分都ie9以上,
- 单页面由于数据都是异步加载过来的,所以不会被搜索引擎搜索到,不利于SEO,
- vue不兼容ie8,适合做一些手机web网页 ,管理系统
- 多页面:以服务器端为主导,前后端混合(php案例,.php文件)
- 单页面:前后端分离,各司其职(服务端之处理数据,前端之处理页面,两者通过接口来交互)
1.2. 前后端分离开发模式
- 项目立项
- 项目需求分析
- 服务端的工作
1.需求分析
2.设计数据库
3.接口设计(有时需要前端参与)
4.接口开发
- 前端的工作
1.需求分析
2.写页面
3.页面完成后完成功能
扫描二维码关注公众号,回复:
462092 查看本文章
4.通过接口和服务端进行交互
***前后端分离 :多页面
***前后端分离:单页面
vue.小例子1
<
div
id=
"app"
>
<
label
for=
"price"
>商品价格
</
label
>
<
input
type=
"number"
v-model=
"price"
/><
br
/>
<
label
>商品数量
</
label
>
<
button
v-on:click=
"reduce()"
>-
</
button
>
<
span
>{{num}}
</
span
>
<
button
v-on:click=
"addNum()"
>+
</
button
>
<
div
>总价:
<
strong
>{{price * num}}
</
strong
</
div
>
<
hr/
>
<
div
>
<
label
>计算器:
</
label
>
<
input
type=
"number"
v-model=
"firstNum"
/>
<
label
>
<
select
v-model=
"calFu"
>
<
option
value=
"+"
>+
</
option
>
<
option
value=
"-"
>-
</
option
>
<
option
value=
"*"
>*
</
option
>
<
option
value=
"/"
>/
</
option
>
</
select
>
</
label
>
<
input
type=
"number"
v-model=
"secondNum"
/>
<
button
v-on:click=
"calNum()"
>=
</
button
>
<
input
type=
"number"
v-model=
"endNum"
/>
</
div
>
</
div
>
<
script
>
new
Vue({
el:
"#app",
data:{
price:
0,
num:
5,
calFu:
'-',
firstNum:
5,
secondNum:
5,
endNum:
0,
},
methods:{
//此处不能是箭头函数,要是箭头函数this,就指向了windows
addNum:
function(){
this.
num++
},
reduce(){
//此结构只是纯粹的一种简写reduce:function(){}
console.
log(
this.
num)
if(
this.
num<=
0){
this.
num =
0;
}
else{
this.
num--;
}
} ,
calNum:
function(){
if(
this.
calFu==
"+"){
this.
endNum =
parseInt(
this.
firstNum)+
parseInt(
this.
secondNum);
}
else
if(
this.
calFu==
"-"){
this.
endNum =
parseInt(
this.
firstNum)-
parseInt(
this.
secondNum);
}
else
if(
this.
calFu==
"*"){
this.
endNum =
parseInt(
this.
firstNum)*
parseInt(
this.
secondNum);
}
else
if(
this.
calFu==
"/"){
if(
this.
secondNum!=
0){
this.
endNum =
parseInt(
this.
firstNum) /
parseInt(
this.
secondNum);
}
else{
alert(
"分母不能为0")
}
}
}
}
})
<
/
script
>
例子2
<
style
>
.done{
text-decoration:
line-through;
color:
#ccc;
}
<
/
style
>
<
body
>
<
div
id=
"app"
>
<
div
>
<
p
v-for=
"item in todoList"
>
<
input
type=
"checkbox"
v-model=
"item.done"
/>
<
label
v-bind:class=
"{done:item.done}"
>{{item.title}}
</
label
>
</
p
>
<!--
v-bind 可以动态绑定元素属性v-bind:class="{done:item.done}"
class 给一个对象:对于的key就是类名,对象的value就是布尔值
当布尔值为true时,样式
-->
</
div
>
<
div
>
<
input
type=
"text"
v-model=
"textValue" @
keydown.
enter =
"addList()"
/>
<
button @
click=
"addList()"
>add
</
button
>
</
div
>
</
div
>
<
script
>
const
todoList = [
//视图中不能直接循环此处的todoList
{
id:
'1',
title:
'聚餐',
done:
true
},
{
id:
'2',
title:
'爬山',
done:
false
},
{
id:
'1',
title:
'购物',
done:
false
},
]
new
Vue({
el:
"#app",
data:{
todoList:todoList,
textValue:
''
},
methods:{
addList(){
const
textValue =
this.
textValue.
trim();
//此处只能去掉首位的空格
if(!
textValue.
length){
//当输入的是多个空格时需要对输入内容进行判断
return ;
}
this.
todoList.
push({
id:
this.
todoList[
this.
todoList.
length-
1].
id+
1,
//记住操作data中的数据时this别掉了
title:textValue,
done:
false
})
}
}
})
<
/
script
>
</
body
>