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>