欢迎光临企业官网建站网站,提供自助建设系统平台服务

企业官网建站

专业为公司品牌推广建设网站

后端管理系统开发(一):登录篇

作者:jcmp      发布时间:2021-05-09      浏览量:0
项目地址: vue-admin-

项目地址: vue-admin-pro

系列文章1: 后端管理系统开发(一):登录篇

系列文章2: 后端管理系统开发(二):路由篇 (敬请期待)。

系列文章3: 后端管理系统开发(三):数据表格篇 (敬请期待)。

系列文章4: 后端管理系统开发(四):数据请求篇 (敬请期待)。

系列文章5: 后端管理系统开发(五):表单篇 (敬请期待)。

一、搭建项目

项目进入正题,开始搭建项目。

第一步:使用 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 })}

我们注意以下几点:

于此,我们可写自己的后端的登录接口,或者适当修改。

可以参见 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 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; ... } }}

看一下效果: