微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Django_project-luffy(02)

分类：Python作者：编程之家

4.6 日志配置

在settings/dev.py文件中追加如下配置：

# 日志配置
LOGGING = {
    'version': 1,'disable_existing_loggers': False,'formatters': {
        'verbose': {
            'format': '%(levelname)s %(asctime)s %(module)s %(lineno)d %(message)s'
        },'simple': {
            'format': '%(levelname)s %(module)s %(lineno)d %(message)s'
        },},'filters': {
        'require_debug_true': {
            '()': 'django.utils.log.requiredebugTrue','handlers': {
        'console': {
            'level': 'DEBUG','filters': ['require_debug_true'],'class': 'logging.StreamHandler','formatter': 'simple'
        },'file': {
            'level': 'INFO','class': 'logging.handlers.RotatingFileHandler',# 日志位置,日志文件名,日志保存目录必须手动创建
            'filename': os.path.join(os.path.dirname(BASE_DIR),"logs/luffy.log"),# 日志文件的最大值,这里我们设置300M
            'maxBytes': 300 * 1024 * 1024,# 日志文件的数量,设置最大日志数量为10
            'backupCount': 10,# 日志格式:详细格式
            'formatter': 'verbose'
        },# 日志对象
    'loggers': {
        'luffy': {
            'handlers': ['console','file'],'propagate': True,# 是否让日志信息继续冒泡给其他的日志处理系统
        },}
}

4.5 异常处理

新建utils/exceptions.py

from rest_framework.views import exception_handler

from django.db import DatabaseError
from rest_framework.response import Response
from rest_framework import status

import logging
logger = logging.getLogger('luffy')


def custom_exception_handler(exc,context):
    """
    自定义异常处理
    :param exc: 异常类
    :param context: 抛出异常的上下文
    :return: Response响应对象
    """
    # 调用drf框架原生的异常处理方法
    response = exception_handler(exc,context)

    if response is None:
        view = context['view']
        if isinstance(exc,DatabaseError):
            # 数据库异常
            logger.error('[%s] %s' % (view,exc))
            response = Response({'message': '服务器内部错误'},status=status.HTTP_507_INSUFFICIENT_STORAGE)

    return response

settings/dev.py配置文件中添加

REST_FRAMEWORK = {
    # 异常处理
    'EXCEPTION_HANDLER': 'luffy.utils.exceptions.custom_exception_handler',}

4.7 创建数据库

create database luffycity default charset=utf8;

1557450273503

为当前项目创建数据库用户[这个用户只能看到这个数据库]

create user luffy_user identified by 'luffy';
grant all privileges on luffycity.* to 'luffy_user'@'%';
flush privileges;

1557450379001

4.8 配置数据库连接

打开settings/dev.py文件，并配置

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.MysqL","HOST": "127.0.0.1","PORT": 3306,"USER": "luffy_user","PASSWORD": "luffy","NAME": "luffycity",}
}

在项目主模块的 __init__.py中导入pyMysqL

import pyMysqL

pyMysqL.install_as_MysqLdb()

调整错误

数据库版本检测导致的错误

1557453985484

数据库的版本检测代码注释掉。、

1557454099123

第二个错误也是因为数据库版本的默认编码导致，query返回的内容格式使用有误。

新增一行代码，把query查询结果转换格式为 bytes类型

1557454044879

5. 搭建前端项目

5.1 创建项目目录

cd 项目目录
vue init webpack lufei_pc

例如，我要把项目保存在~/Desktop桌面目录下，可以如下操作：

cd ~/Desktop
vue init webpack lufei_pc

根据需要在生成项目时，我们选择对应的选项,效果：

1557451009689

根据上面的提示，我们已经把vue项目构建好了，运行测试服务器。

1557451125218

打开项目已经，在pycharm的终端下运行vue项目，查看效果。

npm run dev

接下来，我们根据终端上效果显示的对应地址来访问项目(如果有多个vue项目在运行，8080端口被占据了，服务器会自动改端口，所以根据自己实际在操作中看到的地址来访问。)

访问：http://localost:8080。效果：

1557451188340

我们也可以把我们的前端项目进行git源代码管理

5.2 初始化前端项目

清除默认的HelloWorld组件和APP.vue中的默认样式

1557451289161

接下来，我们可以查看效果了，一张白纸~

1557451300406

5.3 安装路由vue-router

5.3.1 下载路由组件

npm i vue-router -S

执行效果：

1557451350882

5.3.2 配置路由

5.3.2.1 初始化路由对象

在src目录下创建routers路由目录，在routers目录下创建index.js路由文件

index.js路由文件中，编写初始化路由对象的代码 .

import Vue from "vue"
import Router from "vue-router"

// 这里导入可以让让用户访问的组件

Vue.use(Router);

export default new Router({
  // 设置路由模式为‘history’，去掉默认的#
  mode: "history",routes:[
    // 路由列表

  ]
})

1557451480681

5.3.2.2 注册路由信息

打开main.js文件，把router对象注册到vue中.代码：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './routers/index';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',router,components: { App },template: '<App/>'
});

