SpringBoot Vue 前後端分離 測試demo專案
阿新 • • 發佈：2020-07-27
上一篇寫了直接從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 classtest { 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>
基於只是簡單瞭解前後端分離而寫，不是很嚴謹；