文档章节

后端管理系统开发(一):登录篇

冯文议
 冯文议
发布于 07/22 09:44
字数 811
阅读 24
收藏 0

作为后端程序员,想写一个数据展示的系统,主要用于数据查询、数据展示,当然也有登录功能了,有没有比较快的方式呢,于此,Vue-Admin-Pro便产生了,基于iView-Admin,进行简化,为后端程序员量身打造的极简后端管理系统。

项目地址:vue-admin-pro

系列文章1:后端管理系统开发(一):登录篇

系列文章2:后端管理系统开发(二):路由篇(敬请期待)

系列文章3:后端管理系统开发(三):数据表格篇(敬请期待)

系列文章4:后端管理系统开发(四):数据请求篇(敬请期待)

系列文章5:后端管理系统开发(五):表单篇(敬请期待)

搭建项目

项目进入正题,开始搭建项目。

第一步:使用 Git 拉取 vue-admin-pro 的代码,地址:git@github.com:fengwenyi/vue-admin-pro.git

克隆 Vue-Admin-Pro

第二步:修改工程名,比如我们将工程名改为vue-admin-pro-simple

第三步:使用 WebStorm 打开

第四步:修改配置,配置地址:/src/config/index.js

第五步:运行 npm install

第六步:运行 npm run dev

运行效果:

运行效果

这里有一个问题,因为标题过长,大于预留的宽度,我们去修改一下登录样式:/src/view/Login/Login.less,将宽度改成 390px

.container {
  ...
  
  .content {
    width: 390px;
  }
}

修改之后的效果:

运行效果-修复

登录

于此,算是搞定了项目搭建。首先我们不管什么权限,来实现最基础的登录功能。所以,下面我们聊聊我们的登录。

前端登录的API代码:

/**
 * 登录
 * @param account
 * @param password
 */
export const login = (account, password) => {
  const data = {
    account,
    password
  }
  return axios.request({
    url: 'auth/login',
    method: 'post',
    dataType: 'json',
    headers: {
      'Content-Type': 'application/json; charset=UTF-8'
    },
    data: data
  })
}

我们注意以下几点:

  • url地址,根据自己的情况进行修改
  • 提交方式
  • Headers,这里添加了json
  • 参数 accountpassword

于此,我们可写自己的后端的登录接口,或者适当修改。

可以参见 vue-admin-pro-api

示例:

package com.fengwenyi.vueadminproapi.controller;

import com.fengwenyi.vueadminproapi.entity.Login;
import net.iutil.ApiResult;
import net.iutil.javalib.util.IdUtils;
import org.springframework.http.MediaType;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

/**
 * 认证
 * @author Erwin Feng
 * @since 2019-06-08 10:21
 */
@RestController
@RequestMapping(value = "/auth",
        consumes = MediaType.APPLICATION_JSON_UTF8_VALUE,
        produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public class AuthController {

    // 登录示例
    @PostMapping("/login")
    public ApiResult login(@RequestBody Login login) {
        String account = login.getAccount();
        String password = login.getPassword();
        if (StringUtils.isEmpty(account))
            return ApiResult.error().setMsg("账号不能为空");
        if (StringUtils.isEmpty(password))
            return ApiResult.error().setMsg("密码不能为空");
        if (!account.equals("admin"))
            return ApiResult.error().setMsg("账号不存在");
        if (!password.equals("admin@1234"))
            return ApiResult.error().setMsg("密码不正确");
        String uid = IdUtils.getIdByUUID();
        String token = IdUtils.getIdByUUID();
        // 可指定有效期
        // 可自定义策略保存uid、token
        // write code
        Map<String, String> map = new HashMap<>();
        map.put("token", uid + "_" + token);
        return ApiResult.success(map);
    }

    // 登出示例
    @GetMapping("/logout")
    public ApiResult logout(@RequestHeader String token) {
        // 清空token
        // write code
        
        // return
        return ApiResult.success();
    }

}

登录成功,进入首页

登录成功-进入首页

这里有一个问题,因为标题太长了,这里采取的策略是,将标题超出的部分隐藏。

路径: /components/main

class:maxAdminName

我这里将字体调小

.main{
  .logo-con{
    ...
    
    .maxAdminName {
      font-size: 17px;
      ...
    }
  }
}

看一下效果:

登录成功-进入首页-修复

© 著作权归作者所有

冯文议
粉丝 11
博文 47
码字总数 47895
作品 0
成都
高级程序员
私信 提问
极速上手进阶大神的 5 门 SpringBoot 课程

SpringBoot 因其大大简化了配置。可快速启动一个应用的开发环境,把时间和精力更多的投入到实现业务需求上去。成为了Java 服务器端近几年特别火爆的框架。 如此火爆的技术,怎能不抢先了解一...

实验楼
前天
0
0
朝雨忆轻尘(Louis)/kitty-ui

kitty-ui 在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术交流 为了方便大家提问和技术交流,整了个QQ群,欢迎童鞋们加入。 QQ技术交流群: 429854222 ...

朝雨忆轻尘(Louis)
2018/10/27
0
0
ZHENFENGSHISAN/perfect-ssm

Quick Start 项目简介 ssm系列 ssm-demo:Spring+SpringMVC+Mybatis+easyUI整合 perfect-ssm:RESTful API+redis缓存 ssm-cluster:前后端分离+集群部署 ssm-dubbo:dubbo服务化 ssm-micro-se......

ZHENFENGSHISAN
2017/09/18
0
0
朝雨忆轻尘(Louis)/kitty

kitty 在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 温馨提示: 有在演示环境删除数据的童鞋们,如果可以的话,麻烦动动小指,右键头像菜单, 选择 -> 备...

朝雨忆轻尘(Louis)
2018/10/25
0
0
基于Element-admin-ui开发后台管理系统

最近新项目,开始独立做一个web B端管理系统,从框架搭建到第一版项目线上部署,大概花了1月有余时间。利用这两天时间好好整理下这中间遇到的一些问题。 一 框架选择 因为项目周期的原因,全...

五个半柠檬
2018/08/14
3K
4

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
443
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
4
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
3
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
7
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部