学习基于springboot的web开发

1、使用springboot进行web开发，需了解

① 前段知识：Html，CSS，JavaScript

② 后端框架：springboot，SpringMVC，thymeleaf

③ 持久层及数据交互：MyBatis，RDB

④ 资源负载：H5，Ng

⑤ 开发工具：IDEA，MAVEN

2、这几天明白了大致的页面开发流程，现在进行开发测试：

① 使用IDEA床架springbnoot的web工程，选择了若干个插件支撑，lombok（自动化set和get），springweb框架，mybatis和h2为了参照视频；

spring其他组件：https://spring.io/guides

初次的pom.xml的自动化配置项为：

<?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.2.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demoyzg</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demoyzg</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-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.1</version>
        </dependency>

        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </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>

2、添加thymeleaf的依赖：

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

3、简单网页：

目前学习到的注解：

@SpringBootApplication springboot程序入口
@RestController：控制器，只反馈return后的字符串
@RequestMapping("/first")：请求映射器，返回页面return后的html；

学习到的关于web框架的组成部分：

① controller：得到参数，返回静态的html页面，

② model

③ html

3、实现根据网页传入的参数，返回带有该参数值得页面结果：

controller类：SecondController

import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class SecondController {
    @GetMapping("/second")
    public String second(@RequestParam(name="name") String name,Model model){
        model.addAttribute("name",name);
        return "second";
    }
}

second静态页面：second.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>

3、使用静态页面显示地图：

controller：

package com.example.demoyzg.controller;

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

@Controller

public class ThirdController {
    @RequestMapping("/third")
    public  String Hello(){
        return "third";
    }
}

third.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>简单地图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        html,body{
            width:100%;
            height:100%;
        }
        *{
            margin:0px;
            padding:0px;
        }
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p{
            width:603px;
            padding-top:3px;
            overflow:hidden;
        }
        .btn{
            width:142px;
        }
        #container{
            min-width:600px;
            min-height:767px;
        }
    </style>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>


        window.onload = function() {
            //初始化地图函数  自定义函数名init
            function init() {
                //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                var map = new qq.maps.Map(document.getElementById("container"), {
                    center: new qq.maps.LatLng(39.916527, 116.397128),      // 地图的中心地理坐标。
                    zoom: 8                                                 // 地图的中心地理坐标。
                });
                //添加监听事件
                qq.maps.event.addListener(map, 'click', function (e) {
                    var wei = e.latLng.getLat().toFixed(5);
                    var jing = e.latLng.getLng().toFixed(5);
                    var data = {
                        location: wei+','+jing,
                        key: "M7VBZ-476RJ-TSIFB-FMZIF-YG4OT-RFFNG", //key为自己向腾讯地图申请的密钥
                        get_poi: 0
                    };
                    var url = "http://apis.map.qq.com/ws/geocoder/v1/?";
                    data.output = "jsonp";
                    $.ajax({
                        type: "get",
                        dataType: 'jsonp',
                        data: data,
                        jsonp: "callback",
                        jsonpCallback: "QQmap",
                        url: url,
                        success: function (res) {
                            var add_info = res;
                            //console.log(add_info);
                            alert('纬度' + wei + '，经度' + jing+'，省份'+add_info.result.address_component.province+'，城市'+add_info.result.address_component.city);
                            //console.log(add_info.address_component.province,);
                        },
                        error: function (err) {
                            alert("服务端错误，请刷新浏览器后重试")
                        }
                    });
                });
            }
            init();//调用地图初始化函数
        }
    </script>
</head>
<body>
<!--   显示地图的区域   -->
<div id="container"></div>
</body>
</html>

4、使用H2数据库替代mysql（装机麻烦）

① 引入H2的maven依赖包；

② 使用IDEA右侧的view--toolbottons--database，输入库名，用户名，密码，驱动地址以创建H2数据库；

③ 使用IDEA的database工具创建表，user表

④ 在application.properties中增加DataSource的配置项（指向H2数据库）

spring.datasource.url=jdbc:h2//localhost/test
spring.datasource.username=yzg
spring.datasource.password=123456
spring.datasource.driver-class-name=org.h2.Driver

⑤ 创建model的包，并新建Firstuser的类，该类的属性与user表的字段一一对应，属性使用lombok增加set和get方法；

package com.example.demoyzg.model;

import lombok.Data;
import lombok.Getter;
import lombok.Setter;

@Data
public class FirstUser {
     private int id;
     private String accound_id;
     private String name;
     private String token;
     private int gmt_create;
     private int gmt_modified;
}

⑥ 创建mapper的包，新建接口类FirstMapper，并实现insert的逻辑，在调用insert方法时，mybatis会自动将Firstuser的属性传递给注解中的insert方法；

package com.example.demoyzg.mapper;


import com.example.demoyzg.model.FirstUser;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface FirstMapper {
    @Insert("insert into user(accound_id,name,token,gmt_create,gmt_modified) " +
            "values(#{accound_id},#{name},#{token},#{gmt_create},#{gmt_modified}")
    void insert(FirstUser firstUser);
}

⑦ 完善controller类的方法，从页面得到请求的传入值，传递给Firstuser对象，并使用mapper类FirstMapper将数据持久化到database；

3、使用bootstrap作为现成的前端工具快速构建静态页面；

① 下载bootstrap压缩包：https://v3.bootcss.com/getting-started/#download，解压后将css，img，js三个文件夹复制到工程的src--main--resource--statis下；

参考：https://www.bilibili.com/video/av65117012?p=6

② 配置修改

③ 参考bootstrap做导航页：https://v3.bootcss.com/components/#navbar，

有腹肌的小蝌蚪_

发布了62 篇原创文章 · 获赞 158 · 访问量 32万+

私信关注

学习基于springboot的web开发

猜你喜欢