Vue.js使用$.ajax和vue-resource實現(xiàn)OAuth的注冊、登錄、注銷和API調(diào)用
概述
上一篇我們介紹了如何使用vue resource處理HTTP請求，結(jié)合服務(wù)端的REST API，就能夠很容易地構(gòu)建一個增刪查改應(yīng)用。
這個應(yīng)用始終遺留了一個問題，Web App在訪問REST API時，沒有經(jīng)過任何認證，這使得服務(wù)端的REST API是不安全的，只要有人知道api地址，就可以調(diào)用API對服務(wù)端的資源進行修改和刪除。
今天我們就來探討一下如何結(jié)合Web API來限制資源的訪問。
本文的主要內(nèi)容如下：
- 介紹傳統(tǒng)的Web應(yīng)用和基于REST服務(wù)的Web應(yīng)用
- 介紹OAuth認證流程和密碼模式
- 創(chuàng)建一個基于ASP.NET Identity的Web API應(yīng)用程序
- 基于$.ajax實現(xiàn)OAuth的注冊、登錄、注銷和API調(diào)用
- 基于vue-resource實現(xiàn)OAuth的注冊、登錄、注銷和API調(diào)用
本文的最終示例是結(jié)合上一篇的CURD，本文的登錄、注冊、注銷和API調(diào)用功能實現(xiàn)的。
本文9個示例的源碼已放到GitHub：https://github.com/keepfool/vue-tutorials/tree/master/04.OAuth
OAuth介紹
傳統(tǒng)的Web應(yīng)用
在傳統(tǒng)的Web應(yīng)用程序中，前后端是放在一個站點下的，我們可以通過會話（Session）來保存用戶的信息。
例如：一個簡單的ASP.NET MVC應(yīng)用程序，用戶登錄成功后，我們將用戶的ID記錄在Session中，假設(shè)為Session["UserID"]。
前端發(fā)送ajax請求時，如果這個請求要求已登錄的用戶才能訪問，我們只需在后臺Controller中驗證Session["UserID"]是否為空，就可以判斷用戶是否已經(jīng)登錄了。
這也是傳統(tǒng)的Web應(yīng)用能夠逃避HTTP面向無連接的方法。
基于REST服務(wù)的Web應(yīng)用
當(dāng)今很多應(yīng)用，客戶端和服務(wù)端是分離的，服務(wù)端是基于REST風(fēng)格構(gòu)建的一套Service，客戶端是第三方的Web應(yīng)用，客戶端通過跨域的ajax請求獲取REST服務(wù)的資源。
然而REST Service通常是被設(shè)計為無狀態(tài)的（Stateless），這意味著我們不能依賴于Session來保存用戶信息，也不能使用Session["UserID"]這種方式確定用戶身份。
解決這個問題的方法是什么呢？常規(guī)的方法是使用OAuth 2.0。
對于用戶相關(guān)的OpenAPI，為了保護用戶數(shù)據(jù)的安全和隱私，第三方Web應(yīng)用訪問用戶數(shù)據(jù)前都需要顯式的向用戶征求授權(quán)。
相比于OAuth 1.0，OAuth 2.0的認證流程更加簡單。
專用名詞介紹
在了解OAuth 2.0之前，我們先了解幾個名詞：
- Resource：資源，和REST中的資源概念一致，有些資源是訪問受保護的
- Resource Server：存放資源的服務(wù)器
- Resource Owner：資源所有者，本文中又稱為用戶(user)
- User Agent：用戶代理，即瀏覽器
- Client： 訪問資源的客戶端，也就是應(yīng)用程序
- Authorization Server：認證服務(wù)器，用于給Client提供訪問令牌的服務(wù)器
- Access Token：訪問資源的令牌，由Authorization Server器授予，Client訪問Resource時，需提供Access Token
- Bearer Token：Bearer Token是Access Token的一種，另一種是Mac Token。
- Bearer Token的使用格式為：Bearer XXXXXXXX
Token的類型請參考：https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-7.1
有時候認證服務(wù)器和資源服務(wù)器可以是一臺服務(wù)器，本文中的Web API示例正是這種運用場景。
OAuth認證流程
在知道這幾個詞以后，我們用這幾個名詞來編個故事。
簡化版本
這個故事的簡化版本是：用戶(Resource Owner)訪問資源(Resource)。
具體版本
簡化版的故事只有一個結(jié)果，下面是這個故事的具體版本：
- 用戶通過瀏覽器打開客戶端后，客戶端要求用戶給予授權(quán)。
- 客戶端可以直接將授權(quán)請求發(fā)給用戶（如圖所示），或者發(fā)送給一個中間媒介，比如認證服務(wù)器。
- 用戶同意給予客戶端授權(quán)，客戶端收到用戶的授權(quán)。
- 授權(quán)模式(Grant Type)取決于客戶端使用的模式，以及認證服務(wù)器所支持的模式。
- 客戶端提供身份信息，然后向認證服務(wù)器發(fā)送請求，申請訪問令牌
- 認證服務(wù)器驗證客戶端提供的身份信息，如果驗證通過，則向客戶端發(fā)放令牌
- 客戶端使用訪問令牌，向資源服務(wù)器請求受保護的資源
- 資源服務(wù)器驗證訪問令牌，如果有效，則向客戶端開放資源
以上幾個步驟，(B)是較為關(guān)鍵的一個，即用戶怎么樣才能給客戶端授權(quán)。有了這個授權(quán)以后，客戶端就可以獲取令牌，進而通過臨牌獲取資源。這也是OAuth 2.0的運行流程，詳情請參考：https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-1.2
客戶端的授權(quán)模式
客戶端必須得到用戶的授權(quán)（authorization grant），才能獲得令牌（access token）。
OAuth 2.0定義了四種授權(quán)方式：
- 授權(quán)碼模式（authorization code）
- 簡化模式（implicit）
- 密碼模式（resource owner password credentials）
- 客戶端模式（client credentials）
本文的示例是基于密碼模式的，我就只簡單介紹這種模式，其他3我就不介紹了。
密碼模式
密碼模式（Resource Owner Password Credentials Grant）中，用戶向客戶端提供自己的用戶名和密碼?？蛻舳耸褂眠@些信息，向服務(wù)端申請授權(quán)。
在這種模式中，用戶必須把自己的密碼給客戶端，但是客戶端不得儲存密碼。這通常用在用戶對客戶端高度信任的情況下，比如客戶端是操作系統(tǒng)的一部分，或者由一個著名公司出品。
密碼嘛事的執(zhí)行步驟如下：
（A）用戶向客戶端提供用戶名和密碼。
（B）客戶端將用戶名和密碼發(fā)給認證服務(wù)器，向后者請求令牌。
（C）認證服務(wù)器確認無誤后，向客戶端提供訪問令牌。
(B)步驟中，客戶端發(fā)出的HTTP請求，包含以下參數(shù)：
- grant_type：表示授權(quán)類型，此處的值固定為"password"，必選項。
- username：表示用戶名，必選項。
- password：表示用戶的密碼，必選項。
- scope：表示權(quán)限范圍，可選項。
注意：在后面的客戶端示例中，除了提供username和password，grant_type也是必須指定為"password"，否則無法獲取服務(wù)端的授權(quán)。
服務(wù)端環(huán)境準備
如果您是前端開發(fā)人員，并且未接觸過ASP.Net Web API，可以跳過此段落。
Authentication選擇Individual User Accounts
創(chuàng)建這個Web API工程時，VS會自動引入Owin和AspNet.Identity相關(guān)的庫。
修改ValuesController，除了IEnumerable<string> Get()操作外，其他操作都刪除，并為該操作應(yīng)用[Authorize]特性，這表示客戶端必須通過身份驗證后才能調(diào)用該操作。
public class ValuesController : ApiController
{
// GET: api/Values
[Authorize]
public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}
}
添加Model, Controller
初始化數(shù)據(jù)庫
執(zhí)行以下3個命令
CustomersController類有5個Action，除了2個GET請求外，其他3個請求分別是POST, PUT和DELETE。
為這3個請求添加[Authorize]特性，這3個請求必須通過身份驗證才能訪問。
public class CustomersController : ApiController
{
private ApplicationDbContext db = new ApplicationDbContext();
// GET: api/Customers
public IQueryable<Customer> GetCustomers()
{
return db.Customers;
}
// GET: api/Customers/5
[ResponseType(typeof(Customer))]
public async Task<IHttpActionResult> GetCustomer(int id)
{
Customer customer = await db.Customers.FindAsync(id);
if (customer == null)
{
return NotFound();
}
return Ok(customer);
}
// PUT: api/Customers/5
[Authorize]
[ResponseType(typeof(void))]
public async Task<IHttpActionResult> PutCustomer(int id, Customer customer)
{
// ...
}
// POST: api/Customers
[Authorize]
[ResponseType(typeof(Customer))]
public async Task<IHttpActionResult> PostCustomer(Customer customer)
{
// ...
}
// DELETE: api/Customers/5
[ResponseType(typeof(Customer))]
[Authorize]
public async Task<IHttpActionResult> DeleteCustomer(int id)
{
// ...
}
}
讓W(xué)eb API以CamelCase輸出JSON
在Global.asax文件中添加以下幾行代碼：
var formatters = GlobalConfiguration.Configuration.Formatters; var jsonFormatter = formatters.JsonFormatter; var settings = jsonFormatter.SerializerSettings; settings.Formatting = Formatting.Indented; settings.ContractResolver = new CamelCasePropertyNamesContractResolver();
啟用CORS
在Nuget Package Manager Console輸入以下命令:
Install-Package Microsoft.AspNet.WebApi.Cors
在WebApiConfig中啟用CORS：
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
// ...
}
}
類說明
在執(zhí)行上述步驟時，VS已經(jīng)幫我們生成好了一些類
IdentityModels.cs：包含ApplicationDbContext類和ApplicationUser類，無需再創(chuàng)建DbContext類
public class ApplicationUser : IdentityUser
{
// ...
}
public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
{
// ...
}
Startup.Auth.cs：用于配置OAuth的一些屬性。
public partial class Startup
{
public static OAuthAuthorizationServerOptions OAuthOptions { get; private set; }
public static string PublicClientId { get; private set; }
// For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864
public void ConfigureAuth(IAppBuilder app)
{
// ..
// Configure the application for OAuth based flow
PublicClientId = "self";
OAuthOptions = new OAuthAuthorizationServerOptions
{
TokenEndpointPath = new PathString("/Token"),
Provider = new ApplicationOAuthProvider(PublicClientId),
AuthorizeEndpointPath = new PathString("/api/Account/ExternalLogin"),
AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),
// In production mode set AllowInsecureHttp = false
AllowInsecureHttp = true
};
// Enable the application to use bearer tokens to authenticate users
app.UseOAuthBearerTokens(OAuthOptions);
// ..
}
}
這些OAuth配置項，我們只用關(guān)注其中的兩項：
- TokenEndpointPath：表示客戶端發(fā)送驗證請求的地址，例如：Web API的站點為www.example.com，驗證請求的地址則為www.example.com/token。
- UseOAuthBearerTokens：使用Bearer類型的token_type（令牌類型）。
ApplicationOAuthProvider.cs：默認的OAuthProvider實現(xiàn)，GrantResourceOwnerCredentials方法用于驗證用戶身份信息，并返回access_token（訪問令牌）。
public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
// ...
}
通俗地講，客戶端輸入用戶名、密碼，點擊登錄后，會發(fā)起請求到www.example.com/token。
token這個請求在服務(wù)端執(zhí)行的驗證方法是什么呢？正是GrantResourceOwnerCredentials方法。
客戶端發(fā)起驗證請求時，必然是跨域的，token這個請求不屬于任何ApiController的Action，而在WebApiConfig.cs中啟用全局的CORS，只對ApiController有效，對token請求是不起作用的。
所以還需要在GrantResourceOwnerCredentials方法中添加一行代碼：
public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
context.Response.Headers.Add("Access-Control-Allow-Origin", new []{"*"});
// ...
}
IdentityConfig.cs：配置用戶名和密碼的復(fù)雜度，主要用于用戶注冊時。例如：不允許用戶名為純字母和數(shù)字的組合，密碼長度至少為6位…。
public static ApplicationUserManager Create(IdentityFactoryOptions<ApplicationUserManager> options, IOwinContext context)
{
var manager = new ApplicationUserManager(new UserStore<ApplicationUser>(context.Get<ApplicationDbContext>()));
// Configure validation logic for usernames
manager.UserValidator = new UserValidator<ApplicationUser>(manager)
{
AllowOnlyAlphanumericUserNames = false,
RequireUniqueEmail = true
};
// Configure validation logic for passwords
manager.PasswordValidator = new PasswordValidator
{
RequiredLength = 6,
RequireNonLetterOrDigit = true,
RequireDigit = true,
RequireLowercase = true,
RequireUppercase = true,
};
// ...
return manager;
}
使用Postman測試GET和POST請求
測試GET請求
GET請求測試成功，可以獲取到JSON數(shù)據(jù)。
測試POST請求
POST請求測試不通過，提示：驗證不通過，請求被拒絕。
基于$.ajax實現(xiàn)注冊、登錄、注銷和API調(diào)用
服務(wù)端的環(huán)境已經(jīng)準備好了，現(xiàn)在我們就逐個實現(xiàn)用戶注冊、登錄，以及API調(diào)用功能吧。
注冊
頁面的HTML代碼如下：
<div id="app">
<div class="container">
<span id="message">{{ msg }}</span>
</div>
<div class="container">
<div class="form-group">
<label>電子郵箱</label>
<input type="text" v-model="registerModel.email" />
</div>
<div class="form-group">
<label>密碼</label>
<input type="text" v-model="registerModel.password" />
</div>
<div class="form-group">
<label>確認密碼</label>
<input type="text" v-model="registerModel.confirmPassword" />
</div>
<div class="form-group">
<label></label>
<button @click="register">注冊</button>
</div>
</div>
</div>
創(chuàng)建Vue實例，然后基于$.ajax發(fā)送用戶注冊請求：
var demo = new Vue({
el: '#app',
data: {
registerUrl: 'http://localhost:10648/api/Account/Register',
registerModel: {
email: '',
password: '',
confirmPassword: ''
},
msg: ''
},
methods: {
register: function() {
var vm = this
vm.msg = ''
$.ajax({
url: vm.registerUrl,
type: 'POST',
dataType: 'json',
data: vm.registerModel,
success: function() {
vm.msg = '注冊成功！'
},
error: vm.requestError
})
},
requestError: function(xhr, errorType, error) {
this.msg = xhr.responseText
}
}
})
登錄和注銷
登錄的HTML代碼：
<div id="app">
<div class="container text-center">
<span id="message">{{ msg }}</span>
</div>
<div class="container">
<div class="account-info">
<span v-if="userName">{{ userName }} | <a href="#" rel="external nofollow" @click="logout">注銷</a></span>
</div>
</div>
<div class="container">
<div class="form-group">
<label>電子郵箱</label>
<input type="text" v-model="loginModel.username" />
</div>
<div class="form-group">
<label>密碼</label>
<input type="text" v-model="loginModel.password" />
</div>
<div class="form-group">
<label></label>
<button @click="login">登錄</button>
</div>
</div>
</div>
創(chuàng)建Vue實例，然后基于$.ajax發(fā)送用戶登錄請求：
var demo = new Vue({
el: '#app',
data: {
loginUrl: 'http://localhost:10648/token',
logoutUrl: 'http://localhost:10648/api/Account/Logout',
loginModel: {
username: '',
password: '',
grant_type: 'password'
},
msg: '',
userName: ''
},
ready: function() {
this.userName = sessionStorage.getItem('userName')
},
methods: {
login: function() {
var vm = this
vm.msg = ''
vm.result = ''
$.ajax({
url: vm.loginUrl,
type: 'POST',
dataType: 'json',
data: vm.loginModel,
success: function(data) {
vm.msg = '登錄成功！'
vm.userName = data.userName
sessionStorage.setItem('accessToken', data.access_token)
sessionStorage.setItem('userName', vm.userName)
},
error: vm.requestError
})
},
logout: function() {
var vm = this
vm.msg = ''
$.ajax({
url: vm.logoutUrl,
type: 'POST',
dataType: 'json',
success: function(data) {
vm.msg = '注銷成功！'
vm.userName = ''
vm.loginModel.userName = ''
vm.loginModel.password = ''
sessionStorage.removeItem('userName')
sessionStorage.removeItem('accessToken')
},
error: vm.requestError
})
},
requestError: function(xhr, errorType, error) {
this.msg = xhr.responseText
}
}
})
在試驗這個示例時，把Fiddler也打開，我們一共進行了3次操作：
- 第1次操作：輸入了錯誤的密碼，服務(wù)端響應(yīng)400的狀態(tài)碼，并提示了錯誤信息。
- 第2次操作：輸入了正確的用戶名和密碼，服務(wù)端響應(yīng)200的狀態(tài)碼
- 第3次操作：點擊右上角的注銷鏈接
注意第2次操作，在Fiddler中查看服務(wù)端返回的內(nèi)容：
服務(wù)端返回了access_token, expires_in, token_type,userName等信息，在客戶端可以用sessionStorage或localStorage保存access_token。
調(diào)用API
取到了access_token后，我們就可以基于access_token去訪問服務(wù)端受保護的資源了。
這里我們要訪問的資源是/api/Values，它來源于ValuesController的Get操作。
基于注冊畫面，添加一段HTML代碼：
<div class="container text-center">
<div>
<button @click="callApi">調(diào)用API</button>
</div>
<div class="result">
API調(diào)用結(jié)果：{{ result | json }}
</div>
</div>
在Vue實例中添加一個callApi方法：
callApi: function() {
var vm = this
vm.msg = ''
vm.result = ''
headers = {}
headers.Authorization = 'Bearer ' + sessionStorage.getItem('accessToken');
$.ajax({
type: 'get',
dataTye: 'json',
url: vm.apiUrl,
headers: headers,
success: function(data) {
vm.result = data
},
error: vm.requestError
})
}
在調(diào)用callApi方法時，設(shè)置了請求頭的Authorization屬性，其格式為："Bearer access_token"。
由于服務(wù)端指定使用了Bearer類型的access token，所以客戶端必須使用這種格式將access token傳給資源服務(wù)器。
在試驗這個示例時，我們一共進行了5次操作：
- 第1次操作：沒有輸入用戶名和密碼，直接點擊[調(diào)用API]按鈕，服務(wù)端返回401的狀態(tài)碼，表示該請求未授權(quán)。
- 第2次操作：輸入用戶名和密碼，然后店點擊登錄按鈕，登錄成功。
- 第3次操作：點擊[調(diào)用API]按鈕，服務(wù)端返回200的狀態(tài)碼，請求成功。
- 第4次操作：點擊[注銷]鏈接，注銷成功。
- 第5次操作：再次點擊[調(diào)用API]按鈕，服務(wù)端返回401的狀態(tài)碼，表示該請求未授權(quán)。
有人可能會注意到，為什么每次點擊[調(diào)用API]按鈕，都發(fā)起了兩次請求？
這是因為當(dāng)瀏覽器發(fā)送跨域請求時，瀏覽器都會先發(fā)送一個OPTIONS預(yù)請求（preflight request）給目標(biāo)站點，用于確認目標(biāo)站點是否接受跨域請求，如果目標(biāo)站點不支持跨域請求，瀏覽器會提示錯誤：
No 'Access-Control-Allow-Origin' header is present on the requested resource.
如果是POST請求，且數(shù)據(jù)類型(Content-Type)是application/x-www-form-urlencoded,multipart/form-data 或 text/plain中的一種，則瀏覽器不會發(fā)送預(yù)請求，上圖的/token請求就是滿足該條件的。
zepto會自動將非GET請求的Content-Type設(shè)置為application/x-www-form-urlencoded：
if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() != 'GET'))
setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded')
image
我們還是通過Fidder看一下第1次/api/Values請求和響應(yīng)的Headers信息
請求的Headers信息，它是一次OPTIONS請求。
響應(yīng)的Headers信息，Access-Control-Allow-Origin: *表示允許所有外部站點對目標(biāo)站點發(fā)送跨域請求。
更多CORS的知識，請參考MDN上的說明：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
基于vue-resource實現(xiàn)注冊、登錄和API調(diào)用
基于vue-resource實現(xiàn)這3項功能時，沿用上面的HTML代碼。
注冊
更為簡潔的register方法：
register: function() {
this.$http.post(this.registerUrl, this.registerModel)
.then((response) => {
this.msg = '注冊成功！'
}).catch((response) => {
this.msg = response.json()
})
}
注意：當(dāng)使用vue-resource發(fā)送注冊的POST請求時，F(xiàn)iddler捕獲到了2次請求，第1次是由瀏覽器發(fā)送的OPTIONS預(yù)請求，第2次才是實際的POST請求。這和使用$.ajax時是不一樣的，因為$.ajax會將非GET請求的Content-Type設(shè)置為application/x-www-form-urlencoded，而vue-resource發(fā)送POST請求的Content-Type為application/json;charset=UTF-8。
啟用emulateJSON選項，可以讓瀏覽器不發(fā)送OPTIONS預(yù)請求，有兩種啟用方式。
1.全局啟用
Vue.http.options.emulateJSON = true
2.局部啟用
this.$http.post(this.registerUrl, this.registerModel ,{ emulateJSON : true})
.then( (response) => {
this.msg = '注冊成功！'
})
啟用了emulateJSON選項后，使得POST請求的Content-Type變?yōu)閍pplication/x-www-form-urlencoded
登錄和注銷
登錄和注銷的方法：
login: function() {
this.$http.post(this.loginUrl, this.loginModel)
.then((response) => {
var body = response.json()
this.msg = '登錄成功！'
this.userName = body.userName
sessionStorage.setItem('accessToken', body.access_token)
sessionStorage.setItem('userName', body.userName)
}).catch(this.requestError)
},
logout: function() {
this.$http.post(this.logoutUrl)
.then((response) => {
this.msg = '注銷成功！'
this.userName = ''
this.loginModel.username = ''
this.loginModel.password = ''
sessionStorage.removeItem('userName')
sessionStorage.removeItem('accessToken')
}).catch(this.requestError)
},
requestError: function(response) {
this.msg = response.json()
}
API調(diào)用
調(diào)用API的方法也更為簡潔：
callApi: function() {
var headers = {}
headers.Authorization = 'Bearer ' + sessionStorage.getItem('accessToken')
this.$http.get(this.apiUrl, {
headers: headers
})
.then((response) => {
this.result = response.json()
}).catch(this.requestError)
}
同樣的，在發(fā)送請求前，需要將access token添加到請求頭。
綜合示例
本文在準備服務(wù)端環(huán)境的時候，提供了一個CustomersController，除了GET操作，其他操作的訪問都是受保護的，需要用戶登錄以后才能操作。
現(xiàn)在我們來實現(xiàn)這個示例， 該示例結(jié)合了上一篇的CURD示例，以及本文的注冊、登錄、注銷功能。
具體代碼我就不再貼出來了，大家結(jié)合源代碼試一試吧。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
我們在開發(fā) Vue 項目的時候會使用一些前端組件庫,例如 Element、Ant Design 等,這些組件庫雖然方便,但是也有一些缺點,比如內(nèi)置的圖標(biāo)太少,例如我們開發(fā)醫(yī)療、財務(wù)、工程等一些前端項目,內(nèi)置的圖標(biāo)不能滿足我們的需求,所以我們常常在Vue項目中引入SVG圖標(biāo)2024-09-09
Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性
本篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了Vue的Options用法說明，具有很好的參考價值，希望對大家有所2020-08-08
vue3動態(tài)加載組件以及動態(tài)引入組件詳解
?平常的vue項目開發(fā),已經(jīng)很難遇見一千行,甚至幾千行代碼的頁面了,畢竟大家都會去拆分組件,下面這篇文章主要給大家介紹了關(guān)于vue3動態(tài)加載組件以及動態(tài)引入組件的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了Vue項目中引入ESLint插件校驗代碼避免代碼錯誤的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue?element?ui?Select選擇器如何設(shè)置默認狀態(tài)
這篇文章主要介紹了vue?element?ui?Select選擇器如何設(shè)置默認狀態(tài)問題,具有很好的參考價值,希望對大家有所幫助,2023-10-10
vue基于element-china-area-data插件實現(xiàn)省市區(qū)聯(lián)動
省市區(qū)聯(lián)動在日常開發(fā)中用的非常多，本文就介紹一下vue基于element-china-area-data插件實現(xiàn)省市區(qū)聯(lián)動，具有一定的參考價值，感興趣的可以了解一下2022-04-04
詳解vue3+element-plus實現(xiàn)動態(tài)菜單和動態(tài)路由動態(tài)按鈕(前后端分離)
本文需要使用axios,路由,pinia,安裝element-plus,并且本文vue3是基于js而非ts的,這些環(huán)境如何搭建不做描述,需要讀者自己完成,感興趣的朋友跟隨小編一起看看吧2023-11-11
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,分步驟介紹了安裝和使用vue-router的方法,感興趣的朋友跟隨小編一起看看吧2023-08-08
這篇文章主要為大家介紹了頁面tooltip組件的限制工具函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09