08

VUE項目-次日

01-反饋

姓名 意見或建議
*** 1.從諫如流而不是在每次看到反饋意見以後先推脫，再勉強接受，你們寫出來的建議只是爲了更方便快速的學習，別無他意（更不涉及怪不怪誰的問）； 2.保證筆記的完整性和條理性應該算是最基本要完成的工做，在互動性比較高的工做中應該多考慮怎麼利他； 3.待續 *** 單頁面應用開發能夠移動端嗎？？？單頁面主要作些什麼項目啊？？
*** 剛哥
*** 老師，爲何會出現莫名其妙丟包的狀況呢
*** 老師, 愛你 麼麼噠
*** 但願老師註釋可以更詳細些~

02-回顧

• element-ui
  • 基於vue的UI框架
  • Vue.use(ElementUI,{全局配置})
• token原理
  • 知識點：session持久化 express-mysql-session 中間件
  • 用戶登陸：服務端 內存存儲 key--用戶信息 ， 經過加密的方式把這個key加密後返回給客戶端，響應主體
  • 客戶端：把 主體數據中的 token 信息保存，使用sessionStorage保存
  • 須要在請求頭中攜帶token信息
• 導航守衛
  • vue-router 提供 在跳轉路由器前 幹些事情
  • 判斷是否登陸（sessionStorage是否存token） 若是登陸放行 若是沒登陸 攔截login
  • 狀況：後臺可能去清除時間太久的token,無效token證實你的登陸過時
• axios攔截器
  • 需求：全部的響應成功後 作判斷token是否失效 服務器才知道token是否失效 status:401
  • axios.interceptors.response.use()
  • 須要 : 在請求頭中攜帶token信息
  • axios.interceptors.requset.use()

03-首頁-動態導航菜單

視圖區：

<!--一級菜單-->
<!-- 注意： 一級菜單 index 和 二級菜單 index 是有從屬關係的 -->
<!-- 一級菜單的索引 id  二級菜單的索引  item.id-lastItem.id -->
<el-submenu :index="item.id" v-for="(item,i) in menus" :key="item.id">
  <template slot="title">
    <i class="el-icon-location"></i>
    <span>{{item.authName}}</span>
  </template>
  <!--二級菜單-->
  <el-menu-item :index="item.id+'-'+lastItem.id" v-for="lastItem in item.children" :key="lastItem.id">
    {{lastItem.authName}}
  </el-menu-item>
</el-submenu>
複製代碼

js區域：

async getData () {
  // 獲取數據
  const {data: {data, meta}} = await this.$http.get('menus')
  // 判斷獲取是否成功  注意：添加操做 201  其餘操做 200
  if (meta.status !== 200) return this.$message.error('獲取菜單失敗')
  // 已經成功  修改data中的菜單數據
  this.menus = data
  // 更新視圖  前提是視圖用了該數據
  // 去視圖 用戶指令  渲染出來
}
複製代碼

04-首頁-導航菜單細節

• 子菜單 沒有圖標 用方塊圖標 固定

  • <i class="el-icon-menu"></i>
    <span>{{lastItem.authName}}</span>
    複製代碼

• 父菜單 沒有圖標 用五個不一樣的圖標

  <span class="iconfont icon-user-fill"></span>
  <span class="iconfont icon-cog"></span>
  <span class="iconfont icon-shoppingcart"></span>
  <span class="iconfont icon-file"></span>
  <span class="iconfont icon-chart-area"></span>
  複製代碼

  • html
  • js iconArr: ['icon-user-fill', 'icon-cog', 'icon-shoppingcart', 'icon-file', 'icon-chart-area']
• 打開子菜單時 容許只打開一個 其餘關閉
  • unique-opened 能夠設置爲 true 便可
• 因爲權限問題 點擊菜單的時候按照後臺給的路徑跳轉
  • 根據子菜單的 path: "users" 字段跳轉
  • router 屬性能夠開啓 跳轉模式
  • el-submenu :index="item.id.toString()"
  • el-menu-item :index="lastItem.path"
