课程学习讨论

[Okabe-Rintarou-0]

欢迎提出你的问题，或者解答其他同学的问题，也可以自由讨论技术～

[Okabe-Rintarou-0]

如果前端无法登陆，请先在浏览器访问一下后端 url，接受一下证书（因为用了https）。

[userKangkang]

助教您好，请问在浏览器访问后端url后仍然为Error 401是出现了什么问题呢？

[Okabe-Rintarou-0]

401 是正常的，Unauthorized，没有登录直接访问后端会被拦截。
https://202.120.40.93:34080/api-docs 这个不会拦截登录，可以验证一下是否可以正常访问。
访问后端主要是为了接受证书，之后用前端就行了。因为我这个https 证书没有被第三方认证，所以需要手动接受。

[userKangkang]

好的，谢谢助教。顺带问一下，请问本课程对ant design组件的使用是否有限制？比如什么地方可以用、什么地方不能用的这种限制。还是说只要知道ant design怎么用就可以直接用了呢？

[Okabe-Rintarou-0]

对组件库使用没有限制，推荐使用ant design，用其他的库例如 Material UI，Ant design pro 也是可以的，只要用 React 就行。

[Okabe-Rintarou-0]

当然，我还是建议用 Ant Design，助教们都比较熟悉这个框架。

[1263253592]

助教您好，我在执行npm install命令之后，npm的模块文档里只有这些，和实际文件夹中的文件不对等，然后运行npm start也没有弹窗弹出，是哪里出了问题？

[1263253592]

截不了，弹窗会迅速消失，cmd的可以

zheg这个是正常的

[Okabe-Rintarou-0]

npm start 之后你直接访问前端看看能不能访问，windows下idea默认的终端也是 cmd，有可能是一些显示问题，但我估计不会影响使用。

[1263253592]

重启电脑后问题解决了，应该是重启前idea无法识别node.js的文件位置

[Okabe-Rintarou-0]

这个应该是环境变量的问题，其实你重启idea就可以。修改环境变量之后重启终端一般就可以生效了。这里的环境变量是指系统环境变量（nodejs 的 PATH之类的），而不是 React 前端环境变量。

[1263253592]

重启过idea，没有效果，重启电脑之后，idea就能寻找到react文件了。感谢解答

[LLAYUAN]

401 是正常的，Unauthorized，没有登录直接访问后端会被拦截。 https://202.120.40.93:34080/api-docs 这个不会拦截登录，可以验证一下是否可以正常访问。 访问后端主要是为了接受证书，之后用前端就行了。因为我这个https 证书没有被第三方认证，所以需要手动接受。

怎么手动接受证书呀，我进入https://202.120.40.93:34080/api-docs 后是这样的：

然后再登录的时候提示网络错误？

[LLAYUAN]

应该是没有接受证书导致的？

[Okabe-Rintarou-0]

检查一下是否修改了 .env 文件，后端 URL 需要自行替换

[userKangkang]

修改完.env之后，似乎需要在运行node.js的终端Ctrl+C终止一下当前的项目，然后重新进入才行

[Okabe-Rintarou-0]

是的 修改环境变量之后必须重启前端才会生效

[Okabe-Rintarou-0]

如果还是出现网络错误，请确认一下 .env 下是否替换了环境变量，替换之后请 ctrl + c 终止已启动的前端进程，然后再次 npm start，环境变量才会生效。npm install 是下载依赖，npm start 是启动服务。

[Okabe-Rintarou-0]

生产环境用环境变量可以防止敏感信息被硬编码到项目中去，请大家熟悉环境变量这种用法，以后会常用。

[LLAYUAN]

是的，后端服务器url是https://202.120.40.93:34080 （REACT_APP_BASE_URL改成这个才有用）， https://202.120.40.93:34080/api-docs 是api文档

[Ayanami1314]

补充一下，如果用vite生成项目骨架的话
环境变量用npm可能会出现一点问题，用

export const BASEURL =
  import.meta.env.VITE_BACKEND_URL 

这样的写法，然后.env文件的环境变量之中把所有的环境变量加上VITE_前缀即可被vite识别

[Ayanami1314]

