Vue+django完成个人博客网站(二)：代码编写与注意问题

---

请直接跳转至：http://722first.club/article/7

---

Vue+django完成个人博客网站(二):代码编写与注意问题
写了一个小时的博客,就这样没保存就没了…后来查了一下可以根据cookies找回来但是费了九牛二虎之力去找的时候发现已经被刷新了…不过还是不错的,添加了个chrome插件可以编辑cookies值.烦归烦,这篇博客还是要写一下的,一个是对前面时间的总结,一个是对技术的总结. 似乎时间有点晚了所以需要快一点完成,后面再改…

编程思路:
            利用vue做前端界面(这里需要element做ui界面,当然你也可以用bootstrap,element只是比较适合vue,但是比bootstrap要少一点样式),利用js中的axios来请求django中写的api,django获取前端请求数据然后请求数据库得到数据并返回数据。在backsite/blog/models.py中编写创建数据库的语句(这种方式创建数据库确实很好用),然后可以引入xadmin(这里也可以用admin后面我们再说)来直接做为后端界面,也算是很大一部分偷懒了....python是站在巨人的肩膀上。

image.png

            1029finish就是我们的vue项目,backsite就是我们的django的项目,我们引用了百度的ueditor和大佬写的xadmin.









Vue部分:
    知识点:
            1.这里直接放一个vue的官网https://cn.vuejs.org/v2/guide/   vue的语法并不难,可以直接打开别人的代码稍微看一下就能看懂。







           2.子组件向父组件传递数据. 父组件向子组件传递数据还是比较简单的,在子组件里面加一个props["a"] a可以直接在父组件中利用 :a=""来传递值。



        当我们需要从子组件到父组件传值的时候我们就需要一个语法@child-msg="father" 例如我们需要从a组件传递数据k到A组件,我们就需要在A组件中调用a时<a @child-msg="father">,这里的father是A中

        允许在a中调用的方法。例如    



                                     



      Father(val) {
           this.father_k=val
       }





            然后我们在a组件中这样写







        Child(val) {
          this.$emit('child-msg', this.k)
      }



        这样就应该很清楚了。



      注意点：
                1.设置路由mode: 'history',如果你不加的话你会发现你的网页是/#/样子的。image.png



            



                2.保存css、js、image等需要引用的文件的时候最好是放在vue项目根目录下的static，或者放在/src/assets/文件夹中。







                3.npm run build 打包的时候需要修改一下/config/index.js中的assetsPublicPath: '/',   // 打包用./   image.png







                4.如果你发现你打包后的文件在django 项目中部分引用的路径是错误的那你需要修改一下image.png ，因为你在写代码的时候用的是根目录下面的static而打包后生成的static会和你的页面在一个目录下面。







    Django部分
        知识点：
                    1. /blog/models.py 中编写创建数据库语句  这里直接贴出一些代码 附带一个比较全的链接：https://www.cnblogs.com/maociping/p/5255834.html





 

                    # 创建文章详情表
             class AritcleDatils(models.Model):
             Content = UEditorField(
                 verbose_name="文章内容",
                 height=500,
                 width=900,
                 max_length=102400,
                 default=u"开始一篇新的文章",
                 blank=True,
                 imagePath="./images/",
                 toolbars="besttome",
                 filePath="./files/",
             )
             ArticleId = models.ForeignKey(
                 Article, on_delete=models.CASCADE, verbose_name="外键文章id"
             )
             LastDataChange = models.DateTimeField(default=datetime.now, verbose_name="最后修改时间")
             class Meta:
                 verbose_name = "文章详情"
                 verbose_name_plural = verbose_name
             def __str__(self):
                 return str(self.ArticleId)







                    2./blog/views.py中编写请求数据库的语句这里也可以去网上找一下....

            #通过分类id得到分类  id空获得所有
             @require_http_methods(["GET"])
             def GetCategoryById(request):
               response = {}
               try:
                id=request.GET.get("id")
                if id == 0 or id=="0":
                  category=models.Category.objects.all()
                else:
                  category=models.Category.objects.filter(Id=int(id))
                  response['category']=json.loads(serializers.serialize("json",category))
                  response['msg'] = 'success'
                  response['error_num'] = 0
               except  Exception as e:
                response['msg'] = str(e)
                response['error_num'] = 1
               return JsonResponse(response)



                3. /blog/xadmin.py中编写后台数据库的相关代码，这里给出一点代码 



                   # -*- coding: utf-8 -*-#记得加上这句话
     from xadmin import views
     import xadmin
     from . import models
     
     class BaseSetting(object):
      """xadmin的基本配置"""
      enable_themes = True  # 开启主题切换功能
      use_bootswatch = True
      
    class GlobalSettings(object):
      """xadmin的全局配置"""
      site_title = "722个人博客"  # 设置站点标题
      site_footer = "blog"  # 设置站点的页脚
               menu_style = "accordion"  # 设置菜单折叠
            class AritcleDatilsAdmin(object):
            #后台展示字段
               list_display=['ArticleId','LastDataChange','Content']
               search_fields=['ArticleId']
               list_editable=['Content']
               style_fields={'Content':'ueditor'}

            xadmin.site.register(views.CommAdminView, GlobalSettings)
            xadmin.site.register(views.BaseAdminView, BaseSetting)
            xadmin.site.register(models.AritcleDatils,AritcleDatilsAdmin)



    注意点：
                1.后台我们要写博客的话一定会需要一个富文本编辑器，不妨去找一下自己喜欢的富文本编辑器。教程很多这里就不贴了，本项目用的是百度开源的DjangoUeditor。

                3.这里记得有个

                DEBUG = True  # 上线关闭
                ALLOWED_HOSTS = ["*"]
                CORS_ALLOW_CREDENTIALS = True
                CORS_ORIGIN_ALLOW_ALL = True
                CORS_ALLOW_HEADERS = "*"
                   这个是配置允许访问的ip的，我么你可以用python manage.py runserver 0.0.0.0:8000 来允许其他ip访问，

            但是要在上面改掉["*"]，允许任何host和访问头。当然django并不建议我们这样做，我们可以后期再改一下。

              4.我们需要让django来知道我们用的静态页面是哪个，配置我们在django里面的

            TEMPLATES = [
              {
                "BACKEND": "django.template.backends.django.DjangoTemplates",
                "DIRS": ["../1029finish/dist"],
                "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",
                  ]
              },
                                ]
                5.他妈的又没保存  这里直接放backsite/settings.py代码  (自行排版)：



                # -*- coding: utf-8 -*-                    
                """
                Django settings for backsite project.
                Generated by 'django-admin startproject' using Django 2.0.
                For more information on this file, see
                https://docs.djangoproject.com/en/2.0/topics/settings/
                For the full list of settings and their values, see
                https://docs.djangoproject.com/en/2.0/ref/settings/
                """
                import os
                import blog
                # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
                BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
                # Quick-start development settings - unsuitable for production
                # See https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/
                # SECURITY WARNING: keep the secret key used in production secret!
                SECRET_KEY = "g64dw+#+*hmmtil-hwvl76*i$0vrq%u*8jdq*&&e#in%laf_ok"
                # SECURITY WARNING: don't run with debug turned on in production!
                DEBUG = True  # 上线关闭
                ALLOWED_HOSTS = ["*"]
                CORS_ALLOW_CREDENTIALS = True
                CORS_ORIGIN_ALLOW_ALL = True
                CORS_ALLOW_HEADERS = "*"
                # Application definition
                INSTALLED_APPS = [
                "django.contrib.admin",
                "django.contrib.auth",
                "django.contrib.contenttypes",
                "django.contrib.sessions",
                "django.contrib.messages",
                "django.contrib.staticfiles",
                "corsheaders",
                "blog",
                # this is xadmin
                "xadmin",
                "crispy_forms",
                "reversion",
                "DjangoUeditor",
                'recently'
                ]
                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",
                ]
                ROOT_URLCONF = "backsite.urls"
                TEMPLATES = [
                {
                "BACKEND": "django.template.backends.django.DjangoTemplates",
                "DIRS": ["../1029finish/dist"],
                "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",
                ]
                },
                }
                ]
                STATICFILES_DIRS = [os.path.join(BASE_DIR, "../1029finish/dist/static")]
                WSGI_APPLICATION = "backsite.wsgi.application"
                # Database
                # https://docs.djangoproject.com/en/2.0/ref/settings/#databases
                DATABASES = {
                "default": {
                "ENGINE": "django.db.backends.mysql",
                "NAME": "",
                "USER": "",
                "PASSWORD": "",
                "HOST": "47.107.80.19",
                "PORT": "3306",
                "client_encoding": "UTF8",
                }
                }
                # Password validation
                # https://docs.djangoproject.com/en/2.0/ref/settings/#auth-password-validators
                AUTH_PASSWORD_VALIDATORS = [
                {
                "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator"
                },
                {"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator"},
                {"NAME": "django.contrib.auth.password_validation.CommonPasswordValidator"},
                {"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator"},
                ]
                # Internationalization
                # https://docs.djangoproject.com/en/2.0/topics/i18n/
                LANGUAGE_CODE = "zh-hans"
                TIME_ZONE = "Asia/Shanghai"
                USE_I18N = True
                USE_L10N = True
                USE_TZ = False
                # Static files (CSS, JavaScript, Images)
                # https://docs.djangoproject.com/en/2.0/howto/static-files/
                STATIC_URL = "/static/"
                # 富文本编辑器部分
                MEDIA_URL = "/upload/"
                MEDIA_ROOT = os.path.join(BASE_DIR, "upload/")  # 这个是在浏览器上访问该上传文件的url的前缀
              不行了猝死了....

---