• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

新项目新知识总结03

开发技术 开发技术 5小时前 3次浏览

新项目前端技术运用的总结,梳理进行记录。

form表单的使用

<div class="pro-form scroll-box-style" style="height:57vh; overflow:auto;">
  <!--规则验证使用rules,注意rules在data里面不是method方法里面,下面会将验证方式进行展示,不需要验证时,直接删除即可-->
<el-form :model="createProjectData" :rules="rules" ref="createProjectData" label-width="100px" label-position="right" size="mini" class="demo-projectData">
<el-form-item label="项目名称" prop="name">
       <!--input的使用方式-->
<el-input v-model="createProjectData.name" placeholder="请填写项目名称" :clearable="true"></el-input>
</el-form-item>
<el-form-item label="项目类型" prop="project_type">
       <!--级联选择器的使用方式-->
<el-cascader
v-if="projectTypeData && projectTypeData.length"
v-model="createProjectData.project_type"
style="width:100%;"
placeholder="请选择项目类型"
:props="{label: 'value', value: 'id', children: 'child'}"
:options="projectTypeData"
@change="projectTypeSubSelect"
>
</el-cascader>
</el-form-item>
<el-form-item label="计划开始时间" prop="planning_start_time">
       <!--时间选择器的使用方式-->
<el-date-picker
:picker-options="pickerOptionsStart"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择开始时间"
v-model="createProjectData.planning_start_time"
style="width: 100%;">
</el-date-picker>
</el-form-item>
<el-form-item label="项目状态" prop="project_status">
       <!--选择器的使用方式-->
<el-select v-model="createProjectData.project_status" placeholder="请选择项目状态" style="width:100%;" filterable default-first-option>
<el-option
v-for="item in proStatusData"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer flex-center">
   <!--$t是挂到了Vue.prototype上的一个方法,接受一个字符串作为参数,其实直接写取消,提交即可,个人认为多此一举,不过为了全局统一可以这么写-->
<el-button @click="cancelForm('createProjectData')">{{$t('button.cancel')}}</el-button>
<el-button type="primary" @click="submitForm('createProjectData')" :disabled="isDisabled">{{$t('button.confirm')}}</el-button>
</div>

rules规则验证的使用

data() {
        return {
            createProjectData: {
                name: '',
                code: '',
                contract_amount: '',
                img_src: '',
                contract_path: '',
                planning_start_time: '',
                planning_end_time: '',
                project_type_id: '',
                project_type_sub_id: '',
                workflow_id: '',
                memo: '',
                project_status: 0,
                frame_rate: '',
                project_type: [],
                company_id: ''
            },
            imageUrl: '',
            pickerOptionsStart: {
                disabledDate: (time) => {
                    var date = new Date(this.createProjectData.planning_end_time);
                    var timeEnd = date.getTime();
                    return time.getTime() > timeEnd;
                }
            },
            pickerOptionsEnd: {
                disabledDate: (time) => {
                    var date = new Date(this.createProjectData.planning_start_time);
                    var timeStart = date.getTime();
                    return time.getTime() < timeStart;
                }
            },
       <!--表单数据的验证,required是否为必填项(左边带红色*号),trigger验证触发事件,validator具体验证方法,不需要验证时,直接将rules同步删除即可--> rules: { name: [ { required:
true, message: "项目名称不能为空", trigger: 'blur'}, { trigger: 'blur', validator(rule,value,callback){ if(value.length > 0 && value.length < 21){ callback(); } else { callback(new Error('请输入1-20个字符')); } }, } ], code: [ { required: true, message: "项目代号不能为空", trigger: 'blur' }, { trigger: 'blur', validator(rule,value,callback){ if(value.length > 0 && value.length < 21){ callback(); } else { callback(new Error('请输入1-20个字符')); } }, } ], project_type: [ { required: true, message: "项目类型不能为空", trigger: 'change'}, ], } ......省略部分代码 }; },

提交参数传递到后台的使用

// 查询项目提交
        submitForm(formName) {
            this.isDisabled = true;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.isDisabled = true;
                    var postData = this.createProjectData;
           <!--查询项目的方法(searchProjectList),处理参数的方法(delEmptyData),主要参数(postData)--> searchProjectList(delEmptyData(postData)) .then((res)
=> {
               <!--请求成功后返回数据的处理-->
this.$store.dispatch('searchProjectListData', res.data); this.isDisabled = true; //this.$store.dispatch('requestInitData', {company_id: this.companyId}); this.cancelForm('createProjectData'); this.proPostData.cp = 1; }).catch(error => { this.isDisabled = false; }) } else { this.isDisabled = false; this.$message.error("请检查下方是否有信息未填写!") return false; } }); },

前端项目中所有跟后台交互的接口使用(都写在一个js中,按照模块划分)

<!--使用时引入该js,js中会有具体方法-->
import { searchProjectList } from '@/api/project.js'
// 项目——项目下拉列表
export const projectSelectList = (data) => {
    return request({
        url: '/project/projectInfo/proList',
        method: 'post',
        data
    })
}
......省略部分代码
// 项目——查询排序
export const searchProjectList = (data) => {
    return request({
        url: '/project/projectInfo/search',
        method: 'post',
        data
    })
}

这样更加规范,更加容易找到想要找的方法,跟目录类似,分门别类,根据每个模块定义与后台交互的js,写好接口,方便前后端的协助工作。

参数处理的接口因为所有模块都会使用,属于通用的工具接口,所以直接放在公共js中。

<!--同样需要引入js,才能够使用js中定义的方法-->
import { delEmptyData, uploadPut, getWatermarkFromCookie } from '@/utils/util.js'
export const delEmptyData = (json) => {
    for (var i in json) {
        if (json[i] === '' || json[i] === undefined || json[i] === null || json[i].length === 0) {
            delete json[i];
        }
        if(typeof json[i] === "object" && Object.prototype.toString.call(json[i]).toLowerCase() == "[object object]" && !json[i].length){
            for (var k in json[i]) {
                if (json[i][k] === '' || json[i][k] === undefined || json[i][k] === null) {
                    delete json[i][k];
                }
            }
            if(isEmptyObject(json[i])){
                delete json[i];
            }
        }
    }
    return json;
}

请求成功数数据的处理(使用到vuex)

<!--上边代码中有提到过,以下为提取的主要代码-->
this
.$store.dispatch('searchProjectListData', res.data);
<!--vuex数据处理的中间步骤,以下两个方法均在store/modules/project.js中-->
searchProjectListData({ commit }, pData){ commit(
'SEARCH_PROJECT_LIST_DATA', pData); },
<!--最终将数据提供给data中定义的接收数据的变量中-->
SEARCH_PROJECT_LIST_DATA: (state, data) => { state.projectListData = data },

vuex还在研究中,后续继续

 


程序员灯塔
转载请注明原文链接:新项目新知识总结03
喜欢 (0)