用apifox生成了比swagger丰富一些的api文档
https://apifox.com/apidoc/shared-663d000b-fc08-412b-944a-b6f587db33f3
UI比swagger好看+有一些数据结构检查，mock功能，自动化测试，基本示例代码......等功能，建议大家使用apifox代替postman调API
这个文档是每24小时同步一次助教哥哥的后端的，因此不用担心里面数据过时的问题，也不需要本地安装

[Ayanami1314]

我在尝试实现大作业要求“依据时间范围筛选订单”的过程之中遇到了一些问题......
我的设想是使用antd的DatePicker为筛选项提供起始时间和结束时间两个参数，我参考文档的API定义了这样的列筛选

      // filterDropdown: ({
      //   setSelectedKeys,
      //   selectedKeys,
      //   confirm,
      //   clearFilters,
      // }) => (
      //   <Space direction="vertical">
      //     <DatePicker.RangePicker
      //       value={
      //         selectedKeys[0]
      //           ? [moment(selectedKeys[0]), moment(selectedKeys[1])]
      //           : []
      //       }
      //       onChange={(dates) => {
      //         console.log(
      //           "dates:" + dates?.map((date) => date?.format("YYYY-MM-DD"))
      //         );
      //         setSelectedKeys(
      //           dates
      //             ? [
      //                 dates[0].format("YYYY-MM-DD"),
      //                 dates[1].format("YYYY-MM-DD"),
      //               ]
      //             : []
      //         );
      //       }}
      //     />
      //     <Space>
      //       <Button
      //         type="primary"
      //         onClick={confirm}
      //         size="small"
      //         style={{ width: 90 }}
      //       >
      //         Search
      //       </Button>
      //       <Button onClick={clearFilters} size="small" style={{ width: 90 }}>
      //         Reset
      //       </Button>
      //     </Space>
      //   </Space>
      // ),
      // // FIXME：has bugs here
      // // FIXME: onFilter 的value参数本来应该对应selectedKeys，是一个数组，但是实际上只有一个值，导致循环输入第一个和第二个数，出现错误
      // onFilter: (value, record) => {
      //   const startDate = moment(value[0]);
      //   const endDate = moment(value[1]);
      //   const recordDate = moment(record.createdAt);
      //   // console.log("value:" + value);
      //   // console.log("recordDate:" + recordDate.format("YYYY-MM-DD"));
      //   // console.log("startDate:" + startDate.format("YYYY-MM-DD"));
      //   // console.log("endDate:" + endDate.format("YYYY-MM-DD"));
      //   return recordDate.isBetween(startDate, endDate, "days", "[]");
      // // },

文档上缺少对onFilter和filterDropdown的参数和column的内置函数说明，对DatePicker的类型标注也与实际不符合（文档写[Dayjs, Dayjs],但实际上是RangePickerType<Dayjs>），而onFilter传入的value参数本应该是一个数组，和selectedKeys对应，代表自定义筛选之中的筛选参数，但实际上它变成了一个值，导致无法传入起始时间和结束时间两个参数，只有在一个参数时工作正常，官方API文档之中对onFilter的类型只说是function，缺少信息。当然功能也完全无法实现。
鉴于我在这个Table上花了过多的时间而官方API文档上乱七八糟，我建议后面做表格部分的同学尝试转到其它UI库，不要用antd的这个Table，并且这个Table在清空筛选设置的时候也很恶心，官方文档上的方法（设置filterValues为空）是不成立的bug，在其他平台看到的都是七绕八绕的绕过官方文档的方法，或者能不能麻烦助教哥哥给一下这一段实现的示例代码，算是个人踩坑吐槽

[userKangkang]

借楼问一下助教/同学，后端貌似是要学Java，SpringBoot；不过我学过一点Java后学springBoot还是有一些java的功能没学到，看不懂，请问除了各种编程语言通用的那些语法（类似于交大C++的内容），对于java还有什么需要补充的才可以适应后端开发的需求呢？以及后端的推荐学习路线可否指点一下呢？十分感谢

[Okabe-Rintarou-0]

Java 语法会C++的话几乎不用学，主要是学框架。课程主要搞明白这几个东西吧：
spring的bean是什么，controller-service-dao-repository四层架构，常用annotation，hibernate orm框架,jpql以及JpaRepository

[Okabe-Rintarou-0]

