vue-admin-template入门详解(后端springboot+sprngsecurity+jwt+redis)

vscode插件

在这里插入图片描述


clone 项目

地址:https://github.com/PanJiaChen/vue-admin-template

我们这里不讲vue-element-admin,讲的是vue-admin-template

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


配置跨域

跨域配置分为两种,一种是cors方式在 vue-config.js 配置 proxy 代理,另外一种是通过 nginx 配置反向代理,这里我们用第一种,第二种 nginx 我还不会

在这里插入图片描述
在这里插入图片描述
Proxy

  proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API, // 你请求的第三方接口
        changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          // 路径重写,
          '^/api': '' // 替换target中的请求地址
        }
      }
    }

      
      
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述

# just a flag
ENV = 'development'

base api

VUE_APP_BASE_API = ‘/dev-api’

VUE_APP_BASE_API = ‘http://localhost:8080’

npm 启动端口号

port = 9528

vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,

to control whether the babel-plugin-dynamic-import-node plugin is enabled.

It only does one thing by converting all import() to require().

This configuration can significantly increase the speed of hot updates,

when you have a large number of pages.

Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js

VUE_CLI_BABEL_TRANSPILE_MODULES = true

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
跨域配置完了

 
 
  • 1

后端接口

我们这里的后端是java,使用的框架是springboot+springsecurity+jwt+redis
在这里插入图片描述
如果你的后台跟我一样,继续往下看,登陆的时候可能会出现一个问题

参考博客: https://blog.csdn.net/qq_42977003/article/details/106016161


前后端分离登陆

因为之前我写请求的时候是直接把请求写在页面里面,请求和响应都是在一起,但是 vue-admin-template 对axios做了封装,例如我们这里的登陆请求是写在store里面的,页面调store的登陆,store调api的登陆请求,同时还有对请求和响应的拦截

request.js

在这里插入图片描述
在这里插入图片描述

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent

<span class="token keyword">if</span> <span class="token punctuation">(</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>token<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
  <span class="token comment">// let each request carry token</span>
  <span class="token comment">// ['X-Token'] is a custom headers key</span>
  <span class="token comment">// please modify it according to the actual situation</span>
  <span class="token comment">// config.headers['X-Token'] = getToken()</span>
  config<span class="token punctuation">.</span>headers<span class="token punctuation">[</span><span class="token string">'Authorization'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> <span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> config

},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)

