基于VUE实现的新闻后台管理系统-三
开始coding啦
¶分析项目
根据展示效果我们可以分析出,Web页面有两个,一个用于登录,一个用于系统内容控制,我们分别将其命名为Login和Cms,然后进行路由配置。
- 在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中
// 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 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请求
向后台请求数据,必须有像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,所以代码木有高亮
<template>
<div class='login'>
<div class='loginPage' >
<el-form class='loginForm' label-position='left' label-width="80px" >
<el-input class='loginInput' placeholder="请输入内容" @change='usernameChange' >
<template slot="prepend">用户名</template>
</el-input>
<el-input class='loginInput' type='password' placeholder="请输入内容" @change='userPassChange' >
<template slot="prepend">密码</template>
</el-input>
<el-button class='loginBtn' type="primary" :disabled="isLoginBtnDisable" @click='login'>登录</el-button>
</el-form>
</div>
<cms-footer :siteInfo='siteinfo'></cms-footer>
</div>
</template> <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实现的新闻后台管理系统-三的更多相关文章
- 基于VUE实现的新闻后台管理系统-一
基于VUE实现的新闻后台管理系统 前段时间拿到一个关于新闻后台的API,测试数据库使用SQLite,Restful服务是用Go写的,只要运行特定环境下的脚本(run.*)就会启动一个服务,依次后台为接 ...
- 基于VUE实现的新闻后台管理系统-二
基础环境及最后的开发效果已完成说明,接下来就开始配置. ¶npm初始化 新建项目文件夹VueDemo,在其内执行如下脚本 npm init -y 安装vue-cli构建包 yarn add vue-c ...
- 基于tp5免费开源的后台管理系统
基于tp5免费开源的后台管理系统 可以自定义后台菜单,模块等. 后台模板用的是:AdminLTE 简单的后台基础管理系统,有兴趣开源看看 代码地址:https://github.com/mengzhi ...
- 基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤
效果演示地址, github地址: demo演示: 1.About 此项目是 vue2.0 + element-ui + node+mongodb 构建的后台管理系统,所有的数据都是从 ...
- vue_shop(基于vue电商管理后台网站)
vue_shop 目录 vue_shop day01 实现登录功能 项目预开发处理 Login.vue完整代码: 处理步骤: 添加element-ui的表单组件 添加第三方字体: 添加表单验证 导入a ...
- 在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
微信开发包括公众号.企业微信.微信小程序等方面的开发内容,需要对腾信的微信API接口进行封装:包括事件.菜单.订阅用户.多媒体文件.图文消息.消息群发.微信支付和企业红包.摇一摇设备.语义理解.微信小 ...
- vue中如何实现后台管理系统的权限控制
vuejs单页应用的权限管理实践 一.前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单 ...
- (菜鸟要飞系列)一,基于Asp.Net MVC5的后台管理系统(前言)
今天真是个郁闷的日子,因为老师两个星期前给我的一个任务,用递归算法将Oracle数据库中用户信息及权限显示在jquery-treeView上,网上虽然有大神写出了这类算法,但是不贴全部代码,真的很难跟 ...
- (菜鸟要飞系列)三,基于Asp.Net MVC5的后台管理系统(用户的增删改查功能)
这些天被项目,考试整昏了头脑,没时间更新,我已经将这一部分全部做完了,现在把代码放上来,大家可以自己研究,有问题可以私聊,这里把图放上来 http://download.csdn.net/detail ...
随机推荐
- asp.net core2.1 部署centos7/linux系统 -- 安装部署(一)
原文:asp.net core2.1 部署centos7/linux系统 -- 安装部署(一) 1.安装dotnet sdk(添加产品秘钥与yum源) 添加yum源:sudo rpm -Uvh htt ...
- WPF+SignalR实现用户列表实时刷新
原文:WPF+SignalR实现用户列表实时刷新 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lordwish/article/details/5 ...
- Linux中特别要注意用户与文件权限的问题
1.在使用Linux中,肯定会涉及不同用户的切换,但是如果不合理切换的话,会造成很多应用启动不了,所以这时候要多多使用ll看一下文件目录的权限问题,因为如果习惯用root启动程序,然后切换普通用户继续 ...
- 对多线程java内存模型JMM
多线程概念的引入体现了人类重新有效压力寨计算机.这是非常有必要的,由于所涉及的读数据的过程中的一般操作,如从磁盘.其他系统.数据库等,CPU计算速度和数据读取速度已经严重失衡.假设印刷过程中一个线程将 ...
- 汉高澳大利亚matrix矩阵计算器
我在梦中的超级计算机超级计算机锯,使用大量阵列的cpu记忆,完成并行计算.一个手机制造商由于使用普通机械提供的服务,往往造成停机.是铁道部列车网络售票的事实. 无法使用云服务.上万台计算机并行处理,因 ...
- Android核心功能开发SearchView使用的开发(代码共享)
在Android上.搜索是一个核心的用户功能.用户可以搜索可用的任何数据,的内容是否存储在设备本身或者需要促进网络接入上.Android它提供了一个框架,为用户创造一个一致的搜索的搜索体验,它可以帮你 ...
- Cordova之如何用命令行创建一个项目(完整示例)
原文:Cordova之如何用命令行创建一个项目(完整示例) 1. 创建cordova项目 (注意:当第一次创建或编译项目的时候,可能系统会自动下载一些东西,需要一些时间.) 在某个目录下创建cordo ...
- Objective-C 数据类型 (一)
数据类型分为三类:基本数据类型,对象类型,id类型. 基本数据类型:int ,float double char 对象类型:类,指针对象,协议 id类型:可以表示对象类型(在表示对象类型的时候 不需要 ...
- 一句话的设计模式(JAVA版)
·结构型模式: o适配器:用来把一个接口转化成另一个接口,如 java.util.Arrays#asList(). o桥接模式:这个模式将抽象和抽象操作的实现进行了解耦,这样使得抽象和实现可以独立地变 ...
- Solid-state storage management
Solid-state storage management for a system, the management including establishing, externally to a ...