layui项目基础练习

2023-11-24 13:57:45

springboot+layui项目实战记录-在bilibili博主青青菜鸟视频下学习（特此注释）

1.功能点

登录
验证码
退出登录
员工信息crud

2.技术点

ssm
html+css+js+jquery
springboot
layui
layuimini

3.数据库表

用户表
员工表
部门表

4.创建springboot项目

pom
yml
启动类

第一步：需要在pom.xml中添加依赖，如果依赖报红，可能是因为没有这个依赖包，需要重新把maven clean一下，或者install，然后可以多操作几次，加上重启idea等操作，最终能使得pom.xml文件不报红，这是成功的第一步。可以参考网上面说的，可能是版本不对的问题，需要特别注意。网上搜的依赖应该是会自己下载。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>cn.layui</groupId>
    <artifactId>layui</artifactId>
    <version>1.0-SNAPSHOT</version>
    <!--可以通过继承的方式获得-->
    <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.1.1.RELEASE</version>
    </parent>
    <!--依賴集-->
    <dependencies>
        <!--web项目，添加web依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--连接的数据库是mysql  mysql驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.0.8</version>
        </dependency>

        <!--mybatis 操作数据库-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>

        <!--        前端使用thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
<!--        jquery-->
        <!-- https://mvnrepository.com/artifact/org.webjars/jquery -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1-1</version>
        </dependency>
<!--     开源组件   验证码-->
        <dependency>
            <groupId>com.github.whvcse</groupId>
            <artifactId>easy-captcha</artifactId>
            <version>1.6.2</version>
        </dependency>
<!--      lombok 实体类 利用其注解@Data 不用写get和set方法  -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
<!--        加密用的-->
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-core</artifactId>
            <version>5.1.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-autoconfigure</artifactId>
            <version>2.1.1.RELEASE</version>
        </dependency>



    </dependencies>
</project>

第二步：配置application.yml文件。这里面也有需要注意的点：

>1.driver-class-name，一定要选择DataSource下面的自动生成的com.mysql.jdbc.Driver(这里怎么跟代码不一样，不要方，继续看)

>2.之后运行代码，你会发现，终端会要你用com.mysql.cj.jdbc.Driver这个玩意儿，那就跟着走呗。然后url中就必须要设置serverTimezone=UTC，不然又要报错！！！！！！

>3.键值对： K:(空格) v,冒号后面一定要有空格。
通过空格的缩进来控制层级关系，同一列的数据是同一层级的。

正确的格式和错误的格式对比：右边错误的颜色不对。需要特别注意。踩坑

修改完上面的以后代码运行还是报错，然后又去百度，发现有可能是localhost:的问题

改成具体的ip地址之后，可能与我电脑不是有线有关？个人猜测，不足为据。

需要注意：属性和值是大小写敏感的

>4.值的写法
字面量：普通的值（数字，字符串，布尔值）
字符串默认是不需要单引号和双引号。
下面给出单引号和双引号的区别:
单引号：会转义特殊字符。
双引号：不会转义字符里的特殊字符，特殊字符仍然是本身的意思

#   端口、数据源、thymeleaf、mybatis、表单转换


server:
  port: 8080

spring:
  datasource:
  url:  jdbc:mysql://192.168.43.77:3306/layui?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
  username: root
  password: root
  driver-class-name: com.mysql.jdbc.Driver

thymeleaf:
  cache: false


mvc:
  hiddenmethod:
    filter:
      enabled: true


mybatis:
  mapper-locations: classpath:mybtais/mapper/*.xml
  type-aliases-package: cn.qqcn.*.entity
  configuration:
    map-underscore-to-camel-case: true #驼峰转换

第三步：写一个控制器类和启动类，运行项目看能否成功。

package cn.qqcn.common.controller;

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

/**
 * @Author xubo
 * @Date 2021/8/23 22:34
 * @Version 1.0
 */
@Controller
public class CommonController {

    @GetMapping("/hello")
    @ResponseBody
    public String hello(){
        return "hello springboot";
    }
}

启动类：敲代码的时候一定要仔细，拿浪费生命换来的教训，找了好几个小时发现是自己代码写的字有问题。

package cn;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;


/**
 * @Author xubo
 * @Date 2021/8/23 22:36
 * @Version 1.0
 */
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class) //这里是之前报错，可能是yml数据库没有配置好，然后排查的，增加的括号里面的内容
public class XAdminApplication {
    public static void main(String[] args) {
        SpringApplication.run(XAdminApplication.class);
    }


}

最后项目算是成功运行了

页面显示：

今晚可以安心睡觉了！！！！

码农公寓

相关文章