一步一步搭建react后台系统6之用户列表

Posted 2023-04-06

参考技术A 获取分页数据

第一次调用接口的时候， 先新增数据， 之后每次从这里面拿出数据。
一般列表接口 都有以下几个变量
这里根据 页码和每页条数拿到请求的数据并返回回去。
total 总条数
page 页码
pageSize 每页条数
data: [] 数据列表

修改用户列表

删除用户数据

新增用户

新增全局变量

这里拿的同样是ant里面的table表格组件里面的内容， 这里选择的是可以手动开关某些功能的那个表格组件。

表格组件，
这个组件使用的是table中可编辑组件

ant可编辑组件中自带的， 经过拆分放在这个文件夹内

ant可编辑组件中自带的， 经过拆分放在这个文件夹内

这个文件在table组建中， 是非常重要的一个文件， 里面放着一些数据， 主要用来操作表格。

记住以下几点

这里就是调用各个组件， 并传递组件的数据。
这里需要重写继承的属性和方法， 以达到自己想要的功能。
通过modelVisible， modelLoading 控制添加组件的请求状态和显示状态

这里是新增数据组件

请注意下马几个react声明周期

像之前把请求直接写在页面中， 是一个不太好的行为，
如果我们把接口地址全部提取出来， 放到一个文件夹内， 这样方便修改与后面的维护

把请求的方法全部放入到这个文件内。
好处

这个表格使用了动画，因此引入文件

这里， 我们的table封装就弄好了， 虽然看起来文件很多， 但是用起来却很方便， 各种功能不用再次写一遍， 只需要重写需要修改的方法便可以达到再次利用。 后期主要修改clomus与data数据， 里面的各种功能都可通过开关控制。 是不是很方便？

我们后台生成数据的时候， 是带有description属性的。 我们这不做多修改， 添加这个数据九号。

继承的时候， 重写数据。

把 index 换成index2 ， 无缝对接。

而添加功能， 需要自己添加多一个Input， 其他可不变。 这里就不进行演示了。

github地址
git版本 验证table组件是可重用

一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面

SpringBoot

springboot的目的是为了简化spring应用的开发搭建以及开发过程。内部使用了特殊的处理，使得开发人员不需要进行额外繁锁的xml文件配置的编写，其内部包含很多模块的配置只需要添加maven依赖即可使用，这项功能可谓对开发人员提供了大大的好处。使用springboot只需要简单配置一下就可以完成之前复杂的配置过程。可以到https://start.spring.io/此网站上，下载一个最简单的springboot应用，然后一步一步实现自已的应用。
可以看出当前的稳定版本为2.1.0，点击Generate Project 按钮，即可下载一个可用的springboot应用。

这个是我下载下来后，双击后出来的。可以看出以工程是一个基于maven的项目。你可以将其解压到任何一个目录下，通过eclipse或其他IDE进行导入后运行，eclipse导入流程为File->import->maven->existing maven projects，查找到自己的项目目录。也可以基于此工程来建立自已的maven项目。
下面以建立自己的maven项目

建立自己的springboot项目

• 创建工程

在建立项目时，可以创建一个多模块聚合项目，即在创建项目时选中选择为pom。
创建后的工程结构为

• jar包依赖
  打开从springboot官网中下载下来的工程目录，打开pom.xml文件

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

将此段代码复制到 spring-boot-study工程中的pom文件中
将下面的依赖复制到spring-boot-web工程中的pom文件中

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

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

eclipse自动完成项目工程的配置。完成后项目中所有需要依赖的jar包自动配置完成。

• 代码编写
  将application.properties文件拷贝到spring-boot-study项目的resources目录下。文件中的内容暂时先不要管，编写以下代码

@SpringBootApplication
@RestController
public class WebApplication {

    @RequestMapping("/hello")
    public String helloWorld() {
        return "Hello World";
    }
    
    public static void main(String[] args) {
        SpringApplication.run(WebApplication.class, args);
    }
    
}

HelloWold就已经完成后。可以在浏览器中输入localhost:8080/hello即可看到效果

springboot默认启动后的端口为8080，但可以在application.properties文件中进行修改。

server.port=9001

将端口修改为9001，重新启动项目后，在浏览器中输入入localhost:9001/hello同样可以看到相同的结果。

• 整合login界面
  现在后台已经有转发功能，具备web浏览功能。但我们需要访问URL为“/”时跳转到登陆界面，即创建好的登陆界面。本人也是在学习过程中，在网上学习好久才发现使用html的话就使用thymeleaf模板就好了。下面就详细来说说如何使用thymeleaf开发html。
  在spring-boot-web项目中的pom文件中加上thymeleaf的依赖。

    <!-- 加入thymeleaf的支持 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

但在Spring Boot项目中，一般src/main/resources/static目录用于存放各类静态资源文件，例如css、js和image等。src/main/resources/templates用于存放页面文件，例如html，jsp等。所以在spring-boot-web中的resources目录下创建static目录与templates目录，并将相应的资源文件放置在各自的目录下。
配置thymeleaf

#thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.cache=false

html文件修改，增加xmlns:th="http://www.thymeleaf.org" 属性，资源文件的引入要修改。

<link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet" />
<link href="../static/css/login.css" th:href="@{/css/login.css}" rel="stylesheet" />

然后编写 java代码

@Controller
public class IndexController {

    @RequestMapping("/")
    public String index() {
        return "login";
    }
    
}

重新启动程序，访问localhost:9001/就可成功跳转至login.html登陆界面上。
注：thymeleaf对html标签要求很严格，每一个标签都需要成对出现。
调试过程中遇到下面异常信息

org.thymeleaf.exceptions.TemplateInputException: Error resolving template [login], template might not exist or might not be accessible by any of the configured Template Resolvers
    at org.thymeleaf.engine.TemplateManager.resolveTemplate(TemplateManager.java:869) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
    at org.thymeleaf.engine.TemplateManager.parseAndProcess(TemplateManager.java:607) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
    at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1098) [thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
    at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1072) [thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
    at org.thymeleaf.spring5.view.ThymeleafView.renderFragment(ThymeleafView.java:362) [thymeleaf-spring5-。。。。。。。。。。。

因为错将templates写成templatse导致。

至此实现从后端服务访问到登陆界面的搭建，还没有具体登陆逻辑实现。
下一篇实现登陆业务逻辑。
附上 本篇文章源代码
一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面