vue admin spa

Backend management system vue-admin-spa (Note: This project has been stopped. If necessary, you can go to the latest vue3.0 version, which has more and more complete functions)

Technology stack used: vue + vue-resource + vue-router + vuex (essential for spa) + element-ui + ES6 + webpack + npm

Test address (if it cannot be opened, try changing the DNS to 114.114.114.114)

Preface

This project is built by drawing on vue scaffolding and three projects (learning from each other's strengths), and is constantly being improved. The purpose is to be closer to and suitable for everyone's project needs, and more suitable for secondary development. The following points have been rewritten:

• Login and registration (including MD5 encryption)

• Permission control, the menu is displayed and hidden based on the permission data returned from the user interface. If you tap the address bar by hand, it will jump to 404 (wrong address bar) or 401 (correct address bar but no permission), and permissions can be dynamically modified in the system settings.

• Switch themes, fully support users to manually switch themes and remember themes

• All data is simulated locally in json. Secondary developers only need to replace the json path with the actual interface path. Even novices can easily handle the backend management system.

• All dynamically operated button click elements have already printed out relevant parameters on the console. During actual development, these parameters can be submitted to the back-end interface as needed.

• A new student module has been added, using the local real API interface.

• A new organization management module is added, using the mockjs interface and attaching the real developed js logic (including verification and submission interface, etc.). During actual development, just restore the real logic code.

illustrate

• The purpose of open source: to provide secondary developers based on the bottom layer for more people to learn and refer to, and to avoid detours.
• Demand customization: This project is open source as the underlying framework and currently only has some basic functions. If you have other functional requirements, please contact the group owner.
• Contribute and join: More developers are welcome to join this underlying development, contribute and maintain together, please contact the group owner for details.
• Timely communication: In order to facilitate everyone's technical communication, this project has created a new QQ group--645582193

**If you have any questions, you can submit them to issue or join the group for discussion.

If you think this project is helpful to you, remember to click Star on the upper right ^_^

Functions (part of the data is simulated using local json, and some uses mockjs. Due to the recent blockade of the Douban API, some functions using the Douban API cannot be previewed temporarily)

• System description
• Login/Logout
• Password change
• Personal homepage
• Avatar upload
• Permission verification
• Modify permissions
• sidebar
• bread crumbs
• Rich text editor
• Switch theme (click the avatar to drop down)
• Form verification and submission
• List addition, deletion, modification, search, sorting, and export (basic functions of the backend management system)
• 401, 404 redirect page
• export excel
• views-tab
• More features on PC will be available soon...

develop

    # 克隆代码
    git clone https://github.com/lss5270/vue-admin-spa.git
    # 安装依赖
    npm install
    # or 直接解压node_modules.7z到当前位置 （比较适合新手）。

    # 本地开发 开启服务
    npm run dev
    # or 直接双击start.bat（比较适合新手） 

Browser access http://localhost:2018

release

  
    # 构建生产环境
    npm run build:prod
    # or 直接双击build.bat（比较适合新手） 

Simulate the official environment

    # 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步骤即可

About icons

    本项目使用了两套图标系统，具体使用方法参照以下官方链接:
    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>

About UI system

    由于bootstrap不支持mvvm已弃用，本项目使用了全新的elementUI系统，具体使用方法参照以下官方链接:
    1.http://element.eleme.io/#/zh-CN/component/installation
    

Regarding the problem of 404 problem of background image path in .vue file and packaging to production environment path

    具体修复方法，参照Issues中的 #6问题
    

About the API interface of the student module

    1.学生模块功能使用了本地api接口，若想正常运行，请下载另外一个node项目（https://github.com/lss5270/vue-admin-spa-api），并且在本地启动该node 项目。
    2.该node项目源码，相当于其他后端语言（例如java）提供增删查改接口的源代码。
    3.不懂如何使用node项目的同学，可进群讨论
    

Directory structure

├── 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

Status management

Currently, only user information, menu permissions, and app configuration-related status are stored globally using vuex, and other data are managed by each business component.

License

MIT

Copyright (c) 2017-present, LSS