Coder Social home page Coder Social logo

biubiubiu01 / vue-antd-server Goto Github PK

View Code? Open in Web Editor NEW
40.0 2.0 13.0 489 KB

vue+node+express+mysql实现一个完整的后台管理系统

Shell 0.06% JavaScript 34.32% HTML 0.47% Vue 60.03% SCSS 5.13%
mysql node express vue vue-cli vuex vue-router ant-design-vue

vue-antd-server's Introduction

基于vue+node+express开发的后台管理系统(简化版)

前端部分:vue + ant-design-vue + vue-cli + vue-router 搭建 (移植了vue-antd-admin 的部分页面)

后端部分:node+express+mysql 搭建后台

实现功能

vue部分

  • 权限验证(三种权限,不同权限显示不同的路由和页面)
  • 个性化设置(可自定义开启标签页、布局方式改变和换肤等)
  • markdown编辑器 (tui-editor)
  • 富文本编辑器 (tinymce)
  • 系统用户的增、删、改、查
  • 用户基本信息展示

node部分

  • 封装连接mysql的方法;
  • 封装token生成和解译的方法(jsonwebtoken)
  • 登录后,将登录信息存起生成token,返回token给前端,然后前端请求接口时带上token,每次接口请求前先验证token是否正确或者过期
  • 如果用手机号验证码登录,如果未注册,将自动向数据库添加一个用户
  • 用户列表的增删改查,分页排序等;

项目目录

├── public                           ---静态资源文件
├── server                           --- node+express文件     
├── src          
│  ├── api                           ---接口     
│  ├── assets                        ---图片
│  ├── components                    ---可复用的vue组件
│  ├── layouts                       ---布局方式
│  ├── router                        ---路由
│  ├── store                         ---vuex
│  ├── styles                        ---sass样式
│  ├── utils                         ---方法函数
│  ├── views                         ---页面
│  ├── App.vue                       
│  ├── main.js            
│  ├── permission.js                 ---路由拦截           
├── tests                            ---单元测试文件
├── .browserslistrc
├── .env
├── .eslintrc.js
├──  babel.config.js
├── .jest.config.js                  ---jest的配置
├──  package.json
├──  package-lock.json
├──  README.md
└──  vue.config.js                   ---webpack的配置

How to start

# 克隆项目
git clone https://github.com/biubiubiu01/vue-antd-server.git

# 本地已经安装mysql且正常启动

# 最好是安装了navicat,打开navicat,新建一个数据库 然后右键运行sql 选择 server文件夹下面的 web_antd.sql 等待一会后即可获取该项目所有表

# 进入项目目录
cd vue-antd-server

# 安装依赖
npm install 

# 运行系统
npm run serve

# 进入node服务器文件夹
cd vue-antd-server/server

# 安装依赖
npm install 

# 运行node服务器
npm start

还未解决的问题

  • excel导出乱码
  • 一些其他还没想起来的功能 ....

最后

这是第一次使用Node+express搭建后台,学到了很多后台相关基础知识,由于刚开始写,还有很多问题,还在慢慢改进。 开源不易,若觉得这个项目对你有用,可以点个star

vue-antd-server's People

Contributors

biubiubiu01 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

vue-antd-server's Issues

一些小的建议

想问一下为什么不考虑 nest ?前端都用vue3 了 后端用nest呢?
性能这块后续如何考虑?
考虑加入鲸鱼或者k8s吗?
数据库考虑mongo或者pg吗?
很看好你这个项目~

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.