zoukankan      html  css  js  c++  java
  • 基于Python的前后端分离项目学习笔记二

    一、从数据库读取数据,在views.py中写入代码,如:

    from django.http import JsonResponsefrom apps.market.models import User
    # Create your views here.
    
    # 从数据库获取用户数据
    def get_Users(request):
        try:
            # 使用ORM获取所有用户信息 并把对象转为字典格式
            obj_users = User.objects.all().values()
            # 把外层的容器转为List
            users = list(obj_users)
            # 返回
            return JsonResponse({'code': 1, 'data': users})
        except Exception as e:
            # 如果出现异常,返回
            return JsonResponse({'code': 0, 'msg': "获取用户信息出现异常,具体错误:" + str(e)})

    二、在urls.py中添加代码,以便前端能够访问到数据,如:

    urlpatterns = [
        path('admin/', admin.site.urls),
        path('goods/', views.get_Goods),//添加该行代码
    ]

    三、在setting.py的ALLOWED_HOSTS中添加本机ip,如:

    ALLOWED_HOSTS = ['192.168.182.128']

    四、在前端的js文件中添加使用axios请求后端数据的函数,如:

    //获取所有物品信息
            getGoods: function () {
                //使用axios实现ajax请求
                let that = this
                axios
                    .get(that.baseURL + 'goods/')
                    .then(
                        function (res) {
                            //请求成功后执行的函数
                            if (res.data.code === 1)
                            {
                                that.goods = res.data.data
                                for(g of that.goods)
                                {
                                    g.image = that.baseURL+'media/'+g.image
                                }
                                that.goodsTotal = res.data.data.length
                                that.displayGoods = that.goods
                            }
                            else
                                //失败的提示!
                                that.$message.error(res.data.msg)
                        }
                    )
                    .catch(
                        function (err) {
                            //请求失败后执行的函数
                            console.log(err)
                        }
                    )
    
            },

    五、解决axios的跨域请求问题,在终端输入pip install django-cors-headers,然后在setting.py的INSTALLED_APPS中添加corsheaders,接着在setting.py的MIDDLEWARE中添加corsheaders.middleware.CorsMiddleware。最后在setting.py中添加代码:

    # 添加Cors配置
    # 1. 设置白名单,凡是出现在白名单的域名都可以访问后端
    CORS_ORIGIN_WHITELIST = ('http://127.0.0.1:8080',)
    # 2. 是指Cors Cookie
    CORS_ALLOW_CREDENTIALS = True

     六、前端向后端发送数据,如搜索信息:

    queryGoods:function() {
                //搜索物品
                let that = this
                
                //开始Ajax请求
                axios
                    .post(
                        that.baseURL + "query/",
                        {
                            inputstr: that.inputStr,
                            item: that.selectItem,
                        }
                    )
                    .then(function (res) {
                        if (res.data.code === 1) {
                            //把数据给displaygoods
                            that.displayGoods = res.data.data;
                            console.log(res.data.data.length)
                            //提示:
                            that.$message({
                                message: '查询数据加载成功!',
                                type: 'success'
                            });
    
                        } else {
                            //失败的提示!
                            that.$message.error(res.data.msg);
                        }
                    })
                    .catch(function (err) {
                        console.log(err);
                        that.$message.error("获取后端查询结果出现异常!");
                    });
    
            }

    七、前端访问后端图片,

    1)现在后端根目录创建media文件夹;

    2)将图片储存在media中;

    3)在setting.py中添加代码

    # 设置上传文件的目录和外部访问的路径
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
    MEDIA_URL = '/media/'

    4)在url.py中添加代码:

    
    
    from django.conf.urls.static import static
    #添加这行--- 允许所有的media文件被访问
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

    如访问图片sadf54sad1as.jpg:

    <image :src="baseURL"/>
    
    <script>
    
    baseURL: 'http://10.3.11.141:8000/'+"media/"+"sadf54sad1as.jpg"//图片路径
    
    </script>
  • 相关阅读:
    动态生成 Excel 文件供浏览器下载的注意事项
    JavaEE 中无用技术之 JNDI
    CSDN 泄露用户密码给我们什么启示
    刚发布新的 web 单点登录系统,欢迎下载试用,欢迎提建议
    jQuery jqgrid 对含特殊字符 json 数据的 Java 处理方法
    一个 SQL 同时验证帐号是否存在、密码是否正确
    PostgreSQL 数据库在 Windows Server 2008 上安装注意事项
    快速点评 Spring Struts Hibernate
    Apache NIO 框架 Mina 使用中出现 too many open files 问题的解决办法
    解决 jQuery 版本升级过程中出现 toLowerCase 错误 更改 doctype
  • 原文地址:https://www.cnblogs.com/mango1997/p/13922773.html
Copyright © 2011-2022 走看看