Code Monkey home page Code Monkey logo

vue-scscms's Introduction

license npm node koa vue Element

基于koa2+mysql+vue2.0+Element+ESlint阳光内容管理系统

简单文章系统模板,含注册、登录、权限管理、用户管理范例。旨在提供一个完整的前后台node+vue2.0开发的脚手架,由您按需扩展。

功能简介

1.用户注册:邮箱激活帐号、邮箱密码找回;用户登录使用token验证。
2.用户管理:新增帐号、编辑用户、删除用户、激活用户;
3.分类管理:无限级文章分类管理;
4.文章管理:文章审核、新增、编辑、删除;
5.上传管理:删除上传文件、删除上传记录;

在线预览

image 点击查看在线DEMO

测试帐号

user:vip会员 password:vip123

安装

git clone https://github.com/scscms/vue-scscms.git

//先git克隆或者下载下来,进入项目目录执行npm命令

npm install

Node.js要求:

基于 Koa2, 使用了异步函数,其中Node.js版本v8.9 或更高版本 (推荐 8.11.0+)

特别说明

  • 1.如果您只是想查看效果可执行
npm run dev

然后注册帐号并激活,登录,开始旅途。

注意:因使用公用数据库,且开放最大权限供所有人体验,所以所有资料都有可能被其他用户修改或删除的可能!

  • 2.安装私有数据库

默认情况下使用的是公用数据库。为了达到更好的用户体验和数据安全推荐您自己安装mysql来测试。 首先安装mysql和新建用户等,教程自行解决。 接着在mysql新建数据库和建表,为了方便操作在此已经提供sql文档:参见server/mysql.sqlserver/mysql8.sql

  • 然后打开文件server/config.js修改数据库和邮箱配置。

  • 然后打开文件vue.config.js修改target: 'http://103.27.4.146:3001'为你自己的服务器地址,默认为target: 'http://localhost:3001',

  • 然后打开文件server/common.js修改web_domain: 'http://103.27.4.146:3001'为你自己的服务器地址,默认为web_domain: 'http://localhost:3001',

  • 最后执行npm脚本:

npm run start #运行前后端(开发)

开始您的愉快之旅。

注意:在开发环境下上传的图片不能正常访问,需要在生产环境下才能正常浏览图片!(编辑器中的图片使用的是beas64不受此影响)

  • 开始完成后打包
npm run build
  • 上线后只运行服务
npm run server

项目架构

├── dist // Vue build 后的文件夹
│   ├── css //打包后的css文件
│   ├── fonts //打包后的字体文件
│   ├── img //打包后的图片文件
│   ├── js //打包后的js文件
│   ├── upFile //上传文件夹
│   ├── favicon.ico // ico图标
│   └── index.html // 首页模板
├── public // 首页模板文件
│   ├── favicon.ico // ico图标
│   └── index.html // 首页模板
├── server // Koa后端,用于提供Api
│   ├── api // api接口文件夹,已经为每个接口独立一个文件
│   ├── common.js // 前后台共用配置参数,包括权限配置
│   ├── config.js // 后台配置文件夹,主要是数据库及邮箱服务配置
│   ├── mysql.sql // 数据库表文档
│   └── routes.js // 后台route-路由
├── src // vue-cli 生成&自己添加的utils工具类
│   ├── assets // 相关静态资源存放
│   ├── components // 公用组件
│   │      ├── index.js
│   │      ├── Sidebar.vue //侧边栏组件
│   │      └── upFile.vue // 上传组件
│   ├── page // 单文件组件
│   │    ├── Article // 文章
│   │    │     ├── add.vue //添加、编辑文章
│   │    │     ├── list.vue //文章列表
│   │    │     └── sort.vue //文章分类
│   │    ├── UpFile // 上传
│   │    │     └── list.vue //上传列表
│   │    ├── User // 用户
│   │    │     ├── add.vue //添加、编辑用户
│   │    │     └── list.vue //用户列表
│   │    ├── Home.vue //公共首页
│   │    ├── Login.vue // 登录页、注册页
│   │    └── NoFind.vue // 404页面
│   ├── store // vuex文件
│   │    └── index.js // 缓存用户信息
│   ├── utils // 插件
│   │    ├── index.js
│   │    ├── ajax.js  //axios封装请求
│   │    └── storage.js // localStorage缓存
│   ├── App.vue // 主文件
│   ├── main.js // 引入Vue等资源、挂载Vue的入口js
│   └── routes.js // 前端路由
├── static // README引用的图片文件夹(与项目无关)
├── .editorconfig // 编辑器格式配置
├── .gitignore // Git之忽略文件
├── app.js  // 后端服务入口文件
├── babel.config.js  // babel配置文件
├── log.txt  // 后端请求日志
├── package.json // npm的依赖、项目信息文件
├── package-lock.json // npm安装包锁定文件(想更新包时要删除它)
├── README.md	//说明文档
├── server-entry.js // 后端服务入口重启文件
├── vue.config.js // vue配置文件

