我是歌谣放弃很容易但是坚持一定很酷

1前言

在我们的开发过程中会遇到一些开发的需求怎么实现怎么写怎么做才最合理

2需求处理

拿到一个需求就和做数学题一样我们要理清所有的关系由于本文知识对需求进行阐述所以就以vue为例子

2.1 需求1处理页面样式某页面跳转之后如果传过去的值为1则显示我是歌谣如果传过去的值是2则显示我是帅气的歌谣

就眼前的问题你可能就会陷入一个深深的思考页面怎么传值呢怎么传呢我可以进行路由拼接传参也可以引入第三方插件存储到storage传参我可以vuex传参那么什么样才是最优解呢

本文旨在说明需求如何实现我拿出其中一种我采用第三方插件传参

2.1.1第一步 npm install 一下

npm install store2

2.1.2第二步封装好插件

封装get 存储等方法即可

2.1.3页面引入

import Storage from 'xxxx'

2.1.4页面调用

xxx.session()
xxx.get()

到了这边页面相互传值的事情就搞定了但是这是一种比较好的选择吗他已经实现了

2.2 需求1处理页面样式某页面跳转之后如果传过去的值为1则显示我是歌谣如果传过去的值是2则显示我是帅气的歌谣

此时我们页面的传值已经搞定了但是这个值过来了以后呢怎么去做一个判断显示我可以直接v-if判断也可以v-if v-else判断也可以v-show去实现但是最后你选择如何实现是你自己去想呢

2.2.1第一步我们直接写样式

 <div v-if="this.instanceType === 0" class="title-right">我是歌谣</div><template v-else><div class="progress-panel">我是帅气的歌谣</div></template>

值已经过来了我做了一个判断但是这样的方式是一个最优解吗上面的方式有很多我为什么要采用这种

2.3需求2新建任务页面和编辑页面用的同一个表单我们如何实现

同样实现这个页面逻辑的方法有很多种你可以不嫌麻烦直接多写结构页面

也可以单独去编写一个页面去进行一个页面的布局当页面值新建去给与一个状态页面编辑的时候给与另外一个状态

2.3.1页面代码

<!--控制部门管理的页面-->
<template><div class="table-list-page"><div class="query-area"><div class="operation-button-area"><!--点击按钮--><el-button icon="el-icon-plus" style="float: right;margin-right: 20px;margin-bottom: 20px" size="medium" type="primary" @click="handleAdd">新建账户</el-button></div></div><div><custom-table    v-loading="loading"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" @size-changes="list"  @pagination-change="list" :data="tableData" :columns="columns" :pagination="pagination"><template v-slot:action><el-table-column fixed="right" label="操作"><template slot-scope="scope"><el-button @click="handleEdit(scope.row)" type="text">编辑</el-button><el-button type="text" @click="deleteRecord(scope.row)">删除</el-button><!--绑定数据使用当前的id--><el-button type="text" @click="BindAccount(scope.row)">绑定</el-button></template></el-table-column></template></custom-table></div><create ref="create" @ok="list"/><account-bind ref="list"></account-bind></div>
</template><script>
import AccountBind from "@/views/system/account/AccountBind";
import Create from "./create";
import CustomTable from "@/component/table/CustomTable";
import {TableListMixin} from "@/component/table/TableMixin";
import {getAction, putAction} from "@/api";
export default {name: "Account",mixins: [TableListMixin],components: {CustomTable,Create,AccountBind},inject:['reload'],data() {return {value:'',columns: [/*   {type: "selection", width: "50"},*/{prop: "id", label: "ID", width: "60", sortable: true},{prop: "name", label: "账号名称", width: "100", sortable: true},{prop: "department_name", label: "所属部门",sortable: true},{prop: "platform", label: "所属平台",sortable: true},{prop: "content_type", label: "内容类型",sortable: true},{prop: "resource_type", label: "资源类型",sortable: true},{prop: "price", label: "刊例价",sortable: true}],url: {list: "/account",delete: "/account",},tableData:[],departmentList:[],/*存储部门*/form:{}};},computed: {DepartmentId(){return this.$store.state.department.id},},methods: {ListSeach(){getAction("/account",{page:1,limit:10,department_id:this.query.type}).then(res=>{console.log(res)})},BindAccount(record){this.$refs["list"].show(record)}}
};
</script>
<style lang="scss" scoped>
.left-right {margin-left: 100px;
}
.el-table th, .el-table td {text-align: center;
}
@import "@/assets/style/table";
</style>

    submit() {this.$refs["form"].validate(valid => {if (valid) {setTimeout(() => {/*声明变量*/let method = postAction;/*声明url* position()* *//*url=/user*/let url = this.url.add;/*4 判断是否有id 确定新增还是编辑  根据表单数据是否有 id 属性，判断是新增还是编辑操作// 如果有id的话 就需要进行*/if (this.form.id) {method = putAction;/*编辑操作 /user*/url = path.join(this.url.edit, this.form.id);}/*如果没有请求地址 就做出判断*/if (!url) {this.$message.warning("请设定请求 url！");return;}/*5GY 通过这边取触发父亲级别的方法*/method(url, this.form).then(res => {if(res.code==0) {/*实现文字居中逻辑<div style=";"><p style="display:flex;font-weight: bold;text-align: center;*/this.$message.success({dangerouslyUseHTMLString: true,message: '<p>提交成功</p>'});this.$emit("ok");this.$refs["form"].resetFields()this.close();}});}, 400);}else {setTimeout(() => {this.$message("请您按照要求填写信息")this.$refs["form"].resetFields()return false;}, 400);}});},

