前端學(xué)習(xí)總結(jié)，經(jīng)驗分享，項目經(jīng)驗分享過程(vue.js項目)
前言
來，和魔王哪吒總結(jié)一下，分享一下自己對前端學(xué)習(xí)總結(jié)，經(jīng)驗分享，以及寫過的項目經(jīng)驗分享過程。
如果覺得還不錯的話，瀏覽的過程中，需要您：
點贊，分享，評論 有錢的捧個錢場，沒錢的捧個人場
技術(shù)實踐、讀書筆記、編程技巧、隨筆雜談、原創(chuàng)翻譯，漫談自己人生感觸
學(xué)習(xí)總結(jié)
hello，大家好，來給大家分享我的專業(yè)學(xué)習(xí)經(jīng)驗和日常學(xué)習(xí)經(jīng)驗。對于編碼的學(xué)習(xí)，我認(rèn)為基礎(chǔ)知識和編程實踐是最重要的。剛開始學(xué)習(xí)前端的時候，是將基礎(chǔ)知識學(xué)習(xí)一遍，所用教材可以靠學(xué)校發(fā)的教材即可?；A(chǔ)學(xué)習(xí)過后，最重要的就是實踐，可以不斷做一些模仿網(wǎng)站，以及到最后自己設(shè)計網(wǎng)站等。
收藏平時交流的信息：
技術(shù)學(xué)的再好，沒有開發(fā)經(jīng)驗，和產(chǎn)品經(jīng)驗，是很難寫出好的代碼。因為寫代碼本身是帶有目的性的，解決問題。 如果在校，學(xué)習(xí)程序很迷茫，是因為不知道學(xué)這個用來干嘛，自身沒有想做的東西，所以就很迷茫，不知道學(xué)什么，為什么要學(xué)。 工作，要對一個產(chǎn)品了解到什么深度，代碼就越健壯。 學(xué)習(xí)方式是有捷徑的避開所有看不懂學(xué)習(xí)資料，找看的懂的，拿起一本資料或者網(wǎng)上找的資料，細(xì)度幾分鐘，看不懂直接找早別的資料 有可能能力未達到 所有看不懂 也有可能 資料本身描述 很難懂 更有可能 資料描述不適合自己閱讀習(xí)慣 優(yōu)先 實現(xiàn)功能 再考慮優(yōu)化
那么你是否自己堅持了呢？當(dāng)你想要學(xué)習(xí)，拿起手機時，你會不會發(fā)現(xiàn)，你已經(jīng)不知不覺偏離了正軌，從娛樂新聞到頭版頭條，微信99+未讀的消息，你心里想的就是看一會兒，就看一會兒。結(jié)果不知不覺時間過去了10分鐘，半小時，1小時溜走了。然后你開始焦躁，后悔，自責(zé)，但是到了第二天，你又掉進了相同的坑里。
你會不會也很納悶，為什么我的自制力這么差，為什么有些東西讓我欲罷不能，因為你已經(jīng)上癮了，有個實驗小白鼠遇到電流會躲避，但是奇怪的現(xiàn)象發(fā)生了，小白鼠不但沒有躲避，反而一次又一次的自我電擊，經(jīng)過發(fā)現(xiàn)，原來是實驗中不小心把某位置弄錯，剛好刺激了快感中樞的位置。所以，你也許就像這小白鼠一樣上了癮。
一個真相是，科技巨頭們在社交軟件視頻平臺，網(wǎng)絡(luò)游戲中精心布置了一個又一個沉迷的鉤子，目的就是為了截取更多的用戶，獲取他們的更多時間和金錢，我們正在被一個算法和娛樂所包裹的電子海洛因中，但很多人卻不自知，那么如何擺脫上癮的行為呢？
就是去了解讓人沉迷于網(wǎng)絡(luò)的鉤子：
可望而不可即的誘人目標(biāo) 無法抵擋無法預(yù)知的積極反饋 漸進式的進步和改善的感覺 越來越困難的任務(wù)需要解決，但暫未解決的緊張感
如，你發(fā)布了某消息，你會去暗中觀察，有沒有人給我點贊，寫文章，有沒有人給我點贊，有沒有人給我評論等等。（我很期待！?。。?/p>
其實你可以把這些鉤子投入學(xué)習(xí)中，把學(xué)習(xí)當(dāng)做興趣，升級打怪，不斷提升自己。
你的選擇
自己的人生自己選擇，你可以選擇一條簡單的路，選擇沉迷在你的手機里，刷視頻，打游戲，煲劇，毫不費力的收獲大把大把的快樂，你也可以選擇一條更加艱難的路，選擇自律，選擇延遲慢走，選擇成長。
用你的右手做什么，由你自己決定
項目經(jīng)驗
下面研究封裝工具代碼塊：
權(quán)限控制等信息auth.js
用來存儲localStorage 本地緩存的方法
//?操作用戶token
export?function?setToken(value)?{
?uni.setStorageSync('token',?value);
?console.log('存儲用戶信息成功');
}
export?function?getToken()?{
?let?token?=?uni.getStorageSync('token');
?return?token;
}
export?function?removeToken()?{
?uni.removeStorageSync('token');
}
操作用戶信息代碼如下：
export?function?setUserInfo(value)?{
?try?{
??let?newValue?=?JSON.stringify(value);
??uni.setStorageSync('userInfo',?newValue);
??console.log('存儲用戶信息成功');
?}?catch?(e)?{
??return;
?}
}
export?function?getUserInfo()?{
?let?userInfo?=?uni.getStorageSync('userInfo');
?console.log('userInfo獲取用戶信息成功',?userInfo);
?if(userInfo)?{
??return?JSON.parse(userInfo);
?}
}
項目主題顏色封裝：
export?function?setConfig(value)?{
?try?{
??let?configColor?=?JSON.stringify(value);
??uni.setStorageSync('configColor',?configColor);
??console.log('存儲主題顏色成功');
?}catch(e){
??return;
?}
}
export?function?getConfig()?{
?let?configColor?=?uni.getStorageSync('configColor');
?if(configColor){
??return?JSON.parse(configColor);
?}
}
獲取推薦人id
export?function?setRecommend(value)?{
?uni.setStorageSync('recommend',?value);
?console.log('recommend',?value);
}
export?function?getRecommend()?{
?let?recommend?=?uni.getStorageSync('recommend');
?return?recommend;
}
如果你需要用來存儲項目內(nèi)使用的第三方api key，可以創(chuàng)建keys.js文件：
let?txMapKey?=?'xxxx'?//?騰訊地圖的key
export?{
?txMapKey
}
封裝必不可少的支付功能：
創(chuàng)建文件pay.js，代碼如下：
微信公眾號支付
//?description:微信公眾號支付
//?data?微信支付請求成功之后返回的支付參數(shù)
//?payParams?{object}?微信支付需要的參數(shù)
function?onBridgeReady(data,?payParams)?{
?window.WeixinJSBridge.invoke('getBrandWCPayRequest',?{
??appId:?data.appId,
??timeStamp:?data.timeStamp,
??nonceStr:?data.nonceStr,
??package:?data.package,
??signType:?data.signType,
??paySign:?data.paySign?//?微信簽名
},?function(res)?{
??//?console.log(res);
??if(res.err_msg?===?'get_brand_wcpay_request:ok')?{
???//?支付成功頁面
???if(payParams.type?===?'SHYY')?{
????toastMsg('correct','支付成功');
????setTimeout(()=>{
?????router.push('/home');
????},500);
??}else{
???router.push({
????path:?'/success',
????query:?{
?????orderId:?payParams.orderId,
?????totalFree:?payParams.totalFree
????}
???});
??}
?}else?if(res.err_msg?===?'get_brand_wcpay_request:fail')?{
?//?支付失敗
??return?alert(res.err_desc);
?}else{
?//?跳轉(zhuǎn)訂單詳情
?toastMsg('warn',?'支付取消');
?}
});
}
支付寶支付
/**
?*?支付寶支付
?*/
function?alipay(res)?{
?console.log('調(diào)起支付alipay',res);
?uni.requestPayment({
??provider:?'alipay',
??orderInfo:?{
???"dealId":?res.dealId,
???"appKey":?res.appKey,
???"totalAmount":?res.totalAmount,
???"tpOrderId":?res.tpOrderId,
???"dealTitle":?res.dealTitle,
???"rsaSign":?res.rsaSign,
???"bizInfo":?res.bizInfo
??},?
????????//訂單數(shù)據(jù)
??success:?function(res)?{
???console.log('success:'?+?JSON.stringify(res));
??},
??fail:?function(err)?{
???console.log('fail:'?+?JSON.stringify(err));
??}
?});
}
微信小程序支付
function?wxpay(ret,?orderid)?{
??console.log('調(diào)起支付wxpay',?ret);
??let?res?=?ret;
??let?status?=?false;
??uni.requestPayment({
????timeStamp:?res.timeStamp,
????nonceStr:?res.nonceStr,
????package:?res.package,
????signType:?res.signType,
????paySign:?res.paySign,
????appId:?res.appId,
????success:?function?(res)?{
??????console.log('success:'?+?JSON.stringify(res),?res);
??????uni.showToast({
????????title:?'支付成功!'
??????});
????},
????fail:?function?(err)?{
??????console.log('fail:'?+?JSON.stringify(err));
????}
??});
}
封裝的異步請求處理函數(shù)代碼封裝，創(chuàng)建文件request.js
request('接口名稱',?{key:value},?'請求方式(默認(rèn)為GET)').then(res=>{console.log(res)})
import?{?getToken,?removeToken?}?from?'./auth';
let?baseUrl?=?'';
async?function?request(method,params,type,callBack){
?//?創(chuàng)建一個名為request請求的方法函數(shù)
?if?(!type)?{
????type?=?'GET';
?}
??let?header?=?{
????//設(shè)置請求頭信息
????'Authorization':?getToken(),
????'X-Requested-With':?'XMLHttpRequest',
????"Accept":?"application/json",
????"Content-Type":?"application/json;?charset=UTF-8"
??};
??let?http?=?{
????url:?baseUrl?+?mehtod,
????data:?params,
????method:?type,
????header:?header
??};
?let?promise?=?new?Promise((resolve,?reject)?=>?{
????uni.request(http).then(res?=>?{
??????let?newdata?=?res[1].data;?//?if?(newdata.code?==?403)?{
??????if?(newdata?==?-1)?{
????????uni.showToast({
??????????title:?res[1].data.msg,
??????????icon:?'none'
????????});
??????}
??????resolve(res[1].data);
????}).catch(err?=>?{
??????reject(err);
??????console.log(err);
????});
??});
??return?promise;
}
export?default?{
??request
};
創(chuàng)建util.js文件：（時間工具）
const?formatTime?=?date?=>?{
??const?year?=?date.getFullYear();
??const?month?=?date.getMonth()?+?1;
??const?day?=?date.getDate();
??const?hour?=?date.getHours();
??const?minute?=?date.getMinutes();
??const?second?=?date.getSeconds();
??return?[year,?month,?day].map(formatNumber).join('/')?+?'?'?+?[hour,?minute,?second].map(formatNumber).join(':');
};
const?formatNumber?=?n?=>?{
??n?=?n.toString();
??return?n[1]???n?:?'0'?+?n;
};
module.exports?=?{
??formatTime:?formatTime
};
store-index.js
創(chuàng)建store-index.js
import?Vue?from?'vue'
import?Vuex?from?'vuex'
Vue.use(Vuex)
const?store?=?new?Vuex.Store({
?state:?{
??hasLogin:?false,
??userInfo:?{},
?},
?mutations:?{
??login(state,?provider)?{
???state.hasLogin?=?true;
???state.userInfo?=?provider;
???uni.setStorage({//緩存用戶登陸狀態(tài)
???????key:?'userInfo',??
???????data:?provider??
???})?
???console.log(state.userInfo);
??},
??logout(state)?{
???state.hasLogin?=?false;
???state.userInfo?=?{};
???uni.removeStorage({??
????????????????key:?'userInfo'??
????????????})
??}
?},
?actions:?{
?
?}
})
export?default?store
App.vue
vuex管理登陸狀態(tài)
main.js
import?Vue?from?'vue'
import?store?from?'./store'
import?App?from?'./App'
const?msg?=?(title,?duration=1500,?mask=false,?icon='none')=>{
?//統(tǒng)一提示方便全局修改
?if(Boolean(title)?===?false){
??return;
?}
?uni.showToast({
??title,
??duration,
??mask,
??icon
?});
}
const?json?=?type=>{
?//模擬異步請求數(shù)據(jù)
?return?new?Promise(resolve=>{
??setTimeout(()=>{
???resolve(Json[type]);
??},?500)
?})
}
app.vue
vuex 管理登錄狀態(tài)
main.js
import?Vue?from?'vue'
import?App?from?'./App'
//引入vuex
import?store?from?'./store'
import?*?as?filters?from?'./filters'?//?global?filters
const?msg?=?(title,?duration=1500,?mask=false,?icon='none')=>{
?//統(tǒng)一提示方便全局修改
?if(Boolean(title)?===?false){
??return;
?}
?uni.showToast({
??title,
??duration,
??mask,
??icon
?});
}
//把vuex定義成為全局組件
Vue.prototype.$store?=?store
Vue.prototype.$api?=?{msg};
Vue.config.productionTip?=?false
Object.keys(filters).forEach(key?=>?{
?Vue.filter(key,?filters[key])
})
App.mpType?=?'app'
const?app?=?new?Vue({
????...App,
?//?掛載
?store
})
app.$mount()
點餐系統(tǒng)
效果動畫：
main.js
import?Vue?from?'vue'
import?App?from?'./App'
import?router?from?'./router'
Vue.config.productionTip?=?false;
import?store?from?'./assets/js/store';
new?Vue({
?el:?'#app',
?router,
?store,
?components:?{App},
?template:?'
})
App.vue
??"app">
???
????
?????"$route.meta.keepAlive"/>
????
????"!$route.meta.keepAlive"/>
?? router/index.js
import?Vue?from?'vue'
import?Router?from?'vue-router';
import?home?from?'@/components/home';
import?detail?from?'@/components/detail';
import?list?from?'@/components/list';
import?pay?from?'@/components/pay';
Vue.use(Router)
export?default?new?Router({
??routes:?[
????{
??????path:?'/',
??????redirect:"/home"
????},
????{
??????path:?'/home',
??????name:?'home',
??????meta:{keepAlive:true},?//緩存首頁數(shù)據(jù)
??????component:?home
????},
????{
??????path:?'/detail',
??????name:?'detail',
??????component:?detail
????},
????{
??????path:?'/list',
??????name:?'list',
??????component:?list
????},
????{
??????path:?'/pay',
??????name:?'pay',
??????component:?pay
????}
??]
})
components目錄
components/detail.vue
?"detail">
????????
????????????詳情
????????????"goback-btn?icon-chevron-left"?href="javascript:;"?@click="goback">
????????????
????????
????????"cont">
????????????{{$route.params.item.name}}?
?????????????"price">￥{{$route.params.item.price}}
????????????
????????????"plus-btn?icon-shopping-cart"?:class="$route.params.item.checked?'ac':''"?:disabled="$route.params.item.checked"?@click="order">
????????????
????????????"swiper-container">
????????????????"swiper-wrapper">
????????????????????"swiper-slide"?v-for="src?in?$route.params.item.slide">"slide-img"?:src="src"> ????????????????
????????????????
????????????
