登录交互的实现

1-输入框的校验

1. 首先将登录表单中的数据绑定

 // 登录表单的绑定的数据对象
        user:{
            userName:'',
            userPwd:''
        },

2. Dom绑定数据

2-登录按钮的实现

点击登录触发验证

1. 给表单dom绑定ref=“userForm”

向外暴露表单的dom接口

2. 给登录dom绑定@click="login"

调用validate方法来判断是否校验成功

login() {
            this.$refs.userForm.validate((res) => {
                //若校验成功就为true
                console.log(res);
            })
        },

3. 调用接口，获取数据

点击登录，获取数据：在api>index.js中调用  二次封装的axios接口：utils>request.js

// 引入二次封装的axios
import request from "../utils/request"

export default {
    login(params) {
        return request({
            url: '/users/login',
            method: 'post',
            data: params,
            mock: false
        })
    }
}

main.js中全局挂载api

import api from './api'

app.config.globalProperties.$api = api

在Login.vue中通过挂载的api调用接口，获取数据

  login() {
            this.$refs.userForm.validate((res) => {
                //若校验成功就为true
                console.log(res);

                // 调接口获取数据：api中通过二次封装的axios来调接口,传入的是用户名和密码的值
                this.$api.login(this.user).then((res) => {
                    console.log('登录数据',res);
                })
            })
        },

3-登录数据结合localstorage存储

结合vuex和封装的localstorage存储

1. 将数据存储到store中

store的index.js中：

import { createStore} from 'vuex'

import mutations from './mutations'
import storage from '../utils/storage'

const state = {
    // userInfo第一次为空，后面通过mutations设置,从storage中拿到userInfo的值
    userInfo: '' || storage.getItem('userInfo')
}

export default createStore({
    state,
    mutations
})

store的mutations.js中：

import storage from "../utils/storage";

export default {
    saveUserInfo(state,userInfo) {
        state.userInfo = userInfo
       //将获取到的userInfo的值，存储在storage中
        storage.setItem('userInfo', userInfo)
    }
}

2. 在Login.vue中使用，

将获取的数据res传递过去

 login() {
            this.$refs.userForm.validate((res) => {
                //若校验成功就为true
                console.log(res);

                // 调接口获取数据：api中通过二次封装的axios来调接口,传入的是用户名和密码的值
                this.$api.login(this.user).then((res) => {
                    console.log('登录数据',res);

                    // 将数据存储到store中
                    this.$store.commit('saveUserInfo', res)

                    //登录之后跳转到welcome页面
                    this.$router.push("/welcome")
                })
            })
        },

还需要将store全局挂载

import store from './store'

app.use(router).use(ElementPlus).use(store).mount('#app')

小结：

将数据存储在localstorage中，再次刷新的时候，数据不会丢失；如果只是存储在store中，页面刷新，数据还需要重新调接口获取。

4-登录后台实现：连接数据库

借助mocos来连接mongodb数据库（mocos是操作mongodb的一个框架）

1. 在robo 3T中创建数据库manager

2. 在后端创建config文件

创建index.js：

/**
 * 数据库配置文件
 */

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

创建db.js:

// 连接数据库的操作
const mongoose = require('mongoose')
const log4js = require('../utils/log4j')
const config = require('./index')

mongoose.connect(config.URL)
const db = mongoose.connection

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

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

3. 在app.js中引入db.js

// error handler
onerror(app)
require('./config/db')

4. 数据库连接成功

5-登录前后端连调（前后端交互）

1. 编写后端接口（routes文件夹）

编写users后端接口，users.js文件：调用相应的模型

2.定义模型（models文件夹）

userSchema.js文件：创建user数据模型

使用后端提供的 数据库表结构&接口文档 里面的数据，赋值修改即可

const mongoose = require('mongoose')
const userSchema = mongoose.Schema({
    //接口文档里的数据：用户集合的数据 修改
  "userId": Number,//用户ID，自增长
  "userName": String,//用户名称
  "userPwd": String,//用户密码，md5加密
  "userEmail": String,//用户邮箱
  "mobile": String,//手机号
  "sex": Number,//性别 0:男  1：女 
  "deptId": [],//部门
  "job": String,//岗位
  "state": {
    type: Number,
    default: 1
  },// 1: 在职 2: 离职 3: 试用期
  "role": {
    type: Number,
    default: 1
  }, // 用户角色 0：系统管理员  1： 普通用户
  "roleList": [], //系统角色
  "createTime": {
    type: Date,
    default: Date.now()
  },//创建时间
  "lastLoginTime": {
    type: Date,
    default: Date.now()
  },//更新时间
  remark: String // 备注
})
// 导出：
module.exports = mongoose.model("users", userSchema, "users")

3. 在app.js中引入router和users模型

const users = require('./routes/users')
const router = require('koa-router')()


router.prefix("/api")
router.use(users.routes(), users.allowedMethods())
// routes
app.use(router.routes(), router.allowedMethods())

4. 借助postMan来调后端users接口

post请求路径：/api 拼接上users的路由

5. 在前端调后端users接口

一些处理：

将config.js中的mock：true注释掉

将api.js中的mock:true也注释掉

在vite.config.js中配置代理：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  port: 8081,
  proxy:{
    "/api":{
      target:'http://localhost:3000',
      changeOrigin: true
    }
  }
})

点击登录，报错404：

控制台-网络：没有请求到

解决：在config.js中，添加/api

并修改utils中的request.js的baseURL

前后端交互成功

 后端返回的数据

注意：

若后端全局注册的时候，没有设置/api（也就是app.js中没有router.prefix("/api")这一行代码）

const users = require('./routes/users')
const router = require('koa-router')()


router.prefix("/api")
router.use(users.routes(), users.allowedMethods())
// routes
app.use(router.routes(), router.allowedMethods())

需要在前端代理处加上：

proxy:{
    "/api":{
      target: 'http://localhost:3000',
      changeOrigin: true
      // 若后端没有设置/api，就加上下面一行代码
       // rewrite: (path) => path.replace(/^\/api/, '')
    }
  }