小白分享：我的一次Vue学习非寻常之路（章一）-CSDN博客

本文链接：https://blog.csdn.net/shichen2010/article/details/106582527

文章目录

1、功能分析
2、语言形态
3、页面路由
4、入门路线
5、实践案例
6、归纳总计

导读：坦白讲，我是Java服务端研发，只知道Vue这么个前端编程语言，未曾任何学习过，仅仅是个小白。但为何突然学习Vue呢，这得益于一次需求研发，无奈前端资源紧张，恰这次需求实现是面向运营端，非C端用户，产品可以接受自己自测，毕竟初期也仅是他负责这个模块的间断性周期数据维护。鉴于此，我尝试着是否可以自己实现这个模块，毕竟虽然不懂，但是可以模仿其他模块，有示例可以参考，实在搞不定也可以请教前端指教一番。鉴于此，花费几天完成该模块的功能实现（包括表格、表单、表单验证、弹出框等等），鉴于此，写此篇回顾自己的非寻常学习路线。

1、功能分析

准备实现这个功能模块，我看了一下原型图，我分析了一下功能，结论大致如下：

包含三个功能子菜单，子菜单的主页面都是查询类条件+表格+分页。
都包含导航批量设置功能（即可以选中多行记录），然后进行批量设置。
行记录展现字段项一致，操作栏位的功能按钮也一样。
无论对于批量弹出窗口批量设置，还是操作栏位功能按钮弹出窗口，都需要父子页面传值操作。
功能中包含一个工作日设置（即可以为每行记录设定工作日），工作日窗口需要支持增加或删除，我想着可以用一个日历组件。

分析如上几条结论，剩下的我就看了一下现有的功能模块，并找到了相关参考样例，CP一下，然后按照项目源码规范，并在page页面创建一个文件夹为本模块，同时新增三个文件夹对应模块的三个子菜单。

2、语言形态

我试着先完成其中一个模块的表格类，我打开刚才负责的.vue文件，看了一下源代码结构。大致示例结构如下：

<template lang="jade">
    el-panel
        el-form(:inline="true")
            el-form-item(label="状态：")
                el-select(v-model="formData.status", size="mini", placeholder="请选择", @change="query", clearable, style="width:100px")
                    el-option(v-for="(item, index) in statusList", :key="index", :label="item.name", :value="item.code")
            el-form-item
                el-button(type="primary", size="mini", @click="query") 查询
                el-button(type="primary", size="mini", @click="addNew") 新增
        el-table(:data="tableData", border, height="550", ref="multipleTable", @selection-change="handleSelectionChange")
            el-table-column(type="selection", wdith="35", fixed="left")                             
            el-table-column(label="状态" width="80px")
                template(slot-scope="scope")
                    span {{scope.row.status | state-val}}
            el-table-column(label="修改时间", prop="updatedTime")
                template(slot-scope="scope")
                    span {{scope.row.updatedTime | date}}
            el-table-column(label="操作", width="240")
                template(slot-scope="scope")
                    el-button(type="text", size="mini", @click="editDetail(scope.row)") 编辑
                    el-button(type="text", size="mini", @click="showDetail(scope.row)") 查看
        el-pagination(
            @size-change="handleSizeChange",
            @current-change="handleCurrentChange",
            :current-page="pagination.current",
            :page-sizes="[30,60,90]",
            :page-size="pagination.pageSize",
            layout="total, sizes, prev, pager, next, jumper",
            :total="pagination.total")
        el-dialog(title="支持日配置", :visible.sync="showWeekdayConfigDialog", :close-on-click-modal="false", :fullscreen="false")
            weekday-config(ref="configWeekday",:relationId="relationId", @closeTimeConfigModal="closeWeekdayConfigModal")    
</template>

<script>
    import {modifyStatus, loadRecords, queryRecord, saveRecord} from "@/api/payment";
	import WeekdayConfig from "@/page/payment/components/weekday-config/index"
	
    export default {
        name: 'deductList',
        props: {
            belongType: {
                type: Number,
                required: true,
            },
            buzType: {
                type: Number,
                required: true,
            }
        },
        data() {
            return {
                // form
                formData: {
                    status: '',
                }
            };
        },
        mounted(){
            this.init();
        },
        components:{
            WeekdayConfig
        },
        methods: {
            init(){
               
            }
        }
    };
</script>