1557451533378

5.3.2.3 在视图中显示路由对应的内容

在App.vue组件中，添加显示路由对应的内容。

1557451572377

代码：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',components: {

  }
}
</script>

<style>

</style>

5.3.2.4 创建并提供前端首页的组件

routers/index.js

// import Vue from "vue"
// import Router from "vue-router"
//
//
// // 这里导入可以让让用户访问的组件
import Home from "../components/Home"
// Vue.use(Router);
//
// export default new Router({
//   // 设置路由模式为‘history’，去掉默认的#
//   mode: "history",//   routes:[
//     // 路由列表
     {
       name:"Home",path:"/",component:Home,{
       name:"Home",path:"/home",]
// })
创建Home组件

components/Home.vue

<template>
  <div id="home">
    前端首页
  </div>
</template>
<script>
  export default {
      name:"Home",data(){
          return {
              
          }
      }
  }
</script>

<style scoped>

</style>

1557451775965

5.4 前端初始化全局变量和全局方法

在src目录下创建settings.js站点开发配置文件：

export default {
  Host:"http://127.0.0.1",}

在main.js中引入

// // The Vue build version to load with the `import` command
// // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue'
// import App from './App'
// import router from './routers/index';
import settings from "./settings"
// Vue.config.productionTip = false;
Vue.prototype.$settings = settings;
//
// /* eslint-disable no-new */
// new Vue({
//   el: '#app',//   router,//   components: { App },//   template: '<App/>'
// });

5.5 引入ElementUI

npm i element-ui -S

上面的命令等同于

npm install element-ui --save

执行命令效果：

1557452146253

5.5.1 配置ElementUI到项目中

在main.js中导入ElementUI，并调用。

代码：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue'
// import App from './App'
// import router from './routers/index';

// 开发配置文件
// import settings from "./settings"
// Vue.prototype.$settings = settings;

// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI);


// Vue.config.productionTip = false;

/* eslint-disable no-new */
// new Vue({
//   el: '#app',//   template: '<App/>'
// });

效果：

1557452192638

成功引入了ElementUI以后，接下来我们就可以开始进入前端页面开发，首先是首页。

接下来我们把之前完成的首页，直接拿过来使用[注意除了组件以外,还有静态文件也需要拿过来,包括App.vue里面的公共样式]，并运行项目。

App.vue，全局css初始化代码

<style>
  body,h1,h2,h3,h4,h5,ul,p{
    padding: 0;
    margin:0;
    font-weight: normal;
  }
  body{
    margin-top: 80px;
  }
  a{
    text-decoration: none;
    color: #4a4a4a;
  }
  a:hover{
    color: #000;
  }

  ul{
    list-style: none;
  }

  img{
    width: 100%;
  }

  .header .el-menu li .el-submenu__title{
    height: 26px!important;
    line-height: 26px!important;
  }
  .el-menu--popup{
    min-width: 140px;
  }
  .el-checkBox__inner{
    width:16px;
    height: 16px;
    border: 1px solid #999;
  }
  .el-checkBox__inner:after{
    width: 6px;
    height: 8px;
  }
  .el-form-item__content{
    margin-left:0px!important;
    width: 120px;
  }
</style>

Home.vue中添加代码：

<template>
  <div id="home">
    <Header/>
    <Banner/>
    <Footer/>
  </div>
</template>

<script>
import Header from "./common/Header"
import Banner from "./common/Banner"
import Footer from "./common/Footer"

export default {
  name:"Home",data(){
    return {

    }
  },components:{
    Header,Banner,Footer,}
}
</script>

<style scoped>

</style>

components/common/Header.vue

<template>
  <div class="header">
    <el-container>
      <el-header>
        <el-row>
          <el-col class="logo" :span="3">
            <a href="/">
              <img src="@/assets/head-logo.svg" alt="">
            </a>
          </el-col>
          <el-col class="nav" :span="16">
              <el-row>
                <el-col :span="3"><router-link class="current" to="/course">免费课</router-link></el-col>
                <el-col :span="3"><router-link to="/">轻课</router-link></el-col>
                <el-col :span="3"><router-link to="/">学位课</router-link></el-col>
                <el-col :span="3"><router-link to="/">题库</router-link></el-col>
                <el-col :span="3"><router-link to="/">教育</router-link></el-col>
              </el-row>
          </el-col>
          <el-col class="login-bar" :span="5">
            <el-row v-if="token">
              <el-col class="cart-ico" :span="9">
                <router-link to="">
                  <b class="goods-number">0</b>
                  <img class="cart-icon" src="@/assets/cart.svg" alt="">
                  <span><router-link to="/cart">购物车</router-link></span>
                </router-link>
              </el-col>
              <el-col class="study" :span="8" :offset="2"><router-link to="">学习中心</router-link></el-col>
              <el-col class="member" :span="5">
                <el-menu class="el-menu-demo" mode="horizontal">
                  <el-submenu index="2">
                    <template slot="title"><router-link to=""><img src="@/assets/[email protected]" alt=""></router-link></template>
                    <el-menu-item index="2-1">我的账户</el-menu-item>
                    <el-menu-item index="2-2">我的订单</el-menu-item>
                    <el-menu-item index="2-3">我的优惠卷</el-menu-item>
                    <el-menu-item index="2-3">退出登录</el-menu-item>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col class="cart-ico" :span="9">
                <router-link to="">
                  <img class="cart-icon" src="@/assets/cart.svg" alt="">
                  <span><router-link to="/cart">购物车</router-link></span>
                </router-link>
              </el-col>
              <el-col :span="10" :offset="5">
                <span class="register">
                  <router-link to="/login">登录</router-link>
                  &nbsp;&nbsp;|&nbsp;&nbsp;
                  <router-link to="/register">注册</router-link>
                </span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "Header",data(){
      return {
        // 设置一个登录标识，表示是否登录
        token: false,};
    }
  }
