webapi 获取vue提交数据_vue提交数据到c#webapi - CSDN
精华内容
参与话题
  • 前后端分离:WebAPI+Vue开发——远程数据请求axios 前后端分离:WebAPI+Vue开发——跨域设置 前后端分离:WebAPI+Vue开发——身份认证 本文没有Vue语法内容(Vue中文文档),只记录本人开发中遇到的难点 远程...

    前后端分离:WebAPI+Vue开发——远程数据请求axios

    前后端分离:WebAPI+Vue开发——跨域设置

    前后端分离:WebAPI+Vue开发——身份认证

    本文没有Vue语法内容(Vue中文文档),只记录本人开发中遇到的难点

    远程请求采用axios(axios中文文档,注意:IE11以下不支持axios)

    ajax、axios、fetch之间的详细区别以及优缺点(https://blog.csdn.net/twodogya/article/details/80223508

    Get请求:
     

    axios.get('http://api.abc.com/api/user',{
        param:{Id:132}
    }).then(function(response){
        console.log(response.data);
    }).catch(function(error){
        console.log(error);
    

    Post请求:

    axios.post('http://api.abc.com/api/user',{
    name:'frank',
    sex:'1'
    }).then(function (response){
        console.log(response.data)
    }).catch(function(error){
        console.log(error);
    });
    

    原始请求:

    axios({
    url:'http://api.abc.com/api/user',
    method:'post',
    responseType:'json',
    data:{
        name:'frank',
        sex:'1'
    }
    }).then(function(response){
        console.log(response.data);
    }).catch(function(error){
        console.log(error);
    })
    

    response的结构如下:

    {
        // 返回的数据
        data: {},
        // http状态码
        status: 200,
        //状态
        statusText: 'OK',
        // 返回结果的header头
        headers: {},
        //axios请求的配置内容
        config: {}
    }
    

    全局默认值设置

    axios.defaults.baseURL = 'http://api.abc.com';
    

    设置之后,axios的远程请求,不用再具体到域名,直接用 url:'/api/user'即可,实际项目中建议把POST、GET方法进行封装,统一调用,如有更换其他远程请求方式的需求(如ajax)会很方便,封装如下:

    //axios的Post方法封装
    function POST(url, data, method) {
        var tk = getCookie('token');
        if (tk) {
            axios({
                url: url,
                method: 'post',
                data: data,
                headers: { 'token': tk }
            }).then(function (response) {
                if (response.data.ret == -2)//没有访问权限
                {
                    location.href = '/';
                }
                else if (response.data.ret == -1) {//程序错误
                    console.log(response.data.msg);
                }
                else {
                    method(response.data);
                }
            }).catch(function (error) {
                console.log(error);
            })
        }
    }
    //axios的Get方法封装
    function GET(url, data, method) {
        var tk = getCookie('token');
        if (tk) {
            axios({
                url: url,
                method: 'get',
                data: data,
                headers: { 'token': tk }
            }).then(function (response) {
                if (response.data.ret == -2)//没有访问权限
                {
                    location.href = '/';
                }
                else if (response.data.ret == -1) {//程序错误
                    console.log(response.data.msg);
                }
                else {
                    method(response.data);
                }
            }).catch(function (error) {
                console.log(error);
            })
        }
    }
    

    GET和POST方法也可以封装到一个里边,method是一个回调函数,处理得到的数据;getCookie是自己写的cookie获取方法,此处的token类似sessionid,放在了请求头中,作为一个用户身份识别标识使用,用户身份识别后续再写;response.data.ret和response.msg是API接口中自定义的请求状态和提示信息
     

    展开全文
  • 1、修改src/main.js文件 加入两行代码: import VueResource from 'vue-resource'...1、创建在线模拟数据的接口 可去easy-mock官网创建,具体方法不在此详述。 比如,接口编辑如下: { "status": "0", "co...

    一、给项目加上http请求的支持

    1、修改src/main.js文件

    加入两行代码:

    import VueResource from 'vue-resource'
    
    Vue.use(VueResource);

    二、调用请求

    1、创建在线模拟数据的接口

    可去easy-mock官网创建,具体方法不在此详述。

    比如,接口编辑如下:

    {
      "status": "0",
      "code": "0",
      "result|10": [{
        "productId|+1": 10001,
        "productName": "@cword(3)",
        "prodcutPrice|100-5000": 2499,
        "prodcutImg": ('180x180', '#894FC4', '#FFF', 'png', '!')
      }]
    }

    预览之后的数据为:

    2、Vue.js内置了对发送http请求的支持,只需要在对应页面的script标签内加上对应的代码即可。

    比如在展示商品列表页面GoodsList.vue需要获取商品列表:

    <template>
       {...}
    </template>
    <script>
        export default{
            data(){
                return {
    				goodsList:[]
                }
            },
            components:{
            	{...}
            },
            mounted: function(){
        		this.getGoodList();
            },
            methods:{
            	getGoodList(){
            		this.$http.get("https://www.easy-mock.com/mock/5d14320e78ded3476989974f/shoppingmallApi/goods").then((result)=>{
            			console.info(result.data)
            			var res = result.data;
            			this.goodsList = res.result;
            		},(result)=>{
            			console.error(result)
            		})
            	}
            }
        }
    </script>

    其中,then方法接受两个函数作为参数,第一个是成功后做什么,第二个是失败后做什么。

     

    补充:

    • data方法用于“声明页面会出现的变量“,并且赋予初始值。
    • mounted表示页面被vue渲染好之后的钩子方法,会立刻执行。所以我们要把发送http的请求写到mounted方法中。
    • this.$http中的this表示当前的vue组件(即GoodsList.vue);$http表示所有以$开头的变量都是vue的特殊变量,往往是vue框架自带。这里的$http就是可以发起http请求的对象。
    • $http.get是一个方法,可以发起get请求,只有一个参数即目标url。
    • then()方法来自promise,可以把异步请求携程普通的非异步形式。第一个参数是成功后的callback,第二个参数是失败后的callback。
    • this.goodsList = res.result中,是把远程返回的结果(json)赋予到本地。因为JavaScript的语言特性能直接支持JSON,所以才可以这样写。

    三、设置Vue.js开发服务器的代理

    正常来说,JavaScript在浏览器中是无法发送跨域请求的,我们需要在Vue.js的“开发服务器”上做转发配置。

    原来的config/index.js文件:

    1、修改config/index.js文件,在proxyTable里面增加以下内容:

     proxyTable: {
            '/api':{      //1.对所有以'/api'开头的url做处理
                target: 'https://www.easy-mock.com/mock/5d14320e78ded3476989974f/shoppingmallApi',
                changeOrigin: true,
                pathRewrite:{
                    '^/api':''      //2.把url中的"/api"去掉
                }
            }
        },

    上面的代码做了以下三件事:

    2、修改GoodsList.vue文件

    就是将url由原来的“https://www.easy-mock.com/mock/5d14320e78ded3476989974f/shoppingmallApi/goods”改成了“api/goods”。

    methods:{
            	getGoodList(){
            		this.$http.get("api/goods").then((result)=>{
            			console.info(result.data)
            			var res = result.data;
            			this.goodsList = res.result;
            		},(result)=>{
            			console.error(result)
            		})
            	}
            }

    四、把结果渲染到页面中

    修改GoodsList.vue页面

     <div class="accessory-list-wrap">
                  <div class="accessory-list col-4">
                    <ul>
                		<li v-for="(item,index) in goodsList">
    	                    <div class="pic">
    	                      <a href="#"><img :src="item.prodcutImg" alt=""></a>
    	                    </div>
    	                    <div class="main">
    	                      <div class="name">{{item.productName}}</div>
    	                      <div class="price">{{item.prodcutPrice}}</div>
    	                      <div class="btn-area">
    	                        <a href="javascript:;" class="btn btn--m">加入购物车</a>
    	                      </div>
    	                    </div>
                      	</li>
                    </ul>
                  </div>
                </div>
    • v-for是一个循环语法,可以把这个元素进行循环。注意,这个叫directive指令,需要与标签一起使用。
    • (item,index) in goodsList中的item是一个临时变量,用于遍历使用。

    五、如何发起post请求

    与get类似,就是第二个参数是请求的body。

    在vue的配置文件中(如Webpack项目的src/main.js中)增加下面一句:

    import VueResource from 'vue-resource'
    
    Vue.use(VueResource);
    
    ...
    
    //增加下面这句:
    Vue.http.options.emulateJSON = true;

    目的是为了能够让发出的post请求不会被浏览器转换为option请求。然后就可以根据下面的代码发送请求了:

    this.$http.post('api/goods',{productId:''})
        .then((response)=>{
            ...
        }, (response)=>{
            ...
        });

    关于发送http请求的更多内容,可查看vue-resource官方文档:https://github.com/search?q=vue-resource

    六、懒加载

    1、项目添加静态文件,用于懒加载的图片

    2、vue-lazyload的安装以及引入

    根据vue-lazyload官网进行安装以及引入,引入根据项目修改loading路径。

    3、使用

    在页面中使用v-lazy命令。将v-model:src 改成v-lazy        

    <li v-for="(item,index) in goodsList">
    	                    <div class="pic">
    	                      <a href="#"><img v-lazy="item.prodcutImg" alt=""></a>
                               //将v-model:src 改成了v-lazy                        
    
    	                    </div>
    	                    <div class="main">
    	                      <div class="name">{{item.productName}}</div>
    	                      <div class="price">{{item.prodcutPrice}}</div>
    	                      <div class="btn-area">
    	                        <a href="javascript:;" class="btn btn--m">加入购物车</a>
    	                      </div>
    	                    </div>
                      	</li>

     

     

    展开全文
  • 前后端分离:WebAPI+Vue开发——远程数据请求axios 前后端分离:WebAPI+Vue开发——跨域设置 前后端分离:WebAPI+Vue开发——身份认证 本文采取的策略是“跨域资源共享-Cross Origin Resource Sharing(CORS) ”。...

    前后端分离:WebAPI+Vue开发——远程数据请求axios

    前后端分离:WebAPI+Vue开发——跨域设置

    前后端分离:WebAPI+Vue开发——身份认证

    本文采取的策略是“跨域资源共享-Cross Origin Resource Sharing(CORS) ”。

    一般情况下,前端和后端在两个项目中,在部署的时候就要部署在两个域名下,如前端域名:http://www.abc.com/,WebAPI域名http://api.abc.com/,这就产生了跨域的问题,跨域的时候会出现这样的错误提示:

    “Failed to load http://api.abc.com/api/user: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.abc.com' is therefore not allowed access.”

    大概意思就是http://www.abc.com没有从WebAPI接口http://api.abc.com/获取数据的权限,要明确的一点是,这是js上异步请求的保护机制,不是axios独有的问题,处理方法这篇博客有详细说明:(web api 跨域请求,ajax跨域调用webapi)。

    我采用的方式是修改WebAPI的webconfig配置,在system.webServer标签里边添加如下配置:

    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Content-Type" />
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        </customHeaders>
    </httpProtocol>

    其中value="*",也可以修改为value="http://www.abc.com"(注意域名后面不带"/");前者是取消所有域名对webapi的访问限制,后者是指定单个域名有访问权限。

    这样处理之后完了吗?还没完。。。上的引用的博客中用一句话简单的说了下OPTIONS处理的,但是没说为什么要处理OPTIONS,而且处理方法是需要对每个控制器修改,这个不太方便。

    为什么会有OPTIONS请求?这是主流浏览器跨域请求的机制,在POST请求之前,先发送一个OPTIONS预请求,预请求返回状态码正常的情况下才发送我们真正想要的POST请求,通俗点说,就是POST先找个小弟OPTIONS探探路,小弟说这条路能走,POST才走。这篇文章讲的更详细一点(.net mvc webapi 处理跨域请求)。

    提供两种处理方法:

    一、在global中添加上对OPTIONS方法的处理 

    protected void Application_BeginRequest()
    {
        if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
        {
            Response.End();
        }
    }

    二、去掉或注释掉配置文件system.webServer标签中的

    <remove name="OPTIONSVerbHandler"/>这个标签在跨域请求里边真是一个大坑(后来求证发现这其实不是坑,允许OPTIONS请求会增加跨站攻击,服务端风险太大),它应该是表示不接收OPTIONS请求,预请求没结果,后面的请求是不会执行的。

    我验证的结果是,上面两种方法,任选一种都可以解决问题。不过我还发现一种情况,在找到上面的解决方案之前,做post请求测试的时候,如果不传递参数,服务端不对options请求进行上面的处理也能正常返回,因为浏览器的NetWork中显示,浏览器没有发出options预请求。

     

    展开全文
  • vuejs前后端数据交互之提交数据

    万次阅读 2017-12-29 10:57:11
    前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,...复杂,所以这里给大家提供一种用vuejs封装的ajax函数向后端提交数据。 (1)第一步,先在template中写一个表单;

    前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点。。。额 。。。复杂,所以这里给大家提供一种用vue-resource向后端提交数据。

    (1)第一步,先在template中写一个表单;

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="用户类型" prop="type">
                        <el-select v-model="ruleForm.type" placeholder="请选择专利类型" style="width:500px;">
                            <el-option label="一级管理员" value="1"></el-option>
                            <el-option label="二级管理员" value="2"></el-option>
                            <el-option label="三级管理员" value="3"></el-option>
                            <el-option label="普通用户" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出生日期" prop="date">
                        <el-input v-model="ruleForm.date"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="intro">
                        <el-input type="textarea" v-model="ruleForm.intro" :rows="10"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>
    </el-form>


    (2)在data里面定义表单内容的字段及表单的约束规则;

    data() {
          return {
            ruleForm: {
                  name: '',
                  type: '',
                  date: '',
                  intro: '',
              }
          }
     rules: {
              name: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 1, max: 20, message: '长度在 1 到20个字符', trigger: 'blur' }
              ],
              type: [
                { required: true, message: '请选择用户类型', trigger: 'change' }
              ],
              date: [
                { required: true, message: '请输入出生日期', trigger: 'blur' },
                { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
              ],
              intro: [
                { required: true, message: '请输入备注', trigger: 'blur' },
                { min: 50, max: 500, message: '请输入至少50个字', trigger: 'blur' }
              ],
    	    }
    }

    3)定义提交表单的方法

    methods:{
    submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
    			this.$http.get(baseURL+"api/create?table=user&"+getParamsString(param)).then(function(res){
                            if(res.body==1){
                                this.$alert("提交成功", '提交结果', {
                                    confirmButtonText: '确定',
                                    type: 'success',
                                    callback: action => {
                                    },
                                });
                            }
                            else{
                                this.$alert("提交失败", '提交结果', {
                                    confirmButtonText: '确定',
                                    type: 'warning',
                                    callback: action => {
                                    },
                                });
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
    }

    上面提交函数里面的baseURL以及api的介绍请参考我另一篇介绍http://blog.csdn.net/caixiaodaohaha/article/details/78855150


    当然啦。前提是你的数据库里面有一张名为user的表,表里面有name,type,date,intro几个字段,并且后端的接口啥的都已经定义好的情况下,不然是不会成功的哦微笑微笑微笑

    展开全文
  • 前端使用vue开发, 后端是提供接口吗? 还是要怎么进行数据交互,小白问题请教; 之前做app的时候 都是后端出接口, 前端直接调用接口, 渲染数据, vue是怎样进行数据交换的啊 后端要提供什么
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述前言2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过...
  • vue全面介绍--全家桶、项目实例

    万次阅读 多人点赞 2017-03-28 17:38:13
    2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位...
  • 秒懂Vuejs、Angular、React原理和前端发展历史 2017-04-07小北哥哥前端...我们都知道现在流行的框架:Vue.Js、AngularJs、ReactJs,已经逐渐应用到各个项目和实际应用中,它们都是MVVM数据驱动框架系列的一种。 在...
  • vue 脚手架安装,这里我就不介绍了 说重点 ! 安装 vuex npm install vuex --save 安装成功后 ,现在我们就可以使用 vuex 了 1: 先在src 目录下建立 store 文件夹 , 文件目录如图: 这里我先介绍下 每个...
  • 目前最完整的前端框架 Vue.js 全面介绍

    万次阅读 多人点赞 2018-01-06 23:20:33
    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并...
  • form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。 文档 | github 功能...
  • 一、 目录结构 |— build 构建脚本目录 |— build.js 生产环境构建(编译打包)脚本 |— check-versions.js 版本验证工具 ... |— vue-loader.conf.js 处理vue中的样式 |— webpack.base.conf.j...
  • vue上传文件的坑

    千次阅读 2019-04-03 18:13:24
    在这个地方浪费了我两天时间,必须总结一下经验 <input multiple type="file" ref="file" id="uploadFile" @change="aaa($event)"> aaa(e) { console.log('e.target.files') console.log(e.target.files) ...
  • 1、用js的formData对象上传(服务器返回url地址) <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/> methods: { ... let file = e.targe...
  • 【面试】web前端经典面试题试题及答案-vue

    万次阅读 多人点赞 2020-06-22 15:51:06
    vue的声明周期、vue实现双向数据绑定、Vue组件间的参数传递/ vue通信、vue路由、vue跨域、vuex、vue基础 vue的声明周期 vue实现双向数据绑定 Vue组件间的参数传递/ vue通信 vue路由 ...
  • Vue.js与React的全面对比

    万次阅读 多人点赞 2017-11-02 18:39:37
    Vue与React的对比Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比...1.数据绑定1.1 Vue中有关数据绑定的部分
  • Vue:这个就很火了,尤雨溪大神搭建的一套框架;微应用:这是我们搭建在钉钉平台上的一个应用,可制作我们需要的功能,同时可以调用一些钉钉提供的开放接口以及js调用原生的SDK;创建微应用文档:...
  • Springboot Vue Login(从零开始实现Springboot+Vue登录)

    万次阅读 多人点赞 2020-01-09 10:51:03
    最近学习使用Vue实现前端后端分离,在Github上有一个很好的开源项目:mall,正所谓百看不如一练,自己动手实现了一个Springboot+Vue的登录操作,在此记录一下踩过的坑。 文章最后补充两端的GitHub代码,之所以放在...
  • vue面试题

    千次阅读 2018-10-08 11:10:29
    一. 请谈谈Vue中的MVVM模式 二、.
  • vue实现仿猫眼电影项目

    千次阅读 2019-12-29 14:31:12
    vue仿猫眼电影项目 Vue-cli3.0 项目地址:http://struggle-wjf.gitee.io/feizhumovie/dist/index.html#/ 源码地址:https://github.com/wjfstruggle it资源列表:...
1 2 3 4 5 ... 20
收藏数 4,228
精华内容 1,691
关键字:

webapi 获取vue提交数据