grow_的博客

引言我们自定一个拦截器，只有当用户登录后，才可以访问资源接口（会员、商品、供应商、员工），没有登录则要求 登录。其中判断是否登录，要求客户端请求接口时，在请求头上带上 token ，然后在拦截器拦截到请求后，校验 token是否有效，有效才让访问，否则无法访问。请求头信息 Authorization: Bearer jwtToken创建拦截器创建一个 HandlerInterceptorAdapter拦截适配器的子类，并且重写它里面的 preHandle方法，在请求目标接口时进行..

创建jwt工具类1.在子模块util中创建java文件package com.mengxuegu.member.util;import io.jsonwebtoken.Claims;import io.jsonwebtoken.JwtBuilder;import io.jsonwebtoken.Jwts;import io.jsonwebtoken.SignatureAlgorithm;import org.springframework.boot.context.properties

解析jwt令牌当服务端生成 token 后发给客户端，客户端在下次向服务端发送请求时需要携带这个token (这就好像是拿着一张门票一 样)，那服务端接到这个token 应该解析出token中的信息(例如用户名), 根据这些信息 查询数据库返回相应的结果。在 测试类添加一个方法 parserJwt 来解析jwt令牌中信息import io.jsonwebtoken.Claims;import io.jsonwebtoken.JwtBuilder;import io.jsonwebto...

