SpringBoot Vue 前后端分离测试demo项目

上一篇写了直接从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>

基于只是简单了解前后端分离而写，不是很严谨；

SpringBoot Vue 前后端分离 测试demo项目

猜你喜欢

SpringBoot Vue 前后端分离测试demo项目