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.页面完成后完成功能
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
>