从零实现一个mvc Springboot应用

前言

MVC 即 model view controller 三个单词的缩写 也代表着一种设计模型,本文介绍了MVC实现一个springboot的简单应用。采用thymeleaf作为view的模板使用。

细节分析

springboot极大的简化了软件的开发流程,采用SpringBoot可以快速的开发一个可以使用的应用。

第一步 添加依赖

我还是比较推荐使用idea的spring initializr 进行添加依赖,简单易用。
依赖如下
– Spring Web
– Lombok
– thymeleaf
我的pom文件如下图所示:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.tcpgnl</groupId>
    <artifactId>mvcdemo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>mvcdemo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

创建实体模型(Model)

创建实体对象 用来和Controller进行数据交互(为controller提供数据的实体)
本文中使用的是创建的新的User

package com.tcpgnl.mvcdemo.m;

import lombok.Data;

@Data
public class User {
    private  long id;
    private  String name;
    private  int  age;
}


创建控制器

控制器用来实例化实体Bean(也就是Model) 将值传递给View 本文的View采用的是Thymeleaf
控制器的代码如下

package com.tcpgnl.mvcdemo.c;

import com.tcpgnl.mvcdemo.m.User;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

@RestController
public class UserController {

    @GetMapping("/user")
    public ModelAndView hello(){
        User user= new User();
        user.setName("TCPGNL");
        user.setAge(22);
        user.setId(1);
        ModelAndView modelAndView = new ModelAndView("user");
        modelAndView.addObject("user",user);
        return  modelAndView;
    }
}

创建View

本文的view采用的是thymeleaf进行创建代码如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>无标题</title>
</head>
<body>
<div>
    <div th:text="{user.name}"></div>
    <div th:text="{user.age}"></div>
    <div th:text="${user.id}"></div>
</div>
</body>
</html>

结果展示


我们可以清楚的看到数据渲染出来正是我们在controller里面写的数据。
简单的MVCdemo设计完成,
采用model -view- controller 三者分离的设计,可以提高开发效率,让应用的设计变得简单。

评论

  1. 4年前
    2020-7-21 17:48:21

    写的不错

  2. 金石热点网
    4年前
    2020-9-23 12:11:35

    文章写的不错,加油~

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇
%d 博主赞过: