django+vue环境搭建

最近根据项目需要，使用django+vue来做个项目，当前第一次使用这种模式进行开发，故用本文档记录使用，让后续想使用的小伙伴可以进行参考，少走弯路

环境准备

• Pycharm
• Python37
• Django==2.2.1
• Vue
• Element
• Jquery
• Axios

创建django项目

建议参考相关文章创建Django项目

修改项目配置

• 在Django项目settings.py 中添加如下配置

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "statics")
)

• 在项目根目录下添加文件夹statics→js→（axios，element，jquery，vue）如图所示

  
  
  image.png

• 在环境准备中的对应的js下载至对应的目录，得到如图所示的文档结构

  
  
  image.png

页面引用

• 创建一个django app，并在其app下创建templates
• 新增一个模板文件
• 在模板文件夹中增加一个test.html，并将一下代码copy至test.html

{% load staticfiles %}


    
    

    
    
    
    
    



    
    
    

    立即创建

• 编写服务端代码，在Appname.views文件中添加一下代码

class Test(TemplateView):
    template_name = 'test.html'

    def get_context_data(self, **kwargs):
        context = super(Test, self).get_context_data(**kwargs)
        return context

    def post(self, request, *args, **kwargs):
        body = json.loads(request.body)
        ip = body["ip"]
        username = body["username"]
        password = body["password"]
        print(ip, username, password) #用于在Terminal中的打印从前台获取的参数，实际coding中不需要
        return HttpResponse('succeed')

• 添加url配置
  1.在项目所属的App下添加以下配置

from Appname.views import Test
urlpatterns = [path("/Test/", Test.as_view(), name='Test'),]

2.在项目所urls中添加以下配置

from django.urls import path, include
urlpatterns =[path("Test",include("Appname.urls")),]

验证

• 通过Terminal输入 python manage.py runserver 启动django项目

• 在浏览器中输入http://127.0.0.1:8000/Test/Test/进行访问，可以得到如图所示的画面
  

  image.png

• 输入测试信息后点击立即创建，得到如图提示

  
  
  image.png

• 打开启动项目的Terminal，可以看到前台输入的信息打印在Terminal上

  
  
  image.png

• 至此，一个简单的Dome搭建成功，可以根据业务逻辑嗨起来了