後端管理系統開發（一）：登陸篇

做爲後端程序員，想寫一個數據展現的系統，主要用於數據查詢、數據展現，固然也有登陸功能了，有沒有比較快的方式呢，於此，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;
      ...
    }
  }
}

看一下效果：