前端技巧：后端开发者的必备利器

发表时间: 2021-06-30 00:31

文章目录

前言

1.jquery的两种按钮点击和发送请求：
2.vue中的按钮定义和axios请求：

总结

前言

现在都是前后端分离的开发，很多时候可能后端不会再写html，jquery了，但是一些场景之下后端还是需要掌握下前端的知识，以备不时之需。我曾经在跟前端联调的过程当中遇到前端的支付问题，前段无法解决，直接写的demo页面，还有一些跨域问题，自己写简单的前端界面定位问题结局问题的。本篇来进行总结下我认为后端必须掌握的前端技能。

1.jquery的两种按钮点击和发送请求：

先上代码：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script>        $(function () {            $("#btn").click(function () {                alert("我是一个按钮哈");                // sendData();            });            $("body").delegate("#btn2", "click", function () {                alert("按钮点击了");                // sendData();                           });        })         //外面封装方法        function sendData(){            $.ajax({                    type: "POST",                    url: "http://localhost:9090/debug/pet/hello/sendTestJson",                    contentType: "application/json;charset=utf-8",  //发送信息至服务器时内容编码类型。                    data: JSON.stringify(arg),                    dataType: 'json',                    success: function (data) {                        alert("保存....");                    },                    error: function (data) {                        alert("失败...");                    }                });        }    </script></head><body>    <input type="button" value="我是一个按钮" id="btn" />    <input type="button" value="我是第二个按钮" id="btn2" /></body>

好久没写前端了，没想到还能啪啪的写出来，对于jquery可能甚至很多前端同学已经不知道了，但是对于老码农来说仍是满满的回忆，相信我上面的代码你应该能改看懂逻辑。

2.vue中的按钮定义和axios请求：

上代码：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><div id="app">	  <div>	  <button v-on:click="clickMe()">巴拉拉小魔仙，点击就送</button>    <button v-on:click="click2()">按钮2点击</button>	  </div>  	  <div v-for="(value,key) in helloData">	    {{ key }} : {{ value }} 	  </div>		  	</div><script> var app = new Vue({  el: '#app',  data: {    helloData: {}  },  methods: {    click2:function(){     alert("按钮2点击了");    },    clickMe: function () {      alert("发送请求");    //   var obj = this;    //   axios.get('http://localhost/ms/balala/1').then(function(response){    //   	var data = response.data.slice(10,-1);    //   	let a = JSON.parse(data);    //   	obj.helloData = a;		// }).catch(function (error) {     //     console.log(error);     //   });    // var axios = require('axios');var data = JSON.stringify({  "mobile": "18511585294",  "password": "qaz123456"}); var url=url;//需要替换成你的urlvar config = {  method: 'post',  url: url,  headers: {     'X-Request-BuriedPoint': 'activityCode=SC21HD000108;inviteCode=GS001878',     //'Content-Type': 'application/x-www-form-urlencoded'     'Content-Type': 'application/json'  },  data : data};axios(config).then(function (response) {  alert("结果："+response.code);  console.log(JSON.stringify(response.data));}).catch(function (error) {  console.log(error);});   	 }  }  })</script></body>

上面就是vue的简单的构造和方法请求，逻辑都是比较简单的逻辑，能够和后端实现接口的交互。

总结

上面就是我梳理的后端必须掌握的前端技巧，在线引入jquery，在线引入vue、axios等等实现和后端的交互js逻辑,如果你工作当中有需要就保留下来吧，如果想跟我有更多的交流，欢迎添加公众号：Java时间屋进行交流。

前端技巧：后端开发者的必备利器

文章目录

前言

1.jquery的两种按钮点击和发送请求：

2.vue中的按钮定义和axios请求：

总结

热门阅读

推荐阅读