开始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中

    // import something....
    import Cms from '@/page/Cms'
    import Login from '@/page/Login'
  2. 修改路由配置,该配置在/src/router/index.js中;将如下代码

    routes: [
    {
    path: '/',
    name: 'Hello',
    component: Hello
    }
    ]

    修改为

    routes: [
    {
    path: '/cms', // 后台管理系统路由
    name: 'Cms',
    component: Cms
    },
    {
    path: '/', // 登录路由
    name: 'Login',
    component: Login
    }
    ]

¶内容实现

  1. 登录请求存储

    我们将登录状态存储在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})
    })
    }
    }
  2. 整合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)
    }
    }
  3. 登录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>
  4. 效果



    )

¶总结

在登录组件中,我们封装了Axios,将其根据web请求(put、post、get和delete)形成统一的请求接口;在登录时向后台请求并完成登录信息在SessionStorage中存储及路由跳转。需要注意的是vue官方建议tab是2格,不然其Eslint会报错,编译不通过。

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

基于VUE实现的新闻后台管理系统-三的更多相关文章

  1. 基于VUE实现的新闻后台管理系统-一

    基于VUE实现的新闻后台管理系统 前段时间拿到一个关于新闻后台的API,测试数据库使用SQLite,Restful服务是用Go写的,只要运行特定环境下的脚本(run.*)就会启动一个服务,依次后台为接 ...

  2. 基于VUE实现的新闻后台管理系统-二

    基础环境及最后的开发效果已完成说明,接下来就开始配置. ¶npm初始化 新建项目文件夹VueDemo,在其内执行如下脚本 npm init -y 安装vue-cli构建包 yarn add vue-c ...

  3. 基于tp5免费开源的后台管理系统

    基于tp5免费开源的后台管理系统 可以自定义后台菜单,模块等. 后台模板用的是:AdminLTE 简单的后台基础管理系统,有兴趣开源看看 代码地址:https://github.com/mengzhi ...

  4. 基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤

    效果演示地址, github地址: demo演示:         1.About 此项目是 vue2.0 + element-ui + node+mongodb 构建的后台管理系统,所有的数据都是从 ...

  5. vue_shop(基于vue电商管理后台网站)

    vue_shop 目录 vue_shop day01 实现登录功能 项目预开发处理 Login.vue完整代码: 处理步骤: 添加element-ui的表单组件 添加第三方字体: 添加表单验证 导入a ...

  6. 在微信框架模块中,基于Vue&Element前端的后台管理功能介绍

    微信开发包括公众号.企业微信.微信小程序等方面的开发内容,需要对腾信的微信API接口进行封装:包括事件.菜单.订阅用户.多媒体文件.图文消息.消息群发.微信支付和企业红包.摇一摇设备.语义理解.微信小 ...

  7. vue中如何实现后台管理系统的权限控制

    vuejs单页应用的权限管理实践 一.前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单 ...

  8. (菜鸟要飞系列)一,基于Asp.Net MVC5的后台管理系统(前言)

    今天真是个郁闷的日子,因为老师两个星期前给我的一个任务,用递归算法将Oracle数据库中用户信息及权限显示在jquery-treeView上,网上虽然有大神写出了这类算法,但是不贴全部代码,真的很难跟 ...

  9. (菜鸟要飞系列)三,基于Asp.Net MVC5的后台管理系统(用户的增删改查功能)

    这些天被项目,考试整昏了头脑,没时间更新,我已经将这一部分全部做完了,现在把代码放上来,大家可以自己研究,有问题可以私聊,这里把图放上来 http://download.csdn.net/detail ...

随机推荐

  1. Opencv Surf算子中keyPoints,描述子Mat矩阵,配对向量DMatch里都包含了哪些好玩的东东?

    Surf算法是一把牛刀,我们可以很轻易的从网上或各种Opencv教程里找到Surf的用例,把例程中的代码或贴或敲过来,满心期待的按下F5,当屏幕终于被满屏花花绿绿的小圆点或者N多道连接线条霸占时,内心 ...

  2. 【BZOJ 1012】 [JSOI2008]最大数maxnumber(线段树做法)

    [题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1012 [题意] [题解] 预开一个20W长度的线段树; 这里a[1..20W]={0} ...

  3. TensorFlow 学习(五)—— Session

    A Session object encapsulates the environment in which Tensor objects are evaluated. 一个会话对象(session ...

  4. cordova-plugin-file-transfer 监听到下载成功,找不到文件 - 简书

    原文:cordova-plugin-file-transfer 监听到下载成功,找不到文件 - 简书 下载成功后找不到下载文件 function download(fileEntry, uri) { ...

  5. Windows下快速搭建安卓开发环境android-studio

    Windows下快速搭建安卓开发环境android-studio 发布时间:2018-01-18 来源:网络 上传者:用户 关键字: 安卓 搭建 Android Windows 快速 环境 Studi ...

  6. Himi浅谈游戏开发de自学历程!(仅供参考)

    李华明Himi原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/himistudy/382.html ☞ 点击订阅 ☜ 本博客 ...

  7. 【JDBC】java PreparedStatement操作oracle数据库

    ************************************************************************ ****原文:blog.csdn.net/clark_ ...

  8. CUDA多个流的使用

    CUDA中使用多个流并行执行数据复制和核函数运算可以进一步提高计算性能.以下程序使用2个流执行运算: #include "cuda_runtime.h" #include < ...

  9. BCGControlBar介绍

    第一次翻译有诸多不正确的地方,还忘各位指正,谢谢! 英文原文:http://www.bcgsoft.com/bcgcontrolbarpro.htm BCGControlBar是MFC的一个扩展库其英 ...

  10. 获得WIN7管理员权限(可通过修改注册表,或者组策略改变)

    在使用WIN7过程中,常常会再出现没有管理员权限而不能正常运行软件(有的软件直接就是打不开,有的软件不能正常运行(比如如果没有管理员权限,keil就不能注册成功))....也许你会说,我的电脑里只有一 ...