基本環境搭建完成
安裝npm包：npm -S i vue vue-router axios element-ui
配置Eslint：
{ "editor.fontSize": 17, "cssrem.rootFontSize": 32, "liveServer.settings.donotShowInfoMsg": true, "javascript.updateImportsOnFileMove.enabled": "always", "eslint.autoFixOnSave": true, "files.autoSave": "off", "eslint.validate": [ "javascript", "javascriptreact", "vue-html", { "language": "vue", "autoFix": true }, "html", "vue" ], "eslint.autoFixOnSave": true, // 需要 npm install -g eslint-plugin-vue "eslint.options": { "extensions": [ ".js", ".vue" ] }, "editor.tabSize": 2, }
登錄功能
-
-
涉及到用戶數據的驗證
-
發起axios請求
-
接收返回值，實現路由跳轉
添加登陸組件 :login.vue,在src下面創建用於存放頁面組件的文件夾：views
所有組件的展示都是基於路由
創建路由。添加路由配置：將路由創建為單獨的模塊：src/router.js
讓Vue使用vue-router和讓Vue使用router對象是兩碼事
-
-
Vue.use(router):僅僅是可能 使用路由配置
登陸界面的制作過程：login.vue
-
使用form表單 > 表單驗證
-
復制代碼，復制數據，復制功能函數
-
刪除不需要的結構：刪除不要的表單元素
-
修改已有代碼
<el-form :model="ruleForm" // 當前表單所對應的數據，這個數據對象中的成員一般與接口文檔的需要相關，這個時候一定要去仔細的閱讀接口文檔，將這個對象中的成員的屬性名稱要命名為和接口文檔 的完全一致，這樣做有一個好處：后期收集數據的時候更簡潔 :rules="rules" // 驗證規則 ref="ruleForm" // 表單標識 label-width="100px" // 標簽的寬度，可以去除 class="demo-ruleForm" >
刪除不需要的label,同時刪除對於label寬度的設置代碼
<template> <div class="login"> <div class="container"> <img src="../assets/avatar.jpg" alt class="avatar"> <el-form :model="loginForm" :rules="rules" ref="loginForm" class="demo-ruleForm"> <el-form-item prop="username"> <el-input v-model="loginForm.username" placeholder="請輸入用戶名"></el-input> </el-form-item> <el-form-item prop="password"> <el-input v-model="loginForm.password" placeholder="請輸入密碼"></el-input> </el-form-item> <el-form-item> <el-button type="primary" class="login-btn">登陸</el-button> </el-form-item> </el-form> </div> </div> </template>
如何實現用戶數據驗證
1.設置prop屬性
2.根據prop屬性的值添加相同名稱的規則
3.規則解釋
{ required: true, message: '請輸入活動名稱', trigger: 'blur' }
required:必填項
message：如果不滿足規則所給出的提示信息文本
trigger：觸發：什么時候觸發，blur是指失去焦點時觸發
細節：如果名稱不對應，那么規則將無法起效果
data () { return { loginForm: { username: '', password: '' }, // 添加驗證規則 rules: { username: [ { required: true, message: '請輸入用戶名', trigger: 'blur' } ], password: [ { required: true, message: '請輸入密碼', trigger: 'blur' } ] } }
-
復制我們所提供的樣式文件，如重置樣式代碼
-
復制樣式所對應的資源文件，如字體文件
-
在main.js文件中引入復制過來的index.less
import '@/styles/index.less'
在login.vue文件中添加如下樣式
<style lang="less" scoped> .login { position: fixed; width: 100%; height: 100%; background-color: #2f4050; .container { position: absolute; left: 0; right: 0; width: 400px; padding: 0px 40px 15px 40px; margin: 200px auto; background: white; .avatar { position: relative; left: 50%; width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; box-sizing: border-box; border-radius: 50%; border: 10px solid #fff; box-shadow: 0 1px 5px #ccc; overflow: hidden; } .login-btn { width: 100%; } } } </style>
-
常見錯誤：
原因：我們還沒有引入element-ui,你就需要下載+引入
-
添加圖標
-
我們得去找到能夠添加圖片的文本框，分析里面的代碼
-
組件>input輸入框
-
prefix-icon：添加自定義的前置圖標
-
suffix-icon：添加自定義的后置圖標
-
-
添加驗證功能
-
之前的rules僅僅是一個用戶提示信息，並不會阻止用戶提交
-
所以我們可以為表單添加一個validate函數，這個函數可以實現 用戶數據的驗證，它會返回一個值給回調函數，以此來判斷驗證是否通過
-
// 登陸 login () { // 實現用戶的數據驗證，因為之前的rules只是一個提示信息布局，並不會真正的阻止用戶的登陸請求 // 登陸驗證的時候，表單有一個validate函數，這個函數可以真正的實現表單元素的數據驗證，這個驗證與之前的、rules規則對應，當驗證完成之后，會返回一個值給回調函數，如果是true,說明驗證難過，否則就不通過 this.$refs.loginForm.validate((valid) => { if (valid) { // 驗證通過，就去發起登陸請求 console.log('ok') } else { // 給出用戶提示 console.log('no') return false } }) }
-
介紹element-ui中的消息提示框
-
找到提示框組件：組件>Message 消息提示
-
特點：顯示之后會自動 消失
-
分析里面的結構和屬性
-
message:提示信息
-
type:提示信息的類型，不同的類型有不同的顏色
-
-
應用
else { // 給出用戶提示 this.$message({ message: '數據輸入不合法', type: 'error' }) return false }
實現登陸功能
-
下載axios
-
引入
-
看接口文檔
-
接口名稱：login
-
請求方法：post
-
參數：{username:'',passwrod:''}
-
-
將users表的數據操作封裝為一個單獨的文件：src/api/users.js
import axios from 'axios' // 設置基准路徑 axios.defaults.baseURL = 'http://localhost:8888/api/private/v1/' // 添加登陸驗證方法 // 在vue中，暴露成員可以使用export export const userlogin = (data) => { // 我們不希望通過回調的方式在這邊進行操作之后的方法調用，因為post方法返回一個promise,所以可以以后在方法調用的時候進行then和catch // return axios.post(url, data) return axios({ url: 'login', method: 'post', data: data }) }
-
引入axios
-
設置baseURL
-
添加實現登陸驗證的方法
import { userlogin } from '@/api/users.js'
login () {
// 實現用戶的數據驗證，因為之前的rules只是一個提示信息布局，並不會真正的阻止用戶的登陸請求
// 登陸驗證的時候，表單有一個validate函數，這個函數可以真正的實現表單元素的數據驗證，這個驗證與之前的、rules規則對應，當驗證完成之后，會返回一個值給回調函數，如果是true,說明驗證難過，否則就不通過
this.$refs.loginForm.validate(valid => {
if (valid) {
// 驗證通過，就去發起登陸請求
userlogin(this.loginForm)
.then(result => {
if (result.data.meta.status === 400) {
this.$message({
message: result.data.meta.msg,
type: 'error'
})
} else {
// 路由跳轉
}
})
.catch(() => {
this.$message({
message: '服務器異常，請重試',
type: 'error'
})
})
} else {
// 給出用戶提示
this.$message({
message: '數據輸入不合法',
type: 'error'
})
return false
}
})
}
}
登陸完成后，實現路由跳轉
this.$router.push({ name: 'Home' })
添加單文件組件
<template>
<div class="home">首頁</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
添加路由配置
{ name: 'Home', path: '/home', component: Home }
頁面效果：
項目Github地址：https://github.com/replaceroot/itcast-manage-system3