</script>

<style scoped>
  .header{
    top:0;
    left:0;
    right:0;
    margin: auto;
    background-color: #fff;
    height: 80px;
    z-index: 1000;
    position: fixed;
    Box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
  }
  .header .el-container{
    width: 1200px;
    margin: 0 auto;
  }
  .el-header{
    height: 80px!important;
    padding:0;
  }
  .logo{

  }
  .logo img{
    padding-top: 22px;
  }

  .nav{
    margin-top: 22px;
  }

  .nav .el-col a{
    display: inline-block;
    text-align: center;
    padding-bottom: 16px;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    font-size: 16px;
    margin-left: 20px;
  }

  .nav .el-col .current{
    color: #4a4a4a;
    border-bottom: 4px solid #ffc210;
  }

  .login-bar{
    margin-top: 22px;
  }
  .cart-ico{
    position: relative;
    border-radius: 17px;
  }
  .cart-ico:hover{
    background: #f0f0f0;
  }
  .goods-number{
    width: 16px;
    height: 16px;
    line-height: 17px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #fa6240;
    border-radius: 50%;
    transform: scale(.8);
    position: absolute;
    left: 16px;
    top: -1px;
  }
  .cart-icon{
    width: 15px;
    height: auto;
    margin-left: 6px;
  }
  .cart-ico span{
    margin-left: 12px;
  }
  .member img{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-block;
  }
  .member img:hover{
    border: 1px solid yellow;
  }

</style>

components/common/Bannner.vue

<template>
  <div class="banner">
      <el-carousel trigger="click" height="473px">
        <el-carousel-item v-for="banner in banner_list">
          <a :href="banner.link"><img width="100%" :src="banner.img" alt=""></a>
        </el-carousel-item>
      </el-carousel>
  </div>
</template>

<script>
  export default {
    name:"Banner",data(){
      return {
        banner_list:[
          {link:"http://www.baidu.com",img:"/static/banner/1.png"},{link:"http://www.baidu.com",img:"/static/banner/2.png"},img:"/static/banner/3.png"},]
      };
    }
  }
</script>

<style>
.el-carousel__arrow{
  width: 100px!important;
  height: 100px!important;
}
.el-icon-arrow-left{
  font-size: 35px;
  margin-left: 50px;
}
.el-carousel__arrow--left{
  left: -50px;
}
</style>

components/common/Footer.vue

