如何使用javascripts构建前后端一体化应用

开发类似drawio一样的桌面型程序，需要使用javascripts、nodejs相关的前后端技术，如前端正常可采用vuejs，后端可采用express。

在构建模块时，应将前后端构建为两个独立的模块，便于分别开发及调试，最后再进行整合。

一、前端开发

使用当下流行的vuejs3+vuetify进行前端界面开发，将使用的展示组件进行vue组件封装，对于原来vuejs2中父子组件数据传递的麻烦事，在vue3中可采用defineModel进行快捷处理。

二、后端开发

使用express进行后端开发，进行静态及动态的接口路由，对于使用的数据存储，且小型数据量的应用，可采用nedb进行存储。

示例：前后端的模块结构。

三、前后端联调

前端在调用接口时，使用本地的开发配置进行代理，如vite中配置文件vite.config.mjs中增加：

server: {
    port: 3001,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    }

其中的target为后端服务地址及端口。

四、前后端集成

1、前端代码使用npm run package进行打包，将生成的dist拷贝至后端模块中，

2、后端的express中对前端代码dist进行静态文件路由，

 this.app.use(express.static(__dirname + "/dist"));

这里注意，__dirname代表是当前的运行路径，等同于CWD，具体的可以在调试时，使用console.log打印看文件的全路径。如果全路径错了，后面会出现404。

3、使用electron对后端应用进行打包

electron-forge package

使用javascript构建单体应用实践-万户OA邮件归档之数据存储

使用javascript构建单体应用实践-万户OA邮件归档之邮件存储

使用javascript构建单体应用实践-万户OA邮件归档之接口层