vue element 权限后台管理一(小小的登录篇一)

想着第一次写文章就灰常灰常的高兴 不知道怎么表达才能是最完美的 因为最近刚学vue 所以就找点好玩的 写了一个简单的后台

首先还是多啰嗦一句 技术栈 是 koa mongoose vue element-ui koa-jwt做token的验证

后端返回的code状态码 0 获取数据成功 1 修改成功 2 添加成功 3删除成功 10001 参数错误 10002登录错误 后面前端vue会用到 自己根据实际情况来就行 因为自己也刚学 很多地方描述不是很清楚 反正就是白水话 适合入门 包括我自己也是刚入门

先用vue init webpack vueadmin 生成一个vue脚手架吧

接着在同级目录下创建一个koa的后端目录 server 进入server 执行 koa2 -e ./

最后就生成这样一个目录 cnpm i 安装依赖吧

这里就不对目录做介绍了 百度下吧 其实我也不是很懂

起航

配置mongodb数据库

• 在server目录执行cnpm i mongoose 前提是你的电脑安装了mongodb 然后在server创建一个db.js文件
• 然后就是mongodb的连接了 下面这张图就是我的一个配置

let mongoose = require('mongoose');

//mongodb 地址 默认端口是27017 vueadmin是我们本次的数据库名字
// const DB_PORT = "mongodb://127.0.0.1/vueadmin";

mongoose.connect(DB_PORT);

mongoose.connection.on('connected',()=>{
  console.log("MongoDB链接成功");
});

mongoose.connection.on('error',(err)=>{
  console.log("数据库连接失败"+err);
});

mongoose.connection.on('disconnected',()=>{
  console.log("断开连接");
});

module.exports = mongoose;

复制代码

• 接下来先启动下mongodb数据库吧 在启动我们的后端 在sever/routes/index.js 导入db.js 执行npm start下 会打印 MongoDB链接成功 就代表服务启动成功了
• 在 server目录下创建一个models目录 来存放我们的文档 也就是sql里面的表
• 这里我们先把登录做了吧 先在models里面创建user.js 专门存放管理员的信息 下面这张图就是我的users的表配置

let mongoose = require('mongoose');
let Schema = mongoose.Schema;

let userSchema = new Schema({
  name: String, // 用户名
  pwd: String, // 密码
  avatar: String, // 头像
  auth: [{  // 权限数组
    path: String, // 路径
    authname: String, // 这里的名字很重要 会配合前端的动态路由去使用
    authsigin: { // 单节点权限 true是授权 false是未授权
      add: Boolean, // 添加
      del: Boolean, // 删除
      update: Boolean, // 更新
      isauth: Boolean // 这里是对系统设置(基本配置 logo这些)授权
    },
    name: String, 
    publics: Boolean // 是不是公共的路由
  }],
  ip: String, // 最近登录ip
  time: Number, // 最近登录时间
  status: Boolean // 是否允许登录
});

module.exports = mongoose.model('users', userSchema);

复制代码

• 先在mongodb里面填充一些假数据吧 因为后台一般没有注册
• 就先填充表里面的 name(admin) 和pwd(admin) 和status(true) 字段吧 自行补脑
• koa生成的目录routes 下面就有一个users.js的目录 我们和用户相关的操作就写到里面吧
• • 创建一个名字为login的post路由接收用户输入的密码和用户名
• • 用mongoose封装的一个方法findOneAndUpdate来做登录 并更新用户的一些信息 比如登录时间登录ip
• • 在users.js 导入数据库配置文件db.js和users用户表
• • 开始写一些简单的登录吧 验证下密码和用户名是否为空这些情况等等
• • 先做个简单的登录吧 过久再把koa-jwt 的token补上 下面是我的一个login 路由 这样我的的登录接口就完成了 记得导入db.js 和users.js喔

router.post('/login', async (ctx) => {
  let {name, pwd} = {...ctx.request.body};
  if (name === undefined || pwd === undefined) {
    let ips = ctx.request.ip.slice(7);  // 获得请求的ip
    let time = new Date().getTime(); // 登录时间戳   这里为了简便就不做try了
    let userDoc = await Users.findOneAndUpdate({name, pwd}, {$set: {ip: ips, time}});
    ctx.body = {
      code: 0,
      msg: '登录成功',
      result:userDoc
    };
  } else {
    const str = name === undefined ? "用户名不能为空" : "密码不能为空";
    ctx.body = {
      code: 10001,
      msg: '登录参数错误' + str
    };
  }
});
复制代码

篇幅有点长了 先这样吧 如果测试登录的话 随便两个input 就行 注意下请求的路由是 /users/login

下一期先用二次封装 axios 请求库吧 要不感觉不是很方便

github 记得给一个赞喔 鼓励下我的勇气吧 虽然写得真的很渣

转载于:https://juejin.im/post/5abf07216fb9a028bb191cfc