// response interceptor
service.interceptors.response.use(
/**

  • If you want to get http information such as headers or status
  • Please return response => response
    */

/**

  • Determine the request status by custom code
  • Here is just an example
  • You can also judge the status by HTTP Status Code
    */
    response => {
    const res = response.data
<span class="token comment">// if the custom code is not 20000, it is judged as an error.</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">!=</span><span class="token operator">=</span> <span class="token number">203</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">202</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token function">Message</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
      message<span class="token operator">:</span> res<span class="token punctuation">.</span>message <span class="token operator">||</span> <span class="token string">'Error'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'error'</span><span class="token punctuation">,</span>
      duration<span class="token operator">:</span> <span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1000</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">201</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token function">Message</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
      message<span class="token operator">:</span> res<span class="token punctuation">.</span>message <span class="token operator">||</span> <span class="token string">'Error'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'error'</span><span class="token punctuation">,</span>
      duration<span class="token operator">:</span> <span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1000</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">204</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token function">Message</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
      message<span class="token operator">:</span> res<span class="token punctuation">.</span>message <span class="token operator">||</span> <span class="token string">'Error'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'error'</span><span class="token punctuation">,</span>
      duration<span class="token operator">:</span> <span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1000</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>code <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">205</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// to re-login</span>
    MessageBox<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'You have been logged out, you can cancel to stay on this page, or log in again'</span><span class="token punctuation">,</span> <span class="token string">'Confirm logout'</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span>
      confirmButtonText<span class="token operator">:</span> <span class="token string">'Re-Login'</span><span class="token punctuation">,</span>
      cancelButtonText<span class="token operator">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'warning'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{<!-- --></span>
      store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'user/resetToken'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{<!-- --></span>
        location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>message <span class="token operator">||</span> <span class="token string">'Error'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
  <span class="token keyword">return</span> res
<span class="token punctuation">}</span>

},
error => {
console.log(‘err’ + error) // for debug
Message({
message: error.message,
type: ‘error’,
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104

api的user.js
在这里插入图片描述
stored下的mosdules下的user.js
在这里插入图片描述
view下的login下的index.vue
在这里插入图片描述
基本上登陆要的东西都准备好了测试看看

在这里插入图片描述
看到这张图,不难发现一套流程虽然执行下来了,但是页面没跳转,又出现10个vue warn,心态炸了,我在网上找原因,没找到,如果有大佬知道怎么回事可以在下面评论区说一下!


前后端分离登陆二

之后用了另外一种方式在这里就要感谢一下知乎的一个作者了

博客地址: https://zhuanlan.zhihu.com/p/36148502

我们修改的是store下的modules下的user.js

import { login } from '@/api/user'
import { getToken, setToken } from '@/utils/auth'
const user = {

state: {
token: getToken(),
name: ‘’,
avatar: ‘’
},

mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
}
},

actions: {
// 登录
Login({ commit }, userInfo) {
return new Promise((resolve, reject) => {
login(userInfo)
.then(response => {
console.log(‘store’)
const tokenValue = response.jwtToken
setToken(tokenValue)
commit(‘SET_TOKEN’, tokenValue)
resolve()
})
.catch(error => {
reject(error)
})
})
}
}
}
export default user

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

views下的login下的index.vue请求
在这里插入图片描述

    handleLogin() {
      const _this = this
      _this.$refs.loginForm.validate(valid => {
        if (valid) {
          _this.loading = true
          _this.$store
            .dispatch('Login', this.loginForm)
            .then(() => {
              _this.loading = false
              console.log('login')
              _this.$router.push({ path: this.redirect || '/' })
            })
            .catch((msg) => {
              _this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

在这里插入图片描述
在这里插入图片描述


总结

到这我们就告一段落,希望对您有帮助


  • 点赞 3
  • 评论 1
  • 分享
    x

    海报分享

    扫一扫,分享海报

  • 收藏 10
  • 打赏

    打赏

    自&如

    你的鼓励将是我创作的最大动力

    C币 余额
    ¥2 ¥4 ¥6 ¥10 ¥20 ¥50

    您的余额不足,请先充值哦~去充值

  • 举报
  • 关注
  • 一键三连

<div style="color:#444444;">
	适用人群

&lt;p style="color:#666666;"&gt;
	所有的IT从业者,尤其适合快速掌握新技术,快速增长工作经验人群,对教育公平,教育公益,教育爱心公益人士
&lt;/p&gt;

</div>
<p>
</p>
课程概述

&lt;p&gt;
	该互联网实战项目是基于&nbsp;Spring&nbsp;Boot&nbsp;2<em>+</em>&nbsp;Spring<em>Security</em>5<em>+</em>Element&nbsp;UI<em>+</em><em>Vue</em>&nbsp;<em>Admin</em>&nbsp;<em>Template</em><em>+</em>蚂蚁可视化AntV&nbsp;等技术栈开发的项目,采用分布式,多模块,前<em>后端</em>分离开发。包括图形展示、权限管理、用户管理等功能。&lt;br /&gt;

后端技术】<br />
技术 说明<br />
Spring Boot2 MVC框架 开发的一站式解决方案<br />
Spring Security5  认证和授权框架<br />
MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架<br />
MyBatisCode工具 生成 MyBatis 相关代码<br />
Jackson 提供了处理 JSON 数据的工具<br />
Lombok 简化对象封装工具 <br />
Druid   数据库连接池 <br />
【前端技术】<br />
Vue        互联网最火的前端框架<br />
Vue Router 路由框架<br />
Vuex 全局状态管理框架<br />
Axios 前端 HTTP 框架<br />
Element UI 前端 UI 框架<br />
Vue Element Admin 前端模板<br />
Antv  蚂蚁金服可视化技术,阿里巴巴可视化技术,天猫,淘宝,支付宝,花呗均使用AntV<br />
【开发工具】<br />
IntelliJ IDEA 开发 IDE<br />
SQLyog 数据库连接客户端<br />
Postman HTTP 请求工具<br />
【开发环境】<br />
工具 版本<br />
JDK 1.8
</p>
<p>
MySQL 5.7
</p>
<p>
<img src=“https://img-bss.csdn.net/202004100922276928.png” alt="" /><img src=“https://img-bss.csdn.net/202004100922434479.png” alt="" /><img src=“https://img-bss.csdn.net/202004100922566924.png” alt="" /><img src=“https://img-bss.csdn.net/202004100923062693.png” alt="" /></p>
<p>
<br /></p>
<p>
<br /></p>

vue - admin - templateSpringBoot后端接口请求数据示例代码; vue - admin - templateSpringBoot后端接口请求数据示例代码
  <textarea class="comment-content" name="comment_content" id="comment_content" placeholder="优质评论可以帮助作者获得更高权重" maxlength="1000"></textarea>
		<div class="comment-emoticon"><img class="comment-emoticon-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/emoticon.png" alt="表情包"></div> 
  <span class="comment-emoticon-tip">插入表情</span>
  <div class="comment-emoticon-box" style="display: none;">
    <div class="comment-emoticon-img-box">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:001.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/001.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:002.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/002.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:003.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/003.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:004.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/004.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:005.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/005.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:006.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/006.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:007.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/007.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:008.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/008.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:009.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/009.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:010.png[/face]" src="https://i-blog.csdnimg.cn/blog_migrate/9d0266bfaa3e93ba4dd8f71b58fc2d57.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:011.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/011.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:012.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/012.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:013.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/013.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:014.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/014.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:015.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/015.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:016.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/016.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:017.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/017.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:018.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/018.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:019.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/019.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:020.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/020.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:021.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/021.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:022.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/022.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:023.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/023.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:024.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/024.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:025.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/025.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:026.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/026.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:027.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/027.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:028.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/028.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:029.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/029.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:030.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/030.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:031.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/031.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:032.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/032.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:033.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/033.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:034.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/034.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:035.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/035.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:036.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/036.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:037.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/037.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:038.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/038.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:039.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/039.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:040.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/040.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:041.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/041.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:042.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/042.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:043.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/043.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:044.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/044.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:045.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/045.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:046.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/046.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:047.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/047.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:048.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/048.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:049.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/049.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:050.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/050.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:051.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/051.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:052.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/052.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:053.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/053.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:054.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/054.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:055.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/055.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:056.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/056.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:057.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/057.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:058.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/058.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:059.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/059.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:060.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/060.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:061.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/061.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:062.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/062.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:063.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/063.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:064.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/064.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:065.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/065.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:066.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/066.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:067.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/067.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:068.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/068.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:069.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/069.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:070.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/070.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:071.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/071.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]emoji:072.png[/face]" src="https://g.csdnimg.cn/static/face/emoji/072.png">
    </div>
  </div>
  <div class="opt-box">
			<div id="ubbtools" class="add_code">
				<a href="#insertcode" code="code" target="_self"><i class="icon iconfont icon-daima"></i></a>
			</div>
			<input type="hidden" id="comment_replyId" name="comment_replyId">
			<input type="hidden" id="article_id" name="article_id" value="106042557">
			<input type="hidden" id="comment_userId" name="comment_userId" value="">
			<input type="hidden" id="commentId" name="commentId" value="">
			<div class="dropdown" id="myDrap">
				<a class="dropdown-face d-flex align-items-center" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
					<div class="txt-selected text-truncate">添加代码片</div>
					<svg class="icon d-block" width="200px" height="100.00px" viewBox="0 0 2048 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M597.33333292 298.666667h853.333334L1023.99999992 725.333333 597.33333292 298.666667z"></path></svg>
				</a>
				<ul class="dropdown-menu" id="commentCode" aria-labelledby="drop4">
					<li><a data-code="html">HTML/XML</a></li>
					<li><a data-code="objc">objective-c</a></li>
					<li><a data-code="ruby">Ruby</a></li>
					<li><a data-code="php">PHP</a></li>
					<li><a data-code="csharp">C</a></li>
					<li><a data-code="cpp">C++</a></li>
					<li><a data-code="javascript">JavaScript</a></li>
					<li><a data-code="python">Python</a></li>
					<li><a data-code="java">Java</a></li>
					<li><a data-code="css">CSS</a></li>
					<li><a data-code="sql">SQL</a></li>
					<li><a data-code="plain">其它</a></li>
				</ul>
			</div>
			<div class="right-box" id="rightBox" data-type="2">
						<span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span>
						<a data-report-click="{&quot;mod&quot;:&quot;1582594662_003&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4227&quot;,&quot;ab&quot;:&quot;new&quot;}"><input type="submit" class="btn btn-sm btn-comment" value="发表评论"></a>
			</div>
		</div>
	</form>
	<input type="button" class="bt-comment-show" value="评论">
</div>
<div class="comment-list-container" style="display: block;">
	<a id="comments"></a>
	<div class="comment-list-box"><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="16337118" data-replyname="weixin_43585245"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/weixin_43585245"><img src="https://profile.csdnimg.cn/1/9/6/3_weixin_43585245" username="weixin_43585245" alt="weixin_43585245" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a target="_blank" href="https://blog.csdn.net/weixin_43585245"><span class="name ">weixin_43585245</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">时隔整整一年,我今天也在干这个了<img src="//g.csdnimg.cn/static/face/emoji/010.png" alt="表情包"></span><span class="date" title="2021-05-10 18:21:43">11 天前</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="16337118"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul></div>
	<div id="commentPage" class="pagination-box d-none" style="display: block;"><div id="Paging_0686590698820668" class="ui-paging-container"><ul><li class="js-page-first js-page-action ui-pager ui-pager-disabled"></li><li class="js-page-prev js-page-action ui-pager ui-pager-disabled">&lt;</li><li data-page="1" class="ui-pager focus">1</li><li class="js-page-next js-page-action ui-pager ui-pager-disabled">&gt;</li><li class="js-page-last js-page-action ui-pager ui-pager-disabled"></li></ul></div></div>
	
</div>
相关推荐
基于 Vue - admin - template + SpringCloud +SpringAlibaba +...
5-10
基于 Vue - admin - template + SpringCloud +SpringAlibaba +Spring Security 搭建的权限框架 系统采用现在最流行的微服务架构,SpringCloud +SpringAlibaba搭建,使用nacos作为注册中心,配置中心, 使用gateway作为网关,采用sentinel作为断路器。OpenFeign服务...
... Vue的个人博客系统12——使用 vue - admin - template展...
5-4
3、可见 vue - admin - template 给我们提供了一些常见的例子,我们这里只做文章管理部分,下面修改一下路由@/router/index.js import Vuefrom' vue'importRouterfrom' vue -router' Vue.use (Router )/* Layout */importLayoutfrom'@/layout'export...
一个基于 vue - admin - template的hexo博客后台管理,项目采用 SpringBoot Vue开发
主要介绍了 详解使用 vue - admin - template的优化历程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
vue - admin - template 4.0 + 设置baseUrl 使用 springboot...
5-12
vue - admin - template 4.0 + 设置baseUrl 使用 springboot 后端数据 2020年5月 坑货,折腾了我不少时间,网上全是之前俩版本的设置方法。 第一个版本: 项目内有个 config 包,里面有对应的 dev 和 pro 俩环境的设置方法,里面地址用的...
SpringBoot + Vue后端分离,使用Spring Security完美处理...
4-24
2.role是角色表,name字段表示角色的英文名称,按照Spring Security的规范,将以ROLE_开始,nameZh字段表示角色的中文名称。 3.menu表是一个资源表,该表涉及到的字段有点多,由于我的前端采用了 Vue来做,因此当用户登录成功之后,系统将根据用...
主要介绍了 SpringBoot + Vue后端分离,使用Spring Security完美处理权限问题,需要的朋友可以参考下
1、整体效果

2、目录分析
一、目录结构

二、配置信息

vue.config.js

这里面配置了项目的基本信息: 所使用的环境、端口号、对外路径、输入文件路径等信息 , 可以看到我们使用的dev开发环境,下面将查看开发环境的配置
const port = process.env.port || process.env.npm_config_port || 9528 // dev port

// All configuration item explanations can be find i


SpringBoot + Vue后端分离,使用Spring Security完美处理...
4-23
2.role是角色表,name字段表示角色的英文名称,按照Spring Security的规范,将以ROLE_开始,nameZh字段表示角色的中文名称。 3.menu表是一个资源表,该表涉及到的字段有点多,由于我的前端采用了 Vue来做,因此当用户登录成功之后,系统将根据用...
Springboot + Vue】做一个权限管理后台 ():项目介绍...
4-29
Springboot + Vue】系列采用了目前比较主流的 后端框架—— SpringBoot,前端采用前端三大框架之一的 Vue.js,本系列文章将教大家 入门Web开发,了解前 后端分离的结构。本系列文章适合具有一定JavaSE基础与JS基础的胖友 (能看懂代码 )。我将尽量还原...
文章目录 Vue学习笔记(一)初步印象子模块main.jsApp. vuerouter总结参考 Vue学习笔记(一)

学习vue-admin-template
https://github.com/PanJiaChen/vue-admin-template

初步印象
src目录如下
.
├── App.vue
├── api
├── assets
├── components
├── icons



vue管理模板 English | 具有Element UI,axios,iconfont,权限控制和lint的最小 vue管理员模板 现场演示: : 当前版本是在 vue -cli上构建的v4.0 + 。 如果要使用旧版本,可以将分支切换到 ,它不依赖于 vue -cli 构建设置 # clone the project git clone https://github.com/PanJiaChen/ vue - admin - template.git # enter the project directory cd vue - admin - template # install dependency npm install # develop npm run dev 这将自动打开 建造 # build for test environment npm run build:stage # build for
tp和 vue 管理后台管理系统_Spring Boot + Security +Red...
5-3
一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring SecurityRedisVue的前 后端分离的后台管理系统,项目采用分模块开发方式, 权限控制采用 RBAC,支持数据字典与数据权限管理,支持一键生成前 后端代码,支持动态路由!
忙乎了一天才改好,前端0基础还让我做这个,难顶,记录下备忘吧。 1.修改.env.development

2.修改vue.config.js

3.修改src/utils/request.js
可以修改code状态码,改为自己的,简单点直接全部注释掉,留个return res;即可。

修改main.js
注释掉图中内容,可以全部注释掉不用mock的假数据,但要自己在后台写登录的几个方法,有点麻…


vue - admin - template前端页面开发框架,你可以把 vue -element - admin当做工具箱或者集成方案仓库,在 vue - admin - template 的基础上进行二次开发,想要什么功能或者组件就去 vue -element - admin 那里复制过来。在开发后台管理项目时,多用户多角色不同权限的场景可以说是非常普遍的。从零开始手写一个后台,要考虑的东西很多,这里直接拿网上大家比较熟悉的 vue - admin - template后台模版来进行改造。
vue - admin - template 极简后台模板以及 vue -element - admin后台集成环境
当前 后端分离时,权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5 -6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外,原本计划把项目跑起来放到网
springboot整合 securityvue 文章目录 springboot整合 securityvue1. security参考资料2. springboot整合 security要点2.1获取登录用户信息2.2自定义登入登出url2.3自定义Handler返回json2.4记住我功能2.5验证码功能2.6限制登录次数2.7密码加密2.8后台提供接口,返回前端json,整合 vue做前端登入登出3.测...
遇天坑,就填坑前端: vue -element - admin的坑 前端: vue -element - admin的坑 从大神这里下载了https://github.com/PanJiaChen/ vue - admin - template模板(适合二次开发),第一步:npm install 就遇到了第一个坑。

错误大致就是:XXXXXgit ls-remote -h -t ssh://git@github.com/…


基于 vue - admin - template + SpringBoot + JWT实现登录 1、实现的具体步骤如下图,可能会有版本差异,但是大致相同如果需要帮助可以联系我扣扣号(3421793724)

2、具体实现代码(有改动)上面图片使用的是固定的,没有和数据库进行连接,实现动态认证。
代码如下(后端):
第一步:引入依赖
<dependencies>
<!-- JWT-->
<dependency>
<groupId>io.jsonw


vue - admin - template简介 前 后端分离开发模式越来越受开发人员的喜爱,开源项目 vue - admin - template 是一个后台前端解决方案,它基于 vue 和 element -ui实现。更多详情请阅读 vue - template - admin官网, vue - admin - template项目是其基础模板,本文基于 vue - admin - template实现与 SpringBoot的整合 SpringBoot整合 vue - admin - template




Vue框架 vue - admin - template登陆问题解决
valuenet - admin前端基于 vue - admin - template模板、 后端基于 SpringBoot开发、前 后端分离 有部分细节还未完善 账号密码( admin\123)
首先做好准备工作,建好前 后端项目,配置好。可参考https://segmentfault.com/a/1190000014211773?utm_source=tag -newest

前端:

1.发送登录请求,将后台返回的token保存进sessionStorage。

Login.vue

<template>
<el-row :gutter=“20”>
<el-col :span=“12” :offset=“6”><div cla…


©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页
Logo

前往低代码交流专区

更多推荐