require.js+vue2.0+vue-resourse+vue-router+vuex+表单验证的结合使用构建模块化开发

时间 2019-11-13

标签 require.js+vue2.0+vue require vue resourse+vue resourse router+vuex router vuex 表单验证结合使用构建模块化开发栏目 JavaScript 繁體版

原文原文链接

关于require.js的基本使用和其插件使用，能够参考阮一峰的教程，写的很详细 http://www.ruanyifeng.com/blog/2012/11/require_js.html 。css

本实例是测试关于require.js与 vue.js之间的使用，不涉及任何的设计，记在这里方便之后本身查询，写的不对，请批评指正。若是不会vue，这并不适合你看。html

首先明确几点：前端

第一：模块发开发的思想，将每一部分的功能中js的文件和css文件和html结构放在一块儿，造成一个模块，方便复用、维护和修改，各个模块之间造成联系，构成spa的单页应用。vue

第二：require.js 能够实现按需加载模块，这里测试可否与vue.js结合使用，若用vue构建，建议使用vue-cli 安装。node

第三：关于各个文件，有可能没使用到，使用到了会说明，这里是构建搭建一个前端应用的模块开发框架，不涉及作具体的内容。jquery

第四：关于有些内容是放在data.js文件中，测试vue-resourse可否使用，如果用webstrom 编写，项目不用放在服务器下，它自己本身会有一个端口可使用，如果用sublime，须要放到服务器环境下测试数据，这里用的是Xampp,将项目放到 Xampp 安装目录下的htdoces便可。打开index.html方式前面的是本身电脑的ip的地址，本身ipconfig查看。webpack

第一步：各个文件夹的目录以下，说到的是必须有的，没有说到的，基本没用到，能够无论：web

epproject 项目名 ajax

libs 下面是依赖的文件vue-router

data.json 是模拟数据

index.html是页面

第二步：新建index.html ，代码以下：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css"/>
  
       <!-- 主入口js文件app.js -->
    <script src="libs/requirejs/require.js" data-main="js/app"></script>
</head>
<body >
   <!-- v-cloak vue中，防止文件加载时，出现{{djjjj}}字符串 -->
  <div v-cloak id="app">  
  
      <!--  路由的显示区域 -->
      <router-view></router-view>
  </div>
</body>
</html>

data.json文件为：

{
  "pixel":{
    "toolArr":[
      {"img":"img/u256.png","toolName":"影像校订","author":"z1","time":"2017-04-06","type":"基础服务","method":"全自动","desc":"对1A级影像进行校订，要求输入RPB参数和校订影像。"},
      {"img":"img/u256.png","toolName":"匀光匀色","author":"z2","time":"2017-05-06","type":"高级服务","method":"半自动","desc":"对3A级影像进行均匀处理。"},
      {"img":"img/u256.png","toolName":"影像融合"},{"toolName":"工具名称"},{"toolName":"工具名称"}
    ],
    "processDesc":[{"processName":"无控定位","img":"img/u256.png"},{"processName":"影像融合","img":"img/u256.png"}],
    "sidebar":[
      {
        "testName":"局部影像",
        "allTool":[
          {"name":"局部输入","inputFile":{"singleOne":["fad流","sdf结","dfd开","df文","ff关"],"singleTwo":["1sdaf","fds结束","fdf开始","文本","关联"]}},
          {"name":"局部输出","inputFile":{"singleOne":["aae流s","adf结","dfad开","fffff文","sf关"],"singleTwo":["sfad2","fasfd结束","开始","文本","关联"]}}
        ]
      },
      {
        "testName":"栅格地图",
        "allTool":[
          {"name":"栅格地图输入文件夹","inputFile":{"singleOne":["dd公司流","分管结","东方红开","施工队文","关"],"singleTwo":["1","结束","开始","文本","关联"]}},
          {"name":"栅格地图输出文件夹","inputFile":{"singleOne":["是大法官流s","刚刚结","发的普遍地开","不规范的文","收到关"],"singleTwo":["2","结束","开始","文本","关联"]}}
        ]
      },
      {
        "testName":"无控定位",
        "allTool":[
          {"name":"输入文件夹","inputFile":{"singleOne":["流","结","开","文","关"],"singleTwo":["1","结束","开始","文本","关联"]}},
          {"name":"输出文件夹","inputFile":{"singleOne":["流s","结","开","文","关"],"singleTwo":["2","结束","开始","文本","关联"]}}
        ]
      }
    ]
  }
}

第三步：首先第二步构建好，主题页面就是这样，如今开始写app.js，写app.js入口前，要配置依赖的关系confige.js ,在js文件下，创建以下：

confige.js 中配置依赖文件为：

/**
 * Created by domea on 17-6-2.
 */
