Vue+Express实现登录注销功能的实例代码

下面我将详细讲解 “Vue+Express实现登录注销功能的实例代码” 的完整攻略。

1. 环境准备

首先，我们需要在本地安装好以下环境：

1. Node.js
2. Vue.js
3. Express
4. MongoDB

如果你没有安装，可以先按照官方教程安装好，才能继续进行下一步。

2. 创建项目

接着，我们需要创建两个项目，一个前端项目，使用Vue.js来实现登录页面的渲染和交互，另一个是后端项目，使用Express来实现后端接口的编写和对MongoDB的增删改查操作。

2.1 创建前端项目

1. 使用Vue-cli来创建项目

npm install -g @vue/cli

vue create frontend

cd frontend

npm run serve

1. 安装Vue-router和Axios

npm install vue-router --save

npm install axios --save

2.2 创建后端项目

1. 使用express-generator来创建项目

npm install -g express-generator

express backend

cd backend

npm install

npm start

1. 安装依赖

npm install cors mongoose --save

3. 编写代码

3.1 前端实现

1. 编写登录页面Login.vue

在前端项目/src/views目录下，创建一个名为Login.vue的文件，代码如下：

<template>
  <div class="login-container">
    <h1>登录</h1>
    <form>
      <div class="form-item">
        <label>用户名：</label>
        <input type="text" v-model="username" placeholder="请输入用户名"/>
      </div>
      <div class="form-item">
        <label>密码：</label>
        <input type="password" v-model="password" placeholder="请输入密码"/>
      </div>
      <button type="submit" class="login-btn" @click="handleSubmit">登录</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleSubmit() {
      const { username, password } = this
      try {
        const res = await axios.post('/api/login', {
          username,
          password
        })
        if (res.data.success) {
          localStorage.setItem('token', res.data.token)
          this.$router.push('/')
        } else {
          alert('用户名或密码错误')
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  margin: 0 auto;
  width: 300px;
  padding-top: 120px;
}

.form-item {
  display: flex;
  margin-bottom: 20px;
}

form input {
  flex: 1;
}

form label {
  width: 60px;
  line-height: 32px;
}

.login-btn {
  display: block;
  width: 100%;
  line-height: 36px;
  background-color: #42b983;
  border: none;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}
</style>

1. 修改路由配置

找到main.js文件，在其中添加以下代码来定义路由：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在src目录下新建router目录，并在其中创建index.js文件，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Home from '@/views/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.path === '/login' || token) {
    next()
  } else {
    next('/login')
  }
})

export default router

3.2 后端实现

1. 创建数据库集合

打开命令行，连接MongoDB，创建一个名为users的集合，用来存储用户信息。

use test

db.users.createIndex({username:1},{unique:true})

1. 编写接口代码

在后端项目/routes目录下，创建一个名为api.js的文件，代码如下：

const express = require('express')
const router = express.Router()
const User = require('../models/user')
const jwt = require('jsonwebtoken')
const secretKey = 'vue-express-secret'

router.post('/login', async (req, res) => {
  const { username, password } = req.body
  const user = await User.findOne({
    username,
    password
  })
  if (user) {
    const token = jwt.sign(
      {
        id: user._id
      },
      secretKey,
      { expiresIn: '1h' }
    )
    res.json({
      success: true,
      message: '登录成功',
      token
    })
  } else {
    res.status(401).json({
      message: '用户名或密码错误'
    })
  }
})

router.post('/logout', (req, res) => {
  res.json({
    success: true
  })
})

module.exports = router

在后端项目/models目录下，创建一个名为user.js的文件，代码如下：

const mongoose = require('mongoose')
const { Schema } = mongoose

const userSchema = new Schema({
  username: String,
  password: String
})

module.exports = mongoose.model('User', userSchema)

在后端项目/app.js中添加以下代码，用于启用接口。

const express = require('express')
const cors = require('cors')
const mongoose = require('mongoose')
const api = require('./routes/api')

const app = express()

mongoose.connect('mongodb://localhost:27017/test', { useNewUrlParser: true })

app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(cors())

app.use('/api', api)

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`Listening on port ${port}`)
})

至此，我们已经完成了前后端代码的编写，接下来就是测试。

4. 测试

1. 启动前端项目

在前端项目根目录下执行以下命令：

npm run serve

1. 启动后端项目

在后端项目根目录下执行以下命令：

npm start

1. 浏览器访问

在浏览器中输入 http://localhost:8080/login，就可以看到登录页面了。输入正确的用户名和密码，点击登录按钮，会自动跳转到主页。

1. 测试注销功能

在浏览器控制台中输入以下命令，就可以清除登录信息了。

localStorage.removeItem('token')

以上就是Vue+Express实现登录注销功能的完整攻略，希望对你有所帮助。