基于VUE实现的新闻后台管理系统-三

时间 2019-11-12

标签基于 vue 实现后台管理系统繁體版

原文原文链接

开始coding啦javascript

¶分析项目

根据展现效果咱们能够分析出，Web页面有两个，一个用于登陆，一个用于系统内容控制，咱们分别将其命名为Login和Cms,而后进行路由配置。vue

在src/page下新建Login.vue和Cms.vue文件,及进行vue模板构建
```
|--src

|--page

|--Cms.vue

|--Login.vue
```

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

将Login和Cms组件导入到/router/index.js中
javascript // import something.... import Cms from '@/page/Cms' import Login from '@/page/Login'java
修改路由配置，该配置在/src/router/index.js中；将以下代码
javascript routes: [ { path: '/', name: 'Hello', component: Hello } ]
修改成
javascript routes: [ { path: '/cms', // 后台管理系统路由 name: 'Cms', component: Cms }, { path: '/', // 登陆路由 name: 'Login', component: Login } ]node

¶内容实现
登陆请求存储ios
咱们将登陆状态存储在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}) }) } }
整合Axios请求web

向后台请求数据，必须有像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
/npm

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
}
})
}axios

// 返回在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)
}
}api
```

登陆Login.vue组件实现session

由于写的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>

```

效果

)

¶总结

在登陆组件中，咱们封装了Axios，将其根据web请求（put、post、get和delete）造成统一的请求接口；在登陆时向后台请求并完成登陆信息在SessionStorage中存储及路由跳转。须要注意的是vue官方建议tab是2格，否则其Eslint会报错，编译不经过。

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

基于VUE实现的新闻后台管理系统-三

¶分析项目

¶内容实现

¶总结