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

作为后端程序员,想写一个数据展示的系统,主要用于数据查询、数据展示,当然也有登录功能了,有没有比较快的方式呢,于此,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

克隆 Vue-Admin-Pro

克隆 Vue-Admin-Pro

第二步:修改工程名,比如我们将工程名改为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
  })
}

我们注意以下几点:

  • url地址,根据自己的情况进行修改
  • 提交方式
  • Headers,这里添加了json
  • 参数 accountpassword
top Created with Sketch.