前后端分离开发模式与Vue框架

最新推荐文章于 2022-04-24 17:30:40 发布

Yvettezhu

最新推荐文章于 2022-04-24 17:30:40 发布

阅读量1k

点赞数

分类专栏：入门文章标签： vue js javascript html

本文链接：https://blog.csdn.net/weixin_49547540/article/details/113770828

版权

入门专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

前言
一、概况
二、Vue
- 1.基础语法
总结

前言

前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。

后端开发的视图即为接口或API，前端可访问接口来对数据进行增删改查，展示。

前后端分离后，再加上多种设备显示的不同，对前端的要求更加灵活，响应式，弹性布局等显得尤为重要。

最后，也会综合讲讲很好用的vue前端框架极其局限等。

一、概况

1.MVVM模式和技术

MVC:model+view+controller
JSP+servlet+javabean

MVP:model+view+presenter
presenter把model和view分离

MVVM：model+view+ViewModel
将view的状态和行为抽象化，将视图UI和业务逻辑分开。
VM调度者，对model和view进行双向绑定

MVVM模式使得前后端分离更加明确，之后说到的Vue也是基于这中模式下进一步发展的。

2.标准

W3C标准包括：
结构化：xhtml，xml
表现：css
行为：ECMAScript

3.协作工具

github，gitee托管代码，git工具，注意冲突处理

y-api接口管理工具:

内网部署，可参考下面的文章
https://github.com/ymfe/yapi
https://zhuanlan.zhihu.com/p/94297858

体验地址：https://yapi.baidu.com/group/50616

一些接口提供网站
https://dashboard.juhe.cn/

二、Vue

js框架
简化DOM操作
响应式数据驱动

文档阅读：
https://cn.vuejs.org/v2/guide/

1.基础语法

1）引入

开发版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2）声明式渲染

{{ message }}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    arr:['h','e','l'],
    obj:{
    	name:'a',
    	moblie:'123',
    },
  },
  methods：{
  	isshow：function(){
  		alert('OK');
  	}
  },  
})

不要忘了，逗号

不用再去考虑更改dom元素，直接更改数据就可以了：
给标签添加事件绑定@，在methods里更改数据：this.data=‘新数据’；

3) 本地应用（指令）

a. 内容绑定，事件绑定@

内容绑定
v-text一般不用，直接用{{ 内部可字符串拼接 }}外部可显示html原来的字符串
v-html设置元素的innerHtml，有注入的危险

事件绑定
v-on:click=‘方法’------methods
@mouseenter鼠标移动
@dbclick双击

传递自定义参数：
类似函数传参

事件修饰符：
@keyup.enter

https://cn.vuejs.org/v2/api/#v-on

计数器简单实现：

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
</head>
<body>
    <div id="app" class="count">
        <button @click='sub'>-</button>
        {{ num }}
        <button @click='add'>+</button>
    </div>
</body>
<script src="../js/vue1.js"></script>

vue和js文件引入：js文件最好放最后

var app = new Vue({
    el:'#app',
    data:{
        num:0,
    },
    methods:{
        sub:function(){
            if (this.num==0){
                alert('不能再点了')
            }else{
                this.num-=1
            }
        },
        add:function(){
            if (this.num==10){
                alert('不能再点了')
            }else{
                this.num+=1
            }
        },
    }
})

要注意数据类型的转换~

b. 显示切换，属性绑定：

v-show=’true‘可以是条件，结果是true或false即可，true显示，false不显示
v-if差不多，但是，是操作dom，会把对应元素删除

频繁切换用v-show
占内存比较大时，用v-if

v-bind属性绑定
:src = “imgSrc”
:title鼠标放上去会显示小行字

:class = "isActive?‘active’:’ ’ "
三元表达式

:class = “{active:isActive}”
对象写法

图片切换简单实现：
图片数组和index，：，@

