1. 系统跳转
1.1 系统首页跳转
- 编辑路由JS
- 首页跳转效果
1.2 路由导航守卫
1.2.1 需求说明
说明: 当用户在没有登录的条件下. 用户可以手动输入请求地址. 可以直接跳转项目. 这样的方式非常不安全.
解决方案: 前端通过拦截器 控制用户是否登录.
拦截器说明: 用户拦截的是URL中跳转的路径.
结果:
- 拦截 跳转到登录页面.
- 放行 跳转用户目标页面.
1.2.2 路由导航守卫
说明: 编辑index.js文件
/**
* 参数说明:
* 1.to 到哪里去
* 2.from 从哪里来
* 3.next 请求放行
* 拦截器策略:
* 1.如果用户访问/login登录页面 直接放行
* 2.如果访问其它页面,则校验是否有token
* 有token 放行
* 没有token 跳转到登录页面
*/
router.beforeEach((to,from,next) => {
if(to.path === '/login') return next()
//获取token数据信息
let token = window.sessionStorage.getItem('token')
if(token === null || token === ''){
return next("/login")
}
//放行请求
next()
})
2 左侧菜单展现
2.1 搭建层级代码
2.1.1 表设计说明
2.1.2 关于Rights POJO说明
@Data
@Accessors(chain = true)
public class Rights extends BasePojo{
private Integer id;
private String name;
private Integer parentId;
private String path;
private Integer level;
private List<Rights> children; //不是表格固有属性
}
2.1.3 关于层级代码结构
2.1.4 前端JS说明
- 生命周期函数调用JS函数
created() {
//动态获取左侧菜单信息
this.getMenuList()
//设定模式选中按钮
this.defaultActive = window.sessionStorage.getItem("activeMenu")
},
- 发起Ajax请求获取服务器数据
async getMenuList() {
const {
data: result} = await this.$http.get('/rights/getRightsList')
if(result.status !== 200) return this.$message.error("左侧菜单查询失败")
this.menuList = result.data
},
2.1.5 接口文档说明
- 请求路径 /rights/getRightsList
- 请求类型 GET
- 请求参数 无
- 响应数据 SysResult对象
| 参数名称 | 参数说明 | 备注 |
|---|---|---|
| status | 状态信息 | 200表示服务器请求成功,201表示服务器异常 |
| msg | 服务器返回的提示信息 | 可以为null |
| data | 服务器返回的业务数据 | 返回权限List集合 |
- 响应数据如图所示
2.1.6 父子关系封装/Sql语句写法
要求: 查询所有一级菜单和一级菜单所对应的二级菜单 要求关联查询
SELECT p.id,p.name,p.parent_id,p.path,p.level,p.created,p.updated,
c.id c_id,c.name c_name,c.parent_id c_parent_id,c.path c_path,
c.level c_level,c.created c_created,c.updated c_updated
FROM
rights p
LEFT JOIN
rights c
ON
c.parent_id = p.id
WHERE p.parent_id = 0
2.1.7 编辑RightsController
@RestController
@CrossOrigin
@RequestMapping("/rights")
public class RightsController {
@Autowired
private RightsService rightsService;
/**
* 查询一级二级数据
* URL: /rights/getRightsList
* 参数: 无
* 返回值: SysResult(List<Rights>)
*/
@GetMapping("/getRightsList")
public SysResult getRightsList(){
List<Rights> rights = rightsService.getRightsList();
return SysResult.success(rights);
}
}
2.1.8 编辑RightsService
@Service
public class RightsServiceImpl implements RightsService{
@Autowired
private RightsMapper rightsMapper;
@Override
public List<Rights> getRightsList() {
return rightsMapper.getRightsList();
}
}
2.1.9 编辑RightsMapper/xml映射文件
- RightsMapper接口
public interface RightsMapper {
public List<Rights> getRightsList();
}
- 编辑Rights映射文件
<mapper namespace="com.jt.mapper.RightsMapper">
<select id="getRightsList" resultMap="rightsRM">
select p.id,p.name,p.parent_id,p.path,p.level,p.created,p.updated,
c.id c_id,c.name c_name,c.parent_id c_parent_id,c.path c_path,
c.level c_level,c.created c_created,c.updated c_updated
from
rights p
left join
rights c
on
c.parent_id = p.id
where p.parent_id = 0
</select>
<resultMap id="rightsRM" type="Rights" autoMapping="true">
<id column="id" property="id"/>
<!--一对一封装子级菜单List集合-->
<collection property="children" ofType="Rights">
<!--封装主键ID-->
<id column="c_id" property="id"/>
<result column="c_name" property="name"/>
<result column="c_parent_id" property="parentId"/>
<result column="c_path" property="path"/>
<result column="c_level" property="level"/>
<result column="c_created" property="created"/>
<result column="c_updated" property="updated"/>
</collection>
</resultMap>
</mapper>
2.1.10 页面效果展现
2.1.11 关于项目报错调试步骤
说明: 通过控制台 检查请求路径/响应信息/及JS报错信息. 后台服务器端口号固定 8091
2.2 Ajax 如何实现异步调用?
Ajax特点:
- 局部刷新
- 异步访问
核心组件: Ajax 引擎!!!
2.2 关于页面跳转子级路由说明
2.2.1 现象说明
1.页面路由跳转 用户点击子级菜单时.页面将整个后端页面进行覆盖. 效果如下.
2.实际效果: 应该在首页的右侧 展现新的页面信息.
2.2.2 知识点讲解
功能说明: 组件之间的嵌套问题.
-
定义路由步骤:
- 定义路由url地址.
- 路由填充位(占位符)
- 定义组件(了解)
- 定义路由策略
- 实现路由挂载
-
父子组件嵌套总结:
-
定义父级组件
-
路由策略:
-
如果需要嵌套 通过 router-view 进行占位, 通过children属性定义父子关系的结构. 当点击子组件时,会在父级组件的router-view中展现子组件.
-
2.2.3 首页嵌套规则
- 在Home组件中定义路由的占位符
- 定义父子组件的策略
3 用户管理
3.1 用户列表展现
3.1.1 页面JS分析
- 生命周期函数
//利用钩子函数实现数据查询
mounted(){
this.getUserList()
}
- 获取数据函数分析
async getUserList(){
const {
data: result} = await this.$http.get('/user/list',{
params: this.queryInfo
})
if(result.status !== 200) return this.$message.error("用户列表查询失败")
this.userList = result.data.rows
this.total = result.data.total
console.log("总记录数:"+this.total)
},
3.1.2 业务接口说明
- 请求路径: /user/list
- 请求类型: GET
- 请求参数: 后台使用PageResult对象接收
- 请求案例: http://localhost:8091/user/list?query=查询关键字&pageNum=1&pageSize=10
| 参数名称 | 参数说明 | 备注信息 |
|---|---|---|
| query | 用户查询的数据 | 可以为null |
| pageNum | 分页查询的页数 | 必须赋值不能为null |
| pageSize | 分页查询的条数 | 必须赋值不能为null |
- 响应参数: SysResult对象 需要携带分页对象 PageResult
| 参数名称 | 参数说明 | 备注信息 |
|---|---|---|
| status | 状态信息 | 200表示服务器请求成功 |
| msg | 服务器返回的提示信息 | 可以为null |
| data | 服务器返回的业务数据 | 返回值PageResult对象 |
- PageResult 对象介绍
| 参数名称 | 参数类型 | 参数说明 | 备注信息 |
|---|---|---|---|
| query | String | 用户查询的数据 | 可以为null |
| pageNum | Integer | 查询页数 | 不能为null |
| pageSize | Integer | 查询条数 | 不能为null |
| total | Long | 查询总记录数 | 不能为null |
| rows | Object | 分页查询的结果 | 不能为null |
- 返回值效果
{
"status":200,
"msg":"服务器调用成功!",
"data":
{
"query":"",
"pageNum":1,
"pageSize":2,
"total":4,
"rows":[
{
"created":"2021-02-18T11:17:23.000+00:00",
"updated":"2021-03-26T06:47:20.000+00:00",
"id":1,
"username":"admin",
"password":"a66abb5684c45962d887564f08346e8d",
"phone":"13111112222",
"email":"[email protected]",
"status":true,
"role":null
},
{
"created":"2021-02-18T11:17:23.000+00:00",
"updated":"2021-03-13T08:50:30.000+00:00",
"id":2,
"username":"admin123",
"password":"a66abb5684c45962d887564f08346e8d",
"phone":"13111112223",
"email":"[email protected]",
"status":false,
"role":null
}
]
}
}
3.1.3 封装PageResult对象
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class PageResult {
//封装VO对象
private String query;
private Integer pageNum;
private Integer pageSize;
private Long total;
private Object rows;
}
3.1.4 编辑UserController
/**
* 业务说明:
* 1. /user/list
* 2.请求类型: GET
* 3.参数接收: 后台使用PageResult对象接收
* 3.返回值: SysResult<PageResult>
*/
@GetMapping("/list")
public SysResult getUserList(PageResult pageResult){
//参数3
//业务查询总数.分页条数.
pageResult = userService.getUserList(pageResult);
return SysResult.success(pageResult);//参数5个
}
3.1.5 编辑UserService
/**
* 要求查询 1页10条
* 特点: 数组的结果 口诀: 含头不含尾
* 语 法: select * from user limit 起始位置,查询的条数
* 第一页: select * from user limit 0,10 0-9
* 第二页: select * from user limit 10,10 10-19
* 第三页: select * from user limit 20,10 20-29
* 第N页: select * from user limit (n-1)*10,10
* @param pageResult
* @return
*/
@Override
public PageResult getUserList(PageResult pageResult) {
//1.记录总数 total
long total = userMapper.getTotal();
//2.分页后的数据
int size = pageResult.getPageSize();
int start = (pageResult.getPageNum() - 1) * size;
List<User> rows = userMapper.findUserListByPage(start,size);
return pageResult.setTotal(total).setRows(rows);
}
3.1.6 编辑UserMapper接口
@Select("select * from user limit #{start},#{size}")
List<User> findUserListByPage(@Param("start") int start,@Param("size") int size);
3.1.7 页面效果展现
