• django中文设置, axios, CORS, 全局js配置, Vue配置jq + bs


    习题详解

    1. Home.vue页面组件显示基本信息:欢迎来到汽车系统
      Car.vue页面组件,完成Cars的列表数据渲染
      Nav.vue小组件,完成Home与Car页面的导航跳转
    2. CarDetail页面组件,完成某一个汽车详细信息的渲染
      (Car页面点击具体的car进入详情页,把点击的car的主键传入到详情页)
    '''
    # css样式
    .car-tag:nth-child(1) { /*伪类选择器: 按次序选择*/
        margin-right: 0;
    }
    
    .car-detail {
         100vw; /*vw: 屏幕宽度, vh: 屏幕高度*/
        ...
    }
    
    .Nav a {
        border-bottom: 3px solid transparent; /*transparent: 边框颜色透明*/
    }   
    '''
    

    后端django项目准备

    TODO全局注释: # TODO 今天写到这, 下班, 明天继续

    国际化配置

    '''
    # d_prjsettings.py
    LANGUAGE_CODE = 'zh-hans'  # 语言模式设为中文
    
    TIME_ZONE = 'Asia/Shanghai'  # 时区设定
    
    ...
    
    USE_TZ = False  # 同步数据库时区
    '''
    

    axios插件及使用

    vue的ajax插件: axios

    1. 安装插件: 一定要在项目目录下, cnpm install axios
    2. 在v-projsrcmain.js中配置
    3. 在对应组件的created钩子中使用this.$axios, 完成对后端的ajax请求
    4. 前端的print是调用打印机, console.log是在终端打印
    '''
    # v-projsrcmain.js
    import axios from 'axios'
    Vue.prototype.$axios = axios;  // js原型配置的属性所有的vue实例都能通过this.访问
    
    
    # v-projsrcviewsCar.vue
    <script>
       	...
       	
        export default {
            ...
            data() {
                return {
                    cars: [],
                }
            },
            created() {
                this.$axios({
                    url: 'http://127.0.0.1:8000/cars/',
                    method: 'get',
                }).then(response => {  // 箭头函数不产生独立的this
                    console.log(response)  // {data: {msg: "get ok"}, …}
                }).catch(error => {  // 网络状态码为4xx或5xx时
                    console.log(error)
                });
            },
        }
    </script>
    '''
    

    django处理跨域问题

    CORS跨域问题(同源策略)

    • 同源: http协议相同, ip服务器地址相同, app应用端口相同
    • 跨域: http协议, ip地址, 应用端口有任意一个不同
    • django默认是同源策略, 存在跨域问题

    django后端解决方法

    • 安装插件: pip install django-cors-headers
    • 在settings.py中配置相关数据
    '''
    # d_prjsettings.py
    # 注册app
    INSTALLED_APPS = [
    	...
    	'corsheaders'
    ]
    
    # 添加中间件
    MIDDLEWARE = [
    	...
    	'corsheaders.middleware.CorsMiddleware'
    ]
    
    # 允许跨域源
    CORS_ORIGIN_ALLOW_ALL = True
    '''
    

    axios向后端提交数据

    • 前端的GET请求只能发送拼接参数, 不能发送数据包参数
    • 后端通过request.body获取前端发送的数据包参数
    '''
    # v-projsrcviewsCar.vue
    ...
    <script>
        ...
        export default {
            data() {
                return {
                    cars: [],
                }
            },
            created() {
                this.$axios({
                    // 前端发送拼接参数给后端的方式一:
                    // url: 'http://127.0.0.1:8000/cars/?a=1&b=2',
                    // 前端发送拼接参数给后端的方式二:
                    url: 'http://127.0.0.1:8000/cars/',
                    params: {  // url拼接参数
                        a: 1,
                        b: 2,
                    },
    				
                    // 前端发送数据包参数给后端
                    data: {  // 数据包参数
                        x: 666,
                        y: 777,
                    },
                    
                    method: 'post',
                }).then(response => {  // 箭头函数不产生独立的this
                    console.log(response)  // {data: {msg: "get ok"}, …}
                }).catch(error => {  // 网络状态码为4xx或5xx时, 后端返回给前端的响应
                    console.log(error.response.data)  // 获取报错信息: 为一个HTML页面
                });
            },
        }
    </script>
    
    
    # d_prjappviews.py
    from django.http import JsonResponse
    
    
    def get_cars(request, *args, **kwargs):
        print(request.GET)  # 后端获取前端的拼接参数: <QueryDict: {'a': ['1'], 'b': ['2']}>
        print(request.POST)  # <QueryDict: {}>
        print(request.body)  # b'{"x":666,"y":777}'
        return JsonResponse({'msg': 'get ok'})
    '''
    

    后端返回数据给前端

    '''
    # d_prjurls.py
    from django.conf import settings
    
    urlpatterns = [
        ...
        url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),
    ]
    
    
    # d_prjsettings.py
    MEDIA_URL = '/media/'
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # media文件夹的绝对路径
    
    
    # appmodels.py
    class Car(models.Model):
        ...
        class Meta:  # 自定义数据库表名
            db_table = "old_boy_car"
            
            # 自定义后台管理窗口显示的表名
            verbose_name = "汽车"  
            verbose_name_plural = verbose_name
    		...
    
    
    # appviews.py
    from django.http import JsonResponse
    from . import models
    from django.conf import settings
    
    
    def get_cars(request, *args, **kwargs):
        car_queryset = models.Car.objects.values('id', 'title', 'img')
        car_list = list(car_queryset)  # 将查询的queryset转成列表
        
        # 拼接图片资源路径
        for car in car_list:
            # MEDIA_URL是MEDIA_ROOT的前端路由映射, car.get('img')为对象
            car['img'] = '%s%s%s' % ('http://localhost:8000', settings.MEDIA_URL, str(car.get('img')))
        return JsonResponse(car_list, safe=False)  # safe=False设定JsonResponse能返回列表类型数据
    '''
    

    全局js配置

    • 在v-projsrcassetsjs中新建settings.js文件
    • 在main.js中从settings.js导入对象
    • 通过js原型: Vue.prototype配置全局的Vue属性, 类似于python中的组合
    '''
    # v-projsrcassetsjssettings.js
    export default {  // vue中的js对象都用export default导出
        base_url: 'http://127.0.0.1:8000',
    }
    
    
    # v-projsrcmain.js
    import settings from '@/assets/js/settings'  // 导入js对象
    Vue.prototype.$settings = settings;  // // 配置全局js属性, 之后任何组件实例都可以访问
    
    
    # v-projsrcviewsCarDetail.vue
    <script>
        export default {
            data() {
                return {
                    car: {},
                };
            },
            created() {
                // 前端获取url拼接参数this.$route.query.pk, 前端获取url数据包参数this.$route.params.pk
                this.pk = this.$route.query.pk || this.$route.params.pk;
                if (!this.pk) {
                    return false;
                }
                this.$axios({
                    url: this.$settings.base_url + `/car/${this.pk}`,
                }).then(response => {
                    this.car = response.data;  // ajax请求拿到后端返回数据
                }).catch(error => {
    
                });
            },
        }
    </script>
    '''
    

    element插件配置与使用

    在终端输入命令安装: npm i element-ui -S

    在main.js中配置element-ui

    '''
    # v-projsrcmain.js
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(ElementUI);  // 全局使用ElementUI
    '''
    

    vue配置jq与bs

    终端命令安装:

    • cnpm install jquery
    • cnpm install bootstrap@3

    配置:

    • 在项目根目录下新建vue.config.js文件
    • 在main.js中配置相关文件
    '''
    # v-projvue.config.js
    const webpack = require("webpack");
    
    module.exports = {
        configureWebpack: {
            plugins: [
                new webpack.ProvidePlugin({
                    $: "jquery",
                    jQuery: "jquery",
                    "window.jQuery": "jquery",
                    Popper: ["popper.js", "default"]
                })
            ]
     		}
    };
    
    
    # v-projsrcmain.js
    import "bootstrap"
    import "bootstrap/dist/css/bootstrap.css"
    '''
    
  • 相关阅读:
    javascript wgs84与ecef与enu坐标转换
    istioctl 部署 istio
    redis学习之初体验redis
    zabbix server 4.0 lts 升级php7.4
    python实现csv格式文件转为asc格式文件的方法
    静默安装参数
    flask 根据数据库生成model
    pycharm中在虚拟环境中安装依赖包
    Jenkins的流水线(Pipeline)
    Jenkins集成Kubernetes集群
  • 原文地址:https://www.cnblogs.com/-406454833/p/12118277.html
Copyright © 2020-2023  润新知