ruoyi前後端分離版：新增新頁面，不需登入也可訪問

阿新 • • 發佈：2022-04-09

新增QRcode頁面程式碼

<template>
  <div class="register">
    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
      <h3 class="title">花神引後臺管理系統</h3>
      <el-form-item>
        <div class="text" >使用QQ/支付寶/釘釘掃碼快速登入</div 
>
        <div class="QRcode">
        <img  src="../assets/images/QRcode.png">
        </div>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>登入視為您已同意
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-link</span> <span class="token attr-name">:underline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>12px</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://terms.aliyun.com/legal-agreement/terms/suit_bu1_ali_cloud/suit_bu1_ali_cloud201712130944_39600.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>protocol<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        服務條款<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-link</span><span class="token punctuation">&gt;</span></span>,
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-link</span> <span class="token attr-name">:underline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span>  <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>12px</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://terms.aliyun.com/legal-agreement/terms/suit_bu1_ali_cloud/suit_bu1_ali_cloud201902141711_54837.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>protocol<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        隱私政策<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-link</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>  <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span> margin-top: 0px;<span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>其他登入方式<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icons-list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-link</span> <span class="token attr-name">:underline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.cnblogs.com/huashenyin/<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg-icon</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dingtalk anticon<span class="token punctuation">"</span></span> <span class="token attr-name">icon-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dingtalk<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-link</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-link</span> <span class="token attr-name">:underline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.cnblogs.com/huashenyin/<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg-icon</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>WeChat anticon<span class="token punctuation">"</span></span> <span class="token attr-name">icon-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>WeChat<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-link</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-link</span> <span class="token attr-name">:underline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.cnblogs.com/huashenyin/<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg-icon</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alipay anticon<span class="token punctuation">"</span></span> <span class="token attr-name">icon-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alipay<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-link</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-link</span> <span class="token attr-name">:underline</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.cnblogs.com/huashenyin/<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg-icon</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Sina anticon<span class="token punctuation">"</span></span> <span class="token attr-name">icon-class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Sina<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-link</span><span class="token punctuation">&gt;</span></span>

      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>link-type<span class="token punctuation">"</span></span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>/login<span class="token punctuation">'</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>使用已有賬戶登入<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--  底部  --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>el-register-footer<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>Copyright © 2018-2022 huasheyin.link All Rights Reserved.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
 

