精华内容
下载资源
问答
  • vue框架之前后台交互、element-ui

    千次阅读 2020-02-17 21:03:54
    文章目录vue框架之前后台交互、element-uivuex(了解)前端存储数据库总汇cookielocalStoragesessionStoragevuex(store)前后台交互方式(重点)axios同源策略-跨域问题前后台分离项目交互流程异步请求细节element-...

    vue框架之前后台交互、element-ui

    vuex(了解)

    :可以完成任意间组件信息交互(移动端)

    • vuex是实现任何组件间的信息交互,可以理解为全局的一个单例,为任何一个组件共享vue仓库里的数据

    • 在任何一个组件的逻辑里,都可以访问仓库

      1. 现在仓库里(store/index.js)定义变量,用来村粗共享数据

        state:{info:‘共享数据的初始值’}

      2. 在组件逻辑中获取仓库值

        let 变量 = this.$store.state.info

      3. 在组件逻辑中更新仓库值

        this.$store.sate.info = ‘新值’

    注:vuex通常运用在开发移动端项目,pc端项目可以用localstorege喝sessionstorege数据库来替换

    原因:vuex中的数据,会在页面刷新后,重置到store/index.js配置的默认值

    前端存储数据库总汇

    cookie

    以字符串形式存储,数据有过期时间(过期时间到,数据失效,否则永远有效)

    localStorage

    以对象形式存储,数据永久保存

    sessionStorage

    以对象形式存储,生命周期同所属页面标签(页面不关闭,数据就有效)

    vuex(store)

    以对象形式存储,当页面刷新数据就重置(移动端不能刷新,所以只有应用大退才会重置)

    前后台交互方式(重点)

    • form表单方式
      1. get|post两种请求方式,get请求包含直接在浏览器中输入url回车后发送请求
      2. 该方式的特点是一定会发生页面跳转(刷新页面交本页跳转)-后台决定页面路由
    • ajax异步方式
      1. get | post | patch | put | delete 等众多请求方式,请求目的都是异步获取后的数据
      2. 该方式的特点是不会刷新页面,只是得到新的数据,前台自己完成页面的局部刷新、整体刷新、页面跳转-前台决定页面路由

    1. 前后台不分离项目,采用form表单请求,可以完成页面跳转,同步ajax异步请求完成页面局部刷新
    2. 前后台分离项目,不采用form表单请求,页面刷新、页面跳转的请求,都是由ajax完成,只不过页面跳转。后台相应的是跳转的目标url,前台再自己完成跳转
    3. 前后台分离项目,前台也会出现大量的form表单,但是form表单的提交按钮,走的不是form表单的submit提交,而是ajax请求

    axios

    1. 安装:在前端项目根目录下的终端

      cnpm install axios

    2. 项目配置:main.js

      import axios form 'axios'
      Vue.prototype.$axios = axios;
      
    3. 在任何一个组件的逻辑中,都可以访问this.$axios()

      beforMount(){
      //请求后台
          this.$axios({
              url:this.$settings.base_url + "/test/",
              method:'delete',
          })
      }
      

    同源策略-跨域问题

    一、django默认是同源策略,所以前后台分离项目,访问django会出现CORS跨域问题的报错

    二、什么叫跨域

    1. ip不同:前后台(两个服务器)不在一台主机上运行的
    2. port不同:前后台(两个服务器)是相互独立的,运行在不同的端口之上
    3. 协议不同:http与https之间也同样是跨域问题
      :三者满足一个,就是跨域

    三、解决跨域

    1. 伪装:将前台请求伪装成后台自己对自己发生的请求
    2. 后台主动允许跨域:后台配置允许跨域即可(在响应头中处理)

    四、Django解决跨域

    1. 安装模块:
      pip install django-cors-headers
    2. 注册app:
      INSTALLED_APPS = [

      ‘corsheaders’
      ]
    3. 添加中间件
      MIDDLEWARE = [

      ‘corsheaders.middleware.CorsMiddleware’
      ]
    4. 允许跨域源
      CORS_ORIGIN_ALLOW_ALL = True

    前后台分离项目交互流程

    1. 启动前后台项目
    2. 前台配置页面路由,渲染前台页面 | 后台配置数据路由,响应数据(处理好跨域问题)
    3. 前台通过ajax请求后台接口
      • 将前台数据提交给后台
      • 得到后台的响应结果
      • 根据响应结果的数据,最后完成页面的局部刷新、整体刷新、页面跳转

    异步请求细节

    1. vue框架用axios完成ajax异步请求
      语法:this. a x i o s ( ) . t h e n ( ) . c a t c h ( ) ; 解 读 : axios().then().catch(); 解读: axios().then().catch();axios()是请求逻辑 | then()是正常响应逻辑 | catch()是错误响应逻辑

      具体语法:
         this.$axios({
         	url: '后台接口链接',
         	method: '请求方式',
         	params: {},  // url拼接参数
         	data: {},  // 数据包参数
         	headers: {}  // 请求头参数
         }).then(response => {
         	// response是http状态2xx的响应结果,响应数据是response.data
         }).catch(error => {
         	// error是http状态4xx、5xx的响应结果,错误响应对象是error.response,错误响应数据是error.response.data
         })
      
    2. 前台提交数据的两种方式:

      • url拼接参数:
        所有请求都拥有的提交数据的方式
        该方式会将数据都在请求url后用?拼接的方式提交给后台
        提交数据只能采用url字符串方式提交给后台,数据是不安全的
        axios插件可以用params属性携带url拼接参数
      • 数据包参数:
        除get请求外的所有请求都拥有的提交数据的方式
        该方式会将数据进行加密,打包成数据包方式提交给后台
        打包加密数据有三种方式:urlencoded(form默认的方式)、form-data(可以提交文件)、json(提交json数据)
        axios插件可以用data属性携带数据包参数

    注意项

    1. this.$axios({}).then(response => {}).catch(error => {}) 中的then和catch回调函数,不能写function,因为实际vue项目开发,一定会在回调逻辑用到this语法(代表vue对象),而在function中使用了this语法,function就不是普通函数了(可以理解为类,this就不能代表vue对象了)
    2. 原生django没有提供所有类型的数据包数据解析规则,但是数据会在request.body中,可以自己解析;Django-rest-framework框架是提供了三种类型的数据包参数解析

    element-ui

    element-ui就类似于BootStrap框架,前者是在vue项目中运用,后者是在原生项目中运用,当然也可以在vue项目中运用

    环境搭建:

    1. 安装:在前端项目根目录下的终端
      cnpm install element-ui

    2. 配置:main.js

      import ElementUI from 'element-ui'
      Vue.use(ElementUI);
      import 'element-ui/lib/theme-chalk/index.css';
      
    3. 使用:根据视频和官方API接口

    jq+bs

    一、jq环境搭建:

    1. 安装:在前端项目根目录下的终端
      cnpm install jquery

    2. 配置:自己在项目根目录下新建 vue.config.js

      const webpack = require("webpack");
      module.exports = {
          configureWebpack: {
              plugins: [
                  new webpack.ProvidePlugin({
                      $: "jquery",
                      jQuery: "jquery",
                      "window.$": "jquery",
                      "window.jQuery": "jquery",
                      Popper: ["popper.js", "default"]
                  })
              ]
       	}
      };
      

    二、bs环境搭建:

    1. 安装:在前端项目根目录下的终端
      cnpm install bootstrap@3

    2. 配置:自己在项目根目录下新建 vue.config.js

      import BootStrap from "bootstrap"
      import "bootstrap/dist/css/bootstrap.css"
      Vue.use(BootStrap)
      

    Django国际化配置

    LANGUAGE_CODE = 'zh-hans'
    TIME_ZONE = 'Asia/Shanghai'
    USE_I18N = True
    USE_L10N = True
    USE_TZ = False
    

    小结

    1. vuex
      仓库,拥有组件间传参
      前台存储数据的位置:cookie、localStorage、sessionStorage、vuex

    2. axios
      配置:安装 => 配置给Vue.prototype. a x i o s 使 用 : t h i s . axios 使用:this. axios使this.axios({}).then(response => {}).catch(error => {})
      两种请求:form(页面跳转,前后台不分离) | ajax(只刷新数据,所有类型项目都可以)
      前后台分离项目工作流程:前台启动提供页面 => 后台启动提供数据 => 前台渲染页面并请求后台数据
      请求方式:get、post、patch、put、delete…
      请求数据:
      url拼接数据:所有请求都可以携带
      数据包数据:只有get不能携带
      数据包三种格式:urlencoded、form-data、json

    3. element-ui
      提供一堆布局

    4. jq+bs
      提供一堆布局

    展开全文
  • vue框架与后台之间的http交互

    千次阅读 2018-07-23 15:19:07
    1. 引入vue.js, vue-resource.js; 2.这就可以开始交互了。 注意:一定要运行在服务器里面,否则输出的是php代码,而非返回值。 有三种交互方式:get、post、jsonp get:会将请求的参数附在最后 post:不会显示...

    1. 引入vue.js, vue-resource.js;

    2.这就可以开始交互了。

    注意:一定要运行在服务器里面,否则输出的是php代码,而非返回值。

    有三种交互方式:get、post、jsonp

    get:会将请求的参数附在最后

    post:不会显示在url中

    get、post用来请求某个php文件的参数。

    jsonp:JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。其核心思想是利用JS标签里面的跨域特性进行跨域数据访问,在JS标签里面存在的是一个跨域的URL,实际执行的时候通过这个URL获得一段字符串,这段返回的字符串必须是一个合法的JS调用,通过EVAL这个字符串来完成对获得的数据的处理。

    定义a.txt

    内容是:Hello world!

    1)get:

    php接口:

     

     
    1. <?php

    2. $a=$_GET['a'];

    3. $b=$_GET['b'];

    4. echo $a+$b;

    5. ?>

     

    vue:

     
    1. <!DOCTYPE html>

    2. <html lang="en">

    3. <head>

    4. <meta charset="UTF-8">

    5. <title>Ajax-get</title>

    6. <script src="vue.js"></script>

    7. <script src="vue-resource.js"></script>

    8. </head>

    9. <body>

    10. <div id="app">

    11. a= <input type="text" id="t1" v-model="t1">

    12. b= <input type="text" id="t2" v-model="t2">

    13. a+b=<span class="a">{{msg}}</span>

    14. <input type="button" value="submit" @click="get()">

    15. </div>

    16.  
    17. <script>

    18. new Vue({

    19. el:'body',

    20. data:{

    21. t1:'',

    22. t2:'',

    23. msg:''

    24. },

    25. methods:{

    26. get:function(){

    27. this.$http.get('get.php',{

    28. a:this.t1,

    29. b:this.t2

    30. }).then(function(res){

    31. this.msg=res.data;

    32. },function(res){

    33. alert(res.status);

    34. });

    35. }

    36. }

    37. });

    38. </script>

    39. </body>

    40. </html>

     

     

     

     

    2)  post:

    php接口:

     
    1. <?php

    2. $a=$_POST['a'];

    3. $b=$_POST['b'];

    4. echo $a-$b;

    5. ?>

     

    vue:

     
    1. <!DOCTYPE html>

    2. <html lang="en">

    3. <head>

    4. <meta charset="UTF-8">

    5. <title>Ajax-post</title>

    6. <script src="vue.js"></script>

    7. <script src="vue-resource.js"></script>

    8. </head>

    9. <body>

    10. <div id="app">

    11. a= <input type="text" id="t1" v-model="t1">

    12. b=<input type="text" id="t2" v-model="t2">

    13. a-b=<span class="a">{{msg}}</span>

    14. <input type="button" value="submit" @click="post()">

    15. </div>

    16.  
    17. <script>

    18. new Vue({

    19. el:'body',

    20. data:{

    21. t1:'',

    22. t2:'',

    23. msg:''

    24. },

    25. methods:{

    26. post:function(){

    27. this.$http.post('post.php',{

    28. a:this.t1,

    29. b:this.t2

    30. },{

    31. emulateJSON:true

    32. }).then(function(res){

    33. this.msg=res.data;

    34. },function(res){

    35. alert(res.status);

    36. });

    37. }

    38. }

    39. });

    40. </script>

    41. </body>

    42. </html>

     

     

     

     

    3)  JOSNP:

     
    1. <!DOCTYPE html>

    2. <html lang="en">

    3. <head>

    4. <meta charset="UTF-8">

    5. <title>Ajax</title>

    6. <script src="vue.js"></script>

    7. <script src="vue-resource.js"></script>

    8. </head>

    9. <body>

    10. <div id="app">

    11. <input type="text" id="t1" v-model="t1">

    12. <p class="a">{{msg1}}</p>

    13. <input type="button" value="submit" @click="get()">

    14. </div>

    15. <script>

    16. new Vue ({

    17. el:'#app',

    18. data:{

    19. t1:'',

    20. msg1:''

    21. },

    22. methods:{

    23. get:function(){

    24. this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{

    25. wd:this.t1

    26. },{

    27. jsonp:'cb' //callback名字,默认名字就是"callback"

    28. }).then(function(res){

    29. this.msg1=res.data.s;

    30. },function(res){

    31. alert(res.status);

    32. });

    33. }

    34. }

    35. });

    36.  
    37. </script>

    38. </body>

    39. </html>

     

     

    最传统的写法:

     
    1. <!DOCTYPE html>

    2. <html lang="en">

    3. <head>

    4. <meta charset="UTF-8">

    5. <title>Ajax</title>

    6. <script src="vue.js"></script>

    7. <script src="vue-resource.js"></script>

    8. </head>

    9. <body>

    10. <div id="app">

    11. <input type="text" id="t1" v-model="t1">

    12. <p class="a">{{msg1}}</p>

    13. <input type="button" value="submit" @click="get()">

    14. </div>

    15. <script>

    16. new Vue ({

    17. el:'#app',

    18. data:{

    19. t1:'a',

    20. msg1:'b'

    21. },

    22. methods:{

    23. get:function(){

    24. this.$http({

    25. url:'post.php'

    26. data:给后台提交数据,

    27. method:'get'//也可以是/post/jsonp

    28. //如果是jsonp,那么还要加一行:jsonp:'cb' //cbName

    29. }).then(function(res){

    30. this.msg1=res.data.s;

    31. },function(res){

    32. alert(res.status);

    33. });

    34. }

    35. }

    36. });

    37.  
    38. </script>

    39. </body>

    40. </html>

    展开全文
  • Vue+Echarts后台交互

    千次阅读 2019-04-10 15:24:54
    Vue+Echarts后台交互drawPieChart() { drawPieChart() { this.chartPie = echarts.init(document.getElementById('chartPie')); this.chartPie.setOption({ title: { ...

    Vue+Echarts后台交互

    drawPieChart() {

                this.chartPie = echarts.init(document.getElementById('chartPie'));
                this.chartPie.setOption({
                    title: {
                        text: '网站论坛版块',
                        subtext: '纯属虚构',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['站内公告', '我要提问', '技术交流', '资源分享', '招聘信息','其他']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data:[],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
    
                this.HttpService.get("/dataEcharts/queryPostTypeData",{"id":0},resp=>{
    				if (resp.data.meta.success=="true") {
                        let chartData = resp.data.data;
                        let seriesData = [];
    					chartData.forEach(function(item){
                            let outObj = {};
                            outObj.name = item.type_name;
                            outObj.value =item.sum;
                            seriesData.push(outObj);
                        });
                        this.chartPie.setOption({                           
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data:seriesData,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
    				}
            	})
            },
    
    展开全文
  • vue.js与后台数据交互

    万次阅读 2018-01-23 11:34:51
    第一步:引入js库:<script src="../js/common/vue.min.js"> <script src="../js/common/vue-resource.js">前端代码:<!DOCTYPE html> <title>vue example <link

    第一步:引入js库:

    <script src="../js/common/vue.min.js"></script>
    <script src="../js/common/vue-resource.js"></script>

    前端代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>vue example</title>
    <link rel="stylesheet" href="../my/style.css">
    <script src="../js/common/vue.min.js"></script>
    <script src="../js/common/vue-resource.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" @click="get()" value="点击" />
        </div>
    </body>
    <script>
        new Vue({
            el : '#app',
            data : {
            },
            methods:{
                get:function(){
                    this.$http.get('/getData').then((response) => {
                        console.log(response);
                        alert(response.data);
                    },function(){
                        alert('请求失败!');
                    });
                }
            }
        });
    </script>
    </html>

    后端接口响应:

        ....
        @RequestMapping("/getData")
        @ResponseBody
        public String getDatas() {
            return "data";
        }
        ....

    效果:
    这里写图片描述

    展开全文
  • vue+elementUI完成登陆vue怎么引入和配置使用element-ui框架Vue+ElementUI设计登陆页面后台交互(axios/qs/vue-axios)axiosGET提交POST提交axios/qs/vue-axios安装及使用步骤完整代码后台代码 vue怎么引入和配置使用...
  • 本篇文章介绍HC框架后台交互 Demo地址为:http://hcframework.youcaidichan.com/hctest.rar 首先我们要了解HC前台和后台是如何绑定的 我们见过好多双向绑定的框架 Vue,React,Way等等 我们只需要传给前台一...
  • 一、前言 前端三大 JS 框架 Vue、React、Angular 都用... [增删改查] 使用 Vue2.x + LayUI 做后台管理 CRUD 界面和 REST 交互 React [增删改查] 使用 React + LayUI 做后台管理 CRUD 界面和 RESTful 交互 An...
  • 前端vue框架后台管理工作总结01 这是大前天晚上加班回来总结的,昨天又周六,这周六就开始五一小长假,(霸占我们的双休,还是长假??),给大家分享一下,以后每天晚上有时间都会给大家分享日常工作内容和总结,这...
  • Vue框架

    千次阅读 2020-02-12 17:52:55
    Vue框架 一、Vue框架介绍 二、Vue框架指令
  • 基于ant-design和vue的中后台管理框架
  • vue+iview的table分页与后台数据交互,在分页切换的时候能够实时的更新数据,避免数据更新缓慢不及时,造成的数据误差问题,希望能够帮助到大家
  • 功能状态" align="center"> 这边定义的scope 跟:data="tableData" 都是绑定一个值 开</el-radio> 关</el-radio> // label 数据库中存放的肯定是数值型,我们显示的是字符串所以要有label属性做类似一种接收 ...
  • Vue.js 是一个目前比较流行的前端框架,在业界也算很有...Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力时间成本。在这个月的.
  • vue+Element后台管理系统框架搭建vue框架搭建及开发规范1.1环境配置1.2项目创建1.开始搭建项目vueProject2.打开我们的项目,可以看到如下的目录结构:1.3开发规范1.vueProject的目录结构:2.项目创建及命名规范2.vue...
  • Vue.js高效前端开发 • 【Ant Design of Vue框架基础】

    万次阅读 多人点赞 2021-07-13 21:10:52
    文章目录一、Ant Design of Vue框架1、Ant Design介绍2、Ant Design of Vue安装 一、Ant Design of Vue框架 1、Ant Design介绍 随着商业化的趋势,越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样...
  • Vue管理后台框架选择

    2020-11-02 17:39:14
    使用这些框架会减少我们的初期运作以及常用的路由,状态,交互等等,我们只需要去复用它的代码,加上一下我们自己的逻辑很快的完成项目。会为你节约更多时间喝喝咖啡等,这篇文章主要记录一下常用的框架。 主要介绍...
  • VUE框架

    2021-07-20 09:39:14
    一、Vue框架的概述 ​ Vue 是一套用于构建用户界面的渐进式框架,发布于2014年2月。其他大型框架不同的是,Vue被设计为考科一自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于第三方库(如:...
  • 看有关的教学视频,说是使用api.ajax获取数据,但是没有具体演示,所以想清大神来帮忙回答一下,Vue.js如何与后台进行数据交互,还有从后台获取数据后,如何使用,例如集合或者对象如何进行展示。希望各位大神...
  • vue-manage-system:基于 Vue + Element UI 搭建的开源中后台管理框架。 该框架是本人在做中后台管理系统的项目时,在 Github 上找到的开源框架,原仓库地址:https://github.com/lin-xin/vue-mana
  • VUE框架学习心得

    千次阅读 2020-11-11 13:41:46
    在数通畅联的DAP数据分析平台中用到了可视化展现的Echarts组件,Echarts组件用到了VUE框架的代码知识。在近期工作中,我多次学习并使用到了VUE框架的代码知识。在大数据技术蓬勃发展的时代下,将庞大的数据量进行...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,229
精华内容 4,091
关键字:

vue框架与后台的交互

vue 订阅