Tab Tracker 开源项目教程

Tab Tracker 开源项目教程

tab-trackerA Vue.js / Express.js web application for keeping track of guitar tabs项目地址:https://gitcode.com/gh_mirrors/ta/tab-tracker

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

Tab Tracker 项目的目录结构如下：

tab-tracker/
├── client/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── router/
│   │   ├── store/
│   │   ├── views/
│   │   ├── App.vue
│   │   ├── main.js
│   ├── package.json
│   ├── vue.config.js
├── server/
│   ├── config/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── seeders/
│   ├── app.js
│   ├── package.json
├── .gitignore
├── README.md

目录结构介绍

• client/: 前端项目目录，使用 Vue.js 框架。

  • public/: 存放静态资源文件。
  • src/: 前端源代码目录。
    • assets/: 存放静态资源，如图片等。
    • components/: 存放 Vue 组件。
    • router/: 路由配置文件。
    • store/: Vuex 状态管理文件。
    • views/: 页面视图组件。
    • App.vue: 主应用组件。
    • main.js: 前端入口文件。
  • package.json: 前端项目的依赖管理文件。
  • vue.config.js: Vue 项目配置文件。

• server/: 后端项目目录，使用 Node.js 和 Express 框架。

  • config/: 配置文件目录。
  • controllers/: 控制器文件目录。
  • models/: 数据模型文件目录。
  • routes/: 路由文件目录。
  • seeders/: 数据种子文件目录。
  • app.js: 后端入口文件。
  • package.json: 后端项目的依赖管理文件。

• .gitignore: Git 忽略文件配置。

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

2. 项目的启动文件介绍

前端启动文件

• client/src/main.js: 这是前端的入口文件，负责初始化 Vue 应用并挂载到 DOM 上。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

后端启动文件

• server/app.js: 这是后端的入口文件，负责设置 Express 应用并启动服务器。

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const morgan = require('morgan');

const app = express();

app.use(morgan('combined'));
app.use(bodyParser.json());
app.use(cors());

app.listen(process.env.PORT || 8081);

3. 项目的配置文件介绍

前端配置文件

• client/vue.config.js: 这是 Vue 项目的配置文件，用于自定义构建配置。

module.exports = {
  devServer: {
    proxy: 'http://localhost:8081'
  }
}

后端配置文件

• server/config/config.json: 这是后端项目的配置文件，用于配置数据库连接等信息。

{
  "development": {
    "username": "root",
    "password": null,
    "database": "database_development",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "production": {
    "username":

tab-trackerA Vue.js / Express.js web application for keeping track of guitar tabs项目地址:https://gitcode.com/gh_mirrors/ta/tab-tracker