<template>
  <div class="footer">
    <el-container>
      <el-row>
        <el-col :span="4"><router-link to="">关于我们</router-link></el-col>
        <el-col :span="4"><router-link to="">联系我们</router-link></el-col>
        <el-col :span="4"><router-link to="">商务合作</router-link></el-col>
        <el-col :span="4"><router-link to="">帮助中心</router-link></el-col>
        <el-col :span="4"><router-link to="">意见反馈</router-link></el-col>
        <el-col :span="4"><router-link to="">新手指南</router-link></el-col>
        <el-col :span="24"><p class="copyright">copyright ? luffycity.com版权所有 | 京ICP备17072161号-1</p></el-col>
      </el-row>
    </el-container>
  </div>
</template>

<script>
  export default {
    name:"Footer",data(){
      return {}
    }
  }
</script>


<style scoped>
.footer{
  width: 100%;
  height: 128px;
  background: #25292e;
}
.footer .el-container{
  width: 1200px;
  margin: auto;
}
.footer .el-row {
  align-items: center;
  padding: 0 200px;
  padding-bottom: 15px;
  width: 100%;
  margin-top: 38px;
}
.footer .el-row a{
  color: #fff;
  font-size: 14px;
}
.footer .el-row .copyright{
  text-align: center;
  color: #fff;
  font-size: 14px;
}
</style>

也可以把App.vue的style标签的css代码放到static外部目录下引用过来

main.js

import "../static/css/reset.css";

reset.css

body,p{
    padding: 0;
    margin:0;
    font-weight: normal;
  }
  body{
    margin-top: 80px;
  }
  a{
    text-decoration: none;
    color: #4a4a4a;
  }
  a:hover{
    color: #000;
  }

  ul{
    list-style: none;
  }

  img{
    width: 100%;
  }

  .header .el-menu li .el-submenu__title{
    height: 26px!important;
    line-height: 26px!important;
  }
  .el-menu--popup{
    min-width: 140px;
  }
  .el-checkBox__inner{
    width:16px;
    height: 16px;
    border: 1px solid #999;
  }
  .el-checkBox__inner:after{
    width: 6px;
    height: 8px;
  }
  .el-form-item__content{
    margin-left:0px!important;
    width: 120px;
  }

6. 跨域CORS

我们现在为前端和后端分别设置两个不同的域名：

位置 域名
前端 www.luffycity.cn
后端 api.luffycity.cn

编辑/etc/hosts文件，可以设置本地域名

sudo vim /etc/hosts

在文件中增加两条信息

127.0.0.1   localhost
127.0.0.1   api.luffycity.cn
127.0.0.1   www.luffycity.cn

1557454299594

通过浏览器访问前端vue项目，会出现Nginx的欢迎页面，主要因为我们当前项目已经有一个Nginx监听了80端口，所以访问www.luffycity.cn网址时，会自动被转发到127.0.0.1本机，因为没有网址默认端口是80端口，所以被Nginx进行处理了当前请求，因此我们暂时先把Nginx关闭先。

# 查找Nginx的进程
ps -ef|grep Nginx
# 关闭进程
sudo kill -9 Nginx进程号

1557454528245

关闭了Nginx以后，访问www.luffy.cirty.cn网址，效果：

1557454604654

上面并不是错误，而是没人监听了这个地址和端口了，解决方法：

暂停运行前端项目，并修改配置文件config/index.js

host: 'www.luffycity.cn',// can be overwritten by process.env.HOST
    port: 8080,// can be overwritten by process.env.PORT,if port is in use,a free one will be determined
    autoOpenbrowser: true,

保存修改信息，并重启项目

1557454684623

通过浏览器访问drf项目,会出现以下错误信息

1557454965635

可以通过settings/dev.py的ALLOWED_HOSTS,设置允许访问

# 设置哪些客户端可以通过地址访问到后端
ALLOWED_HOSTS = [
    'api.luffycity.cn',]

1557455086164

让用户访问的时候，使用api.luffycity.cn:8000

1. 修改pycharm的manage.py的配置参数

1557455152863

现在，前端与后端分处不同的域名，我们需要为后端添加跨域访问的支持

否则前端无法使用axios无法请求后端提供的api数据，我们使用CORS来解决后端对跨域访问的支持。

使用django-cors-headers扩展

在 Response(headers={"Access-Control-Allow-Origin":'客户端地址/*'})

文档：https://github.com/ottoyiu/django-cors-headers/

安装

pip install django-cors-headers

添加应用

INSTALLED_APPS = (
    ...
    'corsheaders',...
)

中间层设置【必须写在第一个位置】

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',...
]

添加白名单

