基于Vue+Element-ui+Laravel的牙齿矫治器定制厂家网站

news/2024/5/15 9:55:42/文章来源:https://blog.csdn.net/weixin_43780699/article/details/107173871

License

BlueTooth 蓝牙医疗-后台管理

项目简介

本项目的应用场景是某牙齿矫治器定制厂家的网站，其功能目的是提供牙医与厂家的交互平台，网站涉及三个角色：游客、牙医、专家(网站管理员)。 根据需求，专家和网站管理员的功能具有高度相似性,因此就放在一起了

技术选型：前端基于 vue 和 element-ui，后端基于php框架laravel，如果想对本项目进行扩展，你需要先学习使用这几门技术。

后端项目传送门

项目分为前台和后台两个部分，由于时间原因，重点放在后台的制作，系统的功能模块大致如下图所示

项目预览（部分展示）

前台首页

诊所详情

后台登录

医生工作台（控制台）

查询订单

患者列表

个人资料

医生认证

诊所信息

患者详情

使用准备

你需要在本地安装 node 和 git。前端技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui

# 克隆项目
git clone https://github.com/ZYKJShadow/ivory-admin.git

# 进入项目目录
cd ivory-admin

# 安装依赖
npm install

# 建议不要直接使用 cnpm
安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

关键目录

api：所有的http请求接口
components：elementui组件
routers：路由
store：缓存
views：全部页面

权限验证

由于本项目涉及到不同的角色，且有些角色具有相同的功能，因此权限验证可以帮助高效地实现功能复用！

你可以在routers文件下的index.js中设置权限，如下所示，你可以轻松的在role中设置角色，则表示该角色可以访问该页面。当然，角色以数组形式存放，可以添加多个

{
path: ‘/permission’,
component: Layout,
name: ‘用户管理’,
meta: { role: [‘professor’,‘doctor’] }, //表示医生和专家都可访问
children: [
{
path: ‘index’,
component: Permission,
name: ‘权限测试页’,
meta: { role: [‘professor’] } //只有专家可访问
}]
}