搭建自己的个人站点

 过年休息时间较多,搭建了自己的个人站点,前端使用的vue,后端使用的srping-boot。前后端分离架构。首页使用了服务器前后端同构,由于服务器性能一般,其他页面使用了自己改造的vue-cli多页面应用( 模板git地址)。
多页在使用时候也踩过一些坑css样式在同名的时候有冲突,但是2个模块是2个页面,原则上来说是不会冲突的,而且也加上了 scoped但是样式还是冲突了,后来没有办法样式名重新定义一下就好了。使用多页面应用,是为了方便以后迭代。

站点也制作了后台管理系统,制作了权限和角色管理,简单的权限管理精确到菜单权限,后续迭代会加上功能权限管理,那是二期了。使用了vue-router addRoutes根据登录返回的菜单来渲染路由,这里有个问题,在登出的时候,换账号登录,若这个登录账号的权限没有其他菜单权限根据url直接访问还是能访问到的,所以权限没有生效,在登出的时候使用

window.location.reload(true)复制代码

更新一下浏览器缓存就能解决掉这个bug,是的权限正常运作。

使用了vue-router addRoutes 还有一个问题就是刷新页面会出现菜单消失的bug,在登录时候缓存下后端返回的菜单权限就可以解决了我是把addRouters封装了一个方法专门来处理这个问题

checkLogin () {
  if (this.sysModules) {
    this.$router.addRoutes(formatRouter(this.sysModules))
  } else {
    clearSessionLoginInfo()
    this.$router.replace('/')
  }
}/*
* 构造vue-router需要addRouters的数据结构
* @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]
}复制代码


就完美的解决了刷新渲染的路由消失的问题,其实就是异步加载路由。


当然网站很简单没有什么内容,纯属练习,主要是学习下java。也是第一次使用java当后端。为什么我不使用spring-data-jpa来做数据库操作是主要是不能写sql很不自由,但让我使用了spring-data-jpa来自动建表这个功能还是很方便的。主要还是使用的mybatis,连接池使用了阿里的druid


同时也适合自己做一些二次开发做一些属于自己的功能,当然你需要会vue和基本的java。


本地启用方法:

1.本地安装mysql

2.在后端代码里面src/resources/application.yml 吧active改成dev模式

3.application-dev.yml 换成自己的mysql信息 建立好db名字启动spring-boot 自动创建表

4.前端使用node npm run dev


前端git地址



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值