1. Spring 中 bean 是个很常用的东西，一般我们都是用默认单例模式。可以想像 spring 会维护一个容器，里面有很多 bean（其实就是一个对象），当你需要一个 bean 的时候可以通过 @Autowired 注解自动注入。

   // BookService.java
   @Service
   public class BookService{
   }
   
   // BookController.java
   @RestController
   public class BookController {
     // 自动注入
     @Autowired
     BookService bookService;
   }

   上面的例子就是写作业最常用的方式了，@service 是 @component 衍生出来的注解，可以声明一个类为 bean。这边自动注入就会从spring 容器中获取 bookservice的bean，而不是重新创建一个，其实也就是用了单例设计模式。

   https://www.baeldung.com/spring-bean 这个讲的还不错

2. 四层架构

   • controller：负责和前端交互，明白@RequestMapping，@RequestParam 等注解怎么用就行，这一块模块化程度高，写起来很方便，框架帮忙做了很多事。
   • service：负责业务，比如下单买书。
   • dao: data access object，负责数据处理，比如读写数据库
   • repository：每个repository 对象都对应一张表

3. 常用 annotation（注解）
   这个写多了就会了，最主要的是 bean 相关的 annotation，@service，@component，@Bean 等等，用到了去查一下就行；另外 lombok也很常用，@DaTa @NoArgsConstructor 等。

4. hibernate orm
   orm就是把表和关系映射成对象，本质上是简化你的编码，避免你去写很多复杂的 native sql query。把这几个注解搞明白：@OnetoOne，@manytomany, @onetomany, @manytoone, @joincolumn

   从 onetoone 开始看吧：https://www.baeldung.com/jpa-one-to-one 1

5. jpql 和 jpa repository
   这个搜搜官方教程，用得好可以极大提升编码速度。
   https://www.baeldung.com/spring-data-jpa-query
   https://www.baeldung.com/jpql-hql-criteria-query
   举个例子：

   public interface BookRepository extends JpaRepository<Book, Long> {
     Book findByTitle(String title);
   }

   你什么sql语句都不用写，直接调用这个方法就行，框架会帮你调用 select * from book_table b where b.title = title （差不多是这样的一个sql语句） ，当然要遵守命名规范，idea 会给你提示。
   你也可以用 @query 写更复杂的CRUD。

Java 历史包袱重，学习框架往往大于学习语言本身，这点比较boring。

[userKangkang]

十分感谢助教的帮助

[Okabe-Rintarou-0]

不客气，有问题及时提。学会之后也可以多帮助其他同学解答。一起学习，反对内卷。

[wdl339]

问几个没那么技术的问题：1. 大作业迭代要求里写“页面应至少包含登录页面、网站首页、书籍列表浏览页、书籍详情页......”，我不是很能理解“网站首页”的含义，具体是想让我们做啥，还是说这是可以自己定义的？在助教的demo里首页似乎就是书籍列表浏览页。2. 在要求里“统计”中写“管理员可以统计....形成热销榜...形成消费榜，顾客可以统计自己的购书情况...”，意思是顾客不能看到热销榜和消费榜？

[Okabe-Rintarou-0]

主页你可以放其他东西，但是建议与demo类似，应该可以浏览书籍，根据关键字搜索书籍，其他欢迎自定义。

[Okabe-Rintarou-0]

这个浏览书籍的布局你下学期还会用的，下学期会在搜索方面下一些文章。这门课是连贯的7学分。
总而言之参考demo 的布局和路由肯定没问题。

[wdl339]

原来如此。非常感谢~

[wdl339]

还有个问题，就是demo的书籍详情页有个评论区，大作业要求里似乎没有做评论区的要求。这个评论区应该不是必做的吧？

[Okabe-Rintarou-0]

请以作业要求为准，评论功能只是为了demo 完整性，与作业要求无关。

[userKangkang]

请问第一次迭代要求登录界面的“响应式开发”，是否意味着需要完成用户验证的功能（包括验证成功准予通过以及验证失败不准予通过）？是否需要在数据库中存储信息，还是可以暂时用前端的redux代替？另外问下响应式开发的意思具体是什么

[userKangkang]

"此文档当前已锁定"🤣，我先去看看后端吧

[userKangkang]

