当前位置: 首页 > Web前端 > vue.js

vuedjango常用功能对接

时间:2023-04-01 12:10:46 vue.js

vue-django-rest-framework项目地址欢迎fork在线demo这是一个使用Vue和Django的应用示例。使用ElementUI搭建前端模板后端使用django-rest-framework提供apiswagger前后端api对接文档实现了三层注释JWT登录faker模拟数据的功能,即比前端Mockapi操作更强大,前端使用axios,后端使用rest_framework标签云。有BUG,从别处移植过来的。作者:mikeledate:2019-12-26一些说明wiki前端src/store使用vuex保存name,token等state可以保存在cookie或者localStoragesrc/api和后端api接口使用axossrc/router路由,也就是导航的url对接*.vue文件如果太多无法归类,参考src/router/modules//src/router/modules/blog.jsconstblogRouter...//src/router/index.jsimportblogRouterinsrc/router/indexfrom'./modules/blog'...exportconstconstantRoutes=[...blogRouter,]src/components经常用到,封装成组件,比如comment,三-图层注释src/filters时间过滤//使用{{created|parseTime}}src/layout背景框,也可以做成前台框Globalstyles//src/styles/element-ui.scss//formobilephone@mediaonlyscreenand(max-width:414px){.hidden-s-only{display:none!important}}@mediaonlyscreenand(min-width:415px){.hidden-s-and-up{display:none!important}}src/utils请求中间件,类似中间件在python//src/utils/api.jsconfig.headers['Authorization']=getToken()//src/utils/auth.jsconstTokenKey='Authorization'...exportfunctionsetToken(token){returnCookies.set(TokenKey,'JWT'+token)}三层注释回复

回复
...data(){return{level:null}}...if(comment.blog){//一级评论this.comments.unshift(data)console.log('add1level')}elseif(this.level===3){//3级评论this.comments.forEach((x,i,comments)=>{//console.log(i,x)x.sub_comment.forEach((xs,j,c)=>{//console.log(j,xs)if(xs.id===data.parent_comment){xs.sub_comment.unshift(data)//console.log('添加3级')}})})console.log('level3')}elseif(this.level===2){//Level2commentsthis.comments.forEach((x,i,comments)=>{if(x.id===data.parent_comment){x.sub_comment.unshift(data)console.log('add2level')}})}对应后端三个CommentSerializerbackend#~/.zshrcshortencommandaliasdapp="python3manage.pystartapp"aliaspm="pythonmanage.py"aliasdsp="django-adminstartproject"aliasdev="npmrundev"如果你创建一个新的应用程序,将它移动到appsdappcomment&mvcommentappsapps/blog/serializers.py#将pythondict序列化为json数据permissions.py#权限配置pagination.py#自定义分页,返回码=20000viewsets.pymodels.pyrest/router.pyfromrest_frameworkimportroutersfromblog.viewsets导入BlogViewSet,TagViewSet,CatoryViewSet,CommentViewSetfromuser.viewsetsimportUserViewSet,SmsCodeViewsetrouter=routers.DefaultRouter()router.register('blogs',BlogViewSet)router.register('users',UserViewSet)...router.register('code',SmsCodeViewset,base_name='code')#模拟短信注册rest/schema.pygraphql接口,apiapps/blog/viewsets.pyfilter_fields='__all__'#如果使用url_filters过滤search_fields='__all__'#如果要搜索q=vue#apps/user/models.py...defsave(self,*args,**kwargs):'''将用户名保存为名称'''self.name=self.usernamesuper(UserProfile,self).save(*args,**kwargs)setunique=True标签不重复pythonmanage.pymakemigrationspythonmanage.pymigrate如果重复,先删除重复的,然后执行最后2行#apps/blog/models.pyclass标签(models.Model):name=models.CharField(max_length=70,unique=True)ORM操作注意事项多对多操作取决于ManyToManyField在哪个model下面我们假设一个学生要找一所学校学习,你要建一所学校,只有对应的学校名称才能决定是哪所学校。#models.pyclassBlog(models.Model):tags=models.ManyToManyField(Tag,blank=True)#ORMtag=Tag.objects.first()tag.blog_set.create(类别=类别,所有者=用户,body=假.text(),title=fake.sentence())graphql使用localhost:8000/graphql//复制到文本框,然后点击运行{users{id,username}}rest_framework官方有很多好东西网站。文档也写的很好,注释掉了很多需要的东西。使用说明gitclonehttps://github.com/toyourheart163/vue-django-rest-frameworkcdvue-django-rest-frameworkSetup$npminstall$pipinstall-rrequirements.txt$pythonmanage.pymigrate$pythonimport_data.py#生成faker数据$pythonmanage.pyrunserverlocalhost:8000另一个终端窗口npmrundevlocalhost:9528swagger前后端api对接文档docs