作為後端程式設計師，想寫一個數據展示的系統，主要用於資料查詢、資料展示，當然也有登入功能了，有沒有比較快的方式呢，於此，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;
      ...
    }
  }
}

看一下效果：

相關推薦