下面是详细讲解“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技术站
微信扫一扫 
支付宝扫一扫 