- 首页 > it技术 > >
基于VUE实现的新闻后台管理系统-三
开始coding啦
?分析项目
根据展示效果我们可以分析出，Web页面有两个，一个用于登录，一个用于系统内容控制，我们分别将其命名为Login和Cms,然后进行路由配置。
- 【基于VUE实现的新闻后台管理系统-三】在src/page下新建Login.vue和Cms.vue文件,及进行vue模板构建
|--src
|--page
|--Cms.vue
|--Login.vue
>
>
- 将Login和Cms组件导入到/router/index.js中
// import something....
import Cms from '@/page/Cms'
import Login from '@/page/Login'
- 修改路由配置，该配置在/src/router/index.js中；将如下代码
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
修改为
routes: [
{
path: '/cms', // 后台管理系统路由
name: 'Cms',
component: Cms
},
{
path: '/', // 登录路由
name: 'Login',
component: Login
}
]
?内容实现
- 登录请求存储
我们将登录状态存储在sessionStorage中，所以在/src下新建utils/index.js,并写入如下代码
let KEY = 'USER'
export default {
/**
*set user info in sessionStorage
* @param userInfoObjectuser info
* @return none
*/
setLoginState: (userInfo) => {
window.sessionStorage.setItem(KEY, JSON.stringify(userInfo))
},
/**
*get user info from sessionStorage
* @return userInfo Objectuser Info
*/
getLoginState: () => {
return window.sessionStorage.getItem(KEY)
},
deleteLoginState: () => {
return new Promise((resolve, reject) => {
window.sessionStorage.removeItem(KEY) ? resolve({'isDelete': true}) : reject({'isDelete': false})
})
}
}
- 整合Axios请求
向后台请求数据，必须有像Ajax一样的请求，幸好在Node环境下有Axios这样的npm库封装了xhr这样的请求，这个库在上一节已经完成安装，为了在本系统中使用，且符合Vue开发规范，我们将其再次进行封装；在src目录下新建api/index.js文件，并写入如下代码
// 配置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)
}
}
- 登录Login.vue组件实现
因为写的Vue不是纯Js,所以代码木有高亮
>
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)
}
})
}
}
}
.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%;
}
>
- 效果
文章图片
)
?总结
在登录组件中，我们封装了Axios，将其根据web请求（put、post、get和delete）形成统一的请求接口；在登录时向后台请求并完成登录信息在SessionStorage中存储及路由跳转。需要注意的是vue官方建议tab是2格，不然其Eslint会报错，编译不通过。
// codes
setUserInfoToGo (userInfo) {
this.$utils.setLoginState(userInfo)
this.$router.push('/cms')
}
// codes
推荐阅读
