IDEA版SpringBoot全教程 07 会员管理系统(上)1

简介: IDEA版SpringBoot全教程 07 会员管理系统(上)

哪怕你都不知道SpringBoot是什么,都不影响你直接创建SpringBoot项目,没想到吧,哈哈哈。


使用Spring官方网址创建项目

1.打开IDEA,点击 +Create New Project. 开始创建一个新项目。


2.在左侧菜单找到并点击 Spring Initializr,点击next。注意,这里idea默认使用https://start.spring.io提供的在线模板,所以需要保证网络畅通。

32.png

3.按实际情况依次填写项目信息。其中Type属性可以下拉选择project或者pom,Packaging属性可下拉选择jar或者war,我们不用tomcat来部署,而是直接用jar包启动,这样跟之前的学习就可以无缝对接啦!

33.png

下一步......

4.最激动人心的界面来了!!!你可以从左面选择大类,然后在窗口中间勾选需要的依赖。右边可以看到已选择的依赖项。

34.png

就选这两样吧,其他的到时候再说,下一步,直接点击完成。

35.png


项目就建好了。

idea右下角会出现这个:

36.png

不用担心,这是maven在自动下载jar包。maven就是一个本地仓库,帮你管理所有的jar包和项目之间的依赖关系的。如果本地仓库没有,就去中央仓库帮你下载,太方便了,这也是现在为什么maven这么流行的原因。

37.png

找到这个类,运行之。

38.png


启动完毕,很漂亮的日志打印。


他说:Tomcat started on port(s): 8080 (http) with context path ''


意思就是项目已经启动好了,正在监听8080端口。


这些概念和术语,你现在都不需要去深究,你只要知道,现在项目跑起来了,然后你打开浏览器就可以访问。


网址是:http://localhost:8080/


39.png

能看到这个,就说明没问题了。404是因为现在这个项目是一个空壳子,什么服务都没有,当然是空啦。

我一直以来都是习惯于用eclipse,还真的不习惯用idea的键位,所以改一下。

40.png


41.png


这里创建一个包,叫controller,代表控制器的意思。然后在里面新建一个ViewController,代表视图控制器。

代码如下:

package com.java18.vipmgr.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class ViewController {
    @RequestMapping("hello")
    @ResponseBody
    public String Hello(){
        return "Hello SpringBoot!";
    }
}

重新启动项目,即运行这个类:

42.png

浏览器访问:http://localhost:8080/hello

即可看到:


成功访问了控制器。


引入EasyUI框架


虽然EasyUI是一个老框架,但是这么多年来还是在一直更新的。目前最新版本的EasyUI已经没有那么丑了,而且也推出了各种JS框架的适配。

进入官网:点击进入

44.png

因为是学习,我们使用免费版就可以了。

我找到的下载地址是: jQuery EasyUI下载 - EasyUI中文站

下载下来后就是一个压缩包,注意,如果你要解压缩,一定要选择解压到默认的文件夹!

不要解压到当前位置,因为压缩包里面没有一个总的父文件夹。

45.png

demo和demo-mobile是一个例子,不需要拷贝到项目里面去。

项目集成需要的文件

随便打开一个demo,代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Basic Dialog - jQuery EasyUI Demo</title>
  <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  <link rel="stylesheet" type="text/css" href="../demo.css">
  <script type="text/javascript" src="../../jquery.min.js"></script>
  <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
  <h2>Basic Dialog</h2>
  <p>Click below button to open or close dialog.</p>
  <div style="margin:20px 0;">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
  </div>
  <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
    The dialog content.
  </div>
</body>
</html>

我们重点关注这个:

<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

这些文件就是加载页面所需要的,其中主要是一个themes,还有两个核心js,demo.css就不用了。


 thymeleaf模板引擎


我们当然可以直接访问html文件,但是SpringBoot推荐我们使用一个模板引擎叫做 thymeleaf 。


在一些老的项目里面,用jsp比较多,但是这个教程里面,我们还是随大流一下,用thymeleaf。


46.png

打开pom.xml,在dependencies里面添加一个节点:

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

47.png

然后你会发现这里是红的,那是因为这个新的maven依赖需要手动导入。

48.png


按照上面的步骤重新导入一下就好了。

49.png

然后打开这个文件,输入:

spring.thymeleaf.prefix=classpath:/templates/

这个表示设置一下模板文件的地址,classpath就是类路径。

50.png

templates在这里,新建一个html

51.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
</head>
<body>
    <h2>用户管理</h2>
    <p th:text="${hello}"></p>
</body>
</html>

这个时候你会发现th:是红色的,只需要你修改html标签的属性就好了。

<html xmlns:th="http://www.thymeleaf.org">

这其实是一个命名空间的问题。

如何访问静态页面?

修改ViewController,增加一个方法:

@RequestMapping("/userAdmin")
public String Hello(Model model){
    model.addAttribute("hello","你好,thymeleaf");
    return "userAdmin";
}

Model就是页面的模板对象,我们可以主动添加一个hello属性进去,这个玩意你就看成HashMap,会用就行了。

最后,返回userAdmin,就会对应到userAdmin.html。

启动项目访问:http://localhost:8080/userAdmin

52.png

html红色波浪线解决

去掉一些验证即可。

53.png

54.png

如图,把上面说的这些文件copy到static文件夹,这是静态资源存放的目录。

然后,在html中引入:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
    <h2>用户管理</h2>
    <p th:text="${hello}"></p>
</body>
</html>

访问页面,打开F12,查看是否引入正确。

55.png


这样就算是成功引入了。

访问easyUI的官方文档:Jquery EasyUI 中文文档

比如,我们要使用一个文本框,就这样写:

<body>
    <h2>用户管理</h2>
    <!--<p th:text="${hello}"></p>-->
    <div class="searchbox">
        <input label="请输入用户名:" labelWidth="130" class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">
    </div>
</body>

效果:

56.png

不得不说,idea是真的有点坑(也许是我用的idea版本太老,2017版),它不会自动编译。而且,我是在按照网上教程设置了自动编译,pom.xml也加上了热部署的前提下,还是不能自动编译,很无语。


不过好在,我还是找到了办法,右键项目,选择rebuild重新编译,或者直接ctrl+F9,改动的页面就可以重新加载了。否则需要一直去重启项目,很麻烦。


等以后有机会,试试最新版的idea有没有解决这个问题。


搜索区域实现

我们要做一个简单的搜索区域,用户可以根据用户名,昵称,是否VIP来进行搜索。

搜索区域是一个Form表单,熟悉HTML的肯定不会陌生。EasyUI给我们提供了Form表单的一般实现:点击查看

我们依葫芦画瓢即可。


<body>
    <h2>用户管理</h2>
    <!--<p th:text="${hello}"></p>-->
    <div class="searchbox">
        <form id="ff" method="post">
            <table cellpadding="20">
                <tr>
                    <td>
                        <div>
                            <label>请输入用户名:</label>
                            <input class="easyui-textbox" type="text" name="userName" />
                        </div>
                    </td>
                    <td>
                        <div>
                            <label>请输入昵称:</label>
                            <input class="easyui-textbox" type="text" name="nickName" />
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>

为了对齐,我做了一个表格。

注意,每次修改完之后,都要ctrl+f9一下。

57.png

是否vip 用单选框

<td>
    <div>
        <input labelAlign="center" labelWidth="95" width="180" class="easyui-radiobutton"  name="isVip" value="1" label="VIP会员" checked>
        <input labelAlign="center" labelWidth="95" width="180" class="easyui-radiobutton"  name="isVip" value="0" label="普通会员">
    </div>
</td>

效果:

58.png

最后,再来一个查询按钮

<tr>
    <td colspan="3" align="right">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
    </td>
</tr>

59.png


相关文章
|
2天前
|
JavaScript Java 关系型数据库
学习平台|基于Springboot+vue的学习平台系统的设计与实现(源码+数据库+文档)
学习平台|基于Springboot+vue的学习平台系统的设计与实现(源码+数据库+文档)
19 0
|
16小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的学生宿舍信息的系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的学生宿舍信息的系统的设计与实现(源码+lw+部署文档+讲解等)
|
16小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的汽车票网上预订系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的汽车票网上预订系统的设计与实现(源码+lw+部署文档+讲解等)
|
17小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的视频网站系统的的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的视频网站系统的的设计与实现(源码+lw+部署文档+讲解等)
|
17小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的人事系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的人事系统的设计与实现(源码+lw+部署文档+讲解等)
|
17小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的卫生健康系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的卫生健康系统的设计与实现(源码+lw+部署文档+讲解等)
|
18小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的在线教育系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的在线教育系统的设计与实现(源码+lw+部署文档+讲解等)
|
19小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的大学生就业招聘系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的大学生就业招聘系统的设计与实现(源码+lw+部署文档+讲解等)
|
20小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的足球青训俱乐部管理后台系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的足球青训俱乐部管理后台系统的设计与实现(源码+lw+部署文档+讲解等)
|
20小时前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的网上购物商城系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的网上购物商城系统的设计与实现(源码+lw+部署文档+讲解等)

热门文章

最新文章