作为后端程序员，想写一个数据展示的系统，主要用于数据查询、数据展示，当然也有登录功能了，有没有比较快的方式呢，于此，Vue-Admin-Pro便产生了，基于iView-Admin，进行简化，为后端程序员量身打造的极简后端管理系统。
项目地址：vue-admin-pro
系列文章1：后端管理系统开发（一）：登录篇
系列文章2：后端管理系统开发（二）：路由篇
系列文章3：后端管理系统开发（三）：数据表格篇（敬请期待）
系列文章4：后端管理系统开发（四）：数据请求篇（敬请期待）
系列文章5：后端管理系统开发（五）：表单篇（敬请期待）
系列文章6：后端管理系统开发（六）：图标篇（敬请期待）
搭建项目
项目进入正题，开始搭建项目。
第一步：使用 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;
...
}
}
}
看一下效果：
