MVC+vue.js+iview

最新推荐文章于 2024-06-30 12:24:57 发布
最新推荐文章于 2024-06-30 12:24:57 发布
阅读量3.2k 收藏 3
点赞数
文章标签： mvc+vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38230916/article/details/77715446
版权

项目需要，最近在学vue.js，领导决定用iview这个ui，于是写了这个基于MVC的例子。

这里写图片描述
前端代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    @*<link href="~/Content/iView/iview.css" rel="stylesheet" />
        <script src="~/Content/iView/iview.min.js"></script>
        <link href="~/Content/iView.css" rel="stylesheet" />
        <script src="~/Content/vue.js"></script>*@
    <script src="~/js/vue-resource.js"></script>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview@2.1.0/dist/styles/iview.css">
    <script src="~/js/vue-resource.js"></script>
    <style>
        .ivu-table .demo-table-info-row td {
            background-color: #2db7f5;
            color: #fff;
        }

        .ivu-table .demo-table-error-row td {
            background-color: #ff6600;
            color: #fff;
        }

        .ivu-table td.demo-table-info-column {
            background-color: #2db7f5;
            color: #fff;
        }

        .ivu-table .demo-table-info-cell-name {
            background-color: #2db7f5;
            color: #fff;
        }

        .ivu-table .demo-table-info-cell-age {
            background-color: #ff6600;
            color: #fff;
        }

        .ivu-table .demo-table-info-cell-address {
            background-color: #187;
            color: #fff;
        }

        .expand-row {
            margin-bottom: 16px;
        }
    </style>
