第三章用户登录前后台实现搭建登录页面因为登陆页面并不使用结构布局，所以在路由中和Home根组件同级；参考文档： F

搭建登录页面

因为登陆页面并不使用结构布局，所以在路由中和Home根组件同级；

参考文档： Form 表单 | Element Plus (gitee.io)

Element-plus 文档写的很清楚了，搭建页面，添加上验证等；

设置图标

因为Element提供的图标有限，所以引入了一下iconfont;

1、找到需要的图标，添加入库

2、添加至项目

3、下载到本地

选择Symbol，下载至本地

4、引入项目

在assets中新建iconfont文件夹，并将下载下来的资源文件拷贝过来

5、使用

<!-- 直接使用 -->
<i class="iconfont icon-user"></i>

<!-- 设置在输入框中 -->
<el-input prefix-icon="iconfont icon-user" />

存储用户信息

Vuex 4 文档：Vuex 是什么？ | Vuex (vuejs.org)

遇到报错：

"export 'createStore' was not found in 'vuex'

解决：

是因为 Vuex 版本低导致的

卸载一下
npm uninstall vuex -S

安装一下最新版本
npm install vuex@next -S

后台实现

连接数据库

使用mongoose连接数据库

文档地址：Mongoose.js中文网 (mongoosejs.net)

创建/config/index.js，配置数据库地址

module.exports = {
    URL: 'mongodb://127.0.0.1:27017/manager'
}

连接数据库，在config/db.js文件中，引入mongoose，连接数据库，并监听数据库连接状态

const mongoose = require('mongoose');
const config = require('./index');
const log4js = require('../utils/log4')

mongoose.connect(
    config.URL,
    {
        useNewUrlParser: true,
        useUnifiedTopology: true
    }
);

const db = mongoose.connection;

db.on('error', ()=>{
    log4js.error('*** 数据库连接失败 ***')
});

db.on('open', ()=>{
    log4js.info('*** 数据库连接成功 ***')
})

在app.js中，引用连接数据库的js文件👆

require('./config/db');

至此，数据库连接成功

创建用户数据模式(Schemas)

新建文件/mudels/userSchema.js

/**
 * 用户模型
 */

const mongoose = require('mongoose')
const userSchema = mongoose.Schema({
    'userId': Number,   // 用户ID
    'userName': String, // 用户名
    'userPassword': String, // 密码
    'userEmail': String,    // 邮箱
    'mobile': String,       // 手机号
    'sex': Number,  // 性别：0男 1女
    'deptId': [],   // 部门
    'job': String, // 岗位
    'state': {      // 状态：1在职 2离职 3试用期
        type: Number,
        default: 1
    },
    'role': {    // 用户角色：0系统管理员 1普通用户
        type: Number,
        default: 1
    },
    'roleList': [],     // 系统角色
    'createTime': { // 创建时间
        type: Date,
        default: Date.now()
    },
    'updateTime': { // 更新时间
        type: Date,
        default: Date.now()
    },
    'remark': String,   // 备注
})

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

编写接口，并查询数据库

在 routes/users.js中，写接口

const router = require('koa-router')()

// 引入用户数据库模型
const User = require('../models/userSchema')

// 配置路由前缀
router.prefix('/users')

router.post('/login', async (ctx)=>{
  try {
    // 读取请求参数
    const {
      userName,
      userPassword
    } = ctx.request.body;
    
    // 查询数据库中是否有这条数据
    const res = await User.findOne({
      userName,
      userPassword
    })
    
    // 返回值
    if(res) {
      ctx.body = utils.success(res)
    } else {
      ctx.body = utils.fail('账号或密码错误')
    }
  } catch (e) {
    ctx.body = utils.fail(e.msg)
  }
})

前端项目配置跨域

在根目录下新建 vu.config.js文件

module.exports = {
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {
            '/api': {
                target: 'http://localhost:3000',    //这里后台的地址模拟的;应该填写你们真实的后台接口
                ws: true,
                changeOrigin: true, //允许跨域
                pathRewrite: {
                    '^/api': '' //请求的时候使用这个api就可以
                }
            }
        }
    }
}

.env.dev中，配置baseApi

VUE_APP_BASE_API = '/api'

再请求接口就好了

第三章 用户登录前后台实现