前面写了一篇文章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”]就可以了