作爲後端程序員，想寫一個數據展示的系統，主要用於數據查詢、數據展示，當然也有登錄功能了，有沒有比較快的方式呢，於此，Vue-Admin-Pro便產生了，基於iView-Admin，進行簡化，爲後端程序員量身打造的極簡後端管理系統。
項目地址：vue-admin-pro
系列文章1：後端管理系統開發（一）：登錄篇
系列文章2：後端管理系統開發（二）：路由篇（敬請期待）
系列文章3：後端管理系統開發（三）：數據表格篇（敬請期待）
系列文章4：後端管理系統開發（四）：數據請求篇（敬請期待）
系列文章5：後端管理系統開發（五）：表單篇（敬請期待）
搭建項目
項目進入正題，開始搭建項目。
第一步：使用 Git 拉取 vue-admin-pro 的代碼，地址：[email protected]: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;
...
}
}
}
看一下效果：