'use strict';
define({
    packages: [],
    // urlArgs: "bust=" + (new Date()).getTime(),
    baseUrl:'js/',
    paths: {
        "jquery": '../libs/jquery/dist/jquery',
        "bootstrap":'../libs/bootstrap/dist/js/bootstrap',
        'validate':'../libs/bootstrapValidator/dist/js/bootstrapValidator',  //表单验证插件
        'domReady':'../libs/domReady/domReady',
        'text':'../libs/text/text',      //require.js的插件text.js用于加载.html的文件                                                      
        'css':'../libs/text/css',        //require.js的插件css.js用于加载.css的文件 
        'vue':'../libs/vue/dist/vue',    //vue.js
        'vueRouter':'../libs/vue/dist/vue-router',  //vue的路由
        'vueResource':"../libs/vue/dist/vue-resource",  //ajax插件
        'vueX':'../libs/vue/dist/vuex'                 //全局状态管理，能够用于不一样的组件通讯
    },
    shim: {
        'bootstrap':{
            deps:[
                'jquery',
                'text!../libs/bootstrap/dist/css/bootstrap.css',
                'text!../libs/bootstrap/dist/css/bootstrap-theme.css'
            ]
        },
        'validate':{
            deps:[
                'jquery'
            ],
            exports:'validate'
        }
    }
});

app.js为：

'use strict';
(function(root){
    require(["config"], function(config){
        requirejs.config(config);
        require(['app/ui/main','domReady!'], function(ui){
            //调用ui文件下的main.js的routerDemo的函数，routerDemo加载页面全局使用的路由、ajax、组件全局状态管理
           ui.routerDemo();
        });
    });
})(this);

第四步：js文件下目录为，加载main.js

components 是组件文件夹 router 是配置路由 views是单页应用的不一样的页面 vuex状态管理，下面用到再具体说。

main.js代码：

//UI主入口,加载各类依赖
define(['vue','vueResource','./vuex/store', './router/router'],function (Vue,VueResource,Store,Router) {

    var _app = function() {
        Vue.use(VueResource);  //全局使用vueVueResource

        new Vue({
            router:Router,   //路由挂载
            store:Store,     //状态挂载
            el: "#app"       //挂载点是index.html 中的 id="#app"的元素
        });
    };
    return {
        routerDemo:_app
    }
});

第五步：配置路由和 vuex全局

在router文件下新建 router.js ,其内代码以下：

define(['vue','vueRouter','.././views/mainPage/mainPage','.././views/edit/edit','.././views/run/run'],function(Vue,VueRouter,MainPage,Edit,Run){
    Vue.use(VueRouter); //使用 路由

    return  new VueRouter({   //返回路由实例
        //路由表
        routes:[
            {path:'/',component:MainPage.app},  //默认的进入页面（随便取的）
            {path:'/edit',component:Edit.edit},  //编辑页面
            {path:'/run',component:Run.run}     //运行页面
        ]
    });
});

在vuex文件下新建 store.js ,其内代码以下：

/**
 * 基本只要标红的部分就能使用，其余部分是后来要用到的，暂时无论。此时就能够新建简单路由和vuex测试页面了，能够本身写个小例子测试
 */
define(['vue','vueX'],function(Vue,VueX){

  Vue.use(VueX);  
    var state={
      fileFlag:false,
        obj:"",
        testName:"",
        allTool:""
    };

   //至关于计算属性
    var getters = {

    };
    var mutations = {
         showFileInfo:function(state,n){
             state.fileFlag = true;
             for(var i in state.obj){
                 if(i == n.a){
                     state.testName = state.obj[i].testName;
                     state.allTool = state.obj[i].allTool;
                 }
             }
         }
    };

    return new VueX.Store({ state:state, mutations:mutations });
});

第六步：

结构为：

默认的页面为mainPage.html

代码为：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<template id="main">
    <div id="tool">
        <div class="container">
            <div class="row">
                <div class="tool-list col-md-12">
                    <button type="button" class="btn btn-default single-tool" v-for="(item,index) in toolArr" @click.stop="showCreateInfo(item,index)" >{{item.toolName}}</button>
                </div>
            </div>
        </div>
    </div>
    <router-link to="/edit">编辑</router-link>
</template>
</body>
</html>

其相关的js文件为：

define(['vue','jquery','text!./mainPage.html','validate','css!./main.css'],function(Vue,$,Template){

    var App ={           //组件
        data:function(){
            return {
                toolArr:"",
                toolDesc:"",
                processDesc:""
            }
        },
        template:Template,
        mounted:function(){  //ajax获取数据
           this.$http.get('./data.json').then(function(res){
               var data =  res.body.pixel;
               this.toolArr = data.toolArr;
               this.processDesc = data.processDesc;
           },function(){
               window.document.write("Error 404");
           })
        },
        methods:{
            showCreateInfo:function(item,index){   //后面删除了一些内容，这一部分没咋用，可                                                     以反映可使用vue
                for(var i=0;i<this.toolArr.length;i++){
                    if(index === i){
                        this.toolDesc = this.toolArr[i];
                    }
                }
            }
        }
    };
    return {
        app:App       
    }
});