<style scoped>
    .table {
        width: 100%;
    }
    .form {
        margin: 5px;
    }
    .dialog-content {
        padding-top: 20px;
    }
</style>

每个.vue模块分为三个结构，视图模板、逻辑脚本、视图样式。

2.1 视图模板

了解了一下，.vue视图模板也可以采用jade模板语法，这样就省去大量的闭合标签，看起来更清爽许多。

语法示例

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple templating language with a
        strong focus on performance and powerful features.

生成的 HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script> 
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Jade is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

又譬如

input(type='checkbox', checked)
input(
  type='checkbox'
  name='agreement'
  checked
)

生成的 HTML：

<input type="checkbox" checked>
<input type="checkbox" name="agreement" checked>

2.2 逻辑脚本

vue可以把把重复使用的模块提取为组件，通过import引入。
譬如：

import {modifyStatus, loadRecords, queryRecord, saveRecord} from "@/api/payment";

另外，vue的构成包含如下结构

export default {
     name: '',
     props: {},
     data() {
         return {};
     },
     mounted(){
         
     },
     components:{
         WeekdayConfig
     },
     methods: {
         init(){
            
         }
     }
 };

其中

props为定义的属性，供模板视图中使用，类似java中Class的成员属性，外部可以引入组件，并设置组件视图属性值。
mouted为vue暴漏的对数据声明周期的钩子函数。
components为引入的组件
method可以自定义自己的成员函数。

2.3 视图样式

<style scoped>
    .table {
        width: 100%;
    }
    .form {
        margin: 5px;
    }
    .dialog-content {
        padding-top: 20px;
    }
</style>

这块对于有HTML/CSS基础的据非常熟悉了，现在CSS样式有SCSS特性编写，还有更高级的LESS语法用法。

这块的作用就是我们可以定义模板视图中组建的样式属性。

修改完成之后，我通过Visual Studio Code 这个开发IDE，启动编译运行开发环境。

终端输出
如果代码编写顺利的话，运行start，终端可以输出如上，意味着编译成功，浏览器打开页面。

3、页面路由

如果页面想访问自己定义的页面，意味着需要配置自己的路由规则。
这里就不介绍源码示例了，类似Spring Controller暴漏的REST Api。

4、入门路线

经过前端指点，介绍了两个学习网站，从而帮助自己系统的学习一下，不至于在开发中，遇到星星怪怪的符号。

Vue基础学习：https://cn.vuejs.org/v2/guide/
UI组件学习：https://element.eleme.cn/#/zh-CN/component/installation

通过学习，了解到Vue的核心目标是为了实现视图层(View)数据绑定和逻辑处理的分离，使得前端开发只需要专注数据渲染逻辑的处理，数据的双向绑定从而实现无需页面刷新，数据变化而实现元素值的改变。

包括学习相关指令：v-bind、v-model、v-show、v-once、v-if、v-for等等。总而言之，系统大致过目了一下vue语言特性，以及相关特性代码的样例。

另外又看了一下组件库大致包含哪些东西，遇到问题时可以查看相关组件使用案例说明以及属性介绍。

上下班途中，微信读书又看了一遍Vue开发指南，进一步又了解到Vue只是JS类库，日常为了解决我们无需自己手写各种HTML组件，像Element、iViews组件的诞生使得我们拿来即用，就可以构建一套自己的前端应用，既有统一的布局样式，又有统一的组件。

5、实践案例

