如何在单体应用中引入Vue+ElementUI(一)

SpringBoot+Vue+ElementUI

创建SpringBoot项目

这里使用IDEA开发工具快速创建一个SpringBoot项目,不过社区版的IDEA好像创建不太一样
New Object
如何在单体应用中引入Vue+ElementUI(一)_第1张图片
如何在单体应用中引入Vue+ElementUI(一)_第2张图片
如何在单体应用中引入Vue+ElementUI(一)_第3张图片
如何在单体应用中引入Vue+ElementUI(一)_第4张图片
如何在单体应用中引入Vue+ElementUI(一)_第5张图片
可以看到项目的一个目录结构如下
如何在单体应用中引入Vue+ElementUI(一)_第6张图片

启动已有的SpringBoot项目

如何在单体应用中引入Vue+ElementUI(一)_第7张图片
如何在单体应用中引入Vue+ElementUI(一)_第8张图片

2020-05-16 22:39:19.936  INFO 4100 --- [           main] com.lyp.demo1.Demo1Application           : Starting Demo1Application on GOS-02005141907 with PID 4100 (E:\IdeaWork\demo1\target\classes started by Administrator in E:\IdeaWork\demo1)
2020-05-16 22:39:19.940  INFO 4100 --- [           main] com.lyp.demo1.Demo1Application           : No active profile set, falling back to default profiles: default
2020-05-16 22:39:20.550  INFO 4100 --- [           main] com.lyp.demo1.Demo1Application           : Started Demo1Application in 1.156 seconds (JVM running for 4.387)

Process finished with exit code 0

这里可以看到启动没报错,但不是我们想要的服务器启动,spring-boot-starter 换成 spring-boot-starter-web,再次启动
如何在单体应用中引入Vue+ElementUI(一)_第9张图片

2020-05-16 22:44:55.703  INFO 2376 --- [           main] com.lyp.demo1.Demo1Application           : Starting Demo1Application on GOS-02005141907 with PID 2376 (E:\IdeaWork\demo1\target\classes started by Administrator in E:\IdeaWork\demo1)
2020-05-16 22:44:55.707  INFO 2376 --- [           main] com.lyp.demo1.Demo1Application           : No active profile set, falling back to default profiles: default
2020-05-16 22:44:57.102  INFO 2376 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)
2020-05-16 22:44:57.114  INFO 2376 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2020-05-16 22:44:57.114  INFO 2376 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.35]
2020-05-16 22:44:57.205  INFO 2376 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2020-05-16 22:44:57.205  INFO 2376 --- [           main] o.s.web.context.ContextLoader            : Root WebApplicationContext: initialization completed in 1426 ms
2020-05-16 22:44:57.419  INFO 2376 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Initializing ExecutorService 'applicationTaskExecutor'
2020-05-16 22:44:57.669  INFO 2376 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2020-05-16 22:44:57.683  INFO 2376 --- [           main] com.lyp.demo1.Demo1Application           : Started Demo1Application in 2.608 seconds (JVM running for 3.583)

上述启动器 添加了一个测试方法,代码:

package com.lyp.demo1;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@SpringBootApplication
@Controller
public class Demo1Application {

    public static void main(String[] args) {
        SpringApplication.run(Demo1Application.class, args);
    }

    @RequestMapping("/test")
    @ResponseBody
    public String test(){
        return "测试spring boot项目启动";
    }

}


重启 访问页面
如何在单体应用中引入Vue+ElementUI(一)_第10张图片

引入Vue.js

官网链接 https://cn.vuejs.org/
进入后看到Vue的首页,很简洁的一个页面,我们点击 起步
如何在单体应用中引入Vue+ElementUI(一)_第11张图片
可以看到这个页面是Vue的一个教程文档,很详细,各个功能都可以通过左边导航打开,接下来我们先把Vue引入到项目里面来,找到
如何在单体应用中引入Vue+ElementUI(一)_第12张图片
这里直接选择点击开发版本,下载好js,引入到项目中
因为接下来会写一个简单的页面,这里我们引入一下freemarker

		
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-freemarkerartifactId>
        dependency>
  1. 目录结构
    如何在单体应用中引入Vue+ElementUI(一)_第13张图片
    ftl代码:

<html>
<head>
    <meta charset="UTF-8">
head>
<body>
<div id="app">
    <button @click="count++">按钮button>
    <span style="display: block;">{{count}}span>
div>
body>

<script src="/lib/vue.js">script>
<script src="/index.js">script>
html>

js代码:

var vm = new Vue({
    el:'#app',
    data:{
        count:0,
    },
    methods:{


    }
})
  1. 编写后端控制器
    如何在单体应用中引入Vue+ElementUI(一)_第14张图片
    java代码:
package com.lyp.demo1.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class IndexController {

    @RequestMapping("/index")
    public String index(){

        return "index";
    }
}


  • 重启服务器
    Bug1:Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.)
    将路径 ‘/index’ 改成 ‘/home’ ,重启
    如何在单体应用中引入Vue+ElementUI(一)_第15张图片
    以上
    我们创建了一个SpringBoot的web项目,
    并引入了freemarker作为前端页面模版,
    简单展示了一下引入Vue之后的页面响应
    下节
    将引入ElementUI这个前台页面的框架

你可能感兴趣的:(java)