venture management

Ein Full-Stack-Projekt einschließlich VueJS und NodeJS

Ein Vue.js-Projekt für vue.js und node.js, bezogen auf vuex,vue-router,express4,sequelize,stylus,axios usw.

Projektbeschreibung

Das Risikomanagementsystem ist ein in meiner Freizeit entwickeltes Projekt. Es ist ein einfaches Einstiegsprojekt. Es wird als einfach bezeichnet, weil die implementierten Seiten und Funktionen einfach sind. Dies bedeutet jedoch nicht, dass die verwendete Technologie einfach ist (für Junior-Frontends).

Die meisten technischen Punkte von Vue und Element-UI werden im Projekt verwendet, was als Referenz für Kinder dienen kann, die Vue lernen. Da es sich bei diesem Projekt natürlich auch um ein Full-Stack-Projekt handelt, ist es auch eine gute Referenzvorlage für einige Frontends, die Nodes lernen möchten. Das Projekt verfügt auch über einige Verschlüsselungstoken und andere Dinge, die in echten Online-Projekten verwendet werden , und jeder kann auch daraus lernen.

Da es sich bei diesem Projekt um ein Full-Stack-Projekt handelt, müssen Sie vor dem Starten des Knotenservers die MySQL-Datenbank installieren und die Datenbankkonfigurationselemente in config/index.js ändern. Dies muss beachtet werden. Wenn Sie während des Installationsprozesses Fragen haben oder Projektfehler finden, können Sie mir in Issues Fragen stellen und ich werde mein Bestes geben, diese zu beantworten.

Effektive Faulheit ist eine gute Eigenschaft eines Programmierers. Ich hoffe, dieses Projekt kann allen helfen!

Technologie-Stack

• Front-End-Technologie

vue2 + vuex + vue-router + webpack + ES6/7 + axios + stylus + element-ui

• Backend-Technologie

node.js + express4 + session + sequelize + mysql + lodash.js + bcrypt + jwt

Funktion implementieren

• Anmelden – abgeschlossen
• Registrierung – abgeschlossen
• Abfrage der Projekt-/Betragskonditionen – abgeschlossen
• Listenanzeige und Seitenwechsel – abgeschlossen
• Elemente hinzufügen/ändern – Fertig
• Kontingentdetailseite – abgeschlossen
• Benutzerabmeldung – abgeschlossen
• Abmelden – Fertig

Einführung in die Verzeichnisstruktur

 |-- build                            // webpack配置文件
|-- config                           // 项目打包路径
|-- screenshots                      // 效果图截屏
|-- server                           // express后端，用于提供Api
|-- src                              // 源码目录
|   |-- assets                       // 资源文件
|   |-- components                   // 公共组件
|   |-- fetch                        // 接口定义与配置
|   |-- pages                        // 相关页面
|   |-- router                       // 路由配置
|   |-- vuex                         // 状态管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态资源文件
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 代码编写规格
|-- .gitignore                       // git忽略的文件
|-- .postcssrc.js                    // post-loader的插件配置文件
|-- .favicon.ico                     // 网站logo图标
|-- index.html                       // 入口html文件
|-- package.json                     // 项目及工具的依赖配置文件
|-- server.js                        // node server入口文件
|-- README.md                        // 说明

Wirkungsdemonstration

Abbildung 1

Abbildung 2

Abbildung 3

Abbildung 4

Projektbetrieb

 # 安装依赖
npm install

# 启动vue前端项目(http://localhost:8080/...)
npm run dev

# 启动node后端项目(http://localhost:8081/...)
npm run start