简单介绍一下逻辑由于是element的dialog分别作出的一个文件的一个判断编辑和新建主要的区别是看是否存在一个id 如果页面传值的时候获取到了当前的一个id就进行了一个编辑的操作

反之就是一个新建的操作同时根据页面实现了一个不同的页面展示和页面提示此处又要思考为什么要这样实现了他是最优解吗

2.4需求3 如果一个平台的分发对应着不同的渠道不同的渠道又是对应这不同的输入渲染框

曾几何时我做这块的需求就进行了一个面向过程编程

   //处理当前数据是今日头条的数据逻辑if(this.info.account.plugin_name=='今日头条') {/*判断原创内容的数值不能为空 如果数值为空 就给与一个默认值false*/if (!this.form.hasOwnProperty('original')) {/*我们就给与她一个数值设置为false*/this.form.original = false}/*判断赞赏的数据数值是否为空 如果是空就给与他一个默认值*/if (!this.form.hasOwnProperty('xigua_praise')) {/*我们就给与她一个数值设置为false*/this.form.xigua_praise = false}/*判断视频封面的值属性是否存在 如果不存在就给予一个默认值0*/if (!this.form.hasOwnProperty('xigua_video_face')) {/*我们就给与她一个数值设置为false*/this.form.xigua_video_face = 0}/*判断项目名不能为空*/if(this.project_name==''){this.$message("项目名不能为空")return false}/*今日头条上传数据编写*//*判断当前数据中是否含有名称这个属性 有的话*/if (this.form.hasOwnProperty('name')) {/*如果有的话 开始对字符串的长度进行判断 利用替代修改中文长度计数为2 */if (this.form.name.replace(/[^\x00-\xff]/g, "a").length < 5 || this.form.name.replace(/[^\x00-\xff]/g, "a").length > 50) {this.$message("请控制名称在五个字符和三十个字符之间当前输入值为" + this.form.name.replace(/[^\x00-\xff]/g, "a").length + "个字符")return false}}/*判断简介的数据是否满足规范*/if (!this.form.hasOwnProperty('intro')) {this.$message("简介项的值不能为空")return false/*如果有的话 开始对字符串的长度进行判断 利用替代修改中文长度计数为2 */} else {/*控制数值不能大于四百*/if (this.form.intro.replace(/[^\x00-\xff]/g, "a").length > 400) {this.$message("简介项输入的值在(400以内)")return false}}/*修改完成头条小视频的数据权限*/}else if(this.info.account.plugin_name=='头条小视频'){/*判断项目名不能为空*/if(this.project_name==''){this.$message("项目名不能为空")return false}if (this.form.hasOwnProperty('name')) {/*判断里面是否又name属性 */if (this.form.name.replace(/[^\x00-\xff]/g, "a").length < 11 || this.form.name.replace(/[^\x00-\xff]/g, "a").length > 30) {this.$message("请填写名称(11-30个字符)")return false}}/*判断当前的数据来bilibili*/}else if(this.info.account.plugin_name=='Bilibili'){/*判断项目名不能为空*/if(this.project_name==''){this.$message("项目名不能为空")return false}console.log(this.form,"1312312312312")/*判断名称的字符是否存在*/if (this.form.hasOwnProperty('name')) {/*判断里面是否又name属性 */if (this.form.name.replace(/[^\x00-\xff]/g, "a").length < 1 || this.form.name.replace(/[^\x00-\xff]/g, "a").length > 80) {this.$message("请填写名称(1-80个字符)")return false}}/*判断标签值不能为空*/if (!this.form.hasOwnProperty('tag')) {/*我们就给与她一个数值设置为false*//*this.$message("话题和标签值不能为空")*//*判断长度为0的时候标签值为空*/}else{if(this.form.tag.length==0){this.$message("话题和标签值不能为空")}}/*判断分类不能为空*/if (!this.form.hasOwnProperty('category')) {this.$message("分类的值不能为空")}else{if( this.form.category.length==0){this.$message("分类的值不能为空")}}/*判断原创内容的数值不能为空 如果数值为空 就给与一个默认值false*/if (!this.form.hasOwnProperty('original')) {/*我们就给与她一个数值设置为false*/this.form.original = false}/*判断视频栏目不能为空*/if (!this.form.hasOwnProperty('upload-image')) {/*我们就给与她一个数值设置为false*/this.$message("视频封面不能为空")}/*判断快手视频的数据格式*/}else if(this.info.account.plugin_name=='快手视频'){/*判断项目名不能为空*/if(this.project_name==''){this.$message("项目名不能为空")return false}/*判断名称的字符是否存在*/if (this.form.name=='') {/*判断里面是否又name属性 */this.$message("名称不能为空")return falseif (this.form.name.replace(/[^\x00-\xff]/g, "a").length > 500) {this.$message("请填写名称(500个字符以内)")return false}}/*判断视频栏目不能为空*/if (!this.form.hasOwnProperty('upload-image')) {/*我们就给与她一个数值设置为false*/this.$message("视频封面不能为空")return false}}else if(this.info.account.plugin_name=='百家号'){/*判断原创内容的数值不能为空 如果数值为空 就给与一个默认值false*/if (!this.form.hasOwnProperty('original')) {/*我们就给与她一个数值设置为false*/this.form.original = false}/*判断项目名不能为空*/if(this.project_name==''){this.$message("项目名不能为空")return false}/*判断名称的字符是否存在*/if (this.form.hasOwnProperty('name')) {/*判断里面是否又name属性 */if (this.form.name.replace(/[^\x00-\xff]/g, "a").length <9||this.form.name.replace(/[^\x00-\xff]/g, "a").length > 40) {this.$message("请填写名称(9-40个字符)")return false}}/*判断视频栏目不能为空*/if (!this.form.hasOwnProperty('upload-image')) {/*我们就给与她一个数值设置为false*/this.$message("视频封面不能为空")return false}}else if(this.info.account.plugin_name=='抖音短视频'){/*判断项目名不能为空*/if(this.project_name==''){this.$message("项目名不能为空")return false}/*判断名称的字符是否存在*/if (this.form.hasOwnProperty('name')) {/*判断里面是否又name属性 */if (this.form.name.length ==0) {this.$message("请保证输入名称的值不为空")}}/*判断视频封面的值属性是否存在 如果不存在就给予一个默认值0*/if (!this.form.hasOwnProperty('awemepro_video_face')) {/*我们就给与她一个数值设置为false*/this.form.awemepro_video_face = 0}}else if(this.info.account.plugin_name=='微信视频号'){/*判断项目名不能为空*/if(this.project_name==''){this.$message("项目名不能为空")return false}console.log(11111)/*判断名称的字符是否存在*/if (this.form.hasOwnProperty('name')) {/*判断里面是否又name属性 */if (this.form.name=="") {this.$message("请保证输入名称的值不为空")return false}}/*判断视频栏目不能为空*/if (!this.form.hasOwnProperty('upload-image')) {/*我们就给与她一个数值设置为false*/this.$message("视频封面不能为空")}if (!this.form.hasOwnProperty('wxvideo_videocut')) {/*我们就给与她一个数值设置为false*/this.$message("视频裁剪值不能为空")}}

