前后端分离（spring boot+JWT+vue）

前后端分离思想：

让专业的人做专业的事

• 前端：Vue
  • 使用SessionStorage存储token
• 后端：Spring Boot：
  • JWT权限校验

vue插件Element ui的使用：

在vue项目中添加Element UI 插件：

1、vue ui添加插件Element ui插件
2、使用命令安装：npm install --save element-ui或者cnpm install --save element-ui

Element UI 使用

可以直接看Element ui的官网：https://element.eleme.cn/#/zh-CN/component/container

Element UI 标签介绍

• el-container：构建整个页面框架（相当于div）
  • el-aside：构建左侧菜单
    • el-menu：左侧菜单内容
      - :default-openeds：默认展开的菜单，通过菜单的index值来管理
      - :default-active：默认选中的菜单，通过菜单的index值来关联
      • el-submenu：可展开的菜单，常用属性（el-submenu可以看做二级菜单，三级菜单可以在里面再加一个 el-submenu）：
        • index：菜单的下标，文本类型，不能是数值类型
        • template：对应el-submenu的菜单名
          • i：设置菜单图标，通过class实则（具体的class名可以查看官方文档）
            • el-icon-message
            • el-icon-meun
            • el-icon-setting
        • el-menu-item-group：分组
          • el-menu-item：菜单的子节点，不可再展开的item项，常用属性：
            • index：菜单的下标，文本类型，不能是数值类型

通过Vue router 来动态构建左侧菜单

• 导航1
  • 页面1
  • 页面2
• 导航1
  • 页面1
  • 页面2

安装axios调用接口（请求数据）

命令：vue add axios

menu与router的绑定

1、标签添加router属性
2、在页面中添加标签，它是一个容器，动态渲染你选择的router。
3、标签index值就是要跳转的router。

Element UI表单数据校验

• 定义rules对象，在rules对象中设置表单各个选项的校验规则

/*
*required：true，是否为必填项
*message：'请输入活动名称'，提示信息
*trigger：'blur' ，出发事件
*min：
*/
rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        }

Vue代码格式化配置文件：

在src在创建.prettierrc文件：

{
	“semi”：false,//格式化代码时不替换成双引号
	"singleQuote": true//格式化代码时替换成单引号
}