A Full Stack Project Containing Vuejs And Nodejs

A full stack project containing vuejs and nodejs

A Vue.js project for vue.js and node.js,related to vuex,vue-router,express4,sequelize,stylus,axios,etc .

project instruction

The risk management system is a project developed in my spare time and is a simple entry-level project. To say simple is because the implemented pages and functions are simple, and it does not mean that the technology used is simple (for the primary front-end).

Most of the technical points of vue and element-ui are used in the project, which can be a reference for learning vue children’s shoes. Of course, since this project is also a full-stack project, it is also a good reference template for some front-ends who want to learn node. The project also has some encrypted tokens and other things that will be used in real online projects, and 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 requires attention. If you have any questions or project bugs during the installation process, you can ask me questions in issues and I will try my best to answer them.

Effective laziness is a good quality of programmers. Hope this project can help everyone!

Technology stack

Front-end technology

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

Backend technology

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

Realize function

Log in - complete
Registration is complete
Project/Quota Condition Query-Complete
List display and paging - complete
Add/modify items-complete
Quota Details Page - Complete
User logout - complete
Logout-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

image 3

Figure 4

Project run

#Installation dependencies
npm install

## Start vue front-end project (http: // localhost: 8080 / ...)
npm run dev

## Start node back-end project (http: // localhost: 8081 / ...)
npm run start

Download Details:

Author: flyfox11

Source Code: https://github.com/flyfox11/venture-management

#vuejs #vue #javascript #nodejs #node