</head>
<body>
    <div id="app">
        <i-button v-on:click="show" type="warning">添加</i-button>
        <Modal v-model="modal1"
               v-bind:title="title"
               v-on:on-ok="ok"
               v-on:on-cancel="cancel">
            <div style="text-align:center">
                <template>
                    <input type="hidden" v-model="ModifyData.SID" />
                    <i-form :label-width="60">
                        @*<Form-item label="编号主键">
                                <i-input v-model="ModifyData.SID" disabled></i-input>
                            </Form-item>*@
                        <Form-item label="姓名">
                            <i-input placeholder="请输入" v-model="ModifyData.SNAME"></i-input>
                        </Form-item>
                        <Form-item label="性别">
                            <i-select placeholder="请选择" v-model="ModifyData.SSEX">
                                <i-option v-for="item in sexlist" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                            </i-select>
                        </Form-item>
                        <Form-item label="学号">
                            <i-input placeholder="请输入" v-model="ModifyData.SNO"></i-input>
                        </Form-item>
                        <Form-item label="年级">
                            <i-input placeholder="请输入" v-model="ModifyData.NID"></i-input>
                        </Form-item>
                        <Form-item label="班级">
                            <i-input placeholder="请输入" v-model="ModifyData.BID"></i-input>
                        </Form-item>
                        <Form-item label="年级/班级">
                            <Cascader :data="Cascader" v-model="CascaderModel" placeholder="请选择年级/班级"></Cascader>
                        </Form-item>
                        <Form-item label="开始时间">
                            <Date-picker type="date" v-model="ModifyData.BeginTime" format="yyyy年MM月dd日" placeholder="选择日期" style="width: 200px"></Date-picker>
                        </Form-item>
                        <Form-item label="结束时间">
                            <Date-picker type="date" v-model="ModifyData.EndTime" format="yyyy年MM月dd日" placeholder="选择日期" style="width: 200px"></Date-picker>
                        </Form-item>
                    </i-form>
                </template>

            </div>
        </Modal>
        <i-button type="primary" size="large" v-on:click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</i-button>
        <auto-complete v-model="value1"
            v-bind:data="SearchData"
            v-on:on-search="handleSearch1"
            icon="ios-search"
            placeholder="搜索"
            style="width:200px"></auto-complete>

        @*<i-input placeholder="请输入查询条件" v-model="SearchData" style="width:200px;"></i-input>
        <i-button v-on:click="handleSearch1" type="primary">查询</i-button>*@
        <template>
            <i-table stripe @*:row-class-name="rowClassName"*@ highlight-row :columns="columns1" :data="data1" height="600" ref="table" @*style="width:100%;"*@></i-table>
        </template>
        <div class="layout-copy" style="text-align:center;">
            2011-2018 &copy;
        </div>
    </div>
    <script type="text/javascript">



        var vm = new Vue({
            el: '#app',
            data: {
                CascaderModel:[],
                Cascader:[],
                value1: '',
                SearchData: [],
                title: '',
                sexlist: [{
                    value: 0,
                    label: '男'
                }, {
                    value: 1,
                    label: '女'
                }],
                modal_loading: false,
                visible: false,
                columns1: [
                     {
                         type: 'selection',
                         width: 60,
                         align: 'center'
                     },
                     {
                         type: 'index',
                         width: 60,
                         align: 'center',
                         sortable: true
                     },
                    {
                        title: '姓名',
                        key: 'SNAME',
                        sortable: true,
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person',
                                        //background-color: '#87d068'
                                    }
                                }),
                                h('strong', params.row.SNAME)
                            ]);
                        }

                    },
                    {
                        title: '年级',
                        key: 'NID',
                        sortable: true
                    },
                    {
                        title: '班级',
                        key: 'BID',
                        sortable: true
                    },
                        {
                            title: '学号',
                            key: 'SNO',
                            sortable: true,
                            filters: [
                         {
                             label: '学号大于8',
                             value: 1
                         },
                         {
                             label: '学号小于8',
                             value: 2
                         }
                            ],
                            filterMultiple: false,
                            filterMethod (value, row) {
                                if (value === 1) {
                                    return row.SNO >= 8;
                                } else if (value === 2) {
                                    return row.SNO < 8;
                                }
                            }
                        },
        {
            title: '性别',
            key: 'SSEX',
            sortable: true,
            render: (h, params) => {
                var date = params.row.SSEX;
                return (date == 0 ? "男" : "女");
            }
        },
         {
             title: '开始时间',
             key: 'BeginTime',
         },
          {
              title: '结束时间',
              key: 'EndTime',
              //render: (h, params) => {
              //    var date1 = params.row.EndTime;//    /Date(1502812800000)/
              //    var date = date1.substring(6, 19);
              //    return new Date(parseInt(date)).toLocaleString().substring(0, 9);
              //}
          },
           {
               title: '操作',
               key: 'action',
               width: 150,
               align: 'center',
               render: (h, params) => {
                   return h('div', [
                       h('Button', {
                           props: {
                               type: 'primary',
                               size: 'small'
                           },
                           style: {
                               marginRight: '5px'
                           },
                           on: {
                               click: () => {
                                   //this.show(params.index)
                                   vm.modal1 = true;
                                   vm.Modify(params);
                                   //alert(params.index);
                               }
                           }
                       }, '修改'),
                       h('Button', {
                           props: {
                               type: 'error',
                               size: 'small'
                           },
                           on: {
                               click: () => {
                                   //this.remove(params.index)
                                   vm.$Modal.confirm({
                                       title: '确认删除',
                                       content: '<p style="font-size:16px;">确认要删除吗？</p>',
                                       onOk: () => {
                                           vm.Delete(params);
                                       },
                                       onCancel: () => {
                                           this.$Message.info('您取消了该操作');
                                       }
                                   });
                               }
                           }
                       }, '删除')
                   ]);
               }
           }
                ],
                data1: [],
                ModifyData: { SNAME: '', NID: '', BID: '', SSEX: '', SNO: '', SID: '', BeginTime: '', EndTime: '' },
                modal1: false,
                baseUrl: "/ShopCart/",
            },
            methods: {
                gc:function () {
                    var that = this;
                    that.$http.get(that.baseUrl + "Cascader").then(function (res) {

                        res.data.forEach(function (val, index, arr) {
                            that.Cascader.push(val);
                        })
                    }, function (res) {
                        alert(res.data);

                    });
                },
                handleSearch1 (value) {
                    var that = this;
                    that.data1 = [];
                    that.$http.get(that.baseUrl + "AutoComplete", { SearchData: value }).then(function (res) {
                        res.data.forEach(function (val, index, arr) {
                            that.data1.push(val);
                        })
                    }, function (res) {
                        alert(res.data);
                        that.GetAllData();
                    });

                },
                Delete: function (params) {
                    var that = this;
                    that.$http.get(that.baseUrl + "Delete", params.row).then(function (res) {
                        vm.$Message.success("删除成功");
                        that.GetAllData();
                    }, function (res) {
                        alert(res.data.Message);
                        that.GetAllData();
                    });

                },
                ok () {
                    var that = this;
                    that.$http.post("/ShopCart/Edit", that.ModifyData).then(function (res) {

                        that.ModifyData = { SNAME: '', NID: '', BID: '', SSEX: '', SNO: '', SID: '', BeginTime: '', EndTime: '' };
                        that.isVisable = false;
                        that.GetAllData();
                        that.$Message.success(res.data);
                    }, function (res) {
                        that.$Message.error(res.data);
                    });

                },
                cancel () {
                    this.ModifyData = { SNAME: '', NID: '', BID: '', SSEX: '', SNO: '', SID: '', BeginTime: '', EndTime: '' };
                    //this.$Message.info('您取消了操作');
                    //this.$Message.info({
                    //    content: '您取消了操作',
                    //    duration: 5
                    //});
                    this.$Notice.open({
                        title: '提示',
                        desc: false ? '' : '您取消了操作'
                    });
                },
                Modify: function (params) {
                    this.title = '修改';
                    this.modal1 = true;
                    vm.ModifyData = params.row;
                    var nid = params.row.NID.toString();
                    var bid = params.row.BID.toString();
                    this.CascaderModel = [nid,bid];
                },
                exportData (type) {
                    if (type === 1) {
                        this.$refs.table.exportCsv({
                            filename: '原始数据'
                        });
                    } else if (type === 2) {
                        this.$refs.table.exportCsv({
                            filename: '排序和过滤后的数据',
                            original: false
                        });
                    } else if (type === 3) {
                        this.$refs.table.exportCsv({
                            filename: '自定义数据',
                            columns: this.columns8.filter((col, index) => index < 4),
                            data: this.data7.filter((data, index) => index < 4)
                        });
                    }

                },
                GetAllData: function () {
                    var that = this;
                    that.data1 = [];
                    this.$http.post("/ShopCart/GetData").then(function (res) {
                        res.data.forEach(function (val, index, arr) {
                            that.data1.push(val);
                        })
                    }, function (res) {
                        that.$Message.error(res.data);
                    });
                },
                //rowClassName (row, index) {
                //    if (index % 4 === 1) {
                //        return 'demo-table-info-row';
                //    } else if (index % 4 === 3) {
                //        return 'demo-table-error-row';
                //    }
                //    return '';
                //},
                show: function () {
                    var that = this;
                    this.modal1 = true;
                    this.title = '添加';
                    that.$http.get(that.baseUrl + "GetSNO").then(function (res) {
                        vm.ModifyData.SNO = res.data
                    },
                    function (res) {
                        that.$Message.error(res.data);
                    });
                }
            },
            mounted: function () {
                this.$nextTick(function () {
                    //alert(1);
                    this.GetAllData();
                    this.gc();
                })
            },
            filter: {

            }
        })
    </script>
