前面写了一篇文章electron-vue构建桌面应用(一),我们有了项目的基本结构:main:主进程;renderer:渲染进程。
本篇介绍如何在主进程中连接数据库,并用express生成路由让客户端访问。
一、用Sequelize连接数据库
Sequelize是基于Promise的Node.js的ORM框架。
ORM即Object-Relationl Mapping,它的作用是在关系型数据库和对象之间作一个映射:
在具体的操作数据库的时候,就不需要再去和复杂的SQL语句打交道,只要像平时操作对象一样操作它就可以了。
Sequelize官方GitHub:https://github.com/sequelize/sequelize
Sequelize官方中文文档:https://github.com/demopark/sequelize-docs-Zh-CN
Sequelize官方英文文档:http://docs.sequelizejs.com/
我参考的官方中文文档,里面的步骤非常详细,按步骤即可实现:
第一步、Getting Started - 入门下载依赖
npm install --save sequelize
还必须手动为所选数据库安装驱动程序:
$ npm install --save sqlite3(因为我的项目用的数据库是sqlite3)
第二步、连接到数据库
在主进程main文件夹中创建文件夹:server
在server中创建文件:sequelizeConnectDb.js
sequelizeConnectDb.js文件内容:
const { Sequelize } = require('sequelize');
const sequelize = new Sequelize({
dialect: 'sqlite',
storage: 'D:/sqliteDb/archives.db';//我这里用的是绝对路径
});
//使用 .authenticate() 函数测试连接是否正常
sequelize.authenticate().then(() => {
console.log('Connection has been established successfully.')
}).catch(err => {
console.error('Unable to connect to the database:', err)
})
module.exports = sequelize;
第三步、定义模型
在已创建的server文件中创建文件夹:model;
在model中创建一个文件:basicModel.js
basicModel.js文件:
const { Sequelize } = require('sequelize');
const db = require('../sequelizeConnectDb.js')
//模型是 Sequelize 的本质. 模型是代表数据库中表的抽象
const basicModel = db.define('basic_info_audit_tb', {
name: {
type: Sequelize.STRING,
field: 'person_id'
},//表中字段都要列出来
}, {
timestamps: false,
paranoid: true,
underscored: true,
freezeTableName: true,
tableName: 'basic_info_audit_tb'
})
module.exports = basicModel
二、用express构建web服务器
express介绍
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。
使用 Express 可以快速地搭建一个完整功能的网站。
Express 框架核心特性:
1.可以设置中间件来响应 HTTP 请求。
2.定义了路由表用于执行不同的 HTTP 请求动作。
3.可以通过向模板传递参数来动态渲染 HTML 页面。
第一步、下载依赖
npm install --save express
以下几个重要的模块是需要与 express 框架一起安装的:
1、body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据。
2、cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。
3、multer - node.js 中间件,用于处理 enctype=“multipart/form-data”(设置表单的MIME编码)的表单数据。
$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save
第二步、创建路由容器(router是有中间件和HTTP方法路由(如get,put,post,等))
basic.js 中:
//引入定义的模型(即数据库中的某个表)
var basicModel = require('../../server/model/basicModel.js')
var express = require('express');
// 1. 创建一个路由对象
var router = express.Router()
router.get('/basicList', function (req, res, next) {
//findAll是squelize的查询语句,还可以进行增删改操作,具体的可以查看官网介绍
basicModel.findAll().then(resData => {
res.send(resData)
})
})
module.exports = router;
expressApp.js中:
var express = require('express');
var app = express()
const server = function () {
app.disable('etag');//接口报304,加上这句就解决了
//解决跨域
app.all('*', function (req, res, next) {
//设为指定的域
res.header('Access-Control-Allow-Origin', "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header('Access-Control-Allow-Credentials', true);
res.header("X-Powered-By", ' 3.2.1');
next();
});
app.use(require('./routes/basic'));//引入路由模块文件
app.listen(9008, () => {
console.log(`Server started on port 9008`)
})
}
module.exports = server
然后在主进程中的index.js中引入expressApp.js就可以了,index.js中部分代码如下:
import { app, BrowserWindow } from 'electron'
import serverApp from './server/expressApp'//引入路由模块
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000
})
mainWindow.loadURL(winURL)
mainWindow.on('closed', () => {
mainWindow = null
})
serverApp()//执行路由模块
}
三、调用服务端提供的接口
第一步、在renderer文件夹中创建api.js(里面对axios进行封装):
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:9008';
axios.defaults.timeout = 10000;//请求超时时间
//post请求的时候,我们需要加上一个请求头,所以可以在这里进行一个默认的设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//判断返回状态
axios.interceptors.response.use(res => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (res.status === 200) {
return Promise.resolve(res);
} else {
return Promise.reject(res);
}
},
error => {
return Promise.reject(error);
})
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function httpGet(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch((error) => {
reject(error)
})
});
}
const basicList = function (params) {
return httpGet('/basicList', params)
};
export default { basicList }
其中axios.defaults.baseURL = ‘http://localhost:9008’;中的9008就是服务端定好的端口。
这样封装之后,就可以在 页面中调用接口了。
第二步、vue文件中调用接口
例如我创建个index.vue文件:
<template>
<div>
<el-button type="primary" @click="toSearch">登录按钮</el-button>
</div>
</template>
<script>
import api from '../../api.js'
export default {
methods: {
toSearch() {
api.basicList().then(res => {
console.log(res)
}).catch(error => {
console.log(error)
})
}
},
}
</script>
用npm run dev启动项目报错:
后来在package.json文件中把sqlite3版本改为"sqlite3": “^4.2.0”,(原来是"sqlite3": “^5.0.1”)错误原因可能是node版本跟sqlite不匹配。
修改完执行:npm install;再执行npm run dev,又报错:
然后参考:electron下安装使用sqlite3执行以下操作:
第一步:管理员权限启动 cmd 执行:npm install --vs2019 -g windows-build-tools
第二步、项目中添加 electron-rebuild 依赖:
npm install electron-rebuild --save-dev
第三步、安装sqlite3:npm install --save sqlite3
第四部、项目 package.json 中 scripts 添加 rebuild
“scripts”: {
“rebuild”: “electron-rebuild -f -w sqlite3”,
},
第五步、执行npm run rebuild
执行npm run dev报错:
把.babelrc文件中的"plugins": [“transform-runtime”]改为"plugins": [“transform-runtime”, “transform-es2015-modules-commonjs”]就可以了