當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/9 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了一文带你理解如何解决工作中的需求小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

我是歌謠放棄很容易但是堅持一定很酷

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><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什么才是方法的最優解

需求是做不完的而我們要不斷去理解一些新知識點找到一些最優解決方案不斷提升自己我是歌謠放棄很容易但是堅持一定很酷

總結

以上是生活随笔為你收集整理的一文带你理解如何解决工作中的需求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。