好吧，我现在还是有些问题：

1. 课程提供的后端api按我的理解是用于和后端发送请求以及返回数据的接口，那么现在这个后端内部的逻辑是不是助教已经提供好的？还是其他的什么意思，或者我的理解有问题？
2. 后续的迭代要求我们使用关系型数据库、运用Java SpringData方式访问数据，请问这和提供的后端api存在什么样的关系，我现在不是很清楚这个后端api背后的数据是否也是助教您提供好的。那么这样的话我们是基于这个服务器再把自己的数据以某种方式通过这些api放到这个服务器里面吗；那后面我们自己写后端Java MySQL的时候，服务器用提供好的还是自己弄？
3. 我尝试使用给的初始账号和密码登入我的电子书店，我已经在登录时封装了一个getLogin函数，最后确实返回一个登陆成功的信息，也就是说我目前是登录成功了；不过我未看到注册的api，那么我猜测可能确实后面是自己写api的，而这个api更像是练习axios获取数据的练习（？）
   
4. 会不会是因为我现在对后端Java springboot等不够了解才会问出这种问题？主要是我目前只是写过前端，对SQL也只是有一个很片面的理解。所以我对前端、后端、数据库这些联通其实还不是很有概念，脑子有点乱乱的，也没有一个清晰的路径，可能问得问题会比较...突兀

麻烦助教了！

[Okabe-Rintarou-0]

你应该能感受到前后端分离的好处，只要做好数据接口约定，开发前端的时候可以把后端看成黑匣子，你知道有这么一个服务器，你按照一定的方式请求资源他会把对应的信息返回给你。

1. 有一个真实的后端 Java + MySQL，我们不会提供代码，但是我们提供了后端接口，你目前也无需关心他的实现和存在；实际生产开发中，一个业务可能会依赖另一个业务，但是并不是说我必须等待那个业务开发完了你才能开发。通常我们可以对数据进行mock（模拟），来模拟接口返回的值，开发自己的业务。等那个业务真的开发好之后，你只需要把假的数据源换成真的就行。比如说你可以基于我们的服务器开发你的前端；后续你可以仿照我们的接口开发后端；如果你和我们的 API 约定一致，那么你只需要修改 .env 中的 URL 为自己本地的后端 URL 即可。注意到，因为你开发前端的时候就遵照了 API 约定，所以换个后端，只要后端也遵守那个 API，你的前端不需要做任何改动。对于前端而言，后端跑什么我并不用关心，前端只知道接口约定。
2. 后端需要自己从0开始写，数据也要自己构造。等你学了后端分层架构，你自然会明白 API 和 DB 的联系；
3. 登录也是真实的，后端是个真实可用的系统，并非模拟或练习
4. 去了解一下后端的 Controller - Service - DAO - Repository 架构

[Okabe-Rintarou-0]

[userKangkang]

再次非常感谢助教！

[wdl339]

关于作业3的作业要求B我不太理解。作业要求里写的是“请你按照下面这个我们提供的样例程序的主页，给出你在设计这个页面时，React工程中应该包括哪些Component、View和Service，并给出具体的设计理由”，然后给了张图。然而提交要求是交源代码，评分标准是“按照第二项要求重构后的工程”。意思是说先要根据给出的那张图回答问题，再重构工程吗？还是说先重构工程，再根据自己重构的工程回答问题？

[Okabe-Rintarou-0]

后者，重构再分析。

[Fabulousxu]

我想使用canvas绘制一些东西，但是以下两种方式都没法使用getContext，报错Cannot read properties of null (reading 'getContext')，该如何解决？

export default function Background() {
  //方式1
  let canvas1 = <canvas></canvas>,
    context1 = canvas1.getContext('2d'),

    //方式2
    onLoad = () => {
      let canvas2 = document.getElementById('background-canvas'),
        context2 = canvas2.getContext('2d')
    }

  return (
    <div id="background">
      {/* 方式1 */}
      {canvas1}

      {/* 方式2 */}
      <canvas id="background-canvas" />
      <script>{onLoad()}</script>
    </div>
  )
}

[Okabe-Rintarou-0]

试着搜索 React.useRef

[Okabe-Rintarou-0]

<script>{onLoad()}</script>

不建议这么写，你的代码本身就是 script了，script 生成 script怪怪的。
而且就算 onload 也应该是放 canvas上。

而且，我不推荐用 document.getElementById, 更好的做法就是用 React.useRef,

[Fabulousxu]

为什么每秒会渲染两次？这个计时器会每隔1秒然后打印2次相邻的数字1 2, 3 4, 5 6.....；如果去掉了useEffect而直接开启计时器则会每隔1秒打印两个相同的数字1 1, 2 2, 3 3, 4 4......。怎么解决？

export default function Background() {
  let a = 1
  useEffect(() => {
    setInterval(() => {
      console.log(a++)
    }, 1000)
  }, [])
  return ()
}

[Okabe-Rintarou-0]

和 index.js 中的 React.StrictMode 有关。useEffect 在严格模式下会执行两次，以便于发现是否有不该出现的副作用（两次执行应该一致），这是在开发模式才会有，生产模式就不会。一种做法是干脆注释掉 StrictMode，一种就是避免副作用。

[yytuwefds]

我尝试调用后端api，登录成功但是无法取得数据（使用了service内的函数），网络显示我被401了，请问如何解决

[Okabe-Rintarou-0]

Sending a request with credentials included

[wdl339]

助教老师好，请问（仅对于这个课程而言）学了JPA之后还有必要学Mybatis-plus吗？或许在后端代码里可以这两个配合着用？

以及第一次迭代细则里的“并能够通过左侧菜单完成几个页面之间的跳转”，必须要是左侧吗，在顶端行不

[Okabe-Rintarou-0]

JPA 只是一个接口，有多种实现方式，我们课程用的是 hibernate orm，和 mybatis 差不多，建议和课程保持一致。

[wdl339]

还有一个问题，迭代提交要求“只提交src目录和package.json文件”，我的图片引用是使用public目录的，我觉得应该还需要提交public目录（以确保图片显示正常）？

[Okabe-Rintarou-0]

描述里遗漏了public，总而言之最重要的是不要提交依赖目录就行。

[wdl339]

助教大哥前面有提到后端的 Controller - Service - DAO - Repository 架构，我对这个DAO不是特别理解。我是跟着网上教程学这个spring boot的，有点不太确定，想问下这个model是不是就是所谓的DAO（数据访问对象）？

[Okabe-Rintarou-0]

DAO下面是repository，repository对应 table，由于一个对象的数据可能源于多个table甚至 多个数据源，所以需要分 dao-repository。例如 MySQL + MongoDB 这种多数据源，每个数据源就会对应一个 repository。我们会把你说的model写作entity，但是语义差不多。你可以把DAO 看作 service 用于获取数据库数据的工具。不同教程分层略有不同，但是按照我们这样四层分肯定没问题。

[Fabulousxu]

TypeError: Failed to fetch
为什么前端不能fetch本机服务器？但是能正常fetch示例服务器。

[Okabe-Rintarou-0]

大概率跨域配置问题

[johnndjnd]

后端的dao层与repository层有什么区别呢？两者貌似都是实现了基本的数据访问功能，我看老师的意思两者做了分离，但我看不出具体的区别，我问gpt，他也说二者“实际上是同一层，都是用于与数据库进行交互的。这两个术语经常可以互换使用。”

[johnndjnd]

但是Spring Data JPA不是可以通过添加@onetomany等注解，让repository获取多个table的数据吗？

[Okabe-Rintarou-0]

我说的情况是一个 entity 的字段来自多个数据源，比如一部分 MySQL，一部分 MongoDB。下学期你们会遇到这种情况。

[johnndjnd]

所以目前而言dao层与repository层是一样的吗

[Okabe-Rintarou-0]

不一样，请分层。

[Okabe-Rintarou-0]

不一样体现在粒度，entity 的粒度 > table 的粒度。DAO > repo

[qsstcl]

在运行时遇到了这样的错误，请问是找不到BookRepository Bean吗

我的文件目录如下所示，已经定义了BookRepository的接口

service中也已经将其注入

[Okabe-Rintarou-0]

@Autowired 放在 private 变量上就不需要这样写构造函数。
解决方法（我这里用的是 BookDAO）：

1. 删除构造函数，保留 @Autowired 在变量上。
2. 放在 setter 方法上@Autowired
   public void setBookDAO(BookDAO bookDAO) {
   this.bookDAO = bookDAO;
   }
3. @autowire 放构造函数参数上 public BookServiceImpl(@Autowired BookDAO bookDAO) {
   this.bookDAO = bookDAO;
   }
   总之 @Autowired 是让 Spring 去容器里面找 bean 来注入，你可以配合你的报错信息理解这一点。

[qsstcl]

已解决，发现是BackendApplication中的注解有问题，将@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})改为@SpringBootApplication后就可以运行了

[qsstcl]

赞美助教 : )

[xeonliu]

请问助教Entity是在哪一个层级上的东西呢？
感觉JPA里@entity跟MySQL表项一一对应，设计好了@entity甚至可以自动生成相应的Table。
那么我要返回给前端的数据结构应该定义在哪里？

[Okabe-Rintarou-0]

一般我们把返回前端的数据称为 DTO
entity 对应表，是repository 那一层的东西

[xeonliu]

那DTO放在哪一层呢？Dao还是Controller?

[Okabe-Rintarou-0]

controller前

[xeonliu]

想请问一下助教POST方法请求参数的类型定义一般是直接放在Controller类里吗？返回值的类型定义呢？

[Fabulousxu]

感觉直接用fastjson就不用再定义类了，感觉挺方便

[Okabe-Rintarou-0]

可以搞一个package 把这些model 放进去，用requestbody之类的annotation可以自动解析。

[Fabulousxu]

关于跨域问题，做了若干尝试，如加@crossorigin注解，或者增加mvnconfig配置或者filter过滤器，仍然无法实现跨域。

[Fabulousxu]

我尝试在我电脑上运行在其他人电脑上可以跨域的后端，发现仍然不能跨域，不清楚具体原因

[Fabulousxu]

我用之前给的示例前端连我自己的后端，同样也不能跨域

[Ayanami1314]

我的跨域是这样的，在和SpringBootApplication文件夹同级下创建Config.java
之后定义这样一个配置类即可

[Fabulousxu]

我看到我们的后端api中，获取订单的请求是不需要附带上任何当前的用户信息的，服务器怎么知道和储存你是谁的信息？

[Okabe-Rintarou-0]

cookie 存储 http sessionID -> http session 存储用户 id

[Okabe-Rintarou-0]

http session 维护 spring boot web 帮你做好了。

[Fabulousxu]

我的后端在处理登录请求的时候，已经写入了cookie，但是我的前端在发送另一个请求的时候，却无法带上这个cookie。怎样才能让前端的所有请求能一直带着这个cookie呢？

[Fabulousxu]

第二张图要是把cookie参数去掉以后，就能正常响应，否则400错误。
前端是没问题的，因为我连接标准后端是可以响应的。后端改怎样让cookie能一直携带呢？

[Fabulousxu]

这是我的corsconfig配置

[Fabulousxu]

经过我的观察，貌似服务器并不是简单地设置了一个cookie，而是设置了JSESSIONID cookie，这是什么东西？要怎么设置？

[xeonliu]

可以问一下迭代要求中的User和UserAuth分别是什么吗？UserAuth是负责存密码的吗？

[xeonliu]

可以问一下鉴别Session应该再Controller中做还是在Service中做呢？Service需要传入用户相关的参数吗？

[Okabe-Rintarou-0]

如果是拦截，用拦截器。如果是获取session中的用户信息，controller层做。

[johnndjnd]

请问可以使用token吗

[Okabe-Rintarou-0]

可以，但是请正确使用，参考我在群里转发的公众号文章。

[Okabe-Rintarou-0]

localhost 不等价于 127.0.0.1，当心踩坑，建议统一。

[johnndjnd]

请问迭代4会提问类似之前迭代的底层知识点吗，还是说只需要完成要求细则的内容就可以？

[xeonliu]

请问@OneToOne如果又想Lazy Loading，又想Cascade应该怎么做？
我发现User实体类里如果想实现Cascade储存UserAuth，就得有一个OneToOne的mappedby，但是IDEA告诉我它不支持Lazy Loading，那么我就没法避免取User时从数据库中取出UserAuth……
不然我就只能单独弄一个UserAuth Repository在储存User后对UserAuth进行储存……