สแต็กเทคโนโลยีที่ใช้: vue + vue-resource + vue-router + vuex (จำเป็นสำหรับสปา) + element-ui + ES6 + webpack + npm
ที่อยู่ทดสอบ (หากไม่สามารถเปิดได้ ให้ลองเปลี่ยน DNS เป็น 114.114.114.114)
โปรเจ็กต์นี้สร้างขึ้นโดยอาศัย vue scaffolding และ 3 โปรเจ็กต์ (เรียนรู้จากจุดแข็งของกันและกัน) และได้รับการปรับปรุงอย่างต่อเนื่อง โดยมีจุดประสงค์เพื่อให้ใกล้ชิดและเหมาะสมกับความต้องการของทุกคนในโปรเจ็กต์ และเหมาะสมมากขึ้นสำหรับการพัฒนาขั้นที่สอง ได้รับการเขียนใหม่:
เข้าสู่ระบบและลงทะเบียน (รวมถึงการเข้ารหัส MD5)
การควบคุมการอนุญาต เมนูจะแสดงและซ่อนตามข้อมูลการอนุญาตที่ส่งคืนจากอินเทอร์เฟซผู้ใช้ หากคุณแตะแถบที่อยู่ด้วยตนเอง เมนูจะข้ามไปที่ 404 (แถบที่อยู่ผิด) หรือ 401 (แถบที่อยู่ที่ถูกต้องแต่ไม่ได้รับอนุญาต) และการอนุญาตสามารถปรับเปลี่ยนได้แบบไดนามิกในการตั้งค่าระบบ
สลับธีม สนับสนุนผู้ใช้อย่างเต็มที่ในการสลับธีมด้วยตนเองและจดจำธีม
ข้อมูลทั้งหมดถูกจำลองในเครื่องด้วย json นักพัฒนารองจำเป็นต้องแทนที่เส้นทาง json ด้วยเส้นทางอินเทอร์เฟซจริงเท่านั้น แม้แต่มือใหม่ก็สามารถจัดการระบบการจัดการแบ็กเอนด์ได้อย่างง่ายดาย
องค์ประกอบการคลิกปุ่มที่ทำงานแบบไดนามิกทั้งหมดได้พิมพ์พารามิเตอร์ที่เกี่ยวข้องบนคอนโซลแล้ว ในระหว่างการพัฒนาจริง พารามิเตอร์เหล่านี้สามารถส่งไปยังอินเทอร์เฟซส่วนหลังได้ตามต้องการ
มีการเพิ่มโมดูลนักเรียนใหม่โดยใช้อินเทอร์เฟซ API จริงในเครื่อง
มีการเพิ่มโมดูลการจัดการองค์กรใหม่โดยใช้อินเทอร์เฟซ mockjs และแนบตรรกะ js ที่พัฒนาจริง (รวมถึงอินเทอร์เฟซการตรวจสอบและการส่ง ฯลฯ ) ในระหว่างการพัฒนาจริง เพียงกู้คืนรหัสตรรกะจริง
**หากมีข้อสงสัยสามารถส่งประเด็นหรือเข้าร่วมกลุ่มเพื่อพูดคุยได้
หากคุณคิดว่าโปรเจ็กต์นี้มีประโยชน์สำหรับคุณ อย่าลืมคลิกติดดาวที่มุมบนขวา ^_^
# 克隆代码
git clone https://github.com/lss5270/vue-admin-spa.git
# 安装依赖
npm install
# or 直接解压node_modules.7z到当前位置 (比较适合新手)。
# 本地开发 开启服务
npm run dev
# or 直接双击start.bat(比较适合新手)
การเข้าถึงเบราว์เซอร์ http://localhost:2018
# 构建生产环境
npm run build:prod
# or 直接双击build.bat(比较适合新手)
# nginx环境下运行
1.准备nginx环境,自行到nginx官网(https://nginx.org/)下载,并解压
2.双击build.bat后根目录生成一个dist包,把dist整个文件夹拷贝到nginx解压后的html下
3.启动nginx服务:双击nginx.exe
4.访问入口:http://localhost/dist/index.html
………
8.关闭nginx服务:直接删进程
# tomcat环境下运行
参照nginx步骤即可
本项目使用了两套图标系统,具体使用方法参照以下官方链接:
1.http://element.eleme.io/#/zh-CN/component/icon
2.http://fontawesome.io/icons/
使用方法:
a.在index.html中引入<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
b.在使用图标的地方放置图标<i class="fa fa-home" aria-hidden="true"></i>
由于bootstrap不支持mvvm已弃用,本项目使用了全新的elementUI系统,具体使用方法参照以下官方链接:
1.http://element.eleme.io/#/zh-CN/component/installation
具体修复方法,参照Issues中的 #6问题
1.学生模块功能使用了本地api接口,若想正常运行,请下载另外一个node项目(https://github.com/lss5270/vue-admin-spa-api),并且在本地启动该node 项目。
2.该node项目源码,相当于其他后端语言(例如java)提供增删查改接口的源代码。
3.不懂如何使用node项目的同学,可进群讨论
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件。不直接显示
│ ├── global // 全局指令
│ ├── filtres // 全局filter
│ ├── router // 路由
│ ├── store // 全局store管理
│ ├── utils // 全局公用方法
│ ├── view // view视图层
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── static // 第三方不打包资源
│ ├── jquery
│ ├── Tinymce // 富文本
│ ├── dataJson // 模拟接口json
│ └── theme // 主题文件
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
ปัจจุบัน เฉพาะข้อมูลผู้ใช้ การอนุญาตเมนู และสถานะที่เกี่ยวข้องกับการกำหนดค่าแอปเท่านั้นที่ถูกจัดเก็บทั่วโลกโดยใช้ vuex และข้อมูลอื่น ๆ ได้รับการจัดการโดยแต่ละองค์ประกอบทางธุรกิจ
เอ็มไอที
ลิขสิทธิ์ (c) 2017-ปัจจุบัน, LSS