</body>
</html>

后台代码

    public ActionResult GetData()
    {

        db.Configuration.ProxyCreationEnabled = false;
        //var list = db.StudentTable.ToList().OrderBy(u=>u.SNO);
        var list = from d in db.StudentTable
                   select new
                   {
                       BeginTime = d.BeginTime.ToString(),
                       d.BID,
                       EndTime = d.EndTime.ToString(),
                       d.Grade,
                       d.ImageUrl,
                       d.NID,
                       d.SID,
                       d.SNAME,
                       d.SNO,
                       SSEX = d.SSEX/* == 0 ? "男" : "女",*/

                   };
        return Json(list, JsonRequestBehavior.AllowGet);
    }
    DHJEntities db = new DHJEntities();
    OperaResult op = new OperaResult();
    /// <summary>
    /// 修改/添加
    /// </summary>
    /// <param name="student1"></param>
    /// <returns></returns>
    public string Edit(StudentTable student1)
    {
        try
        {
            StudentTable st = new js.StudentTable();
            if (student1.SID == 0)//新增
            {
                st.ImageUrl = student1.ImageUrl;
                st.NID = student1.NID;
                st.SNO = student1.SNO;
                st.SSEX = student1.SSEX;
                st.SNAME = student1.SNAME;
                st.BID = student1.BID;
                st.BeginTime = student1.BeginTime;
                st.EndTime = student1.EndTime;
                db.StudentTable.Add(st);
                db.SaveChanges();

                return "新增成功";
            }
            else
            {
                st = db.StudentTable.FirstOrDefault(s => s.SID == student1.SID);
                st.ImageUrl = student1.ImageUrl;
                st.NID = student1.NID;
                st.SNO = student1.SNO;
                st.SSEX = student1.SSEX;
                st.SNAME = student1.SNAME;
                st.BID = student1.BID;
                st.BeginTime = student1.BeginTime;
                st.EndTime = student1.EndTime;
                db.SaveChanges();
                return "修改成功";
            }
        }
        catch (Exception ex)
        {
            return ex.Message;
        }


    }
    /// <summary>
    /// 删除
    /// </summary>
    /// <param name="student"></param>
    /// <returns></returns>
    public ActionResult Delete(StudentTable student)
    {
        StudentTable st = new js.StudentTable();
        try
        {
            st = db.StudentTable.FirstOrDefault(f => f.SID == student.SID);
            db.StudentTable.Remove(st);
            db.SaveChanges();
            return Content("OK");
        }
        catch (Exception ex)
        {

            return Content(ex.Message);
        }

    }

    public ActionResult GetSNO()
    {

        var query = db.StudentTable.Max(p => p.SNO);
        int TMP = Convert.ToInt32(query) + 1;
        string SNO = string.Format("{0:D4}", TMP);
        return Content(SNO);

    }
    /// <summary>
    /// 搜索
    /// </summary>
    /// <param name="SearchData">搜索条件</param>
    /// <returns></returns>
    public ActionResult AutoComplete(string SearchData)
    {
        db.Configuration.LazyLoadingEnabled = false;
        db.Configuration.ProxyCreationEnabled = false;
        var list = (from d in db.StudentTable
                    where d.SNAME.Contains(SearchData) || d.SNO.Contains(SearchData)
                    select new
                    {
                        BeginTime = d.BeginTime.ToString(),
                        d.BID,
                        EndTime = d.EndTime.ToString(),
                        d.Grade,
                        d.ImageUrl,
                        d.NID,
                        d.SID,
                        d.SNAME,
                        d.SNO,
                        SSEX = d.SSEX
                    }).ToList();

        return Json(list, JsonRequestBehavior.AllowGet);
    }



    /// <summary>
    /// 构造班级/年级级联数据
    /// </summary>
    /// <returns></returns>
    public ActionResult Cascader()
    {
        var list = db.Class.OrderBy(u => u.NID).Select(P => P.NID).Distinct().ToList();
        List<GradeClass> gcs = new List<GradeClass>();
        foreach (var item in list)
        {
            GradeClass gc = new GradeClass();
            gc.value = item.ToString();
            gc.label = item.ToString() + "年级";
            gc.children = GetChildren((int)item);
            gcs.Add(gc);
        }

        return Json(gcs,JsonRequestBehavior.AllowGet);
    }

    public List<GradeClass> GetChildren(int nid)
    {
        var g = db.Class.Where(p => p.NID == nid).OrderBy(p => p.BID).ToList();
        List<GradeClass> gcs = new List<GradeClass>();
        foreach (var item in g)
        {
            GradeClass gc = new GradeClass();
            gc.value = item.BID.ToString();
            gc.label = item.BNAME;
            gcs.Add(gc);
        }
        return gcs;
    }
    public class GradeClass
    {
        public string value { set; get; }
        public string label { set; get; }
        public List<GradeClass> children { set; get; }

    }

    public ActionResult TreeSource()
    {

        return Json(Tree());
    }
    #region 构造 树
    public static List<TreeClass> Tree()
    {
        DHJEntities db = new DHJEntities();
        List<TreeClass> L1 = new List<Controllers.ShopCartController.TreeClass>();
        List<TreeClass> L2 = new List<Controllers.ShopCartController.TreeClass>();
        List<TreeClass> L3 = new List<Controllers.ShopCartController.TreeClass>();
        var GradeList = db.Grade.OrderBy(g => g.NID).ToList();
        var ClassList = db.Class.OrderBy(c => c.BID).ToList();
        foreach (var item in GradeList)
        {
            L1.Add(new TreeClass
            {
                title = item.NNAME,
                NodeId = item.NID,
                DataType = 1,
                children = null,
                ParentID = 0,


            });
        }
        foreach (var item in ClassList)
        {
            L2.Add(new TreeClass
            {
                Nid = (int)item.NID,
                NodeId = (int)item.BID,
                title = item.BNAME,
                DataType = 2,
                children = null,
                ParentID = (int)item.NID,
            });

        }
        foreach (var item in L1)
        {
            List<TreeClass> chil = new List<TreeClass>();
            chil = L2.Where(c => c.ParentID == item.NodeId).ToList();
            item.children = chil;
        }
        return L1;

    }

    public class TreeClass
    {
        /// <summary>
        /// 数据类型 1 年级列表 2 班级列表 
        /// </summary>
        public int DataType { set; get; }
        public int Nid { set; get; }
        //public string Bid { set; get; }
        /// <summary>
        /// ParentID 父节点ID
        /// </summary>
        public int ParentID { set; get; }
        public int BID { set; get; }
        public List<TreeClass> children { set; get; }
        /// <summary>
        /// 节点名称
        /// </summary>
        public string title { set; get; }
        public int NodeId { set; get; }
    }
    #endregion