在功能实现中，需要实现一个日历功能，在日历组件中可以增加该日为工作日，也可以移除该日，对于已添加的支持删除，未添加的支持新增，需求很简单，那就开发吧。我看了一下Element的UI组件，看到一个Canlendar ( https://element.eleme.cn/#/zh-CN/component/calendar) 组件，顺便看了几个样例，觉得可行。最终实现了如下

在这里插入图片描述
介绍，黄色的代表已添加的，白色的代表未添加的，鼠标单击单元格，可以实现添加/删除功能。

源代码如下

<template lang="jade">
    el-form(label-width='180px', :model="formData", ref="form")
        el-calendar(v-model="value")
            template(slot="dateCell" slot-scope="{date, data}")
                p(v-if="weekdayList.includes(data.day)")  
                    el-link(type="danger" @click="deleteWeekday(date)" title="点击删除") 【{{ data.day.split('-').slice(1).join('-') }}】
                p(v-else)  
                    el-link(type="primary" @click="addWeekday(date)" title="点击添加") 【{{ data.day.split('-').slice(1).join('-') }}】
</template>

<script>
    import {loadWeekdayRecords,batchSaveWeekday,deleteWeekdayRecord} from "@/api/payment";
    export default {
        name: "weekdayConfig",
        props: {
            relationId: {
                type: Number,
                required: true,
            }
        },
        data() {
            return {
                value:new Date(),
                configList:[],
                weekdayList:[],
                formData: {
                    relationId: ""
                }
            };
        },
        mounted() {
            this.init();
        },
        methods: {
            init(){
                this.loadWeekdays(this.value);
            },
            loadWeekdays(selectedData){
                var params = {};
                params.form = {
                    relationId : this.relationId,
                    year: selectedData.getFullYear()
                };
                console.log(params);
                params.paging = false;
                loadWeekdayRecords(params).then((_) =>{
                    this.configList = _.data.data;
                    this.weekdayList = this.configList.reduce((arr,it)=>[...arr,it.weekday],[])
                })
            },
            addWeekday(selectedData){
                var params = [{
                    relationId: this.relationId,
                    weekday: selectedData
                }];
                batchSaveWeekday(params).then((_) =>{
                    this.$notify({
                        message: _.msg,
                        type: _.code === 1 ? 'success' : 'warning'
                    });
                    this.loadWeekdays(selectedData);
                });
            },
            deleteWeekday(selectedData){
                var selectedDate = format(new Date(selectedData),'YYYY-MM-DD');
                var find = this.configList.find(item => item.weekday == selectedDate);
                if(find){
                    deleteWeekdayRecord(find.id).then((_) =>{
                        this.$notify({
                            message: _.msg,
                            type: _.code === 1 ? 'success' : 'warning'
                        });
                        this.loadWeekdays(selectedData);
                    });
                }
            }
        }
    };
</script>

<style>
.el-link--danger {
    display: block;
    width:72px;
    height: 62px;
    background-color:#ffe696;
    line-height: 65px;
    text-align: center;
}
.el-link--primary {
    display: block;
    width:72px;
    height: 62px;
    background-color:#fff;
    line-height: 65px;
    text-align: center;
}
</style>

事实上在代码编写过程中遇到一些问题，归纳如下：

问题1：日历中日期是否返回的工作日数组中成员

使用了集合的includes函数

v-if="weekdayList.includes(data.day)"

问题2：删除日期，但是后端需要根据id指定记录

使用了集合的find函数

deleteWeekday(selectedData){
    var selectedDate = format(new Date(selectedData),'YYYY-MM-DD');
    var find = this.configList.find(item => item.weekday == selectedDate);
    if(find){
        deleteWeekdayRecord(find.id).then((_) =>{
            this.$notify({
                message: _.msg,
                type: _.code === 1 ? 'success' : 'warning'
            });
            this.loadWeekdays(selectedData);
        });
    }
}

问题3：ajax请求查询的工作日对象集合，如何获取工作日组合一个数组对象。

使用了集合的reduce函数(ES6语法、相对于map性能更高)

loadWeekdayRecords(params).then((_) =>{
   this.configList = _.data.data;
   this.weekdayList = this.configList.reduce((arr,it)=>[...arr,it.weekday],[])
})

6、归纳总计

通过此机会，认识到vue，又通过实践，进一步体会其乐趣。认识到，像我这样一个小白几天都可以快速完成几个模块，可见其学习门槛低，入门简单。

Element就像当初学习jQuery，遇到一系列实现的组件，使得我们拿来即用，无需自己摸索开发。

ES6带来的新特性使得前端JavaScript语言可以通过相关API或特性通过更少的代码实现功能。

譬如定义函数支持默认值。

function foo(width= 20, height = 50) {
    console.log(width, height)
}

譬如支持箭头函数

() => 1;

(a, b) => a + b;

() => ([1, 2]);

() => ({
    a: 1,
    b: 2
});

() => {
    alert()
}

setTimeout(() => {
    // to do
}, 500)

譬如模板字符串拼接以及变量支持

let str = `hello, ${name}, my name is ${myName}`;

//类似
var str = 'hello, ' + name + ', my name is ' + myName;

等等，这使得刷新自己对传统的JavaScript语言开发的认识，还是蛮有趣的，就像Java8 Stream Api的出现，更多支持：https://www.jianshu.com/p/e2ba90e89754

下面的是我的公众号二维码图片，欢迎关注，或公众号搜索【秋夜无霜】。