</div>
</template>
<script>
import { getCodeImg, register } from "@/api/login";
export default {
name: "Register",
data() {
const equalToPassword = (rule, value, callback) => {
if (this.registerForm.password ! value) {
callback(new Error("兩次輸入的密碼不一致"));
} else {
callback();
}
};
return {
codeUrl
 
: "",
registerForm: {
username: "",
password: "",
confirmPassword: "",
code: "",
uuid: ""
},
registerRules: {
username: [
{ required: true, trigger: "blur", message: "請輸入您的賬號" },
{ min: 2, max: 20, message: '使用者賬號長度必須介於 2 和 20 之間', trigger: 'blur' }
],
password: [
{ required: true, trigger: "blur", message: "請輸入您的密碼" },
{ min: 5, max: 20, message: '使用者密碼長度必須介於 5 和 20 之間', trigger: 'blur' }
],
confirmPassword: [
{ required: true, trigger: "blur", message: "請再次輸入您的密碼" },
{ required: true, validator: equalToPassword, trigger: "blur" }
],
code: [{ required: true, trigger: "change", message: "請輸入驗證碼" }]
},
loading: false,
captchaOnOff: false
};
},
created() {
this.getCode();
},
methods: {
getCode() {
getCodeImg().then(res => {
this.captchaOnOff = res.captchaOnOff = undefined ? true : res.captchaOnOff;
if (this.captchaOnOff) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.registerForm.uuid = res.uuid;
}
});
},
handleRegister() {
this.\(refs<span class="token punctuation">.</span>registerForm<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token parameter">valid</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>valid<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
          <span class="token function">register</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>registerForm<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">const</span> username <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>registerForm<span class="token punctuation">.</span>username<span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">\)alert("<font color='red'>恭喜你，您的賬號 " + username + " 註冊成功！</font>", '系統提示', {
dangerouslyUseHTMLString: true,
type: 'success'
}).then(() => {
this.$router.push("/login");
}).catch(() => {});
}).catch(() => {
this.loading = false;
if (this.captchaOnOff) {
this.getCode();
}
})
}
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.text{
font-size: 12px;
text-align: center;
}
.register {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
}
.register-form {
border-radius: 6px;
background: rgba(255, 255, 255, .3);
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.register-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.register-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-register-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.register-code-img {
height: 38px;
}
.QRcode{
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

img {
width: 50%;
}
}
.icons-list {
.anticon{
font-size: 30px;
width: 40px;
}
.dingtalk{
color: #0089FF;
}
.WeChat{
color: #51C332;
}
.Alipay{
color: #06B4FD;
}
.Sina{
color: #D81E06;
}
}
</style>

在登入頁面加頁面連結

        <div  style="float: right;line-height: 30px" >
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>link-type<span class="token punctuation">"</span></span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>/QRcode<span class="token punctuation">'</span><span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>二維碼登入<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

路由（/src/router/index.js）

  {
    path: '/QRcode',
    component: () => import('@/views/QRcode'),
    hidden: true
  },

白名單(/src/permission.js)

/*白名單，新增後可不必登入訪問*/
const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/QRcode']

結果

ruoyi前後端分離版：新增新頁面，不需登入也可訪問

新增QRcode頁面程式碼 <template> <div class=\"register\"> <el-form ref=\"registerForm\" :model=\"registerForm\" :rules=\"registerRules\" class=\"register-form\">

若依前後端分離版原始碼分析-前端頭像上傳後傳遞到後臺以及在伺服器上儲存和資料庫儲存設計

場景使用若依前後端分離版本時，分析其頭像上傳機制。可作為續參考學習。

若依前後端分離版怎樣修改主頁面和瀏覽器上的圖示和標題

場景使用若依的前後端分離版，，其預設的圖示和標題等如下如果想要修改為自己想要的標題和圖示，實現類似下面的效果

若依管理系統前後端分離版基於ElementUI和SpringBoot怎樣實現Excel匯入和匯出

場景使用若依前後端分離版實現Excel的匯入和匯出。前端:Vue+ElementUI 後端:SpringBoot+POI+Mysql

若依前後端分離版手把手教你本地搭建環境並執行專案

場景 RuoYi-Vue是一款基於SpringBoot+Vue的前後端分離極速後臺開發框架。 RuoYi 官網地址：http://ruoyi.vipRuoYi 線上文件：http://doc.ruoyi.vipRuoYi 原始碼下載：https://gitee.com/y_project/RuoYi-VueRuoYi 線

Steam客戶端測試版更新新增新的下載頁面和儲存管理

Steam客戶端測試版上線了新的更新，並且V社還表示會有更棒的東西：下載頁面將得到了改進。但真正的好改進是新的儲存管理器，這可以讓玩家看到遊戲安裝在了哪個盤中，並讓玩家能輕鬆地在盤區之間移動遊戲。

webpack 前後端分離開發介面除錯解決方案，proxyTable解決方案

如果你有單獨的後端開發伺服器 API，並且希望在同域名下發送 API 請求，那麼代理某些 URL 會很有用。dev-server 使用了非常強大的 http-proxy-middleware 包。更多高階用法，請查閱其文件。

系統架構：Web應用架構的新趨勢前後端分離的想法

最近研究servlet，看書時候書裡講到了c/s架構到b/s架構的演變，講servlet的書都很老了，現在的b/s架構已經不是幾年前的b/s架構，其實b/s架構就是web應用開發，對於這樣的架構我們現在應該考慮的是前端和後

面試官：你們前後端分離的介面規範是什麼？

1. 前言隨著網際網路的高速發展，前端頁面的展示、互動體驗越來越靈活、炫麗，響應體驗也要求越來越高，後端服務的高併發、高可用、高效能、高擴充套件等特性的要求也愈加苛刻，從而導致前後端研發各自專注於自己擅

Django學習筆記（12）基於前後端分離模式-新增用例介面實現

Django之前學習的的都是實現前後的不分離式的，Django也可以實現前後端分離式的開發，即檢視中不使用render返回渲染的html頁面，而是改用JsonResponse返回json字串

深度作業系統 V20（1003）內測版招募：新增手機助手，支援安卓和 iOS 端，管理手機應用、檔案

9月28日訊息深度作業系統今天釋出深度作業系統 20（1003）內測活動招募說明，獲悉，本次作業系統將新增手機助手，支援安卓和iOS端，方便管理手機應用、檔案等。

認證和授權學習6：前後端分離狀態下使用springsecurity

認證和授權學習6：前後端分離狀態下使用springsecurity 本文使用的springboot版本是2.1.3.RELEASE

前後端分離：使用 token 登入解決方案

這篇文章寫一下前後端分離下的登入解決方案，目前大多數都採用請求頭攜帶 Token 的形式。

Django：前後端分離專案，解決前端跨域訪問

技術標籤：PythonDjango後端djangopython 前端訪問後端介面，出現上述錯誤。感謝：https://www.cnblogs.com/achai222/p/14001278.html

Keep三面：如何用Spring Security實現前後端分離？

前言 Spring Security網路上很多前後端分離的示例很多都不是完全的前後分離，而且大家實現的方式各不相同，有的是靠自己寫攔截器去自己校驗許可權的，有的頁面是使用themleaf來實現的不是真正的前後分離，看的越多對

聯想小新平板推送安卓 11 嚐鮮版：新增全域性橫屏功能

6 月 23 日訊息今日，聯想小新官方表示，6 月 24 日 10:00，小新平板 ZUI 12.5 正式開啟推送。

淺析前後端分離架構下的API安全問題：JWT保證token不被盜用的方案（即如何防範Replay Attacks）

　　前後端分離架構帶來的好處一搜一大堆，這裡主要討論一下後端介面的安全問題。因為在分離的情況下，後端 api 是暴露在外網中的，常規的web專案無論如何前端都是要通過公網訪問到後臺api的，帶來的隱患也有很多。

自動化測試平臺開發（四）：django+vue打造前後端分離的專案時，跨域問題的解決

一、後端配置安裝django-cors-headers pip install django-cors-headers 配置setting.py # 安裝app

華為 Mate 40 Pro 手機推送鴻蒙 HarmonyOS 2.0.0.222 內測版：大小 1.66GB，輔助新增“長輩關懷”，還有一系列新特性

感謝網友 HlandJinLi、Mr丶蘇的線索投遞！

關於新的技術選型 Sanic/Docker/vue3/elementui 的非同步高併發前後端分離服務框架學習指南

0x00 前言說明隨著技術慢慢提高，最近打算對我的技術棧進行一下升級，原有的技術棧是這樣的：

ruoyi前後端分離版：新增新頁面，不需登入也可訪問

相關推薦