后台API接口说明

  • 1、login: 用户登录(访问权限:游客)
  • 2、register: 用户注册(访问权限:游客)
  • 3、listArticle: 文章列表(访问权限:自定义)
  • 4、listSort: 分类列表(访问权限:自定义)
  • 5、saveUpFile: 保存上传记录
  • 6、listUpFile: 上传文件列表(访问权限:自定义)
  • 7、delFile: 删除上传文件(访问权限:自定义)
  • 8、retrieve: 找回密码(访问权限:游客)
  • 9、findPassword: 激活找回密码(访问权限:游客)
  • 10、active: 帐号激活(访问权限:游客)
  • 11、changePassword: 修改密码(访问权限:所有用户)
  • 12、updateArticle: 更新文章(访问权限:自定义)
  • 13、passedArticle: 审核文章(访问权限:自定义)
  • 14、deleteArticle: 删除文章(访问权限:自定义)
  • 15、getArticleById: 通过ID获取文章详情(访问权限:游客)
  • 16、updateSort: 更新分类(访问权限:自定义)
  • 17、deleteSort: 删除分类(访问权限:自定义)
  • 18、batchDelSort: 批量删除分类(访问权限:自定义)
  • 19、listUser: 用户列表(访问权限:自定义)
  • 20、passedUser: 审核用户(访问权限:自定义)
  • 21、deleteUser: 删除用户(访问权限:自定义)
  • 22、getUserById: 通过ID获取用户信息(访问权限:同updateUser)
  • 23、upUserPic: 用户上传头像(访问权限:所有用户)
  • 24、updateUser: 更新用户(访问权限:自定义)
  • 25、upFile: 上传过程(访问权限:自定义,代码在server/routes.js里)

后记

  • 2018-10-23 使用cdn减少打包文件
  • 2020-04-12 使用node-windows实现服务器发布

此项目直接由vue-cli 3.0生成并改进。使用的是webpack V4node V10.9.0

时间匆忙难免错漏,肯请指正。并欢迎交流学习,并献上您的宝贵意思。

QQ群:25702761 邮箱:[email protected]

vue-scscms's People

Contributors

scscms 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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

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

vue-scscms's Issues

git clone 下来npm install后

无论是运行,npm run dev,还是 npm run server都会报..
Couldn't find preset "es2015" relative to directory
什么原因?

我又来了,关于配置的一点疑问

config/index.js
server/common.js
这里面修改的两个ip是http服务的ip?
index dev里面有个port 是npm run dev用的端口?
于是问题来了..我npm run build 后npm run server 可以正常运行,各项功能正常..
但是npm run dev不知道是哪个设置的问题,前台ajax传不出来,直接canceled了..推测是跨域了..但我上面的地址全部设成一样的,端口也改成一样的,但就是不行,但是build后就能运行..不晓得是哪里的问题...
mysql..我读取你的mysql文件所有和时间有关的项都会出错..似乎和那个默认值有关,我全部把数据类型改成bigint存时间戳去了..我想问下,没有直接存时间戳是有什么考虑么?

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.