选择依赖项 : SpringWeb、Thymeleaf

127.0.0.1:8080(http://localhost:8080/)

在后端中新建一个软件包:controller

在IndexController加一个注解@Controller

加一个父目录@RequestMapping

注意加上/,网站是http://127.0.0.1:8080/pk/index/

在resources的

在static里存Image

以上是前后端不分离的写法,返回的是html页面

如果前后端分离,返回的是一个类

后端分离的写法

增加一个映射@RequestMapping

public List<String> getBotInfo() {
        List<String>list=new LinkedList<>();
        list.add("sword");
        list.add("tiger");
        list.add("apple");
        return list;
    }
}
public Map<String,String> getBotInfo() {
        Map<String,String> map = new HashMap<>();
        map.put("name","tiger");
        map.put("rating","1500");
        return map;
    }
}

(注意方法的返回)

public List<Map<String,String>> getBotInfo() {
        List<Map<String,String>> list = new LinkedList<>();
        Map<String,String> bot1 = new HashMap<>();
        bot1.put("name","tiger");
        bot1.put("rating","1500");
        Map<String,String> bot2 = new HashMap<>();
        bot2.put("name","apple");
        bot2.put("rating","1800");
        list.add(bot1);
        list.add(bot2);
        return list;
    }
}

前端

vue ui

之后安装两个插件和两个依赖(jqueiry和bootstrap)

任务 —> serve —> 运行

去掉#

在router的Index里将Hash几个字去掉

vue

每一个vue都有三个:(html)