Skip to content

turbo73/drf-Vue-website

 
 

Repository files navigation

一、网站效果展示:

①公共模块(包括标题logo、搜索框、登录与注册按钮、页面导航栏,位于各个页面的顶部): 公共模块

②首页: 首页1

首页2

③案例详情页: 案例详情页

④案例编辑页:

案例编辑页1

案例编辑页2

案例编辑页3

⑤问题相关页面: 问题相关页面

二、后端项目(back-end-src目录)

1. 架构说明

  1. Xadmin+Django2全家桶(①django;②django-REST-framework;③django-filter;④django-simple-captcha;⑤django-REST-framework-jwt;⑥django-favicon)

2. 使用教程(下面的命令皆以back-end-src为当前目录运行)

  1. 环境搭建。安装好Python3.5或者Python3.6后,命令行运行pip install -r python-lib-requirements.txt(注意,请保证你使用的Django版本要至少为2.0)
  2. 数据库生成。修改APP_Inventor_case_base/settings.py中的DATABASES为你自己的Mysql数据库配置,在/back-end-src下依次运行python manage.py makemigrationspython manage.py migrate
  3. 启动后台程序,命令行运行python manage.py runserver

3. 工具脚本说明:

tool_scripts/clean_useless_files.py用于删除/media下已经失效的用户上传图片文件(完全没有被当前任何数据引用到的);

tool_scripts/import_data.py用于往数据表中插入预设数据(存放于tool_scripts/data/wait_to_import目录当中),用于初始化数据库;

tool_scripts/switch_setting.py用于将tool_scripts/data/db_backup目录下制定文件(如local.py)替换到APP_Inventor_case_base/settings.py

三、前端项目(front-end-src目录)

1. 架构说明

  1. 项目整体使用TypeScript(它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程)
  2. webpack+Vue全家桶(①Vue2;②Vue-router;③axios;④Vuex)+Bootstrap3的前端项目框架(附注释)
  3. 前端表单验证使用了1000hz-bootstrap-validator;文件上传使用了bootstrap-fileinput;富文本编辑使用了tinyMCE;图片编辑使用了cropper;轮播图使用了Owl-Carousel 2

2. 使用教程(下面的命令皆以front-end-src为当前目录运行)

  1. 环境搭建。安装好node.js后,命令行运行npm install
  2. 启动前端程序。命令行运行npm run dev

四、运维和部署脚本(operation-and-deployment-src目录)

1. 架构说明

  1. fabric
  2. Supervisor(将operation-and-deployment-src/supervisor/ProgrammingCases.conf拷贝到/etc/supervisor/conf.d/目录下)
  3. ​Nginx(配置文件请见operation-and-deployment-src/nginx/ProgrammingCases

2. 使用教程(下面的命令皆以operation-and-deployment-src为当前目录运行)

  1. fabfile.py为fabric部署脚本,命令行运行fab 函数名即可执行对应操作
  2. fab remoteBackupDB服务器数据库进行备份(仅对_BACKUP_TABLES中包含的表),然后把备份数据打包下载到本地
  3. fab localBackupDB本地数据库进行备份(仅对_BACKUP_TABLES中包含的表)
  4. fab localRestoreDB利用数据库备份文件和Djangomigration功能对本地数据库进行恢复
  5. fab remoteRestoreDB利用数据库备份文件和Djangomigration功能对服务器数据库进行恢复
  6. fab build使用webpack将前端代码进行编译压缩,然后将前后端项目代码进行打包,用作备份或者上传服务器进行部署
  7. fab deploy将在本地打包好的项目代码上传到服务器然后再解包
  8. fab rollback项目代码回退到上一个版本,并重启任务
  9. fab startServer利用Supervisor启动网站
  10. fab stopServer利用Supervisor停止网站的运行
  11. fab checkServer利用Supervisor查看当前网站的运行状态

五、补充说明

  1. github_commit.sh是一个非常强大的脚本,只要在命令行输入.github_commit.sh "你的注释"即可完成代码的提交(最重要的是把所有敏感的服务器和数据库配置信息统统替换掉,然后再上传到github,上传完成后再还原回来)

About

编程案例分享网站(基于Django-REST-Framework和Vue.js)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 32.2%
  • Python 26.2%
  • CSS 23.7%
  • JavaScript 10.0%
  • TypeScript 6.2%
  • HTML 1.6%
  • Shell 0.1%