Blog of DengFeng
0%

LOL-show项目工程日志

发表于 更新于 分类于 Valine：
本文字数： 11k 阅读时长 ≈ 10 分钟

初衷

在我学习完了ssm框架，以及跟着B站视频练习了一个尚筹网的项目之后，准备在暑假巩固所学的框架搭建过程，以及业务逻辑、数据库建表、前端页面的知识，本人喜欢打游戏，所以便有了LOL-show这个项目。

如果你想要学习该项目，那么你可以访问我的github！

工程结构

端口号规定：

eureka:1000

zuul:80

mysql:2000

redis:3000

hero:4000

member:5000

market:6000

order:7000

pay:8000

数据库建表语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
create table lol_area(
id int(11) auto_increment,
area_name varchar(100) not null,
primary key(id)
);

insert into lol_area(area_name)
 values
 ("比尔吉沃特"),
 ("德玛西亚"),
 ("弗雷尔卓德"),
 ("无畏先锋"),
 ("恕瑞玛"),
 ("扭曲丛林"),
 ("巨龙之巢"),
 ("艾欧尼亚"),
 ("祖安"),
 ("诺克萨斯"),
 ("班德尔城"),
 ("皮尔特沃夫"),
 ("皮尔特沃夫"),
 ("战争学院"),
 ("巨神峰"),
 ("雷瑟守备"),
 ("钢铁烈阳"),
 ("裁决之地"),
 ("黑色玫瑰"),
 ("暗影岛"),
 ("均衡教派"),
 ("水晶之痕"),
 ("影流"),
 ("守望之海"),
 ("征服之海"),
 ("卡拉曼达"),
 ("皮城警备");
 
 create table lol_member(
 id int(11) auto_increment,
 user_name varchar(100),
 role_name varchar(100),
 age int(11),
 password varchar(255),
 phone_num varchar(100),
 area_id int(100),
 primary key(id)
 );
 
 -- 用户计划表
create table lol_plan(
id int(11) auto_increment,
plan_date varchar(100),
plan_event varchar(300),
last_time Integer(11),
member_id Integer(11),
primary key(id)
)

-- 英雄表
create table lol_hero(
id int(11) auto_increment,
full_name varchar(100),
nick_name varchar(100),
back_story text,
price double(5,3),
-- 英雄类型
hero_type_id varchar(100),
-- 英雄页面小图
img_small varchar(300),
img_big varchar(300),
img_scot varchar(300),
img_stick varchar(300),
text1 varchar(255),
text2 varchar(255),
primary key(id)
)
-- 英雄类型表
create table lol_hero_type(
id int(11) auto_increment,
type varchar(100),
primary key(id)
);

-- 英雄位置表
create table lol_hero_position(
id int(11) auto_increment,
position varchar(100),
primary key(id)
);

-- 外键关联表（英雄和位置）
create table position_inner_hero(
id int(11) auto_increment,
hero_id int(11),
position_id int(11),
primary key(id)
);

SpringBoot pageHelper插件

添加依赖

1
2
3
4
5
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.2.5</version>
</dependency>

用法：在需要分页的方法中启动分页，需要注意的是，分页的是在开启分页之后的第一个查询语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Transactional(readOnly = false,propagation = Propagation.REQUIRES_NEW,rollbackFor = Exception.class)
    @Override
    public PageInfo getPagePlanVOList(Integer pageNum, Integer pageSize, Integer id) {
        // 开启分页
        PageHelper.startPage(pageNum,pageSize);
        PlanPOExample example = new PlanPOExample();
        PlanPOExample.Criteria criteria = example.createCriteria();
        criteria.andMemberIdEqualTo(id);
        // 执行查询
        List<PlanPO> planPOList = planPOMapper.selectByExample(example);
        // 判断结果
        if(planPOList.size() == 0){
            throw new UnKnowNetWorkException("没有查询到任何数据，快去添加计划吧！");
        }
        // 结果正确就返回
        List<PlanVO> list = new ArrayList<>();
        for(PlanPO planPO : planPOList){
            PlanVO planVO = new PlanVO();
            BeanUtils.copyProperties(planPO,planVO);
            list.add(planVO);
        }
        // 封装PageInfo对象
        return new PageInfo(list);
    }

查询出来的list结果封装到PageInfo实例对象中

