Shopify Wishlist 项目教程

1. 项目的目录结构及介绍

shopify-wishlist/
├── assets/
│   ├── css/
│   ├── images/
│   └── js/
├── config/
│   └── settings.json
├── lib/
│   └── utils.js
├── public/
│   └── index.html
├── src/
│   ├── controllers/
│   ├── models/
│   └── views/
├── .gitignore
├── package.json
├── README.md
└── server.js

目录结构介绍

• assets/: 存放项目的静态资源文件，如CSS、图片和JavaScript文件。

  • css/: 存放样式表文件。
  • images/: 存放图片文件。
  • js/: 存放JavaScript文件。

• config/: 存放项目的配置文件。

  • settings.json: 项目的配置文件，包含各种设置选项。

• lib/: 存放项目的工具库文件。

  • utils.js: 包含一些通用的工具函数。

• public/: 存放公开访问的文件，如HTML文件。

  • index.html: 项目的入口HTML文件。

• src/: 存放项目的源代码文件。

  • controllers/: 存放控制器文件，处理业务逻辑。
  • models/: 存放模型文件，定义数据结构。
  • views/: 存放视图文件，负责页面展示。

• .gitignore: Git忽略文件，指定哪些文件或目录不需要被Git管理。

• package.json: 项目的依赖管理文件，包含项目的依赖包和脚本命令。

• README.md: 项目的说明文档。

• server.js: 项目的启动文件。

2. 项目的启动文件介绍

server.js

server.js 是项目的启动文件，负责启动服务器并加载项目的各个模块。以下是 server.js 的主要内容：

const express = require('express');
const app = express();
const config = require('./config/settings.json');
const utils = require('./lib/utils');

// 加载静态资源
app.use(express.static('public'));

// 加载路由
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

// 启动服务器
const port = config.port || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

启动文件介绍

• 引入依赖: server.js 首先引入了 express 框架、配置文件 settings.json 和工具库 utils.js。
• 加载静态资源: 使用 express.static 方法加载 public 目录下的静态资源。
• 定义路由: 通过 app.get 方法定义了一个根路由，当访问根路径时，返回 index.html 文件。
• 启动服务器: 从配置文件中读取端口号，启动服务器并监听该端口。

3. 项目的配置文件介绍

config/settings.json

settings.json 是项目的配置文件，包含项目的各种设置选项。以下是 settings.json 的内容示例：

{
  "port": 3000,
  "database": {
    "host": "localhost",
    "user": "root",
    "password": "password",
    "name": "shopify_wishlist"
  },
  "email": {
    "service": "gmail",
    "user": "[e-mail]",
    "password": "email_password"
  }
}

配置文件介绍

• port: 指定服务器监听的端口号，默认为 3000。
• database: 数据库配置，包含数据库的主机地址、用户名、密码和数据库名称。
• email: 邮件服务配置，包含邮件服务提供商、用户名和密码。

通过 settings.json 文件，可以方便地修改项目的配置，而无需修改代码。