前端离开后端就不能开发项目了？

前端离开后端就不能开发项目了？

    经常在技术社区中看到后端个个都能代替前端，前端却代替不了后端！ 
    后端有多牛，前端有多菜！
    嗯.......事实真的如此吗？
	前端一个人在没有服务器、数据库的情况下到底能不能开发一个项目呢？
	答案： 肯定是可以的！

在没有数据库的情况下，我们可以有很多种选择，比如：本地存储！
当然由于本地存储有大小限制，存一些小数据还是可以的，但是存放大数据就肯定不行了。

那就换一种思路，再比如：

我们能不能将js文件当成数据库里面的某一个表呢？

基于这个思路，我们创建多个js文件当成你的每个的功能表。然后基于node.js来实现对js文件的操作（增删改查）

有了这个思路，创建一个基于node.js和vue以及electron的项目进行试一下！

第一步：创建每个模块需要储存的js文件

第二步：封装node.js对js文件的操作功能

//封装的个个方法

const fs = require('fs');
const path = require('path')
// 获取应用程序的路径
const dataPath = process.env.NODE_ENV === 'development' ? __dirname : path.join(__dirname,'static/data/')
// 读取文件内容
function readFileContent(filename) {
    try {
        const filePath = path.join(dataPath,filename);
        const data = fs.readFileSync(filePath, 'utf8');
        return JSON.parse(data);
    } catch (err) {
        console.error(`Error reading file: ${err}`);
        return null;
    }
}

// 写入文件内容
function writeFileContent(filename, content) {
    try {
        fs.writeFileSync(path.join(dataPath,filename), JSON.stringify(content));
    } catch (err) {
        console.error(`Error writing file: ${err}`);
    }
}

// 添加内容到文件
function addContent(filename, newContent) {
    const existingData = JSON.parse(readFileContent(filename)) || [];
    existingData.unshift(newContent);
    writeFileContent(filename, JSON.stringify(existingData));
}

// 删除文件中的内容
function deleteContent(filename, index) {
    const existingData = JSON.parse(readFileContent(filename));
    if (existingData && existingData.length > 0) {
        const upDate = existingData.filter(item => item.id !== index);
        writeFileContent(filename, JSON.stringify(upDate));
    }
}

// 更新文件中的内容
function updateContent(filename, id, updatedContent) {
    const existingData = JSON.parse(readFileContent(filename));
    if (existingData && existingData.length > 0) {
        for (let i = 0; i < existingData.length; i++) {
            if (existingData[i].id === id) {
                existingData[i] = updatedContent;
                break; // 找到匹配项后立即退出循环
            }
        }
        writeFileContent(filename, JSON.stringify(existingData));
    }
}

//导出文件
function importData(filename,existingData){
    if(existingData){
        writeFileContent(filename, JSON.stringify(existingData));
    }
}

module.exports = {
    readFileContent,
    writeFileContent,
    addContent,
    deleteContent,
    updateContent,
    importData
};

第三步：使用封装公共的方法

//封装获取数据方法
//需要先将readFileContent方法引用到vue文件中去使用
//根据不同的参数给各个方法传参
GetlocalStorageFun() {
  return JSON.parse(readFileContent(this.filePath)) || []
},

第四步：打安装包并安装电脑桌面运行测试

将一些基本需要配置的比如项目名称版本号等配置完

根据你需要的包直接打相应的命令，就可以了！
打完包之后，直接在build文件夹下运行exe安装包，可以选择安装目录

安装成功后直接运行，就可以使用了！

测试

以上测试，功能都可以正常使用！

注意：
为了防止数据丢失，所以开发了数据备份和数据导入功能！
如果后期页面更新了内容，需要将现有的数据备份，安装新版本后在重新导入一下即可！