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 to it, at this point, VUe-admin-Pro will be produced, based on iView-admin, simplify, tailor-made for back-end programmers minimalist back-end management system.

Project address: VUe-admin-Pro

Series 1: Back-end management system development (I) : Login

Article 2: Back-end management System development (PART 2) : Routing

Series 3: Back-end management System Development (3) : Data tables (stay tuned)

Series 4: Back-end management System Development (4) : Data Requests (stay tuned)

Series 5: Back-end management System Development (5) : Forms (stay tuned)

Series 6: Backend Management System Development (6) : Icon (Stay tuned)

Set up the project

Project into the topic, start to build the project.

Step 1: Use Git to pull the vue-admin-pro code at [email protected]:fengwenyi/vue-admin-pro.git

Step 2: Change the project name. For example, we change the project name to vue-admin-pro-simple

Step 3: Open with WebStorm

Step 4: Modify the configuration. Configure the address: / SRC /config/index.js

Step 5: Run NPM Install

Step 6: Run NPM run dev

Operation effect:

There is a problem, because the title is too long, is greater than the width of the reserve, we go to revise the style: Login/SRC/view/Login/Login. Less, change the width to 390 pixels

.container { ... .content { width: 390px; }}Copy the code

Effect after modification:

The login

At this point, the project is set up. First let’s implement the basic login function regardless of the permissions. So, let’s talk about our login.

Front-end login API code:

/** * login *@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
  })
}
Copy the code

We note the following points:

  • The URL address can be modified based on the actual situation
  • submission
  • Headers, I’ve added json here
  • parameteraccount,password

At this point, we can write our own back-end login interface, or modify it as appropriate.

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
 * @sinceThe 2019-06-08 1 * /
@RestController
@RequestMapping(value = "/auth", consumes = MediaType.APPLICATION_JSON_UTF8_VALUE, produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public class AuthController {

    // Login 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("The 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();
        // The validity period can be specified
        // You can customize policies to save uid and token
        // write code
        Map<String, String> map = new HashMap<>();
        map.put("token", uid + "_" + token);
        return ApiResult.success(map);
    }

    // Log out an example
    @GetMapping("/logout")
    public ApiResult logout(@RequestHeader String token) {
        / / clear the token
        // write code
        
        // return
        returnApiResult.success(); }}Copy the code

Login succeeds, and the home page is displayed

There’s a problem here, because the title is too long, and the strategy here is to hide what goes beyond the title.

Path: / components/main

Class: maxAdminName

I’m going to make it smaller here

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

Take a look at the results: