vue-admin-template的二次开发

vue-admin-template的二次开发

​ vue-admin-template作为已经编辑好的管理员后台系统模板，使得开发系统更加简洁，只需要对其进行二次开发，就能实现十分美观流畅且简洁的后台系统。

​ 1.如何启动vue-admin-template。

​ 用vscode进入vue-admin-template文件夹，选择新建终端

​ 依次键入npm install、npm run dev。

​ 成功后会自动跳转到登陆页面

​ 2.找到.env.development文件并将其中的VUE_APP_BASE_API修改成自己的api地址

# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:8201'

​ 3.找到router文件夹里的index.js,将其中的菜单栏改成自己想要的菜单

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '控制面板', icon: 'dashboard' }
    }]
  },
  {
    path: '/adminuser/anchor',
    component: Layout,
    redirect: '/adminuser/list',
    name: '主播信息管理',
    alwaysShow: true,
    meta: { title: '主播信息管理', icon: 'example' },
    children: [
      {
        path: 'anchorlist',
        name: '主播列表',
        component: () => import('@/views/adminuser/list'),
        meta: { title: '主播列表', icon: 'table' }
      },
      {
        path: 'applylist',
        name: '主播审核列表',
        component: () => import('@/views/adminuser/applylist'),
        meta: { title: '主播审核列表', icon: 'table' }
      },
      {
        path: 'edit/:id',
        name: 'subjectEdit',
        component: () => import('@/views/adminuser/subject/form'),
        meta: { title: '编辑主播' },
        hidden: true
      }
    ]
  },
  {
    path: '/adminuser/user',
    component: Layout,
    redirect: '/adminuser/list',
    name: '用户信息管理',
    alwaysShow: true,
    meta: { title: '用户信息管理', icon: 'example' },
    children: [
      {
        path: 'userlist',
        name: '用户列表',
        component: () => import('@/views/adminuser/userlist'),
        meta: { title: '用户列表', icon: 'table' }
      },
      {
        path: 'bannedlist',
        name: '封号列表',
        component: () => import('@/views/adminuser/bannedlist'),
        meta: { title: '封号用户列表', icon: 'table' }
      }
    ]
  },
]

4.在view文件夹中创建对应的vue文件

5.编写页面对应的vue（list文件为例）

<template>
    <div class="app-container">
        
        <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="searching.nickName" placeholder="昵称"/>
        </el-form-item>
  
        <el-form-item>
            <el-input v-model="searching.phone" placeholder="手机号码"/>
          </el-form-item>
  
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="searching.CreateTimeBegin"
            type="datetime"
            placeholder="选择注册开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searching.CreateTimeEnd"
            type="datetime"
            placeholder="选择注册结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
          />
        </el-form-item>
  
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-form>
          <!-- 表格 -->
          <el-table
            :data="list"
            border
            fit
            highlight-current-row>
      
            <el-table-column
              label="序号"
              width="70"
              align="center">
              <template slot-scope="scope">
                {{ (page - 1) * limit + scope.$index + 1 }}
              </template>
            </el-table-column>
      
            <el-table-column prop="nickName" label="昵称" width="80" align="center"/>
      
            <el-table-column label="身份" width="80" align="center">
              <template slot-scope="scope">
                {{ scope.row.isAnchor===1?'主播':'用户' }}
              </template>
            </el-table-column>
            <el-table-column label="性别" width="80" align="center">
                <template slot-scope="scope">
                  {{ scope.row.sex===1?'男':'女' }}
                </template>
              </el-table-column>
      
            <el-table-column prop="phone" label="电话号码" align="center" />
      
            <el-table-column prop="createTime" label="添加时间" width="160" align="center" />

            <el-table-column prop="updateTime" label="信息更新时间" width="160" align="center" />

            <el-table-column prop="province" label="所在省" width="100" align="center"/>
      
            <el-table-column prop="city" label="所在城市" width="100" align="center"/>
      
            <el-table-column label="操作" width="240" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" icon="el-icon-delete" style="margin-left:3px; margin-bottom:3px;" @click="removeDataById(scope.row.id)">删除</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" style="margin-left:1px" @click="BannedDataById(scope.row.id)">封号</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" style="margin-left:3px" @click="repealDataById(scope.row.id)">撤销主播</el-button>
              </template>
            </el-table-column>
          </el-table>
      
        <!-- 分页 -->
          <el-pagination
            :current-page="page"
            :page-size="limit"
            :total="total"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getList"
          />
      
    </div>
</template>

<script>
import anchorapi from '@/api/adminuser/anchor'
export default{
    data(){
        return{
            list:[],
            total:0,
            page:1,
            limit:8,
            searching:{},
            mutipleSelection:[]
        }
    },
    created(){
        this.fetchData()
    },
    methods:{
        fetchData(){
            anchorapi.pageList(this.page,this.limit,this.searching)
            .then(response=>{
                console.log(response)
                this.list=response.data.records
                this.total=response.data.total
            })
        },
        getList(page){
            this.page=page
            this.fetchData()
        },
        resetData(){
            this.searching={}
            this.fetchData()
        },
        removeDataById(id){
            this.$confirm('此操作将对主播进行删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {  //点击确定，执行then方法
                //调用删除的方法
                anchorapi.removeanchorId(id)
                    .then(response =>{//删除成功
                    //提示信息
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //回到列表页面
                    this.fetchData()
                })
            }) 
        },
        BannedDataById(id){
            this.$confirm('此操作将对主播进行封号，但不会删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {  //点击确定，执行then方法
                //调用封号的方法
                anchorapi.bannedanchorId(id)
                    .then(response =>{//封号成功
                    //提示信息
                    this.$message({
                        type: 'success',
                        message: '封号成功!'
                    });
                    //回到列表页面
                    this.fetchData()
                })
            }) 
        },
        repealDataById(id){
            this.$confirm('此操作将对主播进行撤销成为用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {  //点击确定，执行then方法
                //调用撤销的方法
                anchorapi.repealanchorId(id)
                    .then(response =>{//撤销成功
                    //提示信息
                    this.$message({
                        type: 'success',
                        message: '撤销成功!'
                    });
                    //回到列表页面
                    this.fetchData()
                })
            }) 
        }
    }
}
</script>

6.新建对应的js文件用于接收后端接口

7.编写js代码（user.js为例）

import request from '@/utils/request'

const api_name = '/api/user/userInfo'

export default{
    pageList1(current,limit,serching){
        return request({
            url: `${api_name}/findQueryPage/${current}/${limit}`,
            method: 'post',
            data:serching
          })
    },
    //删除用户
    removeanchorId(id){
        return request({
        url:`${api_name}/remove/${id}`,
        method:'delete'
        })
    }
}

8.刷新页面，显示成功

总结

​ 二次开发vue-admin-template与常规前端的编写基本相同，但得益于vue-admin-template编写的基础，使得前端在起步阶段更加快捷。其中最需要注意的是跨域问题的配置，这需要前后端同时允许跨域，才能实现接口对接和数据传输。