后端的角度看前端REACT/VUE

最新推荐文章于 2022-12-22 09:02:58 发布

松影

最新推荐文章于 2022-12-22 09:02:58 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/shzm0/article/details/80877925

版权

随着公司的开发任务的需要，我已经把REACT,VUE这两种前端技术已经使用了一遍，尤其是vue较为深入（疯狂加班，代码重构了N次，特性全部走了一遍），相比于jsp,freemarke,velocity这种前端技术，给我是完全不同的感受。
我刚接触angular.js的时，是直接引用JS，用CDN，然后用起来，并没有想象中的好用，虽然也是mvvm的框架了，但是感受并不深刻，代码类似以下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>欢迎信息:</p>

<h1>{{myWelcome}}</h1>

</div>

<p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});
</script>

</body>
</html>

看起来其实并不是很好理解，一位内总是要$scope,然后myApp做一个标记，用起来很难受，尤其是如果改造代码的话
然后后面，我鼓着勇气用VUE写项目，并不是CDN引用这种而是VSCODE,NPM这种方式，使用ES6+WEBPACK去使用，这里给我这个后端带来了完全不同的感受,VUE代码如下

<template>
    <div id="demo01">
        <div class="table">
            <div class="ragle">
                <div class="input-item" v-for="(item, index) in dataList">
                    <label :for="'inpt'+(index+1)">
                    {{item.name}}
                    </label>
                    <input type="range" :data-index="index" v-on:input="rangeChange" :id="'inpt'+(index+1)" :value="item.score" max="100" min="0" step="1"/>
                    <span>{{item.score}}</span>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    export default{
        data () {
            return {
                //首先定义数据
                dataList:[
                    {
                        "name": '语文',
                        "score": 87
                    },{
                        name: '数学',
                        score: 65
                    },{
                        name: '英语',
                        score: 96
                    },{
                        name: '体育',
                        score: 50
                    }
                ]
            }
        },
        created: function () {
            // console.log(this)
            // this.dataList = this.sortArray(this.dataList, 'score')
        },
        methods: {
            rangeChange: function (e) { //响应js时间
                var val = e.target.value;
                var index = e.target.attributes['data-index'].value
                console.log(val, index)
                this.dataList[index].score = val
                // this.dataList = this.sortArray(this.dataList, 'score')
            },
            sortArray: function (value, key) { //用来数据排序
              return value.sort(function (a, c) {
                return a[key] < c[key];
                })
            }
        }
    }
</script>

REACT代码如下：

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

简单的看一下，完全和cdn引入的方式不同了，将html和逻辑代码区分开了，这也是MVVM体现非常深刻的一个点，这种方式加强了MVVM的对象设计，以及撸代码的感觉，MVVM思想MODEL-VIEW_MODEL-VIEW，逻辑代码就是VIEW_MODEL，这里就体现的很好
下面讲一下给我带来更加震惊的2个词，路由，状态管理
路由，可以类似与action跳转去做，在进一个请求之前，先进路由，路由判断是否进行跳转或者跳转到其他地方，这里可以做登陆拦截，权限管理等等功能
状态管理，最简单的例子，单页应用，首次进入的一些关键信息放到store里面，然后传给子组件，子组件就可以获取了，相比于localStorage，是完全不同的管理方式
react router4.0的路由规则已经不建议全局定义路由了，而是定义部分路由，相比于vue,但是我写react的时候，写的好懵逼，因为vue是前端同学建议的，而react是部门老大建议的，结果我换项目写，差点写懵了。所以这里需要注意下
学习react,vue就去官网学把，提示一下，react的中文文档维护不是很及时，请保持怀疑的态度尤其是router,vue因为是中国人开发的所以国内文档维护及时
vue点击进来看看
 react点击进来看看
 vscode,react搭建demo
写了前端，就感觉自己的后端接口返回速度和字段设计缺陷
虽然现在区块链，AI非常流行，但是前端也可以适当的写一写，可以让自己的思维更加开阔和对整体设计更加了解。
额外吐槽一句，ES6的语法真的爆炸，尤其是配上了ESLIENT的语法校验，至少我刚写的时候，真的是写一句编译一句错误，简直令人绝望。不过后面强行把自己的代码规范给改善了，真心强行

松影

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
后端的角度看前端REACT/VUE

随着公司的开发任务的需要，我已经把REACT,VUE这两种前端技术已经使用了一遍，尤其是vue较为深入（疯狂加班，代码重构了N次，特性全部走了一遍），相比于jsp,freemarke,velocity这种前端技术，给我是完全不同的感受。我刚接触angular.js的时，是直接引用JS，用CDN，然后用起来，并没有想象中的好用，虽然也是mvvm的框架了，但是感受并不深刻，代码类似以下&l...
复制链接

扫一扫