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 .

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

Basic Settings for Starting Vuejs and Nodejs Servers .This is a sample project that launches a web server using NodeJs and checks the VueJs core grammar.

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

A Jira clone built with Vuejs & Nodejs/Graphql

Build a todo list with NodeJs backend and VueJs frontend

In this video, we merge our NodeJS API with out VueJS frontend and display all the posts in our database on our web app. We then add the see more functionality and sort the array by the timestamp.