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

134 阅读7分钟

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

项目就建好了。

idea右下角会出现这个:

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

找到这个类,运行之。

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

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

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

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

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

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

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

这里创建一个包,叫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!";

}

}

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

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

即可看到:

成功访问了控制器。

引入EasyUI框架

==========

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

进入官网:点击进入

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

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

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

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

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

项目集成需要的文件

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

Basic Dialog - jQuery EasyUI Demo

Basic Dialog

Click below button to open or close dialog.

The dialog content.

我们重点关注这个:

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

thymeleaf模板引擎

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

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

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

org.springframework.boot

spring-boot-starter-thymeleaf

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

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

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

spring.thymeleaf.prefix=classpath:/templates/

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

templates在这里,新建一个html

用户管理

用户管理

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

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

如何访问静态页面?

修改ViewController,增加一个方法:

@RequestMapping("/userAdmin")

public String Hello(Model model){

model.addAttribute("hello","你好,thymeleaf");

return "userAdmin";

}

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

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

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

html红色波浪线解决

去掉一些验证即可。

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

然后,在html中引入:

用户管理

用户管理

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

这样就算是成功引入了。

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

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

用户管理

效果:

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

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

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

搜索区域实现

======

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

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

我们依葫芦画瓢即可。

用户管理

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

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

是否vip 用单选框

效果:

最后,再来一个查询按钮

查询

加一个背景色

好吧,很平淡的效果,就加个背景色吧。

.searchbox { border: 1px solid #efefef; background: #f5f5f5; }

更改rebuild键位

ctrl+F9按着不习惯,于是改一下,还是ctrl+s比较舒服。

模拟form提交

$('#search').click(function(){

$('#ff').form('submit', {

url:'loadUsers',

//提交前可以额外添加参数

onSubmit: function(param){

//这边只是模拟一下

param.search = true;

}

});

});

onSubmit函数可以方便你临时添加新的参数。

search是按钮的id,添加一下:

查询

点击查询按钮,可以看到参数已经传过去了。

只不过现在接口还没做,所以访问是失败的。

新建用户表

======

数据库是做项目的基石,让我们先从建一张表开始。

虽然手写建表语句是基本功,但是相信我,实际上班 99%的人不会这么蛋疼。都是用可视化工具去建表的,mysql用navicat,oracle用PL/SQL。

打开navicat,首先新建数据库,就叫做vipmgr吧。

然后新建一张用户表:

最后

现在其实从大厂招聘需求可见,在招聘要求上有高并发经验优先,包括很多朋友之前都是做传统行业或者外包项目,一直在小公司,技术搞的比较简单,没有怎么搞过分布式系统,但是现在互联网公司一般都是做分布式系统。

所以说,如果你想进大厂,想脱离传统行业,这些技术知识都是你必备的,下面自己手打了一份Java并发体系思维导图,希望对你有所帮助。

相关阅读docs.qq.com/doc/DSmxTbFJ1cmN1R2dB