我的項目是Vue Cli3+Electron+Antd+Mongodb+express
Mongodb
和Studio 3T
官網下載後安裝。具體可谷歌或百度。然後啓動Mongodb
然後打開Studio 3T
,連接數據庫端口,右鍵新建一個數據庫,我這裏新建的數據庫爲login
。user
是自己新建的數據集合,大概如下:
搭建服務器
我的項目是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 listening on port 3000'))
在service
路徑下啓動服務輸入node server.js
,簡單服務器搭建成功。
爲了解決跨域問題,需要在vue.config.js
文件中加入:
devServer: {
port: 8080,
proxy: {
'/user': {
target: 'http://127.0.0.1:3000',
changeOrigin: true // 跨域
}
}
},
2、連接數據庫
安裝依賴:
npm add mongodb mongoose -S
在database
文件夾下新建文件db.js
,然後輸入:
const mongoose = require('mongoose')
const DBURL = 'mongodb://localhost:27017/login' //login 就是自己創建的數據庫名
// 連接數據庫
mongoose.connect(DBURL)
// 連接成功
mongoose.connection.on('connected', () => {
console.log('mongoose connection open to ' + DBURL)
})
// 連接失敗
mongoose.connection.on('error', error => {
console.log('Mongoose connection error:' + error)
})
// 連接斷開
mongoose.connection.on('disconnected', function () {
console.log('Mongoose connection disconnected')
})
module.exports = mongoose
然後再新建一個文件user.js
創建數據庫Schema
,即數據庫集合的模型骨架,或者是數據屬性模型傳統意義的表結構。
/*
定義一個user的Schema
*/
const mongoose = require('./db.js')
const Schema = mongoose.Schema
// 創建一個模型
const UserSchema = new Schema({
username: String,
password: String
})
// 導出model模塊
module.exports = mongoose.model('User', UserSchema)
3、編寫接口,路由模塊化
爲了方便管理,這裏需要使用到express
的路由中間件。
爲了方便對前端發送過來的數據進行解析,引用一個body-parser
中間件,安裝:
npm add body-parser -S
然後在server.js
中引入:
const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
在routes
文件夾中新建文件user.js
:
const express = require('express')
const router = express.Router()
const User = require('../database/user')
router.post('/login', async (req, res, next) => {
console.log(req.body)
//這裏的req.body 其實使用了body-parser中間件 用來對前端發送來的數據進行解析
const username = req.body.username
const password = req.body.password
// 判斷用戶名和密碼是否和數據庫的相同
let doc = await User.findOne({ username })
if (!doc) {
req.body = {
code: -1,
msg: '用戶名不存在'
}
res.send(req.body)
} else if (doc.password !== password) {
req.body = {
code: -1,
msg: '密碼錯誤'
}
res.send(req.body)
} else if (doc.password === password) {
try {
req.body = {
code: 0,
msg: '登錄成功',
username
}
res.send(req.body)
} catch (err) {
req.body = {
code: -1,
msg: '登錄失敗,請重新登錄'
}
res.send(req.body)
}
}
module.exports = router
然後在server.js
中引入路由:
const user = require('./router/user')
app.use('/user', user)
完善登錄功能
安裝axios
:
npm add axios -S
將axios
改寫成Vue
的原型屬性:
// main.js
import axios from 'axios'
Vue.prototype.$ajax = axios
打開登錄頁面SignIn.vue
,調用接口:
methods: {
handleSubmit (e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values)
let loginParams = {
username: values.userName,
password: values.password
}
this.$ajax.post('/user/login', loginParams).then(res => {
let result = res.data
if (result.code === 0) {
setTimeout(() => {
this.spinning = true
const msg = result.msg || '登錄成功'
this.$message.success(msg)
sessionStorage.setItem('user', JSON.stringify(result.username))
this.$router.push('/')// 登錄後轉向主頁
}, 1000)
this.spinning = false
} else {
const errorMsg = result.errorMsg || '登錄失敗'
this.$message.warn(errorMsg)
}
}).catch(err => {
console.log(err)
})
}
})
}
}