目标

本系列文章计划完成：

从零开始，创建一个个人门户
不断添加新的工具

创建Springboot项目

下载Java集成开发环境：IDEA，我这里是2019.3版本
（**使用xxx.edu可以下载学生版，免费）
创建Springboot项目

添加一个依赖：
找一个模板从这里下载一个静态网站模板： www.cssmoban.com/cssthemes/7… 拷贝到static目录下：
启动Springboot web项目
浏览器打开，看效果

使用模板改成动态（后台提供）标题

添加thymeleaf模板依赖

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

添加devtools，开启热加载

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>

springboot 配置了devtools的版本，不需要指定版本 pom配置热加载

# 该配置的名称是固定的，不可以改变，否则将不能自动加载到数据源中
spring:
  devtools:
    livereload:
      enabled: true

最后设置Idea修改后自动编译，或者修改后使用Ctrl+Shift+F9手动编译，不编译改动不会生效

写一个controller验证一下

建立模板把index.html从静态目录（C:\Users\andy\Desktop\portal\src\main\resources\static）移到模板目录（C:\Users\andy\Desktop\portal\src\main\resources\templates）把标题和Logo部分改为使用变量${title}，加上thymeleaf的html 标签
添加controller 类

package com.vandrew.portal.app.controller;

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

@Controller
@RequestMapping("/")
public class AppController {

    @RequestMapping("/")
    public String index(Model model) {
        model.addAttribute("title", "Andy's First Portal");
        return "index";
    }
}

注意我们注入了一个title变量

Debug运行
效果

首页添加内容管理功能

我们的首个目标是把下面的红色圈出的内容用我们自己的内容代替，作为门户入口:

建立数据库

启动数据库

docker run -d -p 3306:3306 -e MYSQL\_ROOT\_PASSWORD=123456 --name mysql56 mysql:5.6

打开IDEA，可以直接连接数据库
打开一个mysql 控制台
输入 create database portal;
运行
创建数据表

DROP TABLE IF EXISTS `app`;
CREATE TABLE `app`
(
    id     BIGINT(20) COMMENT '主键ID' NOT NULL AUTO_INCREMENT,
    `name` varchar(1024)             NOT NULL,
    `addr` varchar(1024)             NOT NULL,
    `pic`  varchar(1024)             NOT NULL,
    PRIMARY KEY (`id`)
)

使用Mybatis-plus

打开 https://mvnrepository.com/，找到mybatis-plus
加入pom.xml,IDEA开始自动下载依赖

        <!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1</version>
        </dependency>

使用Mysql connector

        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.19</version>
        </dependency>

加上druid数据库连接池，配置数据库连接

        <!-- https://mvnrepository.com/artifact/com.alibaba/druid -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.21</version>
        </dependency>

# 该配置的名称是固定的，不可以改变，否则将不能自动加载到数据源中
spring:
  devtools:
    livereload:
      enabled: true
  datasource:
    # 使用druid数据源
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://122.51.178.241:3306/portal?allowMultiQueries=true&useUnicode=true&characterEncoding=UTF-8
    username: root
    password: 123456
    filters: stat
    maxActive: 20
    initialSize: 1
    maxWait: 60000
    minIdle: 1
    timeBetweenEvictionRunsMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: select 1 FROM DUAL
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true
    maxOpenPreparedStatements: 20

添加后台数据操作代码

添加lombok，里面有@data的注释可以让实体类更简洁

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

添加实体类

package com.vandrew.portal.app;

import lombok.Data;

@Data
public class App {
    private Long id;
    private String name;
    private String addr;
    private String pic;
}

添加操作类

package com.vandrew.portal.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.vandrew.portal.app.App;

public interface AppMapper extends BaseMapper<App> {

}

App的操作类采用Mybatis-plus的BaseMapper，自动封装了所有基本操作，后面可以看到。

6. 写测试类验证

引入测试依赖

        <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>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <scope>test</scope>
        </dependency>

编写测试类

package com.vandrew.portal;

import com.vandrew.portal.app.App;
import com.vandrew.portal.mapper.AppMapper;
import org.junit.Assert;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

import java.util.List;

@RunWith(SpringRunner.class)
@SpringBootTest
public class SampleTest {

    @Autowired
    private AppMapper appMapper;

    @Before
    public void clear() {
        System.out.println("clear");
        appMapper.delete(null);
    }

    @Test
    public void testInsert() {
        for (int i = 0; i < 5; i++) {
            insert("/app" + i, "app" + i, "assets/images/bike-320x240.jpg");

        }

        System.out.println(("----- selectAll method test ------"));
        List<App> userList = appMapper.selectList(null);
        Assert.assertEquals(5, userList.size());
        userList.forEach(System.out::println);
    }

    private void insert(String addr, String name, String pic) {
        App app1 = new App(null, name, addr, pic);
        appMapper.insert(app1);
    }

}

运行
查看结果

改写首页模板

后台接口类植入apps变量

import com.vandrew.portal.app.App;
import com.vandrew.portal.mapper.AppMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
@RequestMapping("/")
public class AppController {

    @Autowired
    private AppMapper appMapper;

    @RequestMapping("/")
    public String index(Model model) {
        model.addAttribute("title", "Andy's First Portal");
        final List<App> apps = appMapper.selectList(null);
        model.addAttribute("apps", apps);

        return "index";
    }
}

前端模板改

打开浏览器，看效果

从零开始打造个人门户（1）- 建立环境

目标

创建Springboot项目

使用模板改成动态（后台提供）标题

首页添加内容管理功能