基於VUE實現的新聞後臺管理系統-三

開始coding啦

¶分析項目

根據展現效果咱們能夠分析出，Web頁面有兩個，一個用於登陸，一個用於系統內容控制，咱們分別將其命名爲Login和Cms,而後進行路由配置。

1. 在src/page下新建Login.vue和Cms.vue文件,及進行vue模板構建
   

   
   
   
   
   
   
   |--src
   
   |--page
   
   |--Cms.vue
   
   |--Login.vue
   

<template>
</template>
<script scope>
</script>
<style>
</style>

1. 將Login和Cms組件導入到/router/index.js中
   javascript // import something.... import Cms from '@/page/Cms' import Login from '@/page/Login'

2. 修改路由配置，該配置在/src/router/index.js中；將以下代碼
   javascript routes: [ { path: '/', name: 'Hello', component: Hello } ]
   修改成
   javascript routes: [ { path: '/cms', // 後臺管理系統路由 name: 'Cms', component: Cms }, { path: '/', // 登陸路由 name: 'Login', component: Login } ]

   ¶內容實現

3. 登陸請求存儲

   咱們將登陸狀態存儲在sessionStorage中，因此在/src下新建utils/index.js,並寫入以下代碼
   javascript let KEY = 'USER' export default { /** * set user info in sessionStorage * @param userInfo Object user info * @return none */ setLoginState: (userInfo) => { window.sessionStorage.setItem(KEY, JSON.stringify(userInfo)) }, /** * get user info from sessionStorage * @return userInfo Object user Info */ getLoginState: () => { return window.sessionStorage.getItem(KEY) }, deleteLoginState: () => { return new Promise((resolve, reject) => { window.sessionStorage.removeItem(KEY) ? resolve({'isDelete': true}) : reject({'isDelete': false}) }) } }

4. 整合Axios請求

   向後臺請求數據，必須有像Ajax同樣的請求，幸虧在Node環境下有Axios這樣的npm庫封裝了xhr這樣的請求，這個庫在上一節已經完成安裝，爲了在本系統中使用，且符合Vue開發規範，咱們將其再次進行封裝；在src目錄下新建api/index.js文件，並寫入以下代碼
   ```javascript
   // 配置API接口地址
   var root = '/api/v1'
   // 引用axios
   var axios = require('axios')
   // 自定義判斷元素類型JS
   function toType (obj) {
   return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
   }
   // 參數過濾函數
   function filterNull (o) {
   for (var key in o) {
   if (o[key] === null) {
   delete o[key]
   }
   if (toType(o[key]) === 'string') {
   o[key] = o[key].trim()
   } else if (toType(o[key]) === 'object') {
   o[key] = filterNull(o[key])
   } else if (toType(o[key]) === 'array') {
   o[key] = filterNull(o[key])
   }
   }
   return o
   }
   /
   接口處理函數
   這個函數每一個項目都是不同的，我如今調整的是適用於
   https://cnodejs.org/api/v1 的接口，若是是其餘接口
   須要根據接口的參數進行調整。參考說明文檔地址：
   https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
   主要是，不一樣的接口的成功標識和失敗提示是不一致的。
   另外，不一樣的項目的處理方法也是不一致的，這裏出錯就是簡單的alert
   /

   function apiAxios (method, url, params, success, failure) {
   if (params) {
   params = filterNull(params)
   }
   axios({
   method: method,
   url: url,
   data: method === 'POST' || method === 'PUT' ? params : null,
   params: method === 'GET' || method === 'DELETE' ? params : null,
   baseURL: root,
   withCredentials: false
   })
   .then(function (res) {
   if (res.data.success === true) {
   if (success) {
   success(res.data)
   }
   } else {
   if (failure) {
   failure(res.data)
   } else {
   window.alert('error: ' + JSON.stringify(res.data))
   }
   }
   })
   .catch(function (err) {
   let res = err.response
   if (err) {
   window.alert('api error, HTTP CODE: ' + res.status ? res.status : null)
   return
   }
   })
   }

   // 返回在vue模板中的調用接口
   export default {
   get: function (url, params, success, failure) {
   return apiAxios('GET', url, params, success, failure)
   },
   post: function (url, params, success, failure) {
   return apiAxios('POST', url, params, success, failure)
   },
   put: function (url, params, success, failure) {
   return apiAxios('PUT', url, params, success, failure)
   },
   delete: function (url, params, success, failure) {
   return apiAxios('DELETE', url, params, success, failure)
   }
   }

   ```

5. 登陸Login.vue組件實現

   由於寫的Vue不是純Js,因此代碼木有高亮
   ```javascript
   

   
   

   
   
   <el-input class='loginInput' placeholder="請輸入內容" @change='usernameChange' >
   
   
   <el-input class='loginInput' type='password' placeholder="請輸入內容" @change='userPassChange' >
   
   
   <el-button class='loginBtn' type="primary" :disabled="isLoginBtnDisable" @click='login'>登陸
   
   

   
   <cms-footer :siteInfo='siteinfo'>
   
   
   

   <script>
    import CmsFooter from '../components/Footer'
    export default {
    data () {
        return {
        isLoginBtnDisable: true,
        username: null,
        userPass: null,
        siteinfo: {
            name: '',
            title: '',
            logo: '',
            copyright: ''
        }
        }
    },
    components: {
        'cms-footer': CmsFooter
    },
    created () {
        this.getSiteInfo()
    },
    methods: {
        refresh () {
        window.location.reload()
        },
        login (evt) {
        if (!this.isLoginBtnDisable) {
            let params = {
            account: this.username,
            password: this.userPass
            }
            this.$api.post('login', params, (errObj) => {
            console.log('login error', JSON.stringify(errObj))
            }, (resp) => {
            resp && resp.code === 0 ? this.setUserInfoToGo({account: this.username}) : null
            })
        }
        },
        setUserInfoToGo (userInfo) {
        this.$utils.setLoginState(userInfo)
        this.$router.push('/cms')
        },
        usernameChange (evt) {
        // evt ? this.username = evt && this.userPass ? this.isLoginBtnDisable = true && console.log(this.isLoginBtnDisable) : this.isLoginBtnDisable = false : this.username = null
        if (evt) {
            this.username = evt
            this.userPass ? this.isLoginBtnDisable = false : this.isLoginBtnDisable = true
        } else {
            this.username = null
            this.isLoginBtnDisable = true
        }
        },
        userPassChange (evt) {
        // evt ? this.userPass = evt && this.username ? this.isLoginBtnDisable = true : this.isLoginBtnDisable = false : this.userPass = null
        if (evt) {
            this.userPass = evt
            this.username ? this.isLoginBtnDisable = false : this.isLoginBtnDisable = true
        } else {
            this.userPass = null
            this.isLoginBtnDisable = true
        }
        },
        getSiteInfo () {
        let _self = this
        _self.$api.get('site', null, (er) => {}, (res) => {
            if (res.code === 0) {
            _self.siteinfo = res.data
            _self.$compUtils.setSiteInfo(res.data)
            }
        })
        }
    }
    }
    </script>
   
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    .login{
        height: 100%;
        width: 100%;
    }
    .loginPage{
        height: 100%;
        width: 100%;
        background-image: linear-gradient(-180deg, #324157 38%, #00DEFF 100%);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .loginForm{
        width: 30%;
    }
    .loginInput {
        margin: 10px 0;
    }
    .loginBtn {
        width: 100%;
    }
    </style>

   ```

6. 效果
   
   )

   ¶總結

   在登陸組件中，咱們封裝了Axios，將其根據web請求（put、post、get和delete）造成統一的請求接口；在登陸時向後臺請求並完成登陸信息在SessionStorage中存儲及路由跳轉。須要注意的是vue官方建議tab是2格，否則其Eslint會報錯，編譯不經過。

// codes
setUserInfoToGo (userInfo) {
  this.$utils.setLoginState(userInfo)
  this.$router.push('/cms')
}
// codes