• 當你f5刷新頁面 丟失當前選中的菜單
  • 稍後實現

05-首頁-歡迎組件

路由：

// 二級路由配置  將會在home組件下使用
children: [
    {path: '/welcome', name: 'welcome', component: Welcome}
]
複製代碼

組件：

<template>
  <div class="welcome_container">
    <h3>歡迎來到品優購後臺關係系統</h3>
    <img src="../assets/images/welcome.jpg" alt="">
  </div>
</template>

<script>
export default {
  name: 'Welcome'
}
</script>

<style scoped>
.welcome_container{
  text-align: center;
}
</style>
複製代碼

指定視圖顯示的位置：

<el-main class="home_main">
  <router-view></router-view>
</el-main>
複製代碼

當你到首頁時 默認顯示的是歡迎組件

redirect: '/welcome',
複製代碼

爲了演示 實現退出

// Home.vue 
logout () {
  // 思考： 清除token  就是退出   可是跳轉登陸頁
  sessionStorage.removeItem('token')
  this.$router.push('/login')
}
複製代碼

06-用戶管理-路由和組件骨架

配置路由：

{path: '/users', name: 'users', component: Users}
複製代碼

組件骨架：

<template>
  <div class="users_container">
    用戶列表
  </div>
</template>

<script>
export default {
  name: 'Users'
}
</script>

<style scoped>

</style>
複製代碼

新建分支切切換： git checkout -b users

07-用戶管理-用戶列表

• 麪包屑 首頁 用戶管理 用戶列表
• 卡片 添加用戶
• 表格參照文檔中的模版 動態渲染
  • 獲取數據 ： userList
  • 發現接口傳參：reqParams
  • get請求怎麼傳參：get('url',{params:{具體參數}})
  • 渲染表格：el-table-column 屬性 prop 的值指定爲 列表數據的每一項的字段便可
  • 發現：有不是顯示字段對應的值的列 有些列的內容須要自定義
• 自定義列
• 實現分頁
  <el-pagination @current-change="changePager" :page-size="reqParams.pagesize" :current-page="reqParams.pagenum" background layout="prev, pager, next" :total="total">
  
  分頁js功能 changePager (newPage) { // 進行分頁查詢 需求：當前頁碼 // 獲取數據 前 要使用當前頁碼 this.reqParams.pagenum = newPage this.getData() }
• 搜索功能 <el-button @click="search()" slot="append" icon="el-icon-search"> 查詢 search () { // 根據當前搜索關鍵字 去查詢第一頁的數據 this.reqParams.pagenum = 1 this.getData() }

08-用戶管理-用戶添加

• 分析dialog組件的結構，修改爲咱們須要的結構

  取 消 確 定

• 點擊添加 顯示對話框

  <el-button type="primary" @click="dialogFormVisible = true" plain>添加用戶

• 指定數據

  // 標識當前對話框是否顯示 dialogFormVisible: false, // 添加用戶表單對象數據 addForm: { username: '', password: '', email: '', mobile: '' }

• 校驗表單

  • 自定義校驗規則 //1. 定義校驗函數 必須在定義數據以前 const checkMobile = (rule, value, callback) => { // rule 規則信息 value 驗證的輸入框的值 callback回調函數 (成功 失敗) // 1開頭 3456789 後面9數字 // callback回調函數 (成功 不傳任何 失敗 傳失敗信息 錯誤對象) if (!/^1[3456789]\d{9}$/.test(value)) return callback(new Error('手機號不對')) callback() } // 2. 在rules 校驗數據中指定 校驗函數 mobile: [ {required: true, message: '手機號必填', trigger: 'blur'}, // 手機號必須自定義校驗規則 經過本身的函數來校驗 （rule,value,callback） {validator: checkMobile, trigger: 'blur'} ]

• 提交數據 addSubmit () { // 輸入的時候進行數據的驗證 // 請求前點擊提交的時候 還要驗證一次 this.http.post('users', this.addForm) if (meta.status !== 201) return this.$message.error('添加失敗') // 添加成功後 this.dialogFormVisible = false // 更新列表 this.getData() } }) },

• 添加表單的細節

  showDialogForm () { // 注意： 只有先渲染 找到dom // 顯示添加對話框 this.dialogFormVisible = true // 重置表單 內容 驗證 this.$refs.addForm.resetFields() }

09-用戶管理-用戶刪除

改列表的按鈕這一列 改爲能夠傳數據的

<template slot-scope="scope">
  <el-button-group>
    <el-button icon="el-icon-edit" round></el-button>
    <el-button icon="el-icon-delete" @click="delUsers(scope.row.id)" round></el-button>
    <el-button icon="el-icon-setting" round></el-button>
  </el-button-group>
</template>
複製代碼

定義一個刪除函數

delUsers (id) {
  // 刪除用戶 ID
  this.$confirm('是否刪除該數據?', '舒適提示', {
    confirmButtonText: '肯定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 點擊了確認  發請求
    const {data: {meta}} = await this.$http.delete(`users/${id}`)
    if (meta.status !== 200) return this.$message.error('刪除失敗')
    this.$message.success('刪除成功')
    this.getData()
  }).catch(() => {})
}
複製代碼

10-用戶管理-用戶編輯

• 和添加功能99%類似

11-用戶管理-修改狀態

綁定值修改事件 change

<el-switch
  @change="updateState(scope.row.id,scope.row.mg_state)"
  v-model="scope.row.mg_state"
  active-color="#13ce66"
  inactive-color="#ccc">
</el-switch>
複製代碼

請求後臺

async updateState (id, newState) {
  // id 用戶的ID newState 已改變的狀態
  // console.log(id, newState)
  const {data: {meta}} = await this.$http.put(`users/${id}/state/${newState}`)
  if (meta.status !== 200) return this.$message.error('修改狀態失敗')
  this.$message.success('修改狀態成功')
  this.getData()
}
複製代碼

12-用戶管理-分配角色

第一步：畫分配角色的對話框

<!--分配角色-->
<el-dialog width="400px" title="分配角色" :visible.sync="roleDialogFormVisible">
  <el-form label-width="100px" autocomplete="off">
    <el-form-item label="當前用戶：">
      admin
    </el-form-item>
    <el-form-item label="當前用戶：">
      超級管理員
    </el-form-item>
    <el-form-item label="分配角色：">
      <el-select v-model="roleValue" placeholder="請選擇">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addSubmit()">確 定</el-button>
  </div>
</el-dialog>
複製代碼

第二步：動態渲染下拉框 角色

<el-select v-model="roleValue" placeholder="請選擇">
  <el-option
    v-for="item in options"
    :key="item.id"
    :label="item.roleName"
    :value="item.id">
  </el-option>
</el-select>
複製代碼

數據：

async showRoleDialogFormVisible () {
  // 打開對話框
  this.roleDialogFormVisible = true
  // 渲染下拉菜單
  const {data: {data, meta}} = await this.$http.get('roles')
  if (meta.status !== 200) return this.$message.error('獲取角色失敗')
  this.options = data
  console.log(data)
}
複製代碼

第三步：獲取當前用戶的信息在對話框顯示

<el-form-item label="當前用戶：">
  {{roleUserName}}
</el-form-item>
<el-form-item label="當前用戶：">
  {{roleUserRoleName}}

// 當前用戶的 用戶名
roleUserName: '',
// 當前用戶的 角色
roleUserRoleName: '',

this.roleUserName = row.username
this.roleUserRoleName = row.role_name
複製代碼

第四步：提交角色

<el-button type="primary" @click="changeRole()">確 定</el-button>

async changeRole () {
  const {data: {meta}} = await this.$http.put(`users/${this.roleUserId}/role`, {
    rid: this.roleValue
  })
  if (meta.status !== 200) return this.$message.error('分配角色失敗')
  this.$message.success('分配角色成功')
  this.roleDialogFormVisible = false
  this.getData()
}
複製代碼