PythonWeb前后端分离后台管理系统Django+vue（完整代码）

见贤思齐

1.前后端分离的架构在前后端分离的架构中，前端和后端分别作为独立的项目进行开发和部署。前端项目通过API与后端项目进行通信。前端：使用Vue.js构建用户界面，调用后端提供的RESTfulAPI获取和发送数据。后端：使用Django构建API，处理业务逻辑和数据存储2.创建django项目及vue项目创建app的时候需要进入项目的目录下 win10cdxmmcdjango-adminstartprojectxmmcdjango-adminstartappapp01以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹 vuecreatevueproject然后按自己的需求选择，可以去专门搜一下创建vue的教程3.配置setting（1）配置数据库DATABASES={'default':{'ENGINE':'django.db.backends.mysql',#加载mysql引擎'NAME':'db_goods',#数据库名称'USER':'root',#mysql账户名'PASSWORD':'123456',#mysql账户密码'PORT':3306,#端口号'HOST':'localhost'}}'运行运行（2）配置模板文件TEMPLATES=[{'BACKEND':'django.template.backends.django.DjangoTemplates','DIRS':[os.path.join(BASE_DIR,'templates')],'APP_DIRS':True,'OPTIONS':{'context_processors':['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},]（3）配置静态文件STATIC_URL='static/'STATICFILES_DIRS=[os.path.join(BASE_DIR,'static')]（4）注册app(使用创建django-adminstartappapp名称)（5）解决跨域问题MIDDLEWARE=['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','corsheaders.middleware.CorsMiddleware',#跨域，一定要写在第三行'django.middleware.common.CommonMiddleware',#'django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware',]'运行运行CORS_ORIGIN_ALLOW_ALL=TrueCORS_ALLOW_CREDENTIALS=True#允许所有的请求头CORS_ALLOW_HEADERS=('*')'运行运行4.查看目录结构web_django/├──static/├──templates/├──user/│├──migrations/│├──__init__.py│├──admin.py│├──apps.py│├──models.py│├──tests.py│├──urls.py│├──views.py├──web_django/│├──__init__.py│├──asgi.py│├──settings.py│├──urls.py│├──wsgi.py├──webapp/│├──migrations/│├──views/│├──__init__.py│├──admin.py│├──apps.py│├──models.py│├──tests.py│├──urls.py│├──views.py5.前后端实现登录（1）编写登录的前端（完整代码） 登录 登录重置注册登录效果图（2）编写登录后端views(视图文件)fromdjango.httpimportJsonResponsefromdjango.contrib.authimportauthenticate,loginfromdjango.contrib.auth.modelsimportUserimportjsondeflogin_view(request):#ifrequest.method=='GET':ifrequest.method=='POST':js=request.body.decode('utf8')data=json.loads(js)username=data['uname']password=data['password']#使用Django自带的authenticate方法验证用户身份user=authenticate(request,username=username,password=password)ifuserisnotNone:#登录成功，将用户添加到当前会话中login(request,user)print(user)returnJsonResponse({'code':200,'success':True,'message':'登录成功','username':str(user)})else:#登录失败，返回错误消息returnJsonResponse({'code':500,'success':False,'message':'用户名或密码错误',})#如果不是POST请求，则返回错误消息returnJsonResponse({'success':False,'message':'只支持POST请求'})defregister_view(request):ifrequest.method=='POST':#从请求体中获取JSON数据js=request.body.decode('utf8')data=json.loads(js)print(data)username=data['uname']password=data['password']#检查用户名是否已经存在ifUser.objects.filter(username=username).exists():returnJsonResponse({'code':400,'success':False,'message':'用户名已存在'})#创建用户user=User.objects.create_user(username=username,password=password)#返回成功消息returnJsonResponse({'code':200,'success':True,'message':'注册成功','username':username})#如果不是POST请求，则返回错误消息returnJsonResponse({'code':405,'success':False,'message':'只支持POST请求'})（3）子视图文件（在userapp中创建一个urls）from.importviewsfromdjango.urlsimportpath,re_pathurlpatterns=[path('login/',views.login_view,name='login'),path('register/',views.register_view,name='register'),]（4）在主路由中配置userapp（主路由跟setting在同一个文件夹）6.管理页面的前后端完整代码（1）管理页面前端代码（业务范围页面）新增取消确定取消确定编辑删除业务范围管理页面效果图（2）业务范围管理系统后端代码viewsfromrest_framework.responseimportResponsefromrest_framework.viewsimportAPIViewfromrest_frameworkimportserializersfromwebapp.modelsimportCoreBusinessclasscoreBusinessSerializers(serializers.ModelSerializer):classMeta:model=CoreBusinessfields='__all__'classcoreBusinessView(APIView):defget(self,request):coreBusiness=CoreBusiness.objects.all()ser=coreBusinessSerializers(instance=coreBusiness,many=True)print(ser.data)returnResponse(ser.data)defpost(self,request):ser=coreBusinessSerializers(data=request.data)ifser.is_valid():CoreBusiness.objects.create(**ser.validated_data)returnResponse(ser.validated_data)else:returnResponse(ser.errors)classcoreBusinessdetailview(APIView):defget(self,request,pk):coreBusiness=CoreBusiness.objects.get(pk=pk)ser=coreBusinessSerializers(instance=coreBusiness,many=False)returnResponse(ser.data)defput(self,request,pk):ser=coreBusinessSerializers(data=request.data)ifser.is_valid():CoreBusiness.objects.filter(pk=pk).update(**ser.validated_data)returnResponse(ser.validated_data)else:returnResponse(ser.errors)defdelete(self,request,pk):CoreBusiness.objects.get(pk=pk).delete()returnResponse('删除成功')（3）配置子路由（4）在主路由中配置该app（主路由跟setting在同一个文件夹）7.创建数据库表在任意一个models中都可以创建数据库表fromdjango.dbimportmodels#联系我们表classContact(models.Model):id=models.AutoField(primary_key=True)company_name=models.CharField(max_length=100,verbose_name='公司名称')phone=models.CharField(max_length=20,verbose_name='电话')address=models.CharField(max_length=200,verbose_name='地址')email=models.CharField(max_length=255,verbose_name='邮箱')classMeta:db_table='contact'创建表完成之后进行数据库的迁移，在项目的根目录下的控制台进行pythonmanage.pymakemigrationspythonmanage.pymigrate8.启动vue项目npmrundev9.打开浏览器访问http://localhost:8080/#/user/login/即可登录