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

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

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

總結

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

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