express+vue+mongodb+session 实现注册登录功能

下面是详细讲解“express+vue+mongodb+session 实现注册登录功能”的完整攻略：

准备工作

首先，我们需要在本地安装Node.js和MongoDB，然后新建一个名为“project”的文件夹，用于存放我们的代码。接下来，进入“project”文件夹，并在命令行中执行以下命令来初始化我们的项目：

npm init -y

安装依赖包

我们需要安装一些必要的依赖包，包括express、mongoose、body-parser、cors、express-session、bcrypt和validator。在“project”文件夹中执行以下命令：

npm install express mongoose body-parser cors express-session bcrypt validator --save

安装完成后，我们开始搭建我们的后端服务器。

搭建后端服务器

在“project”文件夹中新建一个名为“server”的文件夹，用于存放我们的后端代码。在“server”文件夹中新建一个名为“index.js”的文件，用于编写后端服务器的代码。在“index.js”中引入必要的模块：

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
const session = require('express-session');
const bcrypt = require('bcrypt');
const validator = require('validator');

接下来，我们创建一个名为“app”的Express应用：

const app = express();

然后，配置body-parser和cors中间件：

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

接着，我们使用mongoose连接MongoDB：

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

然后，我们创建用户模型：

const UserSchema = mongoose.Schema({
  email: String,
  password: String
});

const User = mongoose.model('User', UserSchema);

接下来，我们配置express-session中间件：

app.use(session({
  secret: 'secret',
  resave: true,
  saveUninitialized: true
}));

然后，我们编写注册和登录接口：

// 用户注册
app.post('/api/register', async (req, res) => {
  const { email, password } = req.body;

  if (!validator.isEmail(email)) {
    return res.json({ success: false, message: '邮箱格式不正确' });
  }

  if (password.length < 6) {
    return res.json({ success: false, message: '密码长度应该不少于6位' });
  }

  const user = await User.findOne({ email });

  if (user) {
    return res.json({ success: false, message: '该邮箱已被注册' });
  }

  const hash = await bcrypt.hash(password, 10);
  const newUser = new User({ email, password: hash });
  await newUser.save();

  req.session.user = newUser;

  res.json({ success: true, user: newUser });
});

// 用户登录
app.post('/api/login', async (req, res) => {
  const { email, password } = req.body;

  const user = await User.findOne({ email });

  if (!user) {
    return res.json({ success: false, message: '邮箱或密码不正确' });
  }

  const match = await bcrypt.compare(password, user.password);

  if (!match) {
    return res.json({ success: false, message: '邮箱或密码不正确' });
  }

  req.session.user = user;

  res.json({ success: true, user });
});

最后，我们启动服务器：

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

至此，我们的后端服务器已经搭建完毕，现在开始编写前端代码。

编写前端页面

在“project”文件夹中新建一个名为“client”的文件夹，用于存放我们的前端代码。在“client”文件夹中创建一个名为“index.html”的文件，用于编写前端页面的代码。

首先，我们引入必要的样式表和JavaScript文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>登录/注册</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
  <style>
    #app {
      margin: 50px auto;
      max-width: 600px;
      min-height: 400px;
      padding: 20px;
      border: 1px solid #ccc;
    }
    .el-button {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

然后，我们在“#app”中提供一个router-view，用于渲染组件：

<div id="app">
  <router-view></router-view>
</div>

接着，我们在“client”文件夹中创建一个名为“js”的文件夹，用于存放我们的Vue组件。在“js”文件夹中创建一个名为“main.js”的文件，用于编写Vue代码。在“main.js”中引入必要的模块：

import Vue from 'vue';
import VueRouter from 'vue-router';
import ElementUI from 'element-ui';
import axios from 'axios';

Vue.use(VueRouter);
Vue.use(ElementUI);

axios.defaults.baseURL = 'http://localhost:3000/api';

const routes = [
  { path: '/', component: LoginComponent },
  { path: '/login', component: LoginComponent },
  { path: '/register', component: RegisterComponent }
];

const router = new VueRouter({
  routes
});

const app = new Vue({
  router
}).$mount('#app');

然后，我们编写登录和注册组件：

const LoginComponent = {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    async submit() {
      const { data } = await axios.post('/login', { email: this.email, password: this.password });

      if (data.success) {
        this.$message.success('登录成功');
        this.$router.push('/');
      } else {
        this.$message.error(data.message);
      }
    }
  },
  template: `
    <el-form>
      <el-form-item label="邮箱">
        <el-input v-model="email"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="password"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submit">登录</el-button>
      <el-divider content-position="left">或</el-divider>
      <router-link to="/register"><el-button>注册</el-button></router-link>
    </el-form>
  `
};

const RegisterComponent = {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    async submit() {
      const { data } = await axios.post('/register', { email: this.email, password: this.password });

      if (data.success) {
        this.$message.success('注册成功');
        this.$router.push('/');
      } else {
        this.$message.error(data.message);
      }
    }
  },
  template: `
    <el-form>
      <el-form-item label="邮箱">
        <el-input v-model="email"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="password"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submit">注册</el-button>
      <el-divider content-position="left">或</el-divider>
      <router-link to="/login"><el-button>登录</el-button></router-link>
    </el-form>
  `
};

最后，我们使用Webpack将我们的Vue组件打包成一个JavaScript文件，然后引入到“index.html”中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>登录/注册</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
  <style>
    #app {
      margin: 50px auto;
      max-width: 600px;
      min-height: 400px;
      padding: 20px;
      border: 1px solid #ccc;
    }
    .el-button {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
  <script src="build/main.js"></script>
</body>
</html>

至此，我们的前端页面已经编写完毕。现在，我们使用命令行进入“project”文件夹，运行以下命令来启动我们的应用：

npm run dev

然后在浏览器中访问“http://localhost:8080/”，就可以看到我们的登录/注册页面了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：express+vue+mongodb+session 实现注册登录功能 - Python技术站

express+vue+mongodb+session 实现注册登录功能

准备工作

安装依赖包

搭建后端服务器

编写前端页面

相关文章