As a back-end programmer, want to write a data display system, mainly used for data query, data display, of course, there is also a login function, there is no faster way. For this reason, Vue-Admin-Pro was generated, based on iView-Admin, to simplify, tailor-made minimal back-end management system for back-end programmers.

Project Address: vue-admin-pro

Series 1: Backend Management System Development (1): Login Page

Series 2: Backend management system development (2): Routing section (Please look forward to)

Series 3: Backend Management System Development (3): Data Table Text (Please look forward to)

Series 4: Backend Management System Development (4): Data Request Paper (Please look forward to)

Series 5: Backend Management System Development (5): Form (Please look forward to)

Build Project

The project gets to the point and starts building the project.

Step 1: Use Git Pull vue-admin-pro Code at git@github.com:fengwenyi/vue-admin-pro.git

Step 2: Modify the project name, such as changing the project name to vue-admin-pro-simple

Step 3: Open with WebStorm

Step 4: Modify the configuration to configure the address: /src/config/index.js

Step 5: Run npm install

Step 6: Run npm run dev

Operation effect:

There's a problem here, because the title is too long for the reserved width, let's modify the login style: /src/view/Login/Login.less, change the width to 390px

.container {
  ...
  
  .content {
    width: 390px;
  }
}

Effects after modification:

Sign in

At this point, the project has been completed.First, no matter what permissions we have, we can achieve the most basic login function.So let's talk about our login next.

API code for front-end login:

/**
 * Sign in
 * @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
  })
}

We should note the following points:

• url address, modify it to suit your needs
• Submission Method
• Headers, json added here
• Parameter account, password

Here, we can write our own backend login interface, or modify it appropriately.

Can see vue-admin-pro-api

Example:

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;

/**
 * Authentication
 * @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 {

    // Logon example
    @PostMapping("/login")
    public ApiResult login(@RequestBody Login login) {
        String account = login.getAccount();
        String password = login.getPassword();
        if (StringUtils.isEmpty(account))
            return ApiResult.error().setMsg("Account cannot be empty");
        if (StringUtils.isEmpty(password))
            return ApiResult.error().setMsg("Password cannot be empty");
        if (!account.equals("admin"))
            return ApiResult.error().setMsg("Account does not exist");
        if (!password.equals("admin@1234"))
            return ApiResult.error().setMsg("Incorrect password");
        String uid = IdUtils.getIdByUUID();
        String token = IdUtils.getIdByUUID();
        // Validity period can be specified
        // Customizable policy to save uid, token
        // write code
        Map<String, String> map = new HashMap<>();
        map.put("token", uid + "_" + token);
        return ApiResult.success(map);
    }

    // Logout Example
    @GetMapping("/logout")
    public ApiResult logout(@RequestHeader String token) {
        // Empty token
        // write code
        
        // return
        return ApiResult.success();
    }

}

Login Successful, Home Page

There's a problem here because the title is too long, so the strategy here is to hide the part beyond the title.

Path: /components/main

class: maxAdminName

I'll make the font smaller here

.main{
  .logo-con{
    ...
    
    .maxAdminName {
      font-size: 17px;
      ...
    }
  }
}

Take a look at the effect: