springboot实战---2.快速搭建web系统

🎈个人主页:靓仔很忙i
💻B 站主页:👉B站👈
🎉欢迎 👍点赞✍评论⭐收藏
🤗收录专栏:SptringBoot
🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步!


目录

1 安装软件,准备环境

1.1 软件的安装与破解

1.2 配置idea环境

2.建立并测试springboot项目

2.1 springboot自动生成项目(本篇博客的版本为:2.1.4 )

2.2 配置maven,等待jar包下载完成

2.3 测试springboot项目是否可以正常运行

2.3.1 测试项目

2.3.2 测试springmvc接收的请求

3.springboot整合前端

3.1 将前端资源加载进springboot中

3.2 修改springboot默认页面路径

4.后台和前端(thymeleaf)进行交互

4.1 修改login.html

4.2 修改index.html

4.3 修改LoginController

5.建立数据库,springboot集成mybatis-plus,并测试mybatis-plus

5.1 建立数据库

5.2 springboot集成mybaits-plus

5.3 测试mybatis-plus与数据库的连接



1 安装软件,准备环境

1.1 软件的安装与破解

idea的安装与破解:https://www.cnblogs.com/jajian/p/7989032.html
navicat的安装与破解:https://blog.csdn.net/WYpersist/article/details/86530973
mysql服务器安装:自行官网下载并安装

1.2 配置idea环境

jdk配置:不会的百度
maven的下载和配置:使用IntelliJ IDEA 配置Maven(入门)_idea配置maven-CSDN博客
*maven给出的链接,完成  "4.在intelliJ IDEA中配置maven" 即可

2.建立并测试springboot项目

2.1 springboot自动生成项目(本篇博客的版本为:2.1.4 )

File->New->Project->Spring Intializr->Next->填写相关项目信息->选中需要的starters(如下)-Finish

删除选中的无用文件

展开src后的项目结构:

其中DemoApplication是程序的启动入口
application.properties可替换成application.yml文件,两者作用等价,只是语法不同

2.2 配置maven,等待jar包下载完成

配置maven,jdk(若一配置好,此次可以不再配置)。此处不再赘述

等待maven自动下载jar包和插件

* 第一次创建的时候可能会比较慢,可能会是10分钟以上或者更久

2.3 测试springboot项目是否可以正常运行

2.3.1 测试项目

打开pom.xml文件,将之前引入的mybaitis的starters注释掉

打开测试类,书写第一行java代码

以debug方式运行(相对于直接运行,更高效),若过程中没有错误,会出现

2.3.2 测试springmvc接收的请求

创建控制器对应的Login类

书写Controller层的代码

package com.example.demo.controller;

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

@Controller//声明该类是控制器
public class LoginController {
    @ResponseBody //将return的内容作为json串,返回给前端页面
    //Restful风格的请求
    //@PostMapping  当前端以post方式...   @DeleteMapping 当前端以delete方式...
    @RequestMapping("/login")//当前端以get方式发送/login 命令时,会被该函数拦截,执行该函数
    public String login(){
        return "this is login()";
    }
}

将启动的程序调至DemoApplication(主启动类,并运行程序)

当看到倒数第2行是下图时,说明程序已经正确启动

在浏览器窗口输入:localshost:8080

3.springboot整合前端

整合前端前的准备:

页面下载地址

http://47.107.71.52:8083/pages/pages.zip

解压后的目录结构如下,可以直接双击index.html运行,查看效果:

3.1 将前端资源加载进springboot中

在springboot的reources下建立static和templates目录

将html,index.html,login.html(前端页面)移动到templates目录(thymleaf自动解析的目录)下

其余文件放入static文件下,移动完成后的static

此时运行项目,并在浏览器中输入localhost:8080

此时springboot自动加载了index.html页面,并且用户管理的页面找不到,原因是springboot自动映射。此时我们修改下springboot的默认配置即可。

3.2 修改springboot默认页面路径

在主应用程序的同级下,创建config.MyWebMvcConfig类,并实现接口WebMvcConfigurer

代码如下:

package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MyMvcConfig implements WebMvcConfigurer{

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //作用类似于Controller中的@RequstMapping,对于多路径来说,不需要
        //单独写函数了,简化编程
        registry.addViewController("/").setViewName("login");
        registry.addViewController("html/member-list.html").setViewName("html/member-list");
    }
}

再修改一下LoginController下的login方法

@Controller
public class LoginController {

    @RequestMapping("/index.html")
    public String login(){
        return "index";
    }
}

到此前端页面已经完成整合到了springboot中,输入localhost:8080会自动跳到登录界面,点击登录后,会跳到index.html页面,

并且单页面的用户页面也进行了相应的映射。

4.后台和前端(thymeleaf)进行交互

4.1 修改login.html

将login.html的22行到27行,替换成如下代码

(form增加一个action属性,用户名和密码分别各自增加了name属性,button替换成input标签)

<form class="login-form" action="index.html">
 <h2>管理登录</h2>
<input type="text" name="username" placeholder="用户名" value="admin" id="user_name" />
<input type="password" name="password" placeholder="密码" id="password" />
    <input type="submit">登 录</input>
    <!--<button id="login">登 录</button>-->

4.2 修改index.html

index.html

<!--第2行代码替换成下面的代码-->
<html lang="en">    <!--原代码-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">    <!--替换后的代码-->

<!--第45行代码替换成下面的代码-->
<a href="javascript:;">admin</a>    <!--原代码-->
<a href="javascript:;" th:text="${msg}">admin</a>    <!--替换后的代码-->

4.3 修改LoginController

@RequestMapping("/index.html")
    public String login(HttpServletRequest req, Model model){
        //HttpServletRequest用来接收前端表单传递的form表单对象,
        //Model用来存储返回给前端页面的数据
        model.addAttribute("msg",req.getParameter("username"));
        return "index";
    }

此时即完成了后台向前端发送数据,运行结果:

*前端的form表单的数据,springmvc可自动进行封装,只要确保标签中name与实体类的相同,springmvc即可自动封装。具体在后面进行介绍。

5.建立数据库,springboot集成mybatis-plus,并测试mybatis-plus

5.1 建立数据库

/*
 Navicat Premium Data Transfer

 Source Server         : 阿里云
 Source Server Type    : MySQL

 Date: 07/04/2019 00:26:12
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for userinfo
-- ----------------------------
DROP TABLE IF EXISTS `userinfo`;
CREATE TABLE `userinfo`  (
  `user_id` int(1) NOT NULL,
  `user_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `user_sex` varchar(2) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `user_telephone` varchar(11) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `user_email` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `user_address` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `user_jointime` datetime(0) NULL DEFAULT NULL,
  `user_state` bit(1) NULL DEFAULT NULL,
  PRIMARY KEY (`user_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

-- ----------------------------
-- Records of userinfo
-- ----------------------------
INSERT INTO `userinfo` VALUES (1, '小明', '男', '18756541254', '1141265524@qq.com', '北京市 海淀区', '2017-01-01 11:11:42', b'1');
INSERT INTO `userinfo` VALUES (2, '小红', '女', '14541215412', '1445125487@qq.com', '安徽省 合肥市', '2019-04-17 22:07:06', b'1');

SET FOREIGN_KEY_CHECKS = 1;

5.2 springboot集成mybaits-plus

将之前pom.xml中注释的mybatis替换成

<!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.1.0</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!--generator,模板引擎-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.0.7.1</version>
        </dependency>
        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.28</version>
        </dependency>

将application.properties重命名为application.yml

在application.yml中填入

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://数据库ip:3306/数据库名
    username: root
    password: root

数据根据自己的数据库进行配置

在主配置类的同级下,建立MyGenrator类,用于连接数据库中的表,自动生成三层和实体类

修改MyGenrator中的配置

运行MyGenarator,根据提示,输入要映射的数据库名和表名

操作无误,会生成下述文件夹

此时缺少Controller和Entity层中的基类,建立下述2个类即可(与策略配置中的路径保持一致)

在UserinfoMapper上加上Mapper注解

5.3 测试mybatis-plus与数据库的连接

测试类改为以下代码:

import com.example.demo.springbootDemo.entity.Userinfo;
import com.example.demo.springbootDemo.mapper.UserinfoMapper;
import org.junit.Assert;
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 DemoApplicationTests {

	@Autowired
	private UserinfoMapper userMapper;
	@Test
	public void contextLoads() {
		System.out.println(("----- selectAll method test ------"));
		List<Userinfo> userList = userMapper.selectList(null);
		Assert.assertEquals(2, userList.size());
		userList.forEach(System.out::println);
	}

}

若打印窗口出现

说明mybatis-plus已成功连接数据库,并且可以实现对数据库的增删改查。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
当前课程中博客项目的实战源码是我在 GitHub上开源项目 My-Blog,目前已有 3000 多个 star:本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 个人博客项目功能的讲解,通过本课程的学习,不仅仅让你掌握基本的 Spring Boot 开发能力以及 Spring Boot 项目的大部分开发使用场景,同时帮你提前甄别和处理掉将要遇到的技术难点,认真学完这个课程后,你将会对 Spring Boot 有更加深入而全面的了解,同时你也会得到一个大家都在使用的博客系统源码,你可以根据自己的需求和想法进行改造,也可以直接使用它来作为自己的个人网站,这个课程一定会给你带来巨大的收获。作者寄语本课程录制于 2020 年,代码基于 Spring Boot 2.x 版本。到目前为止,Spring Boot 技术栈也有一些版本升级,比如 Spring Boot 2.7 发版、Spring Boot 3.x 版本发布正式版本。对于这些情况,笔者会在本课程实战项目的开源仓库中创建不同的代码分支,保持实战项目的源码更新,保证读者朋友们不会学习过气的知识点。课程特色 课程内容紧贴 Spring Boot 技术栈,涵盖大部分 Spring Boot 使用场景。开发教程详细完整、文档资源齐全、实验过程循序渐进简单明了。实践项目页面美观且实用,交互效果完美。包含从零搭建项目、以及完整的后台管理系统和博客展示系统两个系统的功能开发流程。技术栈新颖且知识点丰富,学习后可以提升大家对于知识的理解和掌握,对于提升你的市场竞争力有一定的帮助。实战项目预览    
springboot和vue是现代web开发中最常用的后端前端框架之一。前后端分离是一种架构模式,将前端后端的开发分离,通过接口来进行数据传输和交互。 在线教育系统作为一个实战项目,可以基于springboot和vue来开发。首先,我们可以使用springboot来构建后端的RESTful API,处理用户请求、数据持久化等功能。通过使用springboot的优秀特性,可以快速搭建项目的基础框架,并集成常用的开发组件,如Spring MVC、Spring Data JPA等。 而在前端方面,可以使用vue来开发用户界面。vue是一个轻量级的JavaScript框架,可以帮助我们构建交互式的用户界面。通过vue的组件化开发和数据绑定机制,可以提高前端开发效率,并实现良好的用户体验。 在实现前后端分离的时候,可以通过定义RESTful API接口来进行数据的传输和交互。后端使用springboot提供的@RestController注解来处理HTTP请求,并返回JSON格式的数据。前端通过vue的axios库来进行异步请求和交互,获取后端提供的数据并展示在页面上。 在线教育系统常见的功能包括用户登录、课程管理、视频播放等。用户登录可以通过JWT来实现身份认证和授权。课程管理可以包括课程的发布、编辑、删除等功能,通过操作数据库来实现数据的增删改查。视频播放可以通过集成第三方视频播放器,如video.js来实现。 总结来说,使用springboot和vue进行前后端分离的在线教育系统实战项目,可以通过定义RESTful API接口、使用axios进行数据交互和展示、集成第三方插件实现各种功能。通过这种方式,可以提高项目的开发效率、降低耦合性,并实现良好的用户体验。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

靓仔很忙i

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值