# CORS组的配置信息
CORS_ORIGIN_WHITELIST = (
    'www.luffycity.cn:8080'
)
CORS_ALLOW_CREDENTIALS = True  # 允许ajax跨域请求时携带cookie

1557455675163

完成了上面的步骤，我们就可以通过后端提供数据给前端使用ajax访问了。

前端使用 axios就可以访问到后端提供给的数据接口，但是如果要附带cookie信息，前端还要设置一下。

前端引入axios插件并配置允许axios发送cookie信息[axios本身也不允许ajax发送cookie到后端]

npm i axios -S

1557455747921

在main.js中引用 axios插件

import axios from 'axios'; // 从node_modules目录中导入包
// 允许ajax发送请求时附带cookie
axios.defaults.withCredentials = true;

Vue.prototype.$axios = axios; // 把对象挂载vue中

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

如何用django开发一个简易个人Blog
功能概要：（目前已实现功能）公共展示部分：1.网站首页展示已发布的博客记录，包括名称、摘要信息、发布日期、阅读量及评论数。2.首页文章列表可按照分类筛选。3.点击标题或阅读全文链接，进入博客阅读页面，展示文章标题、内容及评论内容。博客后台管理部分：（后台套用了一个叫做ACE的后台模板，改造成了dja
Python中的几种数据类型
大体上把Python中的数据类型分为如下几类： Number（数字） 包括int,long,float,complex String（字符串） 例如：hello,&quot;hello&quot;,hello List（列表） 例如：[1,2,3],[1,2,3,[1,2,3],4] Diction
django开发个人简易Blog——构建项目结构
开发之前第一步，就是构造整个的项目结构。这就好比作一幅画，第一步就是描绘轮廓，有了轮廓，剩下的就是慢慢的填充细节。项目结构规划如下图：项目结构描述:本项目以fengzhengBlog为根目录。admin、blogapp是两个app目录,用于实现项目主要功能：包括模型定义、视图定义等css、js、im
Linux下安装Apache并以mod_wsgi方式部署django站点
源码编译方式安装Apache首先下载Apache源码压缩包，地址为http://mirror.bit.edu.cn/apache/httpd/继续下载apr和apr-util压缩包，地址为http://mirror.bit.edu.cn/apache/apr/下载pcre压缩包，地址为http://
django开发个人简易Blog—nginx+uwsgin+django1.6+mysql 部署到CentOS6.5
前面说完了此项目的创建及数据模型设计的过程。如果未看过，可以到这里查看，并且项目源码已经放大到github上,可以去这里下载。代码也已经部署到sina sea上，地址为http://fengzheng.sinaapp.com/先跳过视图展示及表单处理的部分，先介绍一下如何部署。标题中已经把部署环境介
Scrapy爬取自己的博客内容
python中常用的写爬虫的库有urllib2、requests,对于大多数比较简单的场景或者以学习为目的，可以用这两个库实现。这里有一篇我之前写过的用urllib2𫯪utifulSoup做的一个抓取百度音乐热门歌曲的例子，有兴趣可以看一下。本文介绍用Scrapy抓取我在博客园的博客列表，只抓
用python实现的百度音乐下载器-python-pyqt-改进版
之前写过一个用python实现的百度新歌榜、热歌榜下载器的博文，实现了百度新歌、热门歌曲的爬取与下载。但那个采用的是单线程，网络状况一般的情况下，扫描前100首歌的时间大概得到40来秒。而且用Pyqt做的界面，在下载的过程中进行窗口操作，会出现UI阻塞的现象。 前两天有时间调整了一下，做了几方面的改
Python:解决中文字符串问题
本人安装的是Python 2.7版本，由于编写程序的过程中会碰到中文字符串，但由于Python默认采用ASCII编码方式，所以对中文不支持。要解决此问题，必须设置当前编码方式为Unicode方式。默认ASCII编码方式对中文字符产生的异常为：UnicodeDecodeError: &#39;asci
Django集成百度富文本编辑器uEditor
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。首先从ueEditor官网下载最新版本的包，目前官网上提供了ASP、.NET、PHP、JSP版本的，django版本只有一个第三方个人开发的，但看
django开发个人简易Blog——数据模型
提到数据模型，一定要说一下MVC,MVC框架是现代web开发中最流行的开发框架，它将数据与业务逻辑分开，减小了应用之间的高度耦合。个人非常喜欢MVC开发框架，除了具有上述特性，它使得web开发变得非常灵活，在ASP.NET上表现的尤为强烈，传统的ASP.NET开发常常用到好多臃肿的服务器端控件，定制
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native