还是用了大概两个多小时的时间,代码连贴带调就把06-10章快速扫过了,因为基本也没抛啥异常出来分析,还算顺利。(很快啊!那个耍闪电五连鞭的你怕不怕。)

但是一般码农和优秀程序员的差距也在这里了,代码虽然贴完了,遇上异常也能处理,也可以根据业务需求对代码做出相应的二次开发和改造。但你要是让我闭着眼睛重写这个项目我应该是写不出的。后端还好,因为这几年一直在做后端,所以在我的记录中关于后端代码的调试一般也都会一带而过,前端就不行了,虽说别管是啥框架,本质上也离不开html+css+js的模式,但是脑子里确实就没有这根弦。说白了还是熟练功的问题。非常羡慕从前的程序员啊,门槛很高💪 。

简单说说基本的逻辑吧,备忘一下:

第06章:

1、前端路由的模式:有Hash 模式(访问url中会带#)和History 模式,想要修改成History模式,在router\index.js,加入 mode: 'history即可。文中提到的前端项目部署在后端就不做了,没啥必要。

2、后端登录拦截器:这个在平常的开发中做的就比较多了,在config包中写几个类,一般是直接继承springboot自己的拦截类然后注入到IOC中就可以了。这个在这次的例子中没做,用的是前端vuex拦截。

3、前端登录拦截器:说实话这个用vuex做前端拦截器我是没有看懂的,包括用了钩子函数啥的,贴完代码后。

登录平台index页面,因为以前没有登录过,所以会被重定向会login界面。输入账号密码后登录,成功跳转到

http://localhost:8080/index ,之后再次访问则无需登录(除非清除缓存)。

第07章:
要开始实现具体的业务场景了,1、首先先做一个顶栏

1.PNG

<template>
  <div>
    <nav-menu></nav-menu>
    <router-view/>  <!--显示子组件-->
  </div>
</template>

<script>
import NavMenu from './common/NavMenu'
export default {
  name: 'Home',
  components: {NavMenu}
}
</script>

<style scoped>

</style>

这里会先建一个home.vue 然后div中引入刚才的顶栏和下头的子组件,子组件在路由中有children配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 导入刚才编写的组件
import AppIndex from '@/components/home/AppIndex'
import Login from '@/components/Login'
import Home from '../components/Home'
import LibraryIndex from '../components/library/LibraryIndex'

Vue.use(Router)

export default new Router({
  mode: 'history', // 历史模式
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home,
      // home页面并不需要被访问
      redirect: '/index',
      children: [
        {
          path: '/index',
          name: 'AppIndex',
          component: AppIndex,
          //拦
          meta: {
            requireAuth: true
          }
        },
        {
          path: '/library',
          name: 'Library',
          component: LibraryIndex,
          meta: {
            requireAuth: true
          }
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

/home是访问不到的,会被定回/index,顶栏组件中会有v-for去遍历那几个菜单,并会跳转到相应组件中,所以home.vue就是父组件,在他div中的为子组件。

2、图书馆管理页面是核心页面,代码太长不贴了,Book.vue和SideMenu.vue都是LibraryIndex的子组件,LibraryIndex在路由中对应的路径就是/library。(别忘了在script中既要import还要写components: {SideMenu, Books},还有在template中加标签)

第08章:对数据库的增删查改

可能我觉得比较简单的一章,首先导入3张表(这里有一个字段是另一张表的外键要注意),然后就跟着jpa开发规范一步步做就好了。。。BookDAO.java里有两个自己声明的查表语句要注意一下,其中有一句

List<Book> findAllByCategory(Category category); 

简单说下逻辑,首先前端会通过触发各种方法传参到后端(有一个$emit下章会说)

2.PNG

3.PNG

然后后端接口会接到对应cid值,然后一层层调用到dao中的这条查表语句。

5.PNG

6.PNG

7.PNG

首先会去category表中查回一个cid=id值的实体,这俩是主外键关系在实体类中通过注释标注(建表时也要标注),由于这两个注解,是查回来的实体也会只对应cid一个值吗,好久没看jpa文档忘记了。

   @ManyToOne
    @JoinColumn(name="cid")
    private Category category;
    // 映射单向 n-1 的关联关系
    // 使用 @JoinColumn 来映射外键
    // 使用 @ManyToOne 来映射多对一的关联关系
    // 可使用 @ManyToOne 的 fetch 属性来修改默认的关联属性的加载策略,在左外连接和两条SQL间切换

6.PNG

8.PNG

相当于最后还是回book实体通过cid去查book表了(findAllByCategory,by的也是你这个实体名啊,book表里这个字段都没得查就知道肯定要转表里字段嗷。。)。至此一个简单的前后端查询逻辑就完成了。

第09章:核心功能的前端实现,前端代码贴贴贴,总结几个要点

1、后端api方法上要加@CrossOrigin

2、钩子函数(在Book.vue中)

mounted: function () {
      this.loadBooks()
    }

mounted“已挂载” ,所谓挂载,就是我们写的 Vue 代码被转换为 HTML 并替换相应的 DOM 这个过程,这个过程完事儿的时候,就会执行 mounted 里面的代码。(可以理解打开页面时就自动加载,自调用)

3、组件通信,我愿称这个为前10章最重要的吧。

¥refs:给子组件或者元素添加一个引用标识,而这个标识就会被记录在$refs实例属性当中

¥emit:子组件可以使用 $emit 触发父组件的自定义事件

ref:用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上

第08章贴了两张前端的图,子组件为SideMenu,父组件为LibraryIndex,子组件通过$emit会触发父组件的indexSelect,然后会调用父组件的listByCategory方法,方法中this.¥refs.sideMenu.cid会去获取ref="sideMenu"也就是标签SideMenu对应该组件下cid的值去了。

归纳一下,就是父组件可以使用子组件的数据了,子组件也可以去调用父组件的方法了。

4、剩下的基本就是不同功能点实现了,本质离不开父子组件的互相引用(包括位置,数据,方法等等),这个library的父子关系比较简单:LibraryIndex是Book和SideMenu的父组件,Book是EditForm和SearchBar的父组件。

第10章:图片上传和打包

1、图片上传:比较简单,利用 element 提供的组件 <el-upload>整前端(有个:代表钩子事件不太懂),这里这个组件是EditForm的子组件,post一个url到后端接口,后端接口解析该地址并转成本地图片地址就完成业务逻辑了(别忘了要在config包中的类加配置注解@SpringBootConfiguration,要不方法不生效)。

2、部署到服务器不整了,一个ng就能搞腚的事。

贴一个实际效果图

9.PNG

最后两章写的有点图快了,可能还有要点略过了,以后想起随时记录。

总结下01-10章,前后端分离少不了的

前端:vue框架也要遵循html+css+js模式,html用element ui可以搞定,css不管,可如今的快餐社会最看重css。。。js中处理数据及方法。页面路由及axios的配置,父子组件的相互引用(数据、展示、方法等等),前端拦截器,前端路由模式的使用,跨域配置,这些都是要注意的要点。

后端:写规范点。。。


标题:开源项目白卷复习(06-10)(深度好文0^0)
作者:jyl
地址:http://jinyunlong.xyz/articles/2021/05/28/1622132700103.html