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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_28336351/article/details/96830802

作为后端程序员,想写一个数据展示的系统,主要用于数据查询、数据展示,当然也有登录功能了,有没有比较快的方式呢,于此,Vue-Admin-Pro便产生了,基于iView-Admin,进行简化,为后端程序员量身打造的极简后端管理系统。

项目地址:vue-admin-pro

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

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

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

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

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

搭建项目

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

第一步:使用 Git 拉取 vue-admin-pro 的代码,地址:git@github.com:fengwenyi/vue-admin-pro.git

[外链图片转存失败(img-8bYiM2Vi-1563759703009)(https://raw.githubusercontent.com/fengwenyi/erwin-learn-note/master/images/vue-admin-pro/vue-admin-pro-01.png)]

第二步:修改工程名,比如我们将工程名改为vue-admin-pro-simple

第三步:使用 WebStorm 打开

第四步:修改配置,配置地址:/src/config/index.js

第五步:运行 npm install

第六步:运行 npm run dev

运行效果:

[外链图片转存失败(img-isDrNEPy-1563759703011)(https://raw.githubusercontent.com/fengwenyi/erwin-learn-note/master/images/vue-admin-pro/vue-admin-pro-02.png)]

这里有一个问题,因为标题过长,大于预留的宽度,我们去修改一下登录样式:/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
  • 参数 accountpassword

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

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

}

登录成功,进入首页

[外链图片转存失败(img-iiBm39lO-1563759703012)(https://raw.githubusercontent.com/fengwenyi/erwin-learn-note/master/images/vue-admin-pro/vue-admin-pro-04.png)]

这里有一个问题,因为标题太长了,这里采取的策略是,将标题超出的部分隐藏。

路径: /components/main

class:maxAdminName

我这里将字体调小

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

看一下效果:

[外链图片转存失败(img-EHbirNar-1563759703013)(https://raw.githubusercontent.com/fengwenyi/erwin-learn-note/master/images/vue-admin-pro/vue-admin-pro-05.png)]

展开阅读全文

登录-后端查询数据库①

03-11

<p style="color:#424242;font-size:14px;background-color:#FFFFFF;">rn <strong><strong><strong><span style="color:#E53333;">考虑到部分学生只需要学习前台或是后台,故将点餐系统分为点餐系统前台和点餐系统后台两个项目,</span></strong></strong></strong> rn</p>rn<p style="color:#424242;font-size:14px;background-color:#FFFFFF;">rn <strong><strong><strong><span style="color:#E53333;">当前课程包含点餐系统前台和点餐系统后台,以及如何将点餐系统前台和后台合并的课程</span></strong></strong></strong> rn</p>rn<p style="color:#424242;font-size:14px;background-color:#FFFFFF;">rn <strong><strong><strong><br />rn</strong></strong></strong> rn</p>rn<p style="color:#424242;font-size:14px;background-color:#FFFFFF;">rn <strong>该课程主要涉及到的技术有:</strong>JSP,JavaScript,jQuery,servlet,JDBC,Mysql。JDK版本为1.8,Tomcat8.0.rn</p>rn<p style="color:#424242;font-size:14px;background-color:#FFFFFF;">rn <strong>前台涉及的功能大致有:</strong><span>餐桌的占位与取消占位,购物车功能,下单功能,菜单管理,订单管理,用户登录及记住密码,用户注册。</span> rn</p>rn<p style="color:#424242;font-size:14px;background-color:#FFFFFF;">rn <strong>后台涉及的功能大致有:</strong>餐桌管理,菜品类型管理,菜品管理,订单管理,用户登录及记住密码,用户注册。rn</p>rn<p style="color:#424242;font-size:14px;background-color:#FFFFFF;">rn <br />rn</p>rn<p style="color:#424242;font-size:14px;background-color:#FFFFFF;">rn 学完本课程后,学员可掌握项目的完整开发过程。同时,学会如何将原来学过的如JSP,JavaScript,jQuery,servlet,JDBC,Mysql整合起来开发项目,理解各技术之间的联系以及作用。rn</p>rn<p style="color:#424242;font-size:14px;background-color:#FFFFFF;">rn <br />rn</p>

没有更多推荐了,返回首页