登录功能怎么写前后端代码

登录功能一般需要前后端配合完成。以下是一个简单的登录功能的前后端代码实现示例：

前端代码（使用 Vue.js 框架）：

<template>
  <div>
    <input type="text" v-model="username">
    <input type="password" v-model="password">
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },

  methods: {
    login() {
      // 发送登录请求
      this.$axios.post('/api/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        // 登录成功，保存 token 到本地存储
        localStorage.setItem('token', response.data.token)

        // 跳转到首页
        this.$router.push('/')
      }).catch(error => {
        // 登录失败，提示错误信息
        alert(error.response.data.message)
      })
    }
  }
}
</script>

后端代码（使用 Node.js 和 Express 框架）：

// 导入 express 和 body-parser 模块
const express = require('express')
const bodyParser = require('body-parser')

// 创建 express 应用
const app = express()

// 解析请求体
app.use(bodyParser.json())

// 模拟数据库中的用户数据
const users = [
  { id: 1, username: 'admin', password: 'admin' },
  { id: 2, username: 'user1', password: '123456' },
  { id: 3, username: 'user2', password: 'abcdefg' }
]

// 登录接口
app.post('/api/login', (req, res) => {
  const { username, password } = req.body

  // 在用户数据中查找匹配的用户名和密码
  const user = users.find(u => u.username === username && u.password === password)

  if (user) {
    // 生成一个随机的 token，并将其保存到用户数据中
    const token = Math.random().toString(36).substr(2)
    user.token = token

    // 返回 token 给客户端
    res.json({ token })
  } else {
    // 用户名或密码错误，返回错误信息
    res.status(401).json({ message: '用户名或密码错误' })
  }
})

// 启动应用
app.listen(3000, () => console.log('Server is running on http://localhost:3000'))

该示例代码中使用了 Axios 和 Vue Router 来发送 HTTP 请求和进行页面跳转，使用了 Node.js 和 Express 来处理 HTTP 请求和提供接口。其中，登录接口会在数据库中查找匹配的用户名和密码，如果匹配成功，则生成一个随机的 token 并将其保存到用户数据中，然后将 token 返回给客户端。客户端在接收到 token 后会将其保存到本地存储中。在后续的请求中，客户端会在请求头中携带该 token，以便服务器识别用户身份。