SanicCRUD-vue 项目教程

SanicCRUD-vue 项目教程

SanicCRUD-vue A example demo base Sanic with vueJS2.x + webpack2.x as new python full stack web practice 项目地址: https://gitcode.com/gh_mirrors/sa/SanicCRUD-vue

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

SanicCRUD-vue 项目的目录结构如下：

SanicCRUD-vue/
├── tests/
│   └── ...
├── sanic_crudvue/
│   ├── config/
│   │   └── ...
│   ├── crud/
│   │   └── ...
│   ├── frontend/
│   │   ├── build/
│   │   ├── dist/
│   │   ├── src/
│   │   │   ├── components/
│   │   │   ├── App.vue
│   │   │   ├── eventBus.js
│   │   │   └── main.js
│   │   └── ...
│   └── ...
├── .gitignore
├── LICENSE
├── Makefile
├── README-CN.md
├── README.md
└── requirements.txt

目录结构介绍

• tests/: 单元测试目录，包含项目的单元测试文件。
• sanic_crudvue/: 主项目目录，包含后端和前端的代码。
  • config/: 后端的基础配置文件目录。
  • crud/: 后端的核心应用目录，包含主要的业务逻辑代码。
  • frontend/: 前端代码目录。
    • build/: 前端的构建配置文件目录。
    • dist/: 前端构建的目标目录，包含打包后的静态资源文件。
    • src/: 前端的源代码目录。
      • components/: 包含各种前端组件。
      • App.vue: 主网页文件。
      • eventBus.js: 用于非父子组件通信的事件总线。
      • main.js: Webpack 的入口文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• Makefile: 项目的 Makefile 文件，用于自动化构建和测试。
• README-CN.md: 中文版的项目介绍文档。
• README.md: 英文版的项目介绍文档。
• requirements.txt: 项目依赖的 Python 包列表。

2. 项目的启动文件介绍

后端启动文件

后端的启动文件位于 sanic_crudvue/ 目录下，主要通过 Makefile 来启动服务。

• Makefile: 包含了项目的构建、安装、启动和测试等命令。

# 启动后端服务
make dev

前端启动文件

前端的启动文件位于 sanic_crudvue/frontend/ 目录下，主要通过 npm 来启动服务。

• main.js: Webpack 的入口文件，负责初始化 Vue 应用。

# 启动前端开发服务器
cd sanic_crudvue/frontend
npm run dev

3. 项目的配置文件介绍

后端配置文件

后端的配置文件主要位于 sanic_crudvue/config/ 目录下，包含了项目的各种配置项。

• config/: 包含后端的基础配置文件，如数据库连接、API 路由等配置。

前端配置文件

前端的配置文件主要位于 sanic_crudvue/frontend/build/ 目录下，包含了 Webpack 的配置文件。

• webpack.config.js: Webpack 的配置文件，定义了前端的构建规则和环境配置。

其他配置文件

• .gitignore: 定义了 Git 忽略的文件和目录。
• requirements.txt: 定义了项目依赖的 Python 包。

通过以上配置文件，可以灵活地调整项目的运行环境和功能。

SanicCRUD-vue A example demo base Sanic with vueJS2.x + webpack2.x as new python full stack web practice 项目地址: https://gitcode.com/gh_mirrors/sa/SanicCRUD-vue