上一篇写了直接从url地址下载图片到本地，最近在学springboot,就试写了一个springboot和vue前后端分离展示的demo，简单来说就是后端返回Json数据，前端Vue通过axios请求来获取解析。
期间遇到了几个问题，需要注意，如下：
1.一般来说会有跨域请求问题出现，原因是后端占用了一个端口，前端端口不匹配。解决方法就是在springboot 中新建一个配置类，修改默认配置，
2.js for循环中调用其它函数会因为变量问题导致循环提前终止。所有for循环中的变量最好不同，如 i,j,k
一：实际根据url请求地址爬取内容返回
package com.yaimer.test.controller; import java.io.BufferedReader; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; import java.util.ArrayList; import java.util.List; /** * @program: SpringBootMyBatisPuls * @description: 爬取地址 * @author: Guistar_yaimer * @create: 2020-07-22 16:02 **/ public class test { private static String s; public static String getHtml(String urlString) { try { StringBuffer html = new StringBuffer(); URL url = new URL(urlString); HttpURLConnection conn = (HttpURLConnection) url.openConnection(); InputStreamReader isr = new InputStreamReader(conn.getInputStream()); BufferedReader br = new BufferedReader(isr); String temp; int a=0; while ((temp = br.readLine()) != null) { a=a+1; //System.out.println(a); html.append(temp).append("\n"); if (a==42){ //该页面第四十二行 name值 //System.out.println("============第四十二=============="+temp); s=""; s=temp; } } br.close(); isr.close(); return html.toString(); } catch (Exception e) { e.printStackTrace(); return null; } } public static List<String> getJson(){ List<String> list = new ArrayList<>(); //只展示该话漫画四页内容， for (int i = 1; i < 5; i++) { String src="http://www.hhimm.com/cool79471/"+i+".html?s=5&d=0"; getHtml(src); String ss =s.trim(); String sss =ss.substring(ss.indexOf("name="),ss.indexOf("onerror")); String ssss = sss.substring(6,sss.length()-2); list.add(ssss); System.out.println(ssss); } System.out.println("完毕--over"); return list; } }
二：controller类，本地请求地址
package com.yaimer.test.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.List; /** * @program: SpringBootMyBatisPuls * @description: * @author: Guistar_yaimer * @create: 2020-07-22 19:01 **/ @Controller public class testController { @ResponseBody @RequestMapping("/hello") public String hello(){ return "滨边美波"; } @ResponseBody @RequestMapping("/yel") public List<String> yel(){ return test.getJson(); } }
以上就是后端业务代码，
三：前端
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script src="js/jquery-1.8.3.js"></script> <script src="js/axios.js"></script> <script src="js/vue.js"></script> <body> <div id="app"> <p>{{ message }}</p> <button @click="getJpg">获取</button><br /> <!-- <img style="width: 500px;height: auto;" src="http://20.94201314.net/dm05//ok-comic05/J/JingBaoYouXi/vol_001/99770_0002_14121.JPG" > --> <div id="soul"> <!-- <img style="display: block;width: 500px;height: auto;" :src="message" /> --> <ul> <li v-for="(iu,index) in jpgs"> <img style="display: block;width: 500px;height: auto;" :src=iu /> </li> </ul> </div> </div> <br /> <br /> </body> <script> var app = new Vue({ el: "#app", data: { message: ‘朴智妍 iu‘, jpgs: [] }, methods: { getJpg: function () { var that = this; axios.get("http://localhost:8080/yel") .then(function (response) { console.log(response); console.log("Size:" + response.data.length); for (j = 0; j < response.data.length; j++) { that.getNum(response.data[j]); } console.log("length:"+that.jpgs.length) }) .catch(function (error) { }) }, getNum: function (s) { /* var s="yexoooxopexytxqqxoooxopqxoptxqqxywxtuxyexeyxyexeyxoptxoopxopuxrrxqexoooxwqxoooxooexwwxoptxyexoowxoooxopwxqtxywxywxyqxyextextexttxttxywxqtxywxywxtexttxqtxyqxtrxtpxtyxtuxyrxeyxwpxeopoiuytrewqxpqb"; */ var x = s.substring(s.length - 1); var w = "abcdefghijklmnopqrstuvwxyz"; var xi = w.indexOf(x) + 1; var sk = s.substring(s.length - xi - 12, s.length - xi - 1); s = s.substring(0, s.length - xi - 12); var k = sk.substring(0, sk.length - 1); var f = sk.substring(sk.length - 1); for (i = 0; i < k.length; i++) { eval("s=s.replace(/" + k.substring(i, i + 1) + "/g,‘" + i + "‘)"); } var ss = s.split(f); s = ""; for (i = 0; i < ss.length; i++) { s += String.fromCharCode(ss[i]); } this.message = "http://20.94201314.net/dm05/" + s; //console.log(s) this.jpgs.push("http://20.94201314.net/dm05/" + s); } } }) </script> </html>
基于只是简单了解前后端分离而写，不是很严谨；
原文：https://www.cnblogs.com/qq1967591590/p/13385258.html