伪全栈假前端之路 - Vue.js篇

一、伪全栈假前端的定义

在做好数据库设计，后台开发，前端接口之余，不用学node，npm，webpack等，只要会一点点Html+Css+Js就开始做前端开发。

二、Vue.js基础

1.引入Vue.js

///如安装Vue.js的Chrome插件进行调试，则需引入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数组长度</h5>
        <input type="text" v-model="rows.length" />
        <button v-on:click="myclick();">列表加一行,同时改变标题样式</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: '标签输出绑定',
            message1: '<b>v-html</b>标签绑定，还有<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进阶（单页面应用）

1.准备引入的js

 <script type="text/javascript" src="vue-dev.js"></script>
///ajax插件，类似的还有fetch.js
 <script type="text/javascript" src="axios.min.js"></script>
///页面路由，基本原理就是监控hash并做了生命周期
 <script type="text/javascript" src="vue-router.min.js"></script>
///Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
///简单讲就是全局变量的存储，但是刷新就会没有，还需要localStorage做配合
 <script type="text/javascript" src="vuex.min.js"></script>
///第三方Vue的组件库
 <script type="text/javascript" src="vonic.min.js"></script>
///网上单独的插件，还有上传等等，按需扩展
<script type="text/javascript" src="vue-awesome-picker.js"></script>

2.核心js

<script>
    ///配置路由,无限极子路由
    var routes = [
        {
            path: '/',
            name: "Index",
            component: Index,//一个路由地址对应一个组件
            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的仓储变量，全局拿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请求添加头内容，判断登录是否超时
    axios.defaults.headers.common['Authentication-Token'] = store.state.token;
    // 添加请求拦截器
    axios.interceptors.request.use(config => {
        // 在发送请求之前做些什么
        //判断是否存在token，如果存在将每个页面header都添加token
        if (store.state.uid) {
            config.headers.common['Authentication-Token'] = store.state.uid
        }
        return config;
    },
    error => {
        // 对请求错误做些什么
        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',
                             //登录成功后跳入浏览的当前页面
                            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

其实也没写组件···土上传，直接看代码

///上传压缩插件
<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。简单易用的国产UI框架，可以写前后端，js框架功能也马马虎虎。
2.Weui。主要做微信端应用，Js部分基本没用，主要是拿来做样式。
3.Layui。后台框架为主。后台单页面应用。
4.其他····
在做项目时经常会改动默认的样式，假前端只要会写优先级最高的样式重写： !important 即可。如下所示：

<style>
     .font12{ font-size:12px !important;}
     .padding{ padding:5px 10px !important;}
</style>