Based on koa2+mysql+vue2.0+Element+ESlint sunshine content management system
简单文章系统模板,含注册、登录、权限管理、用户管理范例。旨在提供一个完整的前后台node+vue2.0开发的脚手架,由您按需扩展。
1.用户注册:邮箱激活帐号、邮箱密码找回;用户登录使用token验证。
2.用户管理:新增帐号、编辑用户、删除用户、激活用户;
3.分类管理:无限级文章分类管理;
4.文章管理:文章审核、新增、编辑、删除;
5.上传管理:删除上传文件、删除上传记录;
Click to view online DEMO
Test account
user: vip会员
password: vip123
git clone https://github.com/scscms/vue-scscms.git
//先git克隆或者下载下来,进入项目目录执行npm命令
npm install
Based on Koa2, using asynchronous functions, Node.js version v8.9 or higher (8.11.0+ recommended)
npm run dev
Then register an account and activate it, log in, and start your journey.
Note: Because it uses a public database and opens maximum permissions for everyone to experience, all information may be modified or deleted by other users!
The public database is used by default. In order to achieve better user experience and data security, it is recommended that you install mysql yourself for testing. First install mysql and create a new user, etc., and the tutorial will solve it yourself. Then create a new database and table in mysql. For the convenience of operation, the sql document has been provided here: see server/mysql.sql
or server/mysql8.sql
Then open the file server/config.js
to modify the database and mailbox configuration.
Then open the file vue.config.js
and modify target: 'http://103.27.4.146:3001'
to your own server address. The default is target: 'http://localhost:3001',
.
Then open the file server/common.js
and modify web_domain: 'http://103.27.4.146:3001'
as your own server address. The default is web_domain: 'http://localhost:3001',
.
Finally execute the npm script:
npm run start #运行前后端(开发)
Start your pleasant journey.
Note: Images uploaded in the development environment cannot be accessed normally, and you need to browse the images normally in the production environment! (The pictures in the editor use beas64 and are not affected by this)
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配置文件
cdn
to reduce packaging files This project is directly generated and improved by vue-cli 3.0
. webpack V4
and node V10.9.0
are used.
I'm in a hurry and it's inevitable that I'll make mistakes, so please correct me. We welcome exchanges and learning, and offer your precious thoughts.
QQ group: 25702761 Email: [email protected]