“`

灯琰1
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3817
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Vue.js简介和入门使用
luvzen0127的博客
09-07 1077
vuejs 简介 Vue.js (vuejs.org) 渐进式 JavaScript 框架 vuejs 是基于MVVM 思想的框架 vuejs 是以数据驱动为主的框架 vuejs 是以组件化进行开发的框架 vuejs 是国人尤雨溪（尤大大，尤小石）进行开发的。 什么是渐进式？（vuejs）破坏性小，上手简单 渐进式是相对于另外一种开发思想（侵入式）来说。 渐进式指的是在使用该产品做开发的时候，不需要完全的去重构之前的代码结构，可以非常方便将该产品集成到自身的项目中。 什么是侵入式？（react）脚手
iview搭建后台管理系统
06-01
使用iview搭建的后台管理系统,已经配置好了webpack 接口也可以联调.不懂的,启动不起来的请咨询我
Vuejs -- MVC思想
snwown的博客
11-10 586
前端MVC思想 MVVM是前端视图层的分层开发思想，主要是用来将每一个页面分成M,VMV这三种组件。这三个组件在前端开发中分工协作，分工明确。其中，VM是MVVM的核心，因为是M和V之间的一个整体的调度者。我们所要学习的就是通过VUE.JS框架来创建VM这一组件，为M和V来进行服务 注意：对于controller前端开发的控制器和后端开发的控制器在概念上有一定的区别，对于前端开发而言，controller不仅仅只是用来接收并处理请求，更重要的是还要处理具体业务逻辑。对于后端而言，controller会继续
springmvc + vue 简单系统搭建_springmvc项目增加vue
最新发布
2401_85112749的博客
06-30 411
可以自定义servlet.xml配置文件的位置和名称，默认为WEB-INF目录下，名称为[]-servlet.xml，如spring-servlet.xml。启动包扫描功能，以便注册带有@Controller、@service、@repository、@Component等注解的类成为spring的bean。设置dispatchservlet的匹配模式，通过把dispatchservlet映射到/，默认servlet会处理所有的请求，包括静态资源。springmvc配置。
VUE + iView
Fisher_yu01的博客
01-09 635
下载地址 https://github.com/LeonardKawayi/vue-iview
Asp.net web MVC5 + IVIEW + Vue.js + Require.js框架搭建
LoveLearnling的博客
02-25 4609
Mvc是近年比较流行的一种web开发模式 个人觉得MVC是一种简单易懂、高效的开发模式;关于开发模式还有MVVM, vue.js就是这种模式，这里就不讲什么是MVC、 MVVM了， 有兴趣可以百度了解一下。 主要用到的技术: Asp.net MVC 5 IView + Vue.js（这两者是完美搭档， IView：基于Vue.js的UI） require.js （按需加载js模块， 详解...
.NET MVC 中使用iView上传组件
weixin_30709061的博客
12-11 152
最近做上传模块中用到了批量相册管理，使用了iView中的相册组件，组件文档地址：https://www.iviewui.com/components/upload 先上个效果图 主要遇到的难点是对应文档中的参数不知道如何写，在群里热心人帮助后解决了。具体实现是这样的，默认上传直接记录到数据库中，日志添加更新图片记录中的日志编号字段。删除的时候是当点击保存后，将删除的编号由后台处理，删除图片...
毕业设计，图书馆管理项目，django+restframework+xadmin+vue+vux+iview.zip
09-29
4. Vue.js：Vue.js是一款轻量级的前端JavaScript框架，它具有声明式渲染、组件化、虚拟DOM、响应式数据绑定等特性。在这个项目中，Vue.js负责处理前端页面的动态数据展示，实现用户交互，如搜索、筛选图书，以及表单...
管理系统系列--Asp.Net Core + Dapper + Vue + IView 前后端分离通用权限管理系统、.zip
02-25
Vue.js是一款渐进式的JavaScript框架，它以其简单易学、可维护性强、组件化开发等优点，在前端领域广泛应用。在本项目中，Vue.js用于构建用户界面，结合Vuex进行状态管理，实现组件间的通信，提升用户体验。Vue ...
SpringMVC精品资源-- 【新版计划中】watchdog-framework的Web前端项目，基于Vue+iV.zip
02-18
总的来说，这个压缩包可能包含了一个完整的SpringMVC和Vue.js+iView开发的Web项目实例，对于学习者来说，通过实际操作和研究这些代码，可以深入了解SpringMVC的MVC模式以及Vue.js的组件化开发，同时体验到iView如何...
cms-vue-iView:完整可运行的后台管理系统，基于SpringMVC实现，前端基于Vue + iView实现
03-11
CMS完整能源运行的后台管理系统，后台数据工程基于SpringMVC实现，前台界面工程基于Node.js + Vue.js + iView的架构实现。 工程结构介绍 cms/ * cms_data/ ---------- 后台数据工程 * cms_web/ ---------- 前台界面工程 * tb_menu_one.sql ---- 数据库初始化sql 关键技术功能介绍 一。登录账号密码采用RSA非对称加密方式 由上面的工程下发公钥，前端工程使用公钥对账号密码进行加密再进行登录操作，有效避免账号密码暴露。如下图所示： 二。顶端菜单栏动态下发 顶部菜单栏的显示根据不同用户分配的权限下发不同的菜单，采用二级菜单的结构，如图所示： 三。 JWT做权限加密和超时管理 四。菜单栏路径配置 五。角色管理 可以创建不同角色，对角色分配菜单栏的界面权限 六。用户管理 对用户
基于vue，iview写的一个基础的管理系统前端框架
08-19
基于vue，iview写的一个基础的管理系统前端框架，集成了百度地图的加载
Iview实例
qq_45070531的博客
03-19 862
Iview项目实例1、Menu菜单实例(1)实例1 (用API里事件,稍许复杂)(2)实例2 (简便)(3)菜单栏自动选中当前功能名 (实例)2、验证是否为登录状态(案例)第一步 在需要存储token的页面绑定事件写入或释放token第二步 路由文件添加存储token的属性及值第三步 添加判断并导向需跳转的路径(可在路由js里写也可在ivew.js里写)3、根据不同客户端加...
iview使用示例
c_qianxia5040的博客
11-17 586
iview是基于vue的框架，需要引入vue.js 或者下载vue，在页面上引入 js 和 css 文件即可开始使用 <html> <head> <meta charset="utf-8"> <title>iview使用示例</title> <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/ivie
分享一个 iView 调试案例
weixin_34331102的博客
06-18 624
当我们遇到开源框架的 bug 时，应该如何处理？ Google？查文档？提 issue ？ 或许，我们还能尝试自己在源码中找出 bug 的原因！ 本文分享笔者在工作中，遇到一个 iview 的 bug 时， 如何根据问题的表征，一步一步推导出问题的源头，最终找出解决方案的过程。 希望对尊贵的读者朋友们有些许启发。 版本升级触发的 bug 最近抽空对项目用的 iView 版本做升级，从 2.6....
asp.net mvc 中结合使用vuejs与kindeditor以及IView
dante1987的博客
07-20 281
@{ ViewBag.Title = "产品添加"; Layout = "~/Views/Shared/_Iview_Form.cshtml"; } <style> #row1 { padding: 0 30px; } #row1 > div { width: 15.5% !importa...
vue-router+iview（简单例子）
weixin_30555515的博客
06-27 375
根据上面我们已经建立好的工程项目，我们来加入路由等方法。 首先修改我们的HelloWorld.vue，加入iview的Layout组件 第二步，建立两个我们对应路由的文件 <style scoped> .layout{ border: 1px solid #d7dde4; background: #f5f7f9; position: relative; ...
iviewui前端开发实例技术指南
yan_dk的专栏
09-07 384
安装nodejs，参考 https://blog.csdn.net/yan_dk/article/details/90633166 安装nodojs环境不再细述。 开发实例1-后台系统 下载开源的后台系统模板：https://github.com/iview/iview-admin/tree/template 解压后的目录是这样。 然后在当前目录，执行命令行cmd 安装依赖包 >cnpm install 也可以安装ivew版本包 >cnpm install ivi...
Django+Vue.js快速搭建Web项目教程
为了使Vue.js前端能够访问Django后端API，我们需要在Django项目的settings.py中添加跨域策略： 8、启动Django服务器： 运行以下命令启动Django开发服务器： 四、构建Vue.js项目 1、初始化Vue.js项目： 在项目根...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值