<div id="pic">
        <a :href="linkArr[index]"><img :src="imgArr[index]" alt=""></a>
        <a href="#" @click='pre'>上一张</a>
        <a href="#" @click='next'>下一张</a>
    </div>

var pic = new Vue({
    el:'#pic',
    data:{
        imgArr:[
            '../img/photo.jpg',
            '../img/photo1.jpg'
        ],
        linkArr:[
            'http://www.baidu.com',
            'https://www.bilibili.com/video/BV12J411m7MG?p=14',
        ],
        index:0
    },
    methods:{
        pre:function(){
            if (this.index == 0){
                this.index = this.imgArr.length-1
            }else{
                this.index--;
            }
            
        },
        next:function(){
            if (this.index == this.imgArr.length-1){
                this.index = 0
            }else{
                this.index++;
            }
        }
    }
})

小tips：容易忘记js加this！！！（html不用加this）

c. 列表循环，表单元素双向数据绑定

v-for：
ul-li v-for=“(item,index) in arr”
“(item,index) in obj”
{{ item.name }}

v-model=“message”

表单元素绑定，双向绑定：
表单值更改会传递到data，data更改也会同步到表单中。

记事简单实现： 1.新增：arr.push 2.删除：arr.splice(index,1) 传html里的参数 3.统计：{{arr.length}} 4.清空：将数组变为空[ ] 5.隐藏：v-show

	<div id="note">
        <div>记事本</div>
        <input v-model="inputValue" @keyup.enter='add' autofocus="autofocus" type="text">
        <ul>
            <li v-for="(item,index) in arr">
                {{ item }}
                <button @click='del(index)'>del</button>
            </li>
        </ul>
        <div v-show='arr.length!=0'>{{arr.length}}条记录</div>
        <button v-show='arr.length!=0' @click='clear'>clear</button>
    </div>

var note = new Vue({
    el:'#note',
    data:{
        arr:[],
        inputValue:'',
    },
    methods:{
        add:function(){
            this.arr.push(this.inputValue);
        },
        del:function(index){
            this.arr.splice(index,1);
        },
        clear:function(){
            this.arr=[];
        }
    }
})

4）网络应用

axios+Vue

文档参考：http://www.axios-js.com/zh-cn/docs/index.html

axios回调函数中的this已经发生改变，无法访问data中数据
在axios前先把this保存到that

 <div id="search">
        <input v-model='inputValue' @keyup.enter='search' type="text">
        <ul>
            <li v-for='(item,index) in arr'>
                {{item.title}}
            </li>
        </ul>
    </div>

var search = new Vue({
    el:'#search',
    data:{
        inputValue:'',
        arr:[],
    },
    methods:{
        search:function(){
            url = 'http://127.0.0.1:5000'+this.inputValue
            var that = this;
            axios.get(url).then
            (function(res){
                console.log(res.data.result.data)
                that.arr=res.data.result.data
            },function(err){ })
        }
    }
})

总结

前后端分离已经时比较成熟的技术了，分工写作，提高开发效率。

Vue是目前的前后端分离开发模式非常流行的框架，语法简洁，特别是双向数据绑定，极大简化js代码。

之后，也会说下jQuery库的内容作为补充，也有助于将之前的jQuery代码运用Vue框架，升级网页或应用的功能。

Yvettezhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前后端分离开发模式与Vue框架

文章目录前言一、概况1.MVVM模式和技术2.标准3.协作工具二、布局1.2.flex弹性布局3.响应式布局三、Vue2.读入数据总结前言前后端分离后，前端负责渲染html页面，后端返回前端所需的数据（json，xml）。后端开发的视图即为接口或API，前端可访问接口来对数据进行增删改查，展示。前后端分离后，再加上多种设备显示的不同，对前端的要求更加灵活，响应式，弹性布局等显得尤为重要。最后，也会综合讲讲很好用的vue前端框架极其局限等。一、概况1.MVVM模式和技术MVC:model
复制链接

扫一扫