vue下拉框获取数据库数据显示

一般情况下是前端通过调取后端接口，来获取到数据库的数据，后端哪里会把数据库的数据整理成一般是json形式的数据，前端获取到数据后，写上select标签，用v-for来循环option标签，然后点击下拉框就能看到下拉框中的数据选项了。点击下拉框再去过去数据的话交互不好。还有一种是元数据库的 *** 作，据说是前端直接调用数据库，不过用的不多。

项目public文件夹内创建url地址文件，在同级indexhtml里引入。

然后在request文件里直接获取baseURL即可，打包后可在dist里找到文件夹里改URL。

可以通过这样的方法来获取的，具体如下：

v-for=（item,index)in 需要循环的列表对象就可以达到目的了，而在括号里面的参数item是循环的每一个元素，index参数是循环的次数或者是下标的，item可以是一个简单数据类型，也可以是一个复杂的复合类型。

项目启动以后按F12 点选Network然后点击 XHR 就是所有的后端接口地址，然后点击一个访问的地址，右边出现headers里面的 Request URL 后面的就是真实的url地址了

category 与vue 接口对接

首先是需要把所有的category的内容取出来

由于前端vue展示category是分级的

一级 二级 三级 这样展示的

所以我们需要把三个内容都拿出来

但是首先需要取出第一级 然后第一级镶嵌了第二级，然后第二级镶嵌第三季 ，就跟上面goods中显示外键的category的内容一样

我们还是需要写serializer

这样就是一级 镶嵌二级 二级镶嵌三级

但是这里有一个问题不要搞错了 这三个类的位置不能弄错了

因为一级是调用二级 所以二级一定是先写好了的

所以二级一定在一级上面 同理 三级要在二级上面

然后就是view

在过滤中加上category_type = 1 这样就可以直接显示第一大类 然后第一大类中有第二小类 这样更有层次感 如果直接一下子全部取出来 就不好分辨了

同时我们还要处理取出某个单一的信息

所以 我们继承了mixinsRetrieveModelMixin 这个类，这是一个显示详情的类

例如显示某个动物园的某个动物那样

/zoos/id

这样的url

同样这样写了 我们就直接只配置category的url就够了

就不用考虑 后面的id是否还需要配置一个url 这些都不用考虑了，因为我们继承了 viewset这个类

这些问题他都帮我们解决了

这样处理我们后端就能看见了

但是这样处理了 前端对接时 会发现 无法显示

因为有一个跨域问题

这个问题前后端 都可以独自解决 这里学习的是后端，所以讲一下后端的做法

就是修改服务端

在github上搜索django-cors-headers就可以找到这个信息

同样里面介绍如何使用

安装

pip install django-cors-headers

然后settins中INSTALLED_APPS配置和settings中MIDDLEWARE配置

这里要注意 MIDDLEWARE配置中

'corsheadersmiddlewareCorsMiddleware',

'djangomiddlewarecommonCommonMiddleware',

这两个必须放在

'djangomiddlewarecsrfCsrfViewMiddleware',

这个的前面 不然会报错

同时还要配置

CORS_ORIGIN_ALLOW_ALL = True

允许跨域访问 它默认是False

这样前端就可以正常显示了

为什么会产生跨域访问

因为vue中api配置的中 我们调试数据 不可能把所有的host 都修改了 有一些是线上数据 我们调试的是本地的一部分数据 所以要重新定一个localhost

修改部分 host的链接

这样就导致了跨域 本身使用的是一个线上host端口，但是数据中有一部分是请求的是本地host端口 导致了跨域访问

以上就是关于vue下拉框获取数据库数据显示全部的内容，包括:vue下拉框获取数据库数据显示、vue2项目打包后更换接口地址、vue怎么获取另一个vue中的元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！