这种编程有什么坏处呢首先他就是再加入一个新的渠道的时候就会要加入很多种东西不利于代码的自身维护和更新迭代这是比较麻烦的一件事件所以说处理一个需求需要一个完整的思路和思想

紧接着我就开始了面向对象编程对是对象你有对象吗有就挺好

// 规则const rules = this.rules1;// 需要被遍历的值const targets = this.AweMepro;// 表单const form = this.form;console.log(this.form.project_name,"191991")if(typeof(this.form.project_name)=='undefined'||this.form.project_name==null||this.form.project_name==''){this.$message("项目名不能为空")return false}for (let rule in rules) {for (let target in targets) {if (rule == targets[target].key) {/*如果封面的赞赏为空 就给他一个默认值*/if(rule=="xigua_praise"){form[targets[target].key]=falsecontinue/*if (typeof (form[targets[target].key]) == 'undefined' || form[targets[target].key] == null || form[targets[target].key] == '') {this.$message("封面不能为空")return false}*/}/*如果封面的内容为空 就给他一个默认值*/console.log(form[targets[target].key],"0000")if(rule=="awemepro_video_face"){form[targets[target].key]=0continue/*if (typeof (form[targets[target].key]) == 'undefined' || form[targets[target].key] == null || form[targets[target].key] == '') {this.$message("封面不能为空")return false}*/}if(rule=="xigua_video_face"){form[targets[target].key]=0continue/*if (typeof (form[targets[target].key]) == 'undefined' || form[targets[target].key] == null || form[targets[target].key] == '') {this.$message("封面不能为空")return false}*/}/*原创内容*/if(rule=="original"){form[targets[target].key]=falsecontinue;}/*如果原创的内容为空 就给与他一个默认值*/if (rule == "name") {let size = 0;/*最外层的赋值不可修改 判断长度控制命名不同值*/let max = rules[rule].max_length;let min = rules[rule].min_lengthif (max == 0 && min == 0) {if (typeof (form[targets[target].key]) == 'undefined' || form[targets[target].key] == null || form[targets[target].key] == '') {this.$message("名称不能为空")return false}continue/*反之验证*/} else {if (typeof (form[targets[target].key]) == "string") {size = form[targets[target].key].replace(/[^\x00-\xff]/g, "a").length;}if (size < min || size > max) {/*console.log(form[targets[target].key].length);*//*console.log(typeof form[targets[target].key] == "array");*/this.$message(targets[target].name + "不能为空, 请输入(" + min + "-" + max + "个字符)")return false;}}}/*判断标签的数值不能为空 如果是满足就继续执行*/if (rule == "tags"){/*如果标签值是 00 就不用验证*/let max = rules[rule].max_length;let min =  rules[rule].min_lengthif(max==0&&min==0){continue/*反之验证*/}else{if (form[targets[target].key].length==0){this.$message(targets[target].name + "不能为空")}else{let ArrTags=form[targets[target].key]for(var Arr in ArrTags){console.log(ArrTags[Arr])let size = 0;if (typeof (ArrTags[Arr]) == "string"){size = ArrTags[Arr].replace(/[^\x00-\xff]/g, "a").length;}if (size < min || size > max) {/*console.log(form[targets[target].key].length);*//*console.log(typeof form[targets[target].key] == "array");*/this.$message(targets[target].name +"需要输入"+"(" + min + "-" + max + "个字符)")return false;}}}}}/*如果是分类*/if(rule=="category"){console.log(form[targets[target].key],"9999")/*     console.log(form[targets[target].key].length)*/if(typeof(form[targets[target].key])=='undefined'){this.$message(targets[target].name + "不能为空")return  false}}/*判断封面的地址上传数据不能为空 如果不是为空 就可以继续执行*/if (rule == "upload-image"){if (form[targets[target].key] != null) {continue;}}/*如果是转载描述*/if(rule=="trans_reason"){form[targets[target].key]=nullcontinue;}if(rule=="intro") {if (typeof (form[targets[target].key]) == 'undefined' || form[targets[target].key] == null || form[targets[target].key] == '') {this.$message(targets[target].name + "不能为空")return false}}if(rule=="wxvideo_videocut"){if (typeof (form[targets[target].key]) == 'undefined' || form[targets[target].key] == null || form[targets[target].key] == '') {this.$message(targets[target].name+"不能为空")return false}let size = 0;if (typeof (form[targets[target].key]) == "string"){size = form[targets[target].key].replace(/[^\x00-\xff]/g, "a").length;}let max = rules[rule].max_length;let min =  rules[rule].min_lengthif (size < min || size > max) {this.$message(targets[target].name + "不能为空, 请输入(" + min + "-" + max + "个字符)")return false;}}