页面为：

点击编辑，单页跳转，不是用a标签跳转的新的一个页面，点击后，能够发现

跳转的edit.html 为：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
 <template>
     <div id="edit">
         <aside class="left-content" style="display:inline-block; vertical-align: top;">
             <v-sidebar ></v-sidebar>
         </aside>
         <router-link to="/run">添加</router-link>
     </div>
 </template>
</body>
</html>

edit.js 代码：

/**
 * Created by Administrator on 2017/6/26.
 */
define(['vue','text!./edit.html','../.././components/sidebar/sidebar','../.././components/createwizard/createwizard'],function(Vue,Template,Sidebar,Creat){
  var Edit = {
      data:function(){
         return {
          
         }
      },
      template:Template,
      methods:{

      },
      components:{
         "v-sidebar":Sidebar.sidebar,  //要使用的组件 ，这部分的代码不附了，也没什么用。
          "v-pop":Creat.creatWizard
      }
  };

    return {
        edit:Edit
    }
});

run.html 代码：

<div id="test-run">
    <div class="test-run-wrapper">
        <div class="test-header">
            <div class="test-list" style="display: inline-block">
                <span class="name">任务列表</span>
                <button type="button" class="btn btn-default" @click="__fileList()">打开</button>
            </div>
            <div class="test-control" style="display: inline-block">
                <button type="button" class="btn btn-default" @click="__showTest()">新建</button>

                <!--写成路由-->
                <button type="button" class="btn btn-default">返回</button>
            </div>
        </div>
        <div class="left-box" v-show="$store.state.fileFlag">
            <v-leftsidebar ></v-leftsidebar>
        </div>
        <div class="right-box">
            <div id="preview-log">
                <div class="preview-log-wrapper">
                    <div class="" >
                        <input type="button" class="btn btn-default" @click ="__showPre()" value="预览" />
                        <input type="button" class="btn btn-default" @click ="__showLog()" value="日志" />
                    </div>
                    <div class="preview" v-show="showPre"  style="width:300px;height:300px;background:#b2b2b2;" >
                        预览区
                    </div>
                    <div class="log" v-show="showLog"  style="width:300px;height:300px;background:#176aa3;">
                        日志区
                    </div>
                </div>
            </div>
        </div>

        <!--任务弹出框-->
        <div class="container"id="test-wizard" v-show="showTest">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><span class="glyphicon glyphicon-user"></span>任务向导</h3>
                            <h3></h3>
                        </div>

                        <div class="panel-body">
                            <form id="defaultForm" method="">
                                <div class="form-group">
                                    <input type="text" class="form-control" name="testName" placeholder="任务名称" />
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" name="author" placeholder="建立者" />
                                </div>
                                <div class="form-group">
                                    <textarea name="desc" class="form-control"  placeholder="描述信息" style="resize: none;height:100px;"></textarea>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label class="col-md-4 control-label">数据来源</label>
                                        <div class="col-md-8">
                                            <select class="form-control" name="country">
                                                <option value="">未知.</option>
                                                <option value="FR">资源一号</option>
                                                <option value="DE">资源三号</option>
                                                <option value="IT">天绘卫星</option>
                                                <option value="JP">高分二号</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <fieldset>
                                    <legend>参考系</legend>
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">源参考系:</label>
                                        <div class="col-md-8">
                                            <select class="form-control" name="country">
                                                <option value="">f</option>
                                                <option value="">f</option>
                                                <option value="">g</option>
                                                <option value="">h</option>
                                                <option value="">d</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-4 control-label">目的参考系:</label>
                                        <div class="col-md-8">
                                            <select class="form-control" name="country">
                                                <option value="">gd</option>
                                                <option value="">g</option>
                                                <option value="">g</option>
                                                <option value="">h</option>
                                                <option value="">d</option>
                                            </select>
                                        </div>
                                    </div>
                                </fieldset>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">提交</button>
                                    <button type="reset" class="btn btn-primary">重置</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--文件列表弹出框-->
        <section id="file-list" v-show="toggleShow">
            <ul>
                <li v-for="(item,index) in obj" @click = "$store.commit('showFileInfo',{a:index})">
                    {{item.name}}
                </li>
            </ul>
        </section>
    </div>
</div>

run.js代码：

/**
 * Created by Administrator on 2017/6/16.
 */
