通过cdn引入vue.js完成页面的增删改查功能——技能汇总

亦凉 2021-07-25 17:57 384阅读 0赞

## cdn引入vue ##

之前公司的老项目是mvc模式，前后端不分离，页面的很多内容都是用的jq+layui的形式，说实话，不好处理。特别是我不是很熟练jq的情况下。

前几天写了一个表格及页面的增删改查，由于编辑页面需要展示的内容过于庞大（需要从天眼查的接口上获取很多的数据），因此不得以重构成vue的页面，企图通过vue的组件来简化页面结构。

想法是好的，但是基础忘了，通过cdn引入的vue.js，是没有办法使用vue的组件功能的，因为浏览器不识别，只有通过vue脚手架搭建的项目，才可以使用vue的组件功能，我很惭愧，我的基础好烂……

话不多说，直接上代码：

### cdn引入vue+elementUi ###

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="~/Content/css/elementUi.css" rel="stylesheet" />

由于我们公司有自己的主题色，所以在引入了elementUi的cdn链接之后，我又下载到本地，更改主题色之后，覆盖之前的样式。

为什么要这样做？

1.  如果直接使用自己本地的css样式，会发现icon图标全部失效，变成方块了，就是识别不了了……
2.  修改本地的主题色，可以打开css文件，将\#409eff颜色全部替换为自己想要的主题色即可
3.  先引入cdn的css样式，然后用自己更改过主题色的本地css覆盖，就能完美解决更改主题色并保留图标识别的功能了。

### 引入本地的json文件 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
我有一个本地的json文件，想要获取其中的一部分数据，但是通过import的方式是没有办法获取的，  
scriipt标签默认的格式是：text/script 如果想要使用Import的形式，需要将type改为;module ，但是我这边还是不起作用,会提示报错:文件Not found，最后是通过下面的方法解决的……

$.get("/Scripts/Common/supplierObj.json", (data) => { 
        this.supplierObj = data;
    }, 'json');

通过$.get调取Json文件，然后将获取到的数据赋值到vue中。

### vue.js文件引入后使用vue ###

var vm = new Vue({ 
            el: "#supplierPool",
            data() { 
                return { }
            }
       })

需要注意的一点就是这个el，一定要写，之前在用脚手架搭建的vue项目中，这个el是可以没有的，因此这个地方也坑了我一把，el一定要写，还要是唯一的才可以。

### cdn引入的vue使用组件功能 ###

前面已经说了，cdn引入的vue是不能使用组件功能的，但是为了页面简洁和结构清晰，还是需要用到这个组件，因此我借用了Iframe标签，

<el-dialog :title="title" :visible.sync="dialogFormVisible" width="90%" :height="tableHeight">
        <iframe src="SupplierDetail" style="width:100%;height:500px;" id="iframe" v-if="dialogFormVisible"></iframe>
    </el-dialog>

element-ui中的弹层组件dialog，我还是有用到的，但是里面换成了iframe标签，这个地方需要用到iframe的传值问题

### iframe标签：父级页面往子级页面传参 ###

增删改查功能：其中的改需要弹层展示详情，这就需要将id传递到详情页面，调取接口获取详情数据。

传参的方式如下：

我是借用了一个span标签，由于整个页面背景是白色\#fff，因此我将span的样式也改为白色，防止页面出现不必要的数据展示。

span上有个自定义的id `:data-id="id"`  
当弹层需要弹出时，给id赋值为当前这条数据的id，传递到子页面中，

### iframe标签：子级页面接受父级页面的参数 ###

var id = $("#currentId", window.parent.document).data("id");
    var state = $("#currentId", window.parent.document).data("state");

通过jq的方式获取到想要的元素，然后通过jq元素.data(‘id’)的形式获取到id，  
子级页面获取父级页面的dom元素可以通过window.parent.document的形式获取，这个是获取父级整个dom元素，然后通过“\#currentId”缩小范围既可以得到想要的元素了，同理，获取state也是如此

### iframe标签：子级页面关闭父级页面的弹层 ###

由于我是使用的父级页面的dialog弹层，然后加载iframe标签来实现的类似于组件的功能，在子级页面修改完内容后，需要关闭这个弹层，应该怎么处理那？

此时就需要子级调用父级的函数了：

父级页面的改动：

mounted() { 
        var me = this;
        window.closeIframe = me.closeDialog;
        window.refreshData = me.refreshData;
    },
    methods:{ 
    	closeDialog(){ console.log("关闭弹层");},
    	refreshData(){ console.log("刷新数据");}
    }

在mounted生命周期函数中，将vue中的函数挂载到window上，

然后在子页面处理：通过parent.xxx()的方式进行函数的调用

parent.closeIframe();
    parent.refreshData();
    ```

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/d92f5aa47ace43acb6e4ec041d8d4620.png