Vue cli3+Mongodb+node.js/express的登录功能

最新推荐文章于 2024-09-11 13:51:10 发布

DebJane

最新推荐文章于 2024-09-11 13:51:10 发布

阅读量541

点赞数 1

分类专栏： node electron VUE 文章标签： vue mongodb node.js express

本文链接：https://blog.csdn.net/sueRimn/article/details/103160637

版权

本文介绍了如何使用Vue Cli3、Mongodb和Node.js/Express搭建服务器并实现登录功能。首先，搭建服务器包括安装必要依赖、设置跨域。接着，连接到Mongodb数据库并创建数据集合。然后，编写接口和路由模块化，引入中间件处理数据。最后，完善登录功能，修改前端请求并调用登录接口。

摘要由CSDN通过智能技术生成

我的项目是Vue Cli3+Electron+Antd+Mongodb+express

Mongodb和Studio 3T官网下载后安装。具体可谷歌或百度。然后启动Mongodb

然后打开Studio 3T，连接数据库端口，右键新建一个数据库，我这里新建的数据库为login。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-olql8TPG-1574226756586)(/img/bVbz2dy)]
user是自己新建的数据集合，大概如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZXtm1Zx-1574226756588)(/img/bVbz2dJ)]

搭建服务器

我的项目是Vue cli 3 + Electron + express的，在项目的根目录新建一个文件夹service，然后在该文件夹下新建几个文件夹分别是database、routes以及一个服务器启动文件server.js，具体如下

├─ service
│    ├─ database
│    ├─ routes
│    └─ server.js
├─ src
│    ├─ App.vue
│    ├─ assets
│    ├─ background.js
│    ├─ common
│    ├─ components
│    ├─ main.js
│    ├─ router.js
│    ├─ store.js
│    └─ views
└─ vue.config.js

1、搭建服务器

安装express：

npm add express -S

在server.js文件中写入：

const express = require('express')
const app = express()

// 请求头设置，以防万一
app.all('*', (req, res, next) => {
   
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type')
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
  res.header('X-Powered-By', ' 3.2.1')
  res.header('Content-Type', 'application/json;charset=utf-8')
  return next()
})
app.get('/', (req, res) => res.send('hello from server'))
app.listen(3000, () => console.log('app listen