注意的是，在后台远程方法调用的时候，PageInfo的泛型并不是PageInfo<List>

而是对应的JavaBean类型例如：

1
PageInfo<PlanVO> getPagePlanVOList(Integer pageNum,Integer pageSize,Integer id);

否则会报一个

pagehelper 返回前台的json转换异常com.fasterxml.jackson.databind.exc.Mismatch的异常

使用了layui的日期插件

点击输入框可以弹出日期选择框，如下图所示效果

加入layui的css样式和js

1
2
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script type="text/javascript" src="layui/layui.js"></script>
1
2
3
4
5
6
7
8
9
10
// 添加日期插件
layui.use('laydate',function () {
    // 生成一个日期实例，这个实例变量名自己指定
    var laydate = layui.laydate;
    //执行一个laydate实例
    laydate.render({
        // 指定在哪里生成日期控件
        elem: '#dateText', //指定元素
    });
});

使用了谷歌Kaptcha 生成验证码插件

加入依赖

1
2
3
4
5
6
<!-- Google Kaptcha -->
        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>

相关的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@Component
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha getDefaultKaptcha() {
        com.google.code.kaptcha.impl.DefaultKaptcha defaultKaptcha = new com.google.code.kaptcha.impl.DefaultKaptcha();
        Properties properties = new Properties();
        // 图片边框
        properties.setProperty("kaptcha.border", "yes");
        // 边框颜色
        properties.setProperty("kaptcha.border.color", "105,179,90");
        // 字体颜色
        properties.setProperty("kaptcha.textproducer.font.color", "red");
        // 图片宽
        properties.setProperty("kaptcha.image.width", "110");
        // 图片高
        properties.setProperty("kaptcha.image.height", "40");
        // 字体大小
        properties.setProperty("kaptcha.textproducer.font.size", "30");
        // session key
        properties.setProperty("kaptcha.session.key", "code");
        // 验证码长度
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        // 字体
        properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");

        properties.setProperty("kaptcha.noise.color", "35,37,38");

        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }

controller代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@RestController
@RequestMapping("/api/kaptcha")
public class TestCode {
    @Autowired
    DefaultKaptcha defaultKaptcha;

    @GetMapping("/defaultKaptcha")
    public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)
            throws Exception {
        byte[] captchaChallengeAsJpeg = null;
        ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream();
        try {
            // 生产验证码字符串并保存到session中
            String createText = defaultKaptcha.createText();
            System.out.println(createText);
            httpServletRequest.getSession().setAttribute("verificationCode", createText);
            // 使用生成的验证码字符串返回一个BufferedImage对象并转为byte写入到byte数组中
            BufferedImage challenge = defaultKaptcha.createImage(createText);
            ImageIO.write(challenge, "jpg", jpegOutputStream);
        } catch (IllegalArgumentException e) {
            httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }

        // 定义response输出类型为image/jpeg类型，使用response输出流输出图片的byte数组
        captchaChallengeAsJpeg = jpegOutputStream.toByteArray();
        httpServletResponse.setHeader("Cache-Control", "no-store");
        httpServletResponse.setHeader("Pragma", "no-cache");
        httpServletResponse.setDateHeader("Expires", 0);
        httpServletResponse.setContentType("image/jpeg");
        ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();
        responseOutputStream.write(captchaChallengeAsJpeg);
        responseOutputStream.flush();
        responseOutputStream.close();
    }

}

前台显示

1
<img id="verificationCodeImg" src="/api/kaptcha/defaultKaptcha" style="cursor: pointer;" title="看不清？换一张" />

添加点击“看不清？换一张”的事件

1
2
3
4
// 刷新验证码
            $("#verificationCodeImg").bind("click", function () {
                $(this).hide().attr('src', 'http://localhost/api/kaptcha/defaultKaptcha?').fadeIn();
            });

效果图

改变文本输入框获取值

1
2
3
4
// 为输入英雄名称的文本框绑定文本改变的事件
            $(".inputSearch").on("input",function () {
                let heroName = $(this).val()
            })

mybatis模糊查询的三种方式

1
2
3
4
5
6
7
8
9
10
11
12
select id,name,age,score from star where name like "%" #{name} "%"

