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
- parameter
account
,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: