前端開發(fā) =》Vue進(jìn)階打怪升級(jí)

vue開源項(xiàng)目

• 項(xiàng)目推薦

github地址

https://github.com/PanJiaChen

• 目錄解構(gòu)

• 快速啟動(dòng)

//安裝依賴
npm install
//啟動(dòng)項(xiàng)目
npm run dev

修改登錄

• 修改配置

  找到src/store/user.js,把里面的登錄、獲取用戶信息、登出從后端獲取的信息都先自定義

    // 登錄
    Login({ commit }, userInfo) {
        const data = {"token":"admin"}
          setToken(data.token)
          commit('SET_TOKEN', data.token)
    },
  
    // 獲取用戶信息
    GetInfo({ commit, state }) {
      const data = {"roles":"admin","name":"admin","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"}
      if (data.roles && data.roles.length > 0) { // 驗(yàn)證返回的roles是否是一個(gè)非空數(shù)組
        commit('SET_ROLES', data.roles)
      } else {
        reject('getInfo: roles must be a non-null array !')
      }
      commit('SET_NAME', data.name)
      commit('SET_AVATAR', data.avatar)
    },
  
    // 登出
    LogOut({ commit, state }) {
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      removeToken()
    },
  
    // 前端 登出
    FedLogOut({ commit }) {
        commit('SET_TOKEN', '')
        removeToken()
        resolve()
    }
  

項(xiàng)目開發(fā)流程

• 定義路由

src/router/index.js

  {
    path: '/test',
    component: Layout,
    redirect: '/test/list',
    name: '測試管理',
    meta: { title: '測試管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '測試列表',
        component: () => import('@/views/test/list'), //使用具體組件
        meta: { title: '測試列表', icon: 'table' }
      }
    ]
  },

• 定義api模快

src/api/index.js

import request from '@/utils/request'

export default{
  getList(current,limit,searchObj){
    return request({
      url: `/admin/xxx/xxxx/findList/${current}/${limit}`,
      method: 'post',
      data: searchObj  //使用json
    })
  }
}

• 定義頁面腳本

src/views/test

<script>
import hospset from '@/api/hospset'

export default{
  data(){
      return{
        current:1,
        limit:10,
        searchObj:{},
        list:[],
        total : 0,
        multipleSelection: []

      }
  },
  created () {
    this.getList();
  },
  methods: {
    getList(page = 1){
      this.current = page;
      hospset.getHospSetList(this.current,this.limit,this.searchObj)
      .then(response =>{
          console.log(response);
          this.list = response.data.records
          this.total = response.data.total
      })
      .catch(error =>{
          console.log(error);
      })
    },
    removeDataById(id){
          this.$confirm('此操作將永久刪除該數(shù)據(jù), 是否繼續(xù)?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           hospset.deleteHospSet(id)
          .then(response =>{
          this.$message({
            type: 'success',
            message: '刪除成功!'
          });
          this.getList(1);
      })
      .catch(error =>{
          console.log(error);
      })
        })
    }
  }
}
</script>

• 定義頁面組件模板

src/views/test

具體使用參考https://element.eleme.cn/#/zh-CN/component/table

<template>
<div class="app-container">

<!-- banner列表 -->
<el-table
:data="list"
stripe
      style="width: 100%">

<el-table-column type="index" width="50"/>
<el-table-column prop="hosname" label="醫(yī)院名稱"/>
<el-table-column prop="hoscode" label="醫(yī)院編號(hào)"/>
<el-table-column prop="apiUrl" label="api基礎(chǔ)路徑"width="200"/>
<el-table-column prop="contactsName" label="聯(lián)系人姓名"/>
<el-table-column prop="contactsPhone" label="聯(lián)系人手機(jī)"/>
<el-table-column label="狀態(tài)" width="80">
<template slot-scope="scope">
          {{ scope.row.status === 1 ? '可用' : '不可用' }}
</template>
</el-table-column>
</el-table>
</div>
</template>