摘要:前言在上一篇文章,已經(jīng)搭建好所需要的開發(fā)環(huán)境了接下來讓開發(fā)一個簡單的項目吧。檢測路由變化獲取數(shù)據(jù)這三個方法都是改變地址欄然后通過檢測地址欄變化去請求數(shù)據(jù)。項目結(jié)構(gòu)最后如果有什么想跟我討論的話,請私信。
前言
在 上一篇文章 ,已經(jīng)搭建好所需要的開發(fā)環(huán)境了,接下來讓開發(fā)一個簡單的項目吧。
關(guān)于 less 我就不貼代碼了。
源碼地址
正題先對默認的文件進行改造一下。
刪除了默認的 App.vue、Hello.vue。
然后加了一個 list.vue。
修改一下main.js
然后看到頁面打印出一個 “列表頁” 三個字的時候,就表示成功了。
先弄個最簡單的實例看看是不是能跑起來。
so easy。2、實例2
接下來弄個有動態(tài)數(shù)據(jù)的列表,就是這篇文章的主菜, 大概效果長這樣。 1.上一頁 2.下一頁 3.分類3、導(dǎo)入
先裝上我們需要的東西。
cnpm i mint-ui -D cnpm i vue-router -D cnpm i less less-loader -S cnpm i jquery -S mint-ui => 組件庫,暫時只用到了其中的loading vue-router => 路由 less => css的預(yù)處理器 jquery => 老朋友4、配置
路由(vue-router):現(xiàn)在只有一個列表頁,那就只寫一個列表頁的路徑,配置 文件放在跟 main.js 同級的地方。
{ path: "/list", name: "list", component: List }
關(guān)于 vue-router 更多的信息,點這里
如果有更多頁面需要配置的地方,比如編輯頁,詳情頁之類的在這里添加就對了。
入口(main.js): 函數(shù)入口,改了一下之前的配置。
5、列表頁結(jié)構(gòu)頁面分為了三層,所以對應(yīng)的頁面也有三層。
分類
- {{type.text}}
循環(huán)列表,展示內(nèi)容。
分頁
上一頁 下一頁
mounted 做了三件事:
1.從路由獲取數(shù)據(jù),也就是從地址欄里面獲取 分類 和 頁數(shù)。
2.請求列表數(shù)據(jù)
3.設(shè)置 分類 的數(shù)據(jù)
之所以在mounted里面設(shè)置 分類 的數(shù)據(jù),是因為不想data里面數(shù)據(jù)太亂。 如果把 請求數(shù)據(jù)那一段話注釋掉的話,就可以看到 分類 的數(shù)據(jù)了。
mounted() { // 設(shè)置默認頁數(shù) this.page = parseInt(this.$route.query.page) || 1; // 設(shè)置默認分類 this.tab = this.$route.query.tab; // 請求數(shù)據(jù) this.getData(); // 設(shè)置默認頭部分類 this.types = [{ text: "全部", value: "" }, { text: "精華", value: "good" }, { text: "分享", value: "share" }, { text: "招聘", value: "job" }, { text: "回答", value: "ask" }]; }
methods 里面添加 getData() 方法,將 ajax 請求回來的數(shù)據(jù)保存到 list 數(shù)據(jù),然后把頁面滾到頂層,這樣子就能夠看到數(shù)據(jù)了。
至于 common.ajaxGet() 方法,我吧所有的 ajax 請求進行了封裝到公共方法里面了。
getData() { // 打開loading Indicator.open(); // 請求數(shù)據(jù) common.ajaxGet(common.api + "/topics", { page: this.page, // 頁數(shù) tab: this.tab // 分類 }).then(data => { if (data.success) { // 填充數(shù)據(jù) this.list = data.data; // 移動到頂層 $(".list").animate({ scrollTop: 0 }, 200); } // 關(guān)閉loading Indicator.close(); }); }
新建一個文件 src/lib/common.js,這個文件主要放公共的方法,現(xiàn)在暫時只用到里面的 ajaxGet() 這個方法,ajaxGet() 用了個 promise 包裝了一下。
import $ from "jquery"; let common = { api: " https://cnodejs.org/api/v1", isPhone() { let u = navigator.userAgent; let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android終端 let isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 return isAndroid || isiOS; }, getType(value) { let result = value; switch (value) { case "job": result = "招聘"; break; case "good": result = "精華"; break; case "share": result = "分享"; break; case "ask": result = "問答"; break; default: result = "全部" break; } return result; }, ajaxGet(url, data) { return new Promise((resolve, reject) => { $.ajax({ url: url, data: data || {}, success: data => { resolve(data); }, error: data => { reject(); console.error("數(shù)據(jù)請求失敗"); } }) }); } } export default common;
data里面加上幾個使用的參數(shù)就OK了。
data() { return { list: [], types: [], tab: "", page: 1 } }
使用 getType() 方法,對數(shù)據(jù)過濾一下。
filters: { tab(value) { return common.getType(value); } }
加上css的話,上面幾個步驟應(yīng)該就可以看到頁面效果了。
這里 分頁 還有 分類 其實都是請求同一個接口,為了在地址欄直接改變 分類 和 分頁 有效,所以只要監(jiān)控地址欄的變化,然后動態(tài)的改數(shù)據(jù)就ok了,不必再寫重復(fù)的請求接口了。
watch: { $route() { // 檢測路由變化 this.page = this.$route.query.page || 1; this.tab = this.$route.query.tab; // 獲取數(shù)據(jù) this.getData(); } }
這三個方法都是改變地址欄然后通過 wacth 檢測地址欄變化去請求數(shù)據(jù)。
prev() { this.page--; // 改變路由 let query = { page: this.page } if (this.tab) { query.tab = this.tab; } this.$router.push({ path: "list", query: query }) }, next() { // 改變當前頁數(shù) this.page++; // 改變路由 let query = { page: this.page } if (this.tab) { query.tab = this.tab; } this.$router.push({ path: "list", query: query }) }, onTabSelect(value) { // 改變當前分類 this.tab = value; this.page = 1; // 改變路由 let query = { page: this.page } if (this.tab) { query.tab = this.tab; } this.$router.push({ path: "list", query: query }) }
輸入 http://localhost:8080/list?pa... 看看頁面是不是就會跳到對應(yīng)的頁面了呢,這樣子把鏈接分享出去的話,也能定位到當時的狀態(tài)。
項目結(jié)構(gòu)
如果有什么想跟我討論的話,請私信。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/86513.html
摘要:但是實際上,回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了,然后和是按需加載的,就是需要的時候才加載。 1.前言 上篇文章(webpack+vue項目實戰(zhàn)(二,開發(fā)管理系統(tǒng)主頁面)),實現(xiàn)了,側(cè)邊欄的一個操作,點擊側(cè)邊欄的一些操作,最重要的就是路由的切換。看了上一篇的伙伴也不難發(fā)現(xiàn),除了點擊側(cè)邊欄‘首頁’之外,點擊其它的都是白色的一片。原因我想大家都...
摘要:既然是實戰(zhàn)項目,我們也得在寫頁面之前把相關(guān)的規(guī)范配置做好。使用來執(zhí)行規(guī)范全局安裝下需在前面加項目目錄下執(zhí)行配好后,之后用到命令時,改為使用。使用效驗提交信息首先還是安裝依賴也會安裝但自且并不和之后的版本兼容。 生活不能隨意過,代碼也不能隨意寫。 前一篇文章我們已經(jīng)把項目搭建好了,那是不是馬上就開始寫頁面了呀? NO! 無論在哪家公司,都會有相應(yīng)的代碼規(guī)范。新入職的員工往往第一步就要接受...
摘要:既然是實戰(zhàn)項目,我們也得在寫頁面之前把相關(guān)的規(guī)范配置做好。使用來執(zhí)行規(guī)范全局安裝下需在前面加項目目錄下執(zhí)行配好后,之后用到命令時,改為使用。使用效驗提交信息首先還是安裝依賴也會安裝但自且并不和之后的版本兼容。 生活不能隨意過,代碼也不能隨意寫。 前一篇文章我們已經(jīng)把項目搭建好了,那是不是馬上就開始寫頁面了呀? NO! 無論在哪家公司,都會有相應(yīng)的代碼規(guī)范。新入職的員工往往第一步就要接受...
摘要:開篇從今天起,小肆將和大家從頭開始做一個完整的實戰(zhàn)項目。關(guān)注技術(shù)放肆聊跟小肆一起行動起來在這個項目中,小肆力爭做到以下幾點應(yīng)用目前最新的技術(shù),并隨時間更新。 開篇 從今天起,小肆將和大家從頭開始做一個完整的實戰(zhàn)項目。其中遇到的每個知識點都是我們工作中常見的,這些知識點大多在網(wǎng)上都能找到但卻沒有哪個教程能都講得到,那就由小肆來做吧。 關(guān)注技術(shù)放肆聊,跟小肆一起行動起來! 在這個項目中,小...
閱讀 1049·2021-11-18 10:02
閱讀 1304·2021-09-23 11:22
閱讀 2608·2021-08-21 14:08
閱讀 1636·2019-08-30 15:55
閱讀 1720·2019-08-30 13:45
閱讀 3141·2019-08-29 16:52
閱讀 3092·2019-08-29 12:18
閱讀 1636·2019-08-26 13:36