vuePractical section of project

Project purpose

Recently, I have been in charge of the development and maintenance of the company’s background management system. The whole technology stack involves React + Redux + Redux-Thunk + Ant Design, and I upgraded React to the latest version 16.8 with the use of React hooks. Then I wrote a react version of the backend management system template on Github.

Until the vue to write some useful components, but it hasn’t been written after the management system, so this is already the vue written after an attempt to manage system, and their demand for related business background management system and a summary of the vue overall knowledge, convenient after their review and review, also hope to be able to help the friend to the community.

Project introduction

This project is a background management system of VUE technology stack combined with Express +mongodb, in which the background only realizes user interfaces such as login and registration and the addition, deletion, change and check of a list. The whole project is a general back-end management system with rich text and Echarts integrated and secondary encapsulation. Because element-UI provides fewer icon diagrams, I added an AdminIcon component to my project.

Most of the requirements in the project are a summary of the requirements encountered in my work, which may have some one-sidedness. We should improve it according to our own needs when using it. In the project, several real background interfaces were used to simulate a simple add, delete, change and check, and a simple practice of JSONWebToken was also carried out when writing login and registration, which was also an actual practice of my back-end interface.

If you want to learn about Node, you can click here: Node Start Notes. This is a copy of node start notes.

Project screenshots:

Project start

Git clone [email protected]:wangkaiwd/vue-admin.git CD vue-admin # yarn build:test yarn Build :pro Yarn Build :analyzeCopy the code

Matters needing attention:

  • Local development can be combined with the corresponding real interface to use, interfacedmoeI wrote about another warehouse:Github.com/wangkaiwd/n…
  • Use comments when developing with a real interfaceaxiosthebaseURLAnd, invue.config.jsTo configure the service proxy

Project technology stack

The front-end is based on vUE technology stack, including the following:

  • vue
  • vue-router
  • vuex

The back-end is completed by combining express with mongodb database:

  • express
  • mongodb

Project depend on

  • axiosBased on:PromisethehttpClient, for browser andnode.js
  • qs: Supports parsing nestedquerystring. In plain English, it is possible to combinekey1=val1&key2=val2&...Format string to object format{key1:val1,key2:val2,... }
  • elemente uiBased on:Vue 2.0The desktop side component library
  • dayjs: a lightweight date processing library, usage andmoment.jssimilar
  • Countup.js: an interesting library for digital animation
  • Wangeditor is a rich text editor based on javascript and CSS. It is lightweight, simple, easy to use, open source and free
  • Echarts: An open source visual library implemented using JavaScript

referencedemo

With reference to the community’s excellent vuE-Admin project, here is star for you:

  • vue-element-admin
  • vue-admin-template
  • vue-admin

Realize the function

  • Backend interface
    • The login
    • registered
    • exit
    • usetokenImplementing Identity Authentication
    • List data (add, delete, change, search, paging)
    • Image upload
  • vueComponent packaging
    • Rich text component (image upload not yet implemented)
    • echartscomponent
    • Zone partition module
  • The project module
    • axiosRequest to packaging
    • listPage add delete change checkdemo
    • The left navigation bar shrinks
    • mockData access