During the Spring Festival, I had a lot of rest time. I built my own personal site, using VUE at the front end and SRping-boot at the back end. Front – end separation architecture. The home page uses the server front and back end isomorphism. Due to the mediocre server performance, other pages use their own modified VUE-CLI multi-page application (
Git git).

The CSS style conflicts with the same name, but 2 modules are 2 pages, in principle they do not conflict, and it was added
scopedBut the styles still conflict, and there is no way to redefine the style name later. Multi-page applications are used to facilitate future iterations.

The site also made the background management system, the production of permissions and role management, simple permissions management accurate to the menu permissions, the next iteration will add functional permissions management, that is the second phase. Vue-router addRoutes is used to render routing according to the menu returned by login. There is a problem here, when logging out, change the account to log in. If the login account has no other menu permission, it can be accessed directly according to the URL, so the permission does not take effect and will be used when logging out 

window.location.reload(true)Copy the code

Updating the browser cache fixes this bug, and the permissions work fine.

One of the problems with vue-Router addRoutes is that the menu will disappear when refreshing the page. Caching the menu permissions returned by the back end during login can solve this problem

checkLogin () {
  if (this.sysModules) {
    this.$router.addRoutes(formatRouter(this.sysModules))
  } else {
    clearSessionLoginInfo()
    this.$router.replace('/'}}/* * Construct vue-router by addRouters data structure * @params modules * */export function formatRouter (modules) {
  const home = {
    path: '/Container',
    component: resolve => require(['.. /views/myBlogManagerPages/Container.vue'], resolve),
    children: [{
      path: '/readme',
      component: resolve => require(['.. /views/myBlogManagerPages/pages/readme.vue'], resolve)
    }]
  }

  for (let i = 0; i < modules.length; i++) {
    if(modules[i].parentId ! == 0) { home.children.push({ path: `/${modules[i].modulePath}`,
        component: resolve => require([`../views/myBlogManagerPages/pages/${modules[i].modulePath}.vue`], resolve)
      })
    }
  }

  return [home]
}Copy the code


The perfect solution to the problem of refreshing render routes disappear, in fact, is asynchronous load routes.


Of course, the website is very simple without any content, pure exercise, mainly learning Java. It was also the first time Java was used as a back end. The main reason why I don’t use Spring-data-jPA to do database operations is that it is not free to write SQL, but it is very convenient for me to use spring-data-jPA to automatically create tables. Mybatis is used mainly, and Ali druid is used for connection pool


Also suitable for their own secondary development to do some of their own functions, of course, you need to know VUE and basic Java.


Local enable method:

1. Install mysql locally

2. In the back-end code in the SRC/resources/application. The yml active into dev mode

Mysql > create table by spring-boot; create table by spring-boot

4. Run node NPM run dev for the front-end



Front-end Git address