<!--concat拼接字符串  mysql独有的函数-->
select id,name,age,score from star where name like concat("%",#{name},"%")

<!-- 如果传入的参数是简单数据类型，${}里面必须写value -->
select id,name,age,score from star where name like "%${value}%"

作者：叫我不矜持
链接：https://www.jianshu.com/p/6d244e194859
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

thymeleaf循环的状态变量

1
2
3
4
5
6
7
8
9
10
th:each属性用于迭代循环，语法：th:each="obj,iterStat:${objList}"
迭代对象可以是Java.util.List,java.util.Map,数组等;
iterStat称作状态变量，属性有：
    index:当前迭代对象的index（从0开始计算）
    count: 当前迭代对象的index(从1开始计算)
    size:被迭代对象的大小
    current:当前迭代变量
    even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
    first:布尔值，当前循环是否是第一个
    last:布尔值，当前循环是否是最后一个

mysql 根据拼音首字母查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
SELECT id,full_name ,

ELT(INTERVAL(CONV(HEX(LEFT(CONVERT(full_name USING gbk),1)),16,10),

0xB0A1,0xB0C5,0xB2C1,0xB4EE,0xB6EA,0xB7A2,0xB8C1,0xB9FE,0xBBF7,

0xBFA6,0xC0AC,0xC2E8,0xC4C3,0xC5B6,0xC5BE,0xC6DA,0xC8BB,0xC8F6,

0xCBFA,0xCDDA,0xCEF4,0xD1B9,0xD4D1),

'A','B','C','D','E','F','G','H','J','K','L','M','N','O','P',

'Q','R','S','T','W','X','Y','Z') AS PY

FROM lol_hero WHERE ELT(INTERVAL(CONV(HEX(LEFT(CONVERT(full_name USING gbk),1)),16,10),

0xB0A1,0xB0C5,0xB2C1,0xB4EE,0xB6EA,0xB7A2,0xB8C1,0xB9FE,0xBBF7,

0xBFA6,0xC0AC,0xC2E8,0xC4C3,0xC5B6,0xC5BE,0xC6DA,0xC8BB,0xC8F6,

0xCBFA,0xCDDA,0xCEF4,0xD1B9,0xD4D1),

'A','B','C','D','E','F','G','H','J','K','L','M','N','O','P',

'Q','R','S','T','W','X','Y','Z') = 'A'

部署项目

打包

包含第三方jar包的工程的build

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<build>
        <resources>
            <resource>
                第三方jar包目录
                <directory>src/main/resources/lib</directory>
                <targetPath>BOOT-INF/lib/</targetPath>
                <includes>
                    <include>**/*.jar</include>
                </includes>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <targetPath>BOOT-INF/classes/</targetPath>
            </resource>
        </resources>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.1.RELEASE</version>
            </plugin>

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>${maven-compiler-plugin.version}</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <skip>true</skip>
                    <encoding>UTF-8</encoding>
                    <compilerArguments>
                        <extdirs>${project.basedir}/src/main/resources/lib</extdirs>
                    </compilerArguments>
                </configuration>
            </plugin>
        </plugins>
    </build>

其余的，如果依赖springboot父工程，加上

1
2
3
4
5
6
7
8
9
10
<build>
       <plugins>
           <plugin>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-maven-plugin</artifactId>
               <version>2.3.1.RELEASE</version>
           </plugin>
       </plugins>
   </build>

如果不依赖任何工程，直接打包

1
mvn clean install -Dmaven.test.skip=true // 忽略test

准备服务器环境

安装jdk

在/etc/profile文件的最后配置java环境

1
2
3
JAVA_HOME=/opt/sorftware/jdk1.8.0_251
PATH=$PATH:$JAVA_HOME/bin
export JAVA_HOME PATH

安装mysql

参考

缺少 libaio

1
yum install libaio

修改密码需要设置密码的级别：注意！

授权远程连接

1
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'rootroot' WITH GRANT OPTION;

微服务远程调用报错找不到主机，因为我的redisServer以及mysqlServer在另一个服务器上，所以consumer想要调用这两个server的服务，必须找到我的另一个服务器，但是我发现服务器的名字没有使用ip地址，所以依照参考的调试最后成功了！

运行jar包

1
nohup java -jar xxx.jar >/dev/null 2>&1 &

报错：UnknownHostException

参考