一僻澎、偽全棧假前端的定義
在做好數(shù)據(jù)庫(kù)設(shè)計(jì)貌踏，后臺(tái)開發(fā)，前端接口之余窟勃，不用學(xué)node祖乳，npm，webpack等秉氧，只要會(huì)一點(diǎn)點(diǎn)Html+Css+Js就開始做前端開發(fā)眷昆。
二、Vue.js基礎(chǔ)
1.引入Vue.js
///如安裝Vue.js的Chrome插件進(jìn)行調(diào)試谬运，則需引入vue.dev.js版
<script src="vue.min.js"></script>
2.Html部分
<style type="text/css">
.text-red{ color:red;}
</style>
<div id="app">
<h5 class="class1" v-bind:class="{ 'text-red': class2 }">
<i v-html="message1"></i>{{message}}
</h5>
<hr />
<div>
<h5>input值為data數(shù)組長(zhǎng)度</h5>
<input type="text" v-model="rows.length" />
<button v-on:click="myclick();">列表加一行,同時(shí)改變標(biāo)題樣式</button>
</div>
<ul>
<li v-for="(row, index) in rows">{{index}}:{{ row.name }} </li>
</ul>
</div>
3.Js部分
<script>
new Vue({
el: '#app',
data: {
message: '標(biāo)簽輸出綁定',
message1: '<b>v-html</b>標(biāo)簽綁定隙赁，還有<b>v-text</b>文本綁定',
class2: true,
rows: [
{ name: '行1111' },
{ name: '行222' },
]
},
created: function () {
this.rows.push({ name: "初始化加了一行" });
},
methods: {
myclick: function () {
this.rows.push({ name: "按鈕加一行" });
this.class2 = !this.class2;
}
}
});
</script>
三、Vue.js進(jìn)階（單頁面應(yīng)用）
1.準(zhǔn)備引入的js
<script type="text/javascript" src="vue-dev.js"></script>
///ajax插件梆暖，類似的還有fetch.js
<script type="text/javascript" src="axios.min.js"></script>
///頁面路由伞访，基本原理就是監(jiān)控hash并做了生命周期
<script type="text/javascript" src="vue-router.min.js"></script>
///Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。
///簡(jiǎn)單講就是全局變量的存儲(chǔ)轰驳，但是刷新就會(huì)沒有厚掷，還需要localStorage做配合
<script type="text/javascript" src="vuex.min.js"></script>
///第三方Vue的組件庫(kù)
<script type="text/javascript" src="vonic.min.js"></script>
///網(wǎng)上單獨(dú)的插件，還有上傳等等级解，按需擴(kuò)展
<script type="text/javascript" src="vue-awesome-picker.js"></script>
2.核心js
<script>
///配置路由,無限極子路由
var routes = [
{
path: '/',
name: "Index",
component: Index,//一個(gè)路由地址對(duì)應(yīng)一個(gè)組件
children: [
{ path: 'home', component: Home },
{ path: 'discount', component: Discount, meta: { requireAuth: true } },
{
path: 'sign', component: Sign,
children: [
{ path: 'index', component: SignIndex },
{ path: 'action/:id', component: SignAction }
]
},
{ path: 'pic', component: Pic },
{ path: 'user', component: User }
]
}
, { path: '/signRecord', component: SignRecord }
, { path: '/Login', component: Login }
, { path: '/wxBind', component: WXBind }
, { path: '/nvr/:id', component: NVR }
];
///定義Vuex的倉(cāng)儲(chǔ)變量冒黑，全局拿store使用
var store = new Vuex.Store({
state: {
uid: 0,
isLoading: false
},
mutations: {//全局變量操作方法
updateLoadingStatus(state, payload) {
state.isLoading = payload.isLoading;
if (state.isLoading) {
$loading.show("正在加載");//$loading是vonic插件的方法
} else {
$loading.hide();
}
},
set_token(state, token) {
state.uid = token.uid;
},
del_token(state) {
state.uid = 0;
localStorage.removeItem('token');
}
}
});
var router = new VueRouter({ mode: "history", routes });//開啟歷史模式
router.afterEach(function (to) {
//切換路由顯示loading
store.commit('updateLoadingStatus', { isLoading: false });
})
///ajax請(qǐng)求添加頭內(nèi)容，判斷登錄是否超時(shí)
axios.defaults.headers.common['Authentication-Token'] = store.state.token;
// 添加請(qǐng)求攔截器
axios.interceptors.request.use(config => {
// 在發(fā)送請(qǐng)求之前做些什么
//判斷是否存在token勤哗，如果存在將每個(gè)頁面header都添加token
if (store.state.uid) {
config.headers.common['Authentication-Token'] = store.state.uid
}
return config;
},
error => {
// 對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error);
});
// http response 攔截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
this.$store.commit('del_token');
router.replace({
path: '/login',
//登錄成功后跳入瀏覽的當(dāng)前頁面
query: { redirect: router.currentRoute.fullPath }
})
}
}
return Promise.reject(error.response.data)
});
//核心js抡爹，開始渲染頁面
Vue.use(Vonic.app, { routes: routes, store: store });
</script>
3.組件寫法及Config配置
<script type="x-template" id="index">
<div class="page">
<router-view></router-view>
</div>
</script>
<script>
var Index = {
template: '#index',
data() { return { data: data} },
created: function () {
config.init();
},
methods: {
//自己寫方法
},
destroyed: function () {
//vue的生命周期
}
};
</script>
<script>
var config = {
debug: true,
storageKey: "token",
apiURL: {
mobileCode: '/loginApi/getcode',
},
init: function () {
config.baseCheck();
}
};
</script>
四、自己寫Uploader
其實(shí)也沒寫組件···土上傳芒划，直接看代碼
///上傳壓縮插件
<script type="text/javascript" src="localResizeIMG/lrz.all.bundle.js"></script>
<div id="app">
///capture="camera"
<input ref="uploader" type="file" accept="image/*" style="display:none;" v-on:change="onChange">
<button @click="addPic">上傳按鈕樣式自己寫</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
previewShow: false,
previewImg: '',
},
methods: {
addPic() {
this.$refs.uploader.click();
},
onChange: function (e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
_this.createImage(files);
},
createImage: function (file) {
var _this = this;
lrz(file[0], { width: 800 }).then(function (rst) {
_this.uploadImage(rst.base64);
return rst;
}).always(function () {
e.target.value = null;// 清空文件上傳控件的值
});
},
uploadImage: function (strBase64) {
var _this = this;
$loading.show("正在上傳...");
var opts = {
url: config.apiURL.uploadImg,
data: { base64str: strBase64, uid: store.state.uid },
success: function (res) {
$loading.hide();
if (res.code > 0) {
_this.previewImg = res.msg;
}
}
}
vm_utils.req(opts);
},
}
})
</script>
五冬竟、前端UI框架推薦
1.AmazeUI欧穴。簡(jiǎn)單易用的國(guó)產(chǎn)UI框架，可以寫前后端泵殴，js框架功能也馬馬虎虎涮帘。
2.Weui。主要做微信端應(yīng)用笑诅，Js部分基本沒用调缨，主要是拿來做樣式。
3.Layui吆你。后臺(tái)框架為主弦叶。后臺(tái)單頁面應(yīng)用。
4.其他····
在做項(xiàng)目時(shí)經(jīng)常會(huì)改動(dòng)默認(rèn)的樣式早处，假前端只要會(huì)寫優(yōu)先級(jí)最高的樣式重寫： !important 即可湾蔓。 如下所示：
<style>
.font12{ font-size:12px !important;}
.padding{ padding:5px 10px !important;}
</style>
