อิงตาม koa2+mysql+vue2.0+Element+ESlint sunshine ระบบการจัดการเนื้อหา
简单文章系统模板,含注册、登录、权限管理、用户管理范例。旨在提供一个完整的前后台node+vue2.0开发的脚手架,由您按需扩展。
1.用户注册:邮箱激活帐号、邮箱密码找回;用户登录使用token验证。
2.用户管理:新增帐号、编辑用户、删除用户、激活用户;
3.分类管理:无限级文章分类管理;
4.文章管理:文章审核、新增、编辑、删除;
5.上传管理:删除上传文件、删除上传记录;
คลิกเพื่อดูการสาธิตออนไลน์
บัญชีทดสอบ
ผู้ใช้: รหัสผ่าน vip会员
: vip123
git clone https://github.com/scscms/vue-scscms.git
//先git克隆或者下载下来,进入项目目录执行npm命令
npm install
อิงจาก Koa2 โดยใช้ฟังก์ชันอะซิงโครนัส Node.js เวอร์ชัน v8.9 หรือสูงกว่า (แนะนำ 8.11.0+)
npm run dev
จากนั้นลงทะเบียนบัญชีและเปิดใช้งาน เข้าสู่ระบบ และเริ่มการเดินทางของคุณ
หมายเหตุ: เนื่องจากใช้ฐานข้อมูลสาธารณะและเปิดการอนุญาตสูงสุดให้ทุกคนได้สัมผัส ข้อมูลทั้งหมดอาจถูกแก้ไขหรือลบโดยผู้ใช้รายอื่น!
ฐานข้อมูลสาธารณะถูกใช้เป็นค่าเริ่มต้น เพื่อให้ได้รับประสบการณ์การใช้งานที่ดีขึ้นและความปลอดภัยของข้อมูล ขอแนะนำให้คุณติดตั้ง mysql ด้วยตัวเองเพื่อทำการทดสอบ ขั้นแรกให้ติดตั้ง mysql และสร้างผู้ใช้ใหม่ ฯลฯ จากนั้นบทช่วยสอนจะแก้ปัญหาด้วยตัวเอง จากนั้นสร้างฐานข้อมูลและตารางใหม่ใน mysql เพื่อความสะดวกในการใช้งาน เราได้จัดเตรียมเอกสาร sql ไว้ที่นี่: ดูที่ server/mysql.sql
หรือ server/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配置文件
cdn
เพื่อลดไฟล์บรรจุภัณฑ์ โปรเจ็กต์นี้สร้างและปรับปรุงโดยตรงโดย vue-cli 3.0
ใช้ webpack V4
และ node V10.9.0
ฉันกำลังรีบและหลีกเลี่ยงไม่ได้ที่จะทำผิดพลาด ดังนั้นโปรดแก้ไขฉันด้วย เรายินดีรับการแลกเปลี่ยนและการเรียนรู้ และเสนอความคิดอันมีค่าของคุณ
กลุ่ม QQ: 25702761 อีเมล: [email protected]