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

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;}}

2.5需求4 如何实现一个一键复制的功能需求就是有一段文字给个按钮点击复制他就能到处粘贴了

看见这个需求我一开始发现就是蒙圈的

2.5.1如何搭建一个完整的前端页面架构

你需要做的事整体的架构按照特定的规则进行编写

比如我的页面的整体布局全部按照这个架构编写其余的样式只要塞进去作为样式进行逐步布局即可

2.6.1更多需求.......

3总结

在我们日常的开发中会遇到各种各样的需求

1首先我们要明确我们需要实现的是什么

2再之后我们需要理解这个需求实现的方法有哪些

3这些方法的步骤是怎么样的

4什么才是方法的最优解

需求是做不完的而我们要不断去理解一些新知识点找到一些最优解决方案不断提升自己我是歌谣放弃很容易但是坚持一定很酷

一文带你理解如何解决工作中的需求相关推荐

一文带你理解Java中Lock的实现原理
转载自一文带你理解Java中Lock的实现原理当多个线程需要访问某个公共资源的时候,我们知道需要通过加锁来保证资源的访问不会出问题.java提供了两种方式来加锁,一种是关键字:synchron ...
计算机excel按F4是那个公式,功能键F4你真的会用？Excel四大F4快捷操作，轻松解决工作中问题...
对于多数人来说,在键盘上面经常会看到F1-F12等不同的功能键.今天我们就来学习一下功能键F4的一些操作,看看在Excel中F4到底有哪些不一样的特别操作.为什么说F4快捷操作可以快速提升我们的工作效 ...
常用的xpath定位，通过一个元素去定位另一个元素，基本上能解决工作中所有定位
前言今天和大家分享几个工作中经常使用的xpath定位,基本上能解决工作中所有定位. 一.输入框类 1.有提示信息的,例如:placeholder="请输入用户名",则可以通过相应 ...
一文带你理解云原生 | 云原生全景图详解
关注「开源Linux」,选择"设为星标"回复「学习」,有我为您特别筛选的学习资料~ 1带你了解云原生技术图谱如果你研究过云原生应用程序和相关技术,大概率你遇到过 CNCF 的云原 ...
如何进阶TypeScript功底？一文带你理解TS中各种高级语法
引言 TypeScript 的重要性我不在强调了,我相信仍然会有大多数前端开发者碰到复杂类型一概使用 any 处理. 我写这篇文章的目的就是为了让你告别 AnyScript ,文章告别晦涩的概念结合实 ...
程序员如何解决工作中的技术问题？
我们在工作中通常都会越到各种各样的问题,有的是设计方案上的问题,有的是框架使用上的问题,有的是中间件配置上的问题,等等.每个人都不是万能的,在面对各种问题和挑战的时候,相信每个人都有自己解决问题的方式 ...
如何用分析方法解决工作中的问题？
我是多之剑: 这是我日常工作中遇到的一个真实的案例,通过发现问题和尝试找到原因,我完成了日常的工作.同时,我想通过这个案例告诉你电商行业的分析思路. 1.明确问题 2019年11月12日,双11大战刚 ...
renpy 如何执行2个action_如何解决工作中遇到问题丨2个思考方式、2个技巧和1个解决系统...
2020年我遇到两次工作中出现了很麻烦的问题,第一次我是感觉到似乎天都要塌了,这要是解决不了我该怎么办呢?焦虑的情绪比问题还要更难解决,我不止一次流泪想着要是解决不了怎么办啊?我闺蜜说你一个老师,再大 ...
一文带你彻底搞懂Docker中的cgroup
前言进程在系统中使用CPU.内存.磁盘等计算资源或者存储资源还是比较随心所欲的,我们希望对进程资源利用进行限制,对进程资源的使用进行追踪.这就让cgroup的出现成为了可能,它用来统一将进程进行分组 ...

一文带你理解如何解决工作中的需求

1前言

2需求处理

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

2.1.1第一步 npm install 一下

2.1.2第二步封装好插件

2.1.3页面引入

2.1.4页面调用

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

2.2.1第一步我们直接写样式

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

2.3.1页面代码

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

2.5需求4 如何实现一个一键复制的功能需求就是有一段文字给个按钮点击复制他就能到处粘贴了

2.5.1如何搭建一个完整的前端页面架构

2.6.1更多需求.......

3总结

一文带你理解如何解决工作中的需求相关推荐

最新文章

热门文章

一文带你理解如何解决工作中的需求

1前言

2需求处理

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

2.1.1第一步 npm install 一下

2.1.2第二步 封装好插件

2.1.3页面引入

2.1.4页面调用

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

2.2.1第一步 我们直接写样式

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

2.3.1页面代码

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

2.5需求4 如何实现一个一键复制的功能 需求就是有一段文字 给个按钮 点击复制 他就能到处粘贴了

2.5.1如何搭建一个完整的前端页面架构

2.6.1更多需求.......

3总结

一文带你理解如何解决工作中的需求相关推荐

最新文章

热门文章

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

2.1.2第二步封装好插件

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

2.2.1第一步我们直接写样式

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

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

2.5需求4 如何实现一个一键复制的功能需求就是有一段文字给个按钮点击复制他就能到处粘贴了