venture management

A full stack project containing Vuejs and Nodejs

A vue.js project for vue.js and node.js, related to vuex, vue-router, expression, sequelize, style, axios, etc.

Project description

The risk management system is a project developed by my spare time and is a simple entry -level project. Simple is because the implementation pages and functions are simple and do not mean simple technology (for the primary front end).

Most of the technical points of Vue and Element-UI are used in the project, which can give a reference for children's shoes to learn Vue. Of course, because this project is also a full -stack project, it is also a good reference model for some front end that wants to learn NODE. There are also some things that the real -online projects such as encrypted token will be used in the project. You can also learn from it.

Since this project is a full stack project, before starting the Node server, you need to install the MySQL database and modify the database configuration items in config/index.js. This needs to be noted. If you have any questions or find the project bug during the installation process, you can ask me in Issues, and I will try my best to answer.

Effective laziness is the excellent quality of programmers. I hope the project can help everyone!

Technology stack

• Front -end technology

Vue2 + Vuex + Vue-Router + Webpack + ES6/7 + Axios + Stylus + Element-UI

• Back -end technology

Node.js + Express4 + Session + Sequelize + MySQL + Lodash.js + BCRYPT + JWT

Implement function

• Login-complete
• Register-complete
• Project/query query-complete
• List display and pagination-complete
• Add/Modify Project-Completion
• Details Page-Completed
• User Logging off-completion
• Login-complete

Directory structure introduction

 |-- 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                        // 说明

Effect demonstration

Figure 1

Figure 2

Figure 3

Figure 4

Project operation

 # 安装依赖
npm install

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

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