了解jwt,jjwt什么是jwtJSON Web Token( JWT)是一个非常轻巧的规范。这个规范允许我们使用JWT在用 户和服务器之间传递安全可靠的信息。其中 JWT 中可以包含用户信息。什么是jjwtJJWT 是一个提供端到端的JWT创建和验证的Java库。永远免费和开源(Apache License，版本2.0)，JJWT很容易使用和理解。可以使用jjwt实现jwt.jjwt快速入门1.pom包中引入依赖(查看自己电脑jdk版本，8版本不需要下面的依赖8中包含EE,..

枚举package com.cc.member.base;import lombok.AllArgsConstructor;import lombok.Getter;@Getter@AllArgsConstructorpublic enum ResultEnum { SUCCESS(2000,"成功"), ERROR(999,"失败"); private Integer Code; private String Desc;}使用.

1.模块化const state = { count: 1};const mutations = { increment(state, n) { //n为载荷 state.count += n; }, decrement(state) { state.count--; }};const actions = { add1(context, n) { // context:上下文 // 触发mutation里面的increment

loading加载1.按需导入 ElementUI组件 Loading2.加载数据时， 打开和关闭 对象 （注意： loadingInstance 实例采用单例模式创建，防止响应异常时频繁切换路由时加载动效重复创建）3.​​​​​​​请求拦截器中打开加载效果, 响应拦截器和异常中关闭加载效果.统一异常处理在响应拦截器中设置加载和统一异常处理的完整代码：import axios from 'axios';import { Loading, Message } from ...

父组件传递给子组件父：传递isDialog<Supplier :isDialog="true" />子：接收isDialogprops: { isDialog: Boolean}子组件传递给父组件子：将val传递----option-supplierthis.$emit('option-supplier', val);父：自定义事件<Supplier @option-supplier="optionSupplier" /...

1.input点击事件input添加readonly属性 @click.native="function"2.重置表单注意事项1.直接在重置上使用不需要加this <el-button @click="$refs['searchForm'].resetFields()">重置</el-button>2. 检查标签属性 prop ，指定了字段名, 重置才会生效3.下面定义的data也要给字段名...

// 权限校验// Vue Router中的前置钩子函数 beforeEach(to,from,next)// 当进行路由跳转前，进行判断，是否已经登陆过，登录过则允许访问页面，否则回到登录页import router from './index';import { getUserInfo } from '@/api/login';router.beforeEach((to, from, next) => { // 获取token // 1.没有token只可以进入登陆页面，进入.

<el-breadcrumb v-show="$route.path !== '/home'" separator="/"> <el-breadcrumb-item class="line" :to="{ path: $route.path }">{{ $route.meta.title }}</el-breadcrumb-item> </el-breadcrumb>与router.js相关v-show="$rout..

header头部布局<template> <div class="header"> <a href="/"> <img class="logo" src="@/assets/logo.jpg" alt="" width="25px" /> <span class="company">cc管理系统</span> </a> <el-dropdown @command

主页面的布局不会写在views中，写在layout文件夹/component文件夹使用的样式一般position：absolute（可以浮动起来，下一个div会上移）absolute：相对于父元素或浏览器窗口进行偏倚relative:相对于当前位置进行偏倚代码<template> <div> <div class="header">头部</div> <div class="navbar">左侧导航&lt

登录的业务逻辑1.输入用户名和密码，获取token（服务器去数据库查询用户名和密码是否正确，正确则返回一个token）2.通过token返回用户信息3.存储token和用户信息4.跳转主页面token:1、Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。2、Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令.

<template> <div class="login-container"> <el-form :model="form" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="login-from" > <h2 class="login-title">CC&会员.

1.在src/views创建文件及文件下创建index.vue说明：通过import Login from '@/views/login';导入组件，当前只指定了组件路径，默认导入的就是指定路径下的 index.vue 组件2.在 中配置路由（把原有的路由配置删除)import Vue from 'vue';import VueRouter from 'vue-router';// 引入组件对象import Login from '@/views/login';Vue.us.

产生跨域前后端分离时，前端和后端API服务器可能不在同一台主机上，就存在跨域问题，浏览器限制了跨域访问。 同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域静态代理 在vue.config.js的devServer中配置 // 配置proxy proxy: { // 开发环境代理配置 '/dev-api': { // 目标服务器地址，代理访问 http://localhost:8001 target: 'ht...

1.创建/public/db.json[{ "id": 1, "name": "cc" },{ "id": 2, "name": "dd" },{ "id": 3, "name": "hh" }]2.创建utils/request.jsimport axios from 'axios';// axios.get('/db.json').then((response) => {// const data = response.data// console.log(data

1.更改标题找到 public\index.html 页面，修改内容： <title>你的标题</title>2.更改logo将图片名称改为favicon.ico 粘贴到 /public 目录下, 替换原有的图标。若运行没有显示，则在浏览器清空缓存。3.根目录下创建vue.config.jsmodule.exports = { devServer: { port: 8888, //端口号 host: `localhost`, //主机 .

Mock.Random 是一个工具类，用于生成各种随机数据,使得数据更加的真实。Mock.Random 类中的方法在数据模板中称为『占位符』，书写格式为'属性名': @占位符 Type（类型） Method（占位符） Basic（基本类型） boolean , natural （自然数，大于等于 0 的整数）, integer , float , character , string , range （整型数..

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值' id|+1': 1属性名 和 生成规则 之间用竖线 | 分隔属性值是字符串 String属性值是数字 Number属性值是布尔型 Boolean​​​​属性值是对象 Object属性值是数组 Array值是正则表达式 RegExp练习代码：const Mock = require('mockjs');const data ...

需求：生成4条列表数据编码实现：1.创建项mock-demo，初始化项目npm init -y //y是yes的意思，生成默认的package.json2.Mock.js安装npm install mockjs3.创建mock.jsconst Mock=require('mockjs')const data=Mock.mock({ 'list|4':[ { 'id':1, 'name':'红红' } ]})con...

1.解决什么问题？问题：前后端分离项目，前端和后端人员都是根据 API 文档进行开发项目的，不应该直接相互依赖， 前端人员不应该等待后端开发好接口后再进行测试，既然不依赖后端接口，那前端人员应该如何测试呢？解决：可以通过模拟数据生成器，通过一定规则 （API文档）生成模拟数据接口, 提供给前端人员进行测试。2.什么是Mock.js?官网：http://mockjs.com/Mock.js 是用于生成随机数据，拦截 Ajax 请求。(通过拦截 Ajax 请求，根据数据模板生成并返回模拟..

Restful 架构: 通过HTTP请求方式(GET/POST/PUT/DELETE...)来区分对资源CRUD（增删查改）操作，请求资源 URI 是 /资源名称/资源标识对比传统方式与 Restful 方式定义接口： 传统 Restful 列表查询 getMemberList member/list --- GET 查询 getMem.

传统系统架构：前端工程师负责编写HTML页面，完成前端页面设计。 后端工程师使用模板技术将HTML页面代码转换为 JSP页面，同时内嵌后端代码 (如Java）前后端强依赖，后端必须要等前端的HTML开发好才能套转换成JSP。如果需求变更，前端HTML要改，后端JSP也要跟着变, 这是件紧紧牵绊的事，使得开发效率降低。 ​​​产品交付时，要将前后端代码全部进行打包，部署到同一服务器上，或者进行简单的动静态分离部署。前后端分离架构：前后端约定好API接口&数据&amp...