后端管理系统开发（一）：登录篇

作为后端程序员，想写一个数据展示的系统，主要用于数据查询、数据展示，当然也有登录功能了，有没有比较快的方式呢，于此，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-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
• 参数 account、password

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

可以参见 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; ... } } }

看一下效果：