define(['vue','text!./run.html','../.././components/leftsidebar/leftsidebar'],function(Vue,Template,LeftSidebar){
    var Run ={
        data:function(){
            return {
                showPre:true,
                showLog:false,
                showTest:"",
                toggleShow:'',
                obj:[{"name":"局部影像"},{"name":"栅格地图"},{"name":"无控定位"}]
            }
        },
        template:Template,
        mounted:function(){
            $('#defaultForm').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    testName: {
                        validators: {
                            notEmpty: {
                                message: '请输入,不能为空！'
                            },
                            stringLength: {
                                min: 3,
                                max: 20,
                                message:'字符必须在3到20之间'
                            },
                            regexp: {
                                regexp: /^[\u4E00-\u9FA5A-Za-z0-9_]+$/,
                                message: '只能输入中文、英文和_'
                            }
                        }
                    },
                    author: {
                        validators: {
                            notEmpty: {
                                message: '请输入,不能为空!'
                            },
                            stringLength: {
                                min: 3,
                                max: 20,
                                message:'字符必须在3到20之间'
                            },
                            regexp: {
                                regexp: /^[\u4E00-\u9FA5A-Za-z]+$/,
                                message: '只能输入中文、英文'
                            }
                        }
                    },
                    desc: {
                        validators: {
                            notEmpty: {
                                message: '请输入,不能为空！'
                            },
                            stringLength: {
                                min: 3,
                                message:'不能少于6个字符'
                            }
                        }
                    }
                }
            });
        },
        methods:{
            __showTest:function(){
                this.showTest= true;
            },
            __fileList:function(){
                this.toggleShow = !this.toggleShow;
            },
            __showPre: function(){
                this.showPre = true;
                this.showLog = false;
            },
            __showLog:function() {
                this.showPre = false;
                this.showLog = true;
            }
        },
        components:{
            "v-leftsidebar":LeftSidebar.leftSidebar
        }
    };

    return {
        run:Run
    }
});

这里就用到了store.js的其它代码

其中用到的 leftsidebar 的结构和js代码为：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<template id="test-info">
    <div class="test-info-wrapper" style="width:200px;">
        <header><h3>{{$store.state.testName}}</h3></header>
        <ul>
            <li v-for=" (item,index) in $store.state.allTool" @click.stop.prevent = "_showEveryTool(index+1)" style="display:block">
                <div class="header">
                    <span  class="glyphicon glyphicon-triangle-bottom" v-if="showEveryTool == (index+1)"></span>
                    <span class="glyphicon glyphicon-triangle-right" v-else></span>
                    <span>{{item.name}}</span>
                </div>
                <ul v-show="showEveryTool == (index+1)">
                    <li v-for="(innerItem1,index1) in item.inputFile.singleOne" @click.stop = "__showEveryTool1(index1+1)" style="padding-left:20px;display: block">
                        <div class="header">
                            <span  class="glyphicon glyphicon-triangle-bottom" v-if="showEveryTool1 == (index1+1)"></span>
                            <span class="glyphicon glyphicon-triangle-right" v-else></span>
                            <span>{{innerItem1}}</span>
                        </div>
                        <ul v-show="showEveryTool1 == (index1+1)">
                            <li v-for="(innerItem2,index2) in item.inputFile.singleTwo" @click.stop = "__showEveryTool2(index2+1)" style="padding-left:20px;display: block">
                                <div class="header">
                                    <span>{{innerItem2}}</span>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>
</body>
</html>

/**
 * Created by Administrator on 2017/6/27.
 */
define(['vue','text!./leftsidebar.html'],function(Vue,Template){
    var LeftSidebar = {
        data:function(){
            return {
                showEveryTool:false,
                showEveryTool1:false,
                showEveryTool2:false
            }
        },
        computed:{
            //当一些数据要根据其余的一些数据变化时，须要用到计算属性
        },
        template:Template,
        mounted:function(){
            this.$http.get("./data.json").then(function(res){
                var data =  res.body.pixel;
                 this.$store.state.obj = data.sidebar;
            });

        },

        methods:{
            _showEveryTool: function(current){
                this.showEveryTool = current;
            },
            __showEveryTool1:function(current){
                this.showEveryTool1 = current;
            },
            __showEveryTool2:function(current){
                this.showEveryTool2 = current;
            }
        }
    };
    return {
        leftSidebar:LeftSidebar
    }
});

页面为：

点击打开，点击日志

点击局部影像，栅格地图地图，无控定位

会显示切换相关的信息

点击新建会出现：

其中表单验证不经过会报红色。

总结：

require.js能够加载vue.js 由于vue.js也是模块化的东西，其vue相关的插件也可使用，这里仅仅举的一个小例子，其核心是构建一个单页应用的框架搭建，若有错误，请指教。既然使用vue ，建议使用webpack 和node 去构建项目，表单验证可使用 vee-validator 这个vue的插件。