09
VUE項目-第三天html
01-反饋vue
姓名 意見或建議
*** 反饋太浪費時間了，每次一講反饋半小時沒了，心疼，建議減小講反饋時間。拖堂問題每拖一分鐘我就賺了一分鐘美滋滋能夠多學點東西。以上屬我的意願。請勿公憤 *** 老師，這個功能稍後尚未實現☺--------->「當你f5刷新頁面 丟失當前選中的菜單」 *** 視頻雜音有點大
*** 剛哥，你的視頻聽的耳朵疼死了，能不能修一下電腦呢，，你看咱們認認真真聽課知識點沒記牢，結果耳朵聾了..... ps:剛哥的課講的很詳細，好喜歡，天天看你認真的講課講完，賣力地註釋一遍又筆記一遍莫名好心酸，愛你 *** 老師 ， ES6 中的 類 class 是什麼意思啊
*** 啊啊啊 啊 剛哥 淑哥 周哥 我有一個建議 要不這麼個,17:30您就把放了咱們吧,咱出去酒足飯飽以後回來了接着上,何如 吱node
02-回顧ajax
- 嵌套路由
- 左菜單動態渲染 子菜單的index path代替 點擊菜單根據path來跳轉 el-menu 屬性 router
- 用戶列表：麪包屑組件 卡片組件 柵格組件 輸入框組件 按鈕組件 表格組件 分頁組件
- 表格組件：在組件內須要自定義內容 使用組件的數據 template 包裹內容 屬性 slot-scope
優化：數據結構
- 按照模塊功能 建文件目錄 放組件
- mixin 混入: 把一些寫好的代碼 到下一個場景複用
- less .a{color:red} .b{font-size:12px} .c{.a();.b();}
- vue 有混入的功能 擴展
- 定義一個 包含vue選項的對象 在另一個js文件中,導出選項對象
- 在vue文件導入，在vue選項中 mixins：[導入的選項對象]
bug-找不到dom,須要在渲染完畢後：less
showDialogForm () {
// 注意： 只有先渲染 找到dom
// 顯示添加對話框
this.dialogFormVisible = true
// 重置表單 內容 驗證
// 等對話框組件渲染完畢在去作dom操做
// setTimeout(() => {
// this.$refs.addForm.resetFields()
// }, 0)
// 下一幀 要作的事情
this.$nextTick(() => {
this.$refs.addForm.resetFields()
})
},
複製代碼
03-用戶管理-編輯用戶-準備對話框dom
<!--編輯用戶-->
<el-dialog width="400px" title="編輯用戶" :visible.sync="editDialogFormVisible">
<el-form ref="editForm" :model="editForm" :rules="editRules" label-width="80px" autocomplete="off">
<el-form-item label="用戶名">
<el-input v-model="editForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="手機號" prop="mobile">
<el-input v-model="editForm.mobile"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="editDialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="editSubmit()">確 定</el-button>
</div>
</el-dialog>
複製代碼
04-用戶管理-編輯用戶-填充待修改數據async
async showEditDialogFormVisible (id) {
// 顯示編輯對話框
this.editDialogFormVisible = true
// 可能須要重置表單
// 填充數據
// 發請求須要用戶的ID
const {data: {data, meta}} = await this.$http.get(`users/${id}`)
if (meta.status !== 200) return this.$message.error('獲取用戶數據失敗')
// 把數據展現表單內
this.editForm = data
},
複製代碼
05-用戶管理-編輯用戶-添加校驗函數
editRules: {
email: [
{required: true, message: '郵箱必填', trigger: 'blur'},
{type: 'email', message: '郵箱格式錯誤', trigger: 'blur'}
],
mobile: [
{required: true, message: '手機號必填', trigger: 'blur'},
// 手機號必須自定義校驗規則 經過本身的函數來校驗 （rule,value,callback）
{validator: checkMobile, trigger: 'blur'}
]
}
複製代碼
06-用戶管理-編輯用戶-提交修改請求佈局
editSubmit () {
// 編輯的提交
// 整個表單的校驗
this.$refs.editForm.validate(async valid => {
if (valid) {
// 校驗成功
const {data: {meta}} = await this.$http.put(`users/${this.editForm.id}`, {
email: this.editForm.email,
mobile: this.editForm.mobile
})
if (meta.status !== 200) return this.$message.error('修改失敗')
this.$message.success('修改爲功')
this.getData()
this.editDialogFormVisible = false
}
})
},
複製代碼
07-權限管理-權限列表
-
權限列表 路由配置和組件骨架
{path: '/rights', name: 'rights', component: Rights}
權限列表
新建一個mixin文件 Rights-Mixin.js
動態的渲染表格：
<template>
<div class="rights_container">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item>權限管理</el-breadcrumb-item>
<el-breadcrumb-item>權限列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<el-table
height="400px"
:data="rightsList"
style="width: 100%">
<el-table-column
type="index">
</el-table-column>
<el-table-column
property="authName"
label="權限名稱">
</el-table-column>
<el-table-column
property="path"
label="路徑">
</el-table-column>
<el-table-column
label="權限等級">
<template slot-scope="scope">
<el-tag v-if="scope.row.level==='0'">一級權限</el-tag>
<el-tag v-if="scope.row.level==='1'" type="success">二級權限</el-tag>
<el-tag v-if="scope.row.level==='2'" type="warning">三級權限</el-tag>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
複製代碼
js實現代碼
export default {
name: 'Rights',
data () {
return {
rightsList: []
}
},
mounted () {
this.getData()
},
methods: {
async getData () {
// 獲取權限列表數據
const {data: {data, meta}} = await this.$http.get('rights/list')
if (meta.status !== 200) return this.$message.error('獲取權限列表數據失敗')
this.rightsList = data
console.log(data)
}
}
}
複製代碼
實現刷新頁面保持子菜單選中
- 根據url地址去選中當前的菜單
- 並且刷新頁面後也須要選中
- default-active=「users」 當前激活菜單的 index
- el-menu-item :index="lastItem.path"
- 使用當前路由的name的值去設置菜單的默認選中子菜單
- 實現：獲取name數據 $route.name 獲取當前路由的name
- :default-active=「$route.name」
08-權限管理-角色列表-準備佈局
<template>
<div class="roles_container">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item>權限管理</el-breadcrumb-item>
<el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<el-button type="primary" plain>添加角色</el-button>
<el-table :data="rolesList">
<el-table-column type="index" width="100px"></el-table-column>
<el-table-column property="roleName" label="角色名稱"></el-table-column>
<el-table-column property="roleDesc" label="角色描述"></el-table-column>
<el-table-column label="操做">
<template slot-scope="scope">
<el-button-group>
<el-button icon="el-icon-edit" round></el-button>
<el-button icon="el-icon-delete" round></el-button>
<el-button icon="el-icon-setting" round></el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
複製代碼
09-權限管理-角色列表-列表渲染
export default {
name: 'Roles',
data () {
return {
rolesList: []
}
},
mounted () {
this.getData()
},
methods: {
async getData () {
const {data: {data, meta}} = await this.$http.get('roles')
if (meta.status !== 200) return this.$message.error('獲取角色失敗')
// 表格的data對數據格式是有固定的要求
// 之前數據中沒有 children 選項
// 默認認爲 有展開內容 並且會去使用children數據
// 若是數據的結構不符合要求 報錯
// {id: 1, roleName: '管理員', roleDesc: '管理員123'}
// 把後臺返回的數據 處理一下 去除children數據 保留children有的數據
data.forEach(item => {
item.child = item.children
delete item.children
item.child.forEach(item => {
item.child = item.children
delete item.children
item.child.forEach(item => {
item.child = item.children
delete item.children
})
})
})
this.rolesList = data
}
}
}
複製代碼
展開內容：
<template slot-scope="scope">
<!--一級權限-->
<el-row>
<el-col :span="4">
<el-tag closable>權限管理</el-tag>
<span class="el-icon-caret-right"></span>
</el-col>
<el-col :span="20">
<!--二級權限-->
<el-row>
<el-col :span="8">
<el-tag closable type="success">角色列表</el-tag>
<span class="el-icon-caret-right"></span>
</el-col>
<el-col :span="16">
<!--三級權限-->
<el-tag closable type="warning">添加角色</el-tag>
</el-col>
</el-row>
<!--二級權限-->
<el-row>
<el-col :span="8">
<el-tag closable type="success">角色列表</el-tag>
<span class="el-icon-caret-right"></span>
</el-col>
<el-col :span="16">
<!--三級權限-->
<el-tag closable type="warning">添加角色</el-tag>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
複製代碼
動態渲染展開內容：
<template slot-scope="scope">
<!--一級權限-->
<el-row style="border-bottom: 1px solid #eee"
:style="{'border-top':i===0?'1px solid #eee':'none'}"
v-for="(item,i) in scope.row.child"
:key="item.id">
<el-col :span="4">
<el-tag closable>{{item.authName}}</el-tag>
<span class="el-icon-caret-right"></span>
</el-col>
<el-col :span="20">
<!--二級權限-->
<el-row :style="{'border-top':i===0?'none':'1px solid #eee'}" v-for="(secondItem,i) in item.child" :key="secondItem.id">
<el-col :span="8">
<el-tag closable type="success">{{secondItem.authName}}</el-tag>
<span class="el-icon-caret-right"></span>
</el-col>
<el-col :span="16">
<!--三級權限-->
<el-tag v-for="lastItem in secondItem.child" :key="lastItem.id" closable type="warning">{{lastItem.authName}}</el-tag>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
複製代碼
樣式：
.el-row{
display: flex;
align-items: center;
}
.el-tag{
margin: 5px;
}
複製代碼
11-權限管理-角色列表-添加角色-對話框準備
<!--添加的對話框-->
<el-dialog width="400px" title="添加角色" :visible.sync="addDialogFormVisible">
<el-form :model="addForm" label-width="80px">
<el-form-item label="角色名稱">
<el-input v-model="addForm.roleName"></el-input>
</el-form-item>
<el-form-item label="角色描述">
<el-input v-model="addForm.roleDesc"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addDialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addSubmit()">確 定</el-button>
</div>
</el-dialog>
複製代碼
數據 方法
/* 添加相關的數據 */
addDialogFormVisible: false,
addForm: {
roleName: '',
roleDesc: ''
}
}
},
mounted () {
this.getData()
},
methods: {
// 顯示添加對話框
showAddDialog () {
this.addDialogFormVisible = true
},
// 添加操做
addSubmit () {
},
複製代碼
12-權限管理-角色列表-添加角色-校驗規則
addRules: {
roleName: [
{required: true, message: '角色名稱必填', trigger: 'blur'}
],
roleDesc: [
{required: true, message: '角色描述必填', trigger: 'blur'}
]
}
複製代碼
13-權限管理-角色列表-添加角色-提交添加
// 顯示添加對話框
showAddDialog () {
this.addDialogFormVisible = true
this.$nextTick(() => {
this.$refs.addForm.resetFields()
})
},
// 添加操做
addSubmit () {
// 整個表單驗證
this.$refs.addForm.validate(async valid => {
if (valid) {
// 提交添加請求
const {data: {meta}} = await this.$http.post('roles', this.addForm)
if (meta.status !== 201) return this.$message.error('添加角色失敗')
this.$message.success('添加角色成功')
// 關閉對話框 更新列表數據
this.addDialogFormVisible = false
this.getData()
}
})
},
複製代碼
14-權限管理-角色列表-刪除角色
<el-button icon="el-icon-delete" @click="delRoles(scope.row.id)" round></el-button>
// 刪除
delRoles (id) {
this.$confirm('是否刪除該數據?', '舒適提示', {
confirmButtonText: '肯定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
// 點擊了確認 發請求
const {data: {meta}} = await this.$http.delete(`roles/${id}`)
if (meta.status !== 200) return this.$message.error('刪除失敗')
this.$message.success('刪除成功')
this.getData()
}).catch(() => {})
},
複製代碼
16-權限管理-角色列表-編輯角色-對話框準備
html結構
<!--編輯的對話框-->
<el-dialog width="400px" title="編輯角色" :visible.sync="editDialogFormVisible">
<el-form ref="editForm" :model="editForm" :rules="editRules" label-width="80px">
<el-form-item label="角色名稱" prop="roleName">
<el-input v-model="editForm.roleName"></el-input>
</el-form-item>
<el-form-item label="角色描述" prop="roleDesc">
<el-input v-model="editForm.roleDesc"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="editDialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="editSubmit()">確 定</el-button>
</div>
</el-dialog>
複製代碼
數據和方法：
/* 編輯相關的數據 */
editDialogFormVisible: false,
editForm: {},
editRules: {
roleName: [
{required: true, message: '角色名稱必填', trigger: 'blur'}
],
roleDesc: [
{required: true, message: '角色描述必填', trigger: 'blur'}
]
}
}
},
mounted () {
this.getData()
},
methods: {
// 顯示編輯對話框
showEditDialog () {
this.editDialogFormVisible = true
},
// 提交編輯
editSubmit () {
},
複製代碼
17-權限管理-角色列表-編輯角色-填充數據和校驗規則
使用的是當前行的數據 你也可以使用ajax的
<el-button icon="el-icon-edit" @click="showEditDialog(scope.row)" round></el-button>
// 顯示編輯對話框
showEditDialog (role) {
this.editDialogFormVisible = true
// 填充默認數據
this.$nextTick(async () => {
this.$refs.editForm.resetFields()
// 獲取 填充 問題：重置表單的數據 會 清除row的數據
// this.editForm = role
// 使用ajax的數據
const {data: {data, meta}} = await this.$http.get(`roles/${role.id}`)
if (meta.status !== 200) return this.$message.error('獲取角色失敗')
this.editForm = data
})
},
複製代碼
18-權限管理-角色列表-編輯角色-提交修改
// 提交編輯
editSubmit () {
this.$refs.editForm.validate(async valid => {
if (valid) {
// 注意ID是 roleId
const {data: {meta}} = await this.$http.put(`roles/${this.editForm.roleId}`, {
roleName: this.editForm.roleName,
roleDesc: this.editForm.roleDesc
})
if (meta.status !== 200) return this.$message.error('編輯角色失敗')
this.$message.success('編輯角色成功')
// 關閉編輯對話框 更新列表
this.editDialogFormVisible = false
this.getData()
}
})
},
複製代碼
19-權限管理-角色列表-分配權限-展開tag刪除權限
-
el-tag @close="delRights(scope.row,item.id)"
-
@close="delRights(scope.row,secondItem.id)"
-
@close="delRights(scope.row,lastItem.id)"
// 刪除權限 delRights (row, rightId) { this.
http.delete(roles/${row.id}/rights/${rightId}) if (meta.status !== 200) return this.message.success('刪除成功') // 更新整個列表 從新展開後 看到操做結果 // this.getData() // 局部更新 當前行的數據 child 數據 // 當前修改後返回的數據 就是child數據 // 處理成須要的數據結構 data.forEach(item => { item.child = item.children delete item.children item.child.forEach(item => { item.child = item.children delete item.children }) }) row.child = data }).catch(() => {}) },
20-權限管理-角色列表-分配權限-對話框準備
<!--分配權限的對話框-->
<el-dialog width="400px" title="分配權限" :visible.sync="rightDialogFormVisible">
<h1>樹形控件</h1>
<div slot="footer" class="dialog-footer">
<el-button @click="rightDialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="rightSubmit()">確 定</el-button>
</div>
</el-dialog>
/* 分配權限相關的數據 */
rightDialogFormVisible: false
}
},
mounted () {
this.getData()
},
methods: {
// 顯示分配權限的對話框
showRightDialog () {
this.rightDialogFormVisible = true
},
// 分配權限
rightSubmit () {
},
複製代碼
21-權限管理-角色列表-分配權限-樹狀控件
<el-tree
:data="rightTree"
show-checkbox
node-key="id"
:default-expand-all="true"
:props="defaultProps">
</el-tree>
複製代碼
數據：
rightTree: [{
id: 1,
label: '一級 1',
children: [{
id: 4,
label: '二級 1-1',
children: [{
id: 9,
label: '三級 1-1-1'
}, {
id: 10,
label: '三級 1-1-2'
}]
}]
}, {
id: 2,
label: '一級 2',
children: [{
id: 5,
label: '二級 2-1'
}, {
id: 6,
label: '二級 2-2'
}]
}, {
id: 3,
label: '一級 3',
children: [{
id: 7,
label: '二級 3-1'
}, {
id: 8,
label: '二級 3-2'
}]
}],
defaultProps: {
// 數據結構中 下一級數據的字段名稱
children: 'children',
// 顯示的文字 的數據字段的名稱
label: 'label'
}
複製代碼
22-權限管理-角色列表-分配權限-渲染樹形控件
23-權限管理-角色列表-分配權限-選中擁有的權限
24-權限管理-角色列表-分配權限-提交修改後的權限
相關文章
- 1. 2020-09-09
- 2. 2020-09-09 問題總結
- 3. Day 09
- 4. 09-babel
- 5. 09 JDBCTemplate
- 6. day-09
- 7. 09-----babel
- 8. Apache Pulsar 社區週報：09-26 ~ 10-09
- 9. Python學習日誌_2017/09/09
- 10. better-fe 技術週刊 - 2019/09/09
- 更多相關文章...
- • XSD 日期和時間數據類型 - XML Schema 教程
- • SQLite 安裝 - SQLite教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 2020-09-09
- 2. 2020-09-09 問題總結
- 3. Day 09
- 4. 09-babel
- 5. 09 JDBCTemplate
- 6. day-09
- 7. 09-----babel
- 8. Apache Pulsar 社區週報：09-26 ~ 10-09
- 9. Python學習日誌_2017/09/09
- 10. better-fe 技術週刊 - 2019/09/09