layui项目基础练习

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);
    }


}

最后项目算是成功运行了

页面显示：

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

这次写的代码是从上到下也就是从数据库到页面

在src\main\resources路径下新建一个xml文件：UserMapper.xml，这个是用来写增删改查的sql语句的，新建以后需要到mybatis官网去复制一下

然后复制到xml文件后，需要修改一下namespace的路径，改成自己Mapper的路径，文件里先写一个sql语句，查询一下用户表信息。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.qqcn.common.Mapper.UserMapper">

    <select id="getUser" parameterType="User" resultType="user">
        select * from user where username=#{username} and password=#{password}
    </select>

</mapper>

新建一个Mapper文件夹，里面新建一个UserMapper

package cn.qqcn.common.Mapper;

import cn.qqcn.common.Entity.User;

/**
 * @Author xubo
 * @Date 2021/8/30 22:26
 * @Version 1.0
 */
public interface UserMapper {
    /*
     查询用户表列表信息
     */
    public User getUser(User user);

}

新建一个Entity,新建User实体类

package cn.qqcn.user.Entity;

import lombok.Data;

/**
 * @Author xubo
 * @Date 2021/8/30 21:43
 * @Version 1.0
 */
@Data
public class User {

    private String id;
    private String username;
    private String password;
    private String chName;
}

新建一个Service文件夹，新建UserService接口

package cn.qqcn.common.Service;

import cn.qqcn.common.Entity.User;

/**
 * @Author xubo
 * @Date 2021/8/30 22:29
 * @Version 1.0
 */
public interface UserService {
    /**
     * 登录功能
     * @param user
     * @return
     */
    public User Login(User user);
}

新建UserServiceImpl

package cn.qqcn.user.Service.Impl;

import cn.qqcn.user.Entity.User;
import cn.qqcn.user.Mapper.UserMapper;
import cn.qqcn.user.Service.UserService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;

/**
 * @Author xubo
 * @Date 2021/8/30 22:29
 * @Version 1.0
 */
@Service
public class UserServiceImpl implements UserService {

    @Resource
    private UserMapper userMapper;

    @Override
    public User Login(User user) {
        return userMapper.getUser(user);
    }
}

新建UserController类

需要结合下方的Result类结合使用,开发时候要考虑的全面一下.

package cn.qqcn.user.Controller;

import cn.qqcn.common.Vo.Result;
import cn.qqcn.user.Entity.User;
import cn.qqcn.user.Service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpSession;
import java.net.HttpCookie;

/**
 * @Author xubo
 * @Date 2021/8/31 21:19
 * @Version 1.0
 */
@RestController//该注解的作用：是如果确认你这个类里面所有的方法都返回的是json的话，可以使用该注解
@RequestMapping("/user")   //访问路径
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping("/login")//因为是post请求，所以使用此注解
    public Result login(User param, HttpSession session){//因为需要将数据写入到session里面,所以这个需要添加一个session参数
       User user = userService.Login(param);
       if (user !=null){
           //登录成功
           user.setPassword(null);
           session.setAttribute("userInfo",user);
        return Result.success();//代表登录成功,方法是静态方法,可以直接使用类来调用
       }
       return Result.fail();//这个方法里面message是直接写明了登录失败.

        //return Result.fail("登录失败");//也可以使用这个方式,因为在Result类中重载了方法.
    }
}

写到Result类时，明明添加了lombok中的@Data注解，但是发现类报错，应该是没有起到作用，百度后发现lombok还需要在idea中配置一下才行，然后打开idea设置按照以下路径配置一下即可，我这个是点击右侧install直接自己下载的，重启idea后发现类不报错了。

这是新建的Vo.Result类,因为考虑到类中静态方法,还有想把类私有化,不能随便new 一个类.所以使用注解的方式去代替手写构造方法(无法达到private,是public),所以可以当做一个知识点去记住,这里等下会修改,手动去添加私有化的构造方法.

package cn.qqcn.common.Vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @Author xubo
 * @Date 2021/8/31 21:28
 * @Version 1.0
 */
@Data
@AllArgsConstructor //全参构造，如果类中存在有参数的构造方法，name一定要要无参构造方法
@NoArgsConstructor  //所以需要加上无参构造方法
public class Result<T> {

    private Integer code;//返回码，0代表成功，1代表失败
    private String message; //返回描述信息，是登录成功还是登录失败
    private T data; //返回的数据
    //一般这个类都需要以上三个属性，但是我们现在使用的是layui，需要用到分页查询
    //所以还需要加一个属性
    private Long count;//分页查询的总记录数,这个是layui组件要求的
    public static Result<Object> success(){
        return new Result(0,"登录成功",null,null);
    }

}

最终Result类

package cn.qqcn.common.Vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @Author xubo
 * @Date 2021/8/31 21:28
 * @Version 1.0
 */
@Data
//@AllArgsConstructor //全参构造，如果类中存在有参数的构造方法，name一定要要无参构造方法
//@NoArgsConstructor  //所以需要加上无参构造方法
public class Result<T> {

    private Integer code;//返回码，0代表成功，1代表失败
    private String message; //返回描述信息，是登录成功还是登录失败
    private T data; //返回的数据
    //一般这个类都需要以上三个属性，但是我们现在使用的是layui，需要用到分页查询
    //所以还需要加一个属性
    private Long count;//分页查询的总记录数,这个是layui组件要求的
    public static Result<Object> success(){
        return new Result(0,"登录成功",null,null);
    }
    public static Result<Object> fail(){
        return new Result(0,"登录失败",null,null);
    }
    public static Result<Object> fail(String message){
        return new Result(0,message,null,null);
    }


    public Result() {
    }

    public Result(String message) {
        this.message = message;
    }

    public Result(Integer code, String message, T data, Long count) {
        this.code = code;
        this.message = message;
        this.data = data;
        this.count = count;
    }
}

现在我们去测试一下,使用了一个Postman软件,可以直接进行测试,不用先写页面,我们先使用该软件发送一个请求看能否成功.

不出所料,果然报错了.后台报错也是一样

应该是yml中写的mybatis路径实际不一样,所以需要修改一下.

package cn.qqcn.common.Vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @Author xubo
 * @Date 2021/8/31 21:28
 * @Version 1.0
 */
@Data
//@AllArgsConstructor //全参构造，如果类中存在有参数的构造方法，name一定要要无参构造方法
//@NoArgsConstructor  //所以需要加上无参构造方法
public class Result<T> {

    private Integer code;//返回码，0代表成功，1代表失败
private String message; //返回描述信息，是登录成功还是登录失败
private T data; //返回的数据
//一般这个类都需要以上三个属性，但是我们现在使用的是layui，需要用到分页查询
//所以还需要加一个属性
private Long count;//分页查询的总记录数,这个是layui组件要求的
public static Result<Object> success(){
        return new Result(0,"登录成功",null,null);
}
    public static Result<Object> fail(){
        return new Result(0,"登录失败",null,null);
}
    public static Result<Object> fail(String message){
        return new Result(0,message,null,null);
}


    public Result() {
    }

    public Result(String message) {
        this.message = message;
}

    public Result(Integer code, String message, T data, Long count) {
        this.code = code;
        this.message = message;
        this.data = data;
        this.count = count;
}


}

posted @ 2021-08-29 22:25 哩个啷个波阅读(289) 评论(0) 收藏举报

刷新页面返回顶部

哩个啷个波

layui项目基础练习

公告