vue-element-admin

1、vue-element-admin

1.1简介

vue-element-admin是基于element-ui 的一套后台管理系统集成方案。

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

项目在线预览：https://panjiachen.gitee.io/vue-element-admin

1.2安装

# 解压压缩包
# 进入目录
cd vue-element-admin-master
# 安装依赖
npm install
# 启动。执行后，浏览器自动弹出并访问http://localhost:9527/
npm run dev

如果上面的install报错

则先执行下面的命令，再install

2、vue-admin-template

2.1简介

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

建议：你可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

2.2安装

前端框架了解

1、目录结构

vue-element-admin-master（拥有完整的功能的插件）

2、关键文件

vue-admin-template-master（源码相对简单，我们的后台管理系统基于这个版本）

2.1 package.js

npm项目的核心配置文件，包含项目信息，项目依赖，项目启动相关脚本

启动项目的命令： npm run dev

dev脚本：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

webpack-dev-server：一个小型的基于Node.js的http服务器，可以运行前端项目

–inline：一种启动模式

–progress：显示启动进度

–config build/webpack.dev.conf.js：指定webpack配置文件所在位置

2.2 build/webpack.dev.conf.js

webpack配置文件，包含项目在开发环境打包和运行的相关配置

webpack.dev.conf.js 中引用了 webpack.base.conf.js

webpack.base.conf.js 中定义了项目打包的入口文件

在HtmlWebpackPlugin配置html模板，生成的js就会自动插入到模板中，如下面的配置。

因此生成的js文件会被自动插入到名为index.html的页面中

2.3 index.html

项目默认的html页面

2.4 src/main.js

项目js入口文件，项目的所有前端功能都在这个文件中引入和定义，并初始化全局的Vue对象

2.5config/dev.env.js

定义全局常量值

因此，在项目中的任意位置可以直接使用 process.env.BASE_API 常量表示后端接口的主机地址

2.6 src/utils/request.js

引入axios模块，定义全局的axios实例，并导出模块

2.7 src/api/login.js

引用request模块，调用远程api

实战

1.修改登录验证逻辑

将登陆相关请求接口改为静态数据，不请求接口

修改文件：\src\store\modules\user.js

注释掉：Login、GetInfo、LogOut三个方法，替换为如下代码：

Login({ commit }) {
const data = {
'token': 'admin'
}
setToken(data.token)// 将token存储在cookie中
commit('SET_TOKEN', data.token)
},

GetInfo({ commit }) {
const data = {
'roles': [
'admin'
],
'name': 'admin',
'avatar': 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
}
if (data.roles &&data.roles.length >0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', data.roles)
  }
  commit('SET_NAME', data.name)
  commit('SET_AVATAR', data.avatar)
},

// 登出
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
    commit('SET_TOKEN', '')
    commit('SET_ROLES', [])
    removeToken()
    resolve()
  })
}

说明：token是我们手动配置的，如果过期后续自行生成，后续会有TokenHelper类生成token，在此不用关注

修改\src\util\request.js

config.headers['token'] = getToken()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-whbQcQJY-1646117528537)(C:\Users\86157\AppData\Local\Temp\1646116396285.png)]

2.完成列表展示页

1.创建路由

{
  path: '/hospSet',
  component: Layout,
  redirect: '/example/table',
  name: '医院设置管理',
  meta: { title: '医院设置管理', icon: 'example' },
  children: [
    {
      path: 'list',
      name: '医院设置列表',
      component: () => import('@/views/hospset/list'),
      meta: { title: '医院设置列表', icon: 'table' }
    },
    {
      path: 'add',
      name: '医院设置添加',
      component: () => import('@/views/hospset/add'),
      meta: { title: '医院设置添加', icon: 'tree' }
    }
  ]
},

2.创建api

import request from '@/utils/request'

export default{
  getList(current,limit,searchObj) {
    return request({
      url: `/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`,
      method: 'post',
      data: searchObj // 使用json形式进行传递
    })
  }
}

3.创建页面组件

<template>
  <div class="app-container">
    医院设置列表
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column type="index" width="50"/>
      <el-table-column prop="hosname" label="医院名称"/>
      <el-table-column prop="hoscode" label="医院编号"/>
      <el-table-column prop="apiUrl" label="api基础路径" width="200"/>
      <el-table-column prop="contactsName" label="联系人姓名"/>
      <el-table-column prop="contactsPhone" label="联系人手机"/>
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">{{ scope.row.status === 1 ? "可用" : "不可用" }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 引入接口定义的js文件
import hospset from "@/api/hospset";

export default {
  data() {
    return {
      current: 1, // 当前页
      limit: 3, // 一个页显示的记录数
      serchObj: {}, // 条件封装对象
      list: [], // 每页数据集合
      total: 0,
    };
  },
  created() {
    //在页面渲染之前操作
    //一般调用methods定义的方法获得数据
    //只能调用当前vue的方法
    this.getList();
  },
  methods: {
    //定义方法进行请求接口调用
    getList(page = 1) {
      this.current = page;
      hospset
        .getList(this.current, this.limit, this.serchObj)
        .then((Response) => {
          //response是接口返回数据
          //返回值赋值给list
          this.list = Response.data.records;
          //总记录数
          this.total = Response.data.total;
        }) //请求成功
        .catch((error) => {
          console.log(error);
        }); //请求失败
    },
  },
};
</script>

3.完成分页

<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"
/>

4.完成条件查询

<el-form :inline="true" class="demo-form-inline">
  <el-form-item>
    <el-input v-model="serchObj.hosname" placeholder="医院名称"/>
  </el-form-item>
  <el-form-item>
    <el-input v-model="serchObj.hoscode" placeholder="医院编号"/>
  </el-form-item>
  <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
</el-form>
line">
  <el-form-item>
    <el-input v-model="serchObj.hosname" placeholder="医院名称"/>
  </el-form-item>
  <el-form-item>
    <el-input v-model="serchObj.hoscode" placeholder="医院编号"/>
  </el-form-item>
  <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
</el-form>