Squeeze once: at the beginning thought that did not have many people to use did not build group, but I added too many people, a lot of problems are repeated, so build a group we communicate with each other convenient point, but build a little late, missed a lot of people so the group of people a little less,QQ group: 157216616

tip

This framework is controlled by the front end, if you don’t need this model, you can see me another full stack CMS project, the background is using the node framework egg. Js + mysql, the authority is returned by the background have permission routing, front end to get the routing and front-end routing table do after screening, it is concluded that the final routing table generated menu, role and the Angle of benefit is Color has the permission to route is dynamic background can be edited at any time configuration, two modes on demand

Source code address:

  • Github:github.com/xuxuxu-ni/n…
  • Yards cloud: gitee.com/nirongxu/no…

Introduction to the

The rights management is in order to convenient, really with system security, just return to the role of information according to the background to generate he could see the menus and buttons, display menu method is based on permission to delete the routing routing table without permission, and then dynamically add, the original routing table contains no access just open the page to run the code has gone, In addition to filtering out routes that do not exist in the 404 page, each route redirect is authenticated. If you know a route without permission and try to jump to it, you’ll jump to 404 because you don’t have permission.

Even if by looking at the code or any other method to get all routing, and around 404, spent so much energy, and then you can’t see the door to new world, because all data is through background request to return to, don’t you won’t give you permission the background data, also won’t let you go, operation, unless the background does not verify permissions, as long as someone request I will give you all data,, .

Recently, I wrote a background template based on vue2.0+ Element-UI permission management system, which contains the framework functions required for normal project development. Developers only need to focus on the business logic of the project when using it. And then it gives you a framework that you have complete control over.

Source code address:

  • Github:github.com/xuxuxu-ni/v…
  • Yards cloud: gitee.com/nirongxu/vu…

Preview address:

  • Making: xuxuxu – ni. Making. IO/vue – xuAdmin…
  • Domestic gitee: nirongxu. Gitee. IO/vue – xuadmin…

Vue-xuadmin is a background template developed based on Vue2.0 family bucket + Element-UI, which implements unlimited menu, page and button level permission management. In order to reduce the communication cost of the front and back ends, the page and button level permission verification and dynamic routing table storage verification are also completed by the front end. In this way, the front end does not need to tell the background to add and delete the routing table

Part of the screenshot

Update log

v1.2.5

  1. Add DllPlugin to optimize build speed and faster compile speed yarn StartDLL
  2. Add build version control
  3. Refreshing the browser will continue to display the current component, the system will not jump to the home page

v1.2.1

  1. Updated WebPack 4.0 with some performance optimisations, compilation time improved from 13 seconds to 2-3 seconds, speed up to 90%(the first startup time is normal time, Ctrl+ C after startup to close the project will be faster to restart)
  2. Encapsulates the AXIOS request
  3. Added some global public methods /utils/global and some utility functions /utils/index to encapsulate form validation /utils/rules
  4. Some adjustments have been made to the project structure
  5. The 404 page was redone
  6. Fixed a few minor bugs
  7. Added Build Packaging result analysis YARN Analyz

2. Preparation

– Development Environment

  • Node. Js v8.0 +
  • webpack v4
  • git

– technology stack

  • ES6+
  • Vue2.0 +
  • vue-router
  • vuex
  • axios
  • scss
  • Element – the UI v2.4 +

3. Basic framework functions

- Login, Exit + Token-based - Status blocking, 404 page - Dynamic load route - Page, button command permission management - Unlimited level menu - Encapsulation [email protected] international components - System full-screen - Menu shrinkage - Icon icon + TAB navigation - Right click shortcut features - Table drag and drop Sort - encapsulates AXIos - encapsulates global methods, and some utility functions - editor - Markdown (Editor currently encapsulates only this component, rewrites the markdown edit and preview skin, real-time access: The Echarts component encapsulates some common components that elder-UI does not have, and can be copied directly in elder-UI. If element-UI doesn't meet your needs, you'll have to write your ownCopy the code

Development of 4.

The login

Login page only input account password, need verification code can search for third-party verification plug-in, there are charges have free. Just for the test, the entered account is stored as a token to complete the session of the whole system. The actual development is subject to the token returned by the background after successful login

// Login page
submitForm () {
      let that = this
      if (this.loginForm.username === "" || this.loginForm.password === "") {
        this.$message({
          showClose: true.message: "Account number or password cannot be empty.".type: "error"
        })
        return false
      } else {
        // True request reference
        // fetchLogin is the encapsulated login interface. All requests are encapsulated in the SRC/API/folder
        this.$request.fetchLogin({
          username: that.loginForm.username,
          password: that.loginForm.password
        }).then(res= > {
        // $restBack is the encapsulated global return method. The global methods and utility functions are in the SRC /utils folder
          that.$restBack(res.data, () = > {
            that.$store.dispatch("setToken", res.data.data.access_token).then(res= > {
              that.$router.push({path: "/"})})},"Login successful")
        }).catch((err) = > {
          console.log(err)
        })
      }
    },
Copy the code
// vuex 
  state: {
    token: Cookies.get('token') // Refresh the page or open it in a new TAB to get the initial token from cookie
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      Cookies.set('token', token ,{ expires: 1/24 }) // Reference the 'js-cookie' module to store tokens into cookies}},actions: {
    setToken ({commit}, token) {
      return new Promise((resolve, reject) = > {
        commit('setToken', token)
        resolve()
      })
    }
  },
Copy the code

series

Vue2.0 + ElementUI Handwriting Rights Management System Background template (1) — Brief introduction

Vue2.0 + ElementUI Handwriting Rights management system background template (2) — rights management

Vue2.0 + ElementUI Handwriting Rights management system background template (three) — page building

Vue2.0 + ElementUI Handwriting Rights Management system background template (4) — Component end