测试开发系列之——项目模块&项目列表功能

project模块

与用户表有关联 userId

• 项目列表
• 统计count
• 查询id
• 新增
• 删除
• 更新

项目列表

1. shiro filter：进入项目页面，首先判断用户是否登录，如果未登录，进入到登录页面，通过shiro的过滤器。
2. 根据userId查list，进行比对，将该用户的项目列出来。
3. 项目总数要进行统计，list.length。

ProjectController.java的代码

package com.one.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.one.common.Result;
import com.one.service.ProjectService;
import com.one.service.UserService;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;

/**
 * 

 *  前端控制器
 * 
 *
 * @author annie
 * @since 2020-02-16
 */
@RestController
@RequestMapping("/project")
@Api("项目模块")
public class ProjectController {
	
	@Autowired
	private ProjectService projectService;
	
	@GetMapping("/toList")
	@ApiOperation(value="项目列表方法", httpMethod="GET")
	public Result toList(Integer userId){
		Result result = null;
		QueryWrapper queryWrapper = new QueryWrapper();
		queryWrapper.eq("create_user", userId);
		List list = projectService.list(queryWrapper);
		result = new Result("1",list,"项目列表");
		return result;
	}
}

Postman调用查询项目列表接口

因为没有带sessionId
如果直接访问toList接口，会报账号未登录。
可以先到数据库查询到MD5加密的密码：

补充知识：如果想要解密，可以到CMD5网站进行密码在线解密：https://www.cmd5.com/

通过调用登录接口，获取正确的sessionId。

然后，通过调用查询项目列表接口，获取当前用户项目列表，发现还是未能获取成功。

POST请求，是把参数放到请求体Body里面，而GET请求参数params放在链接带过去，要不然没有userId就会查询不到。

通过调试手段，可以让控制台输入sql语句，后期可以把sql语句输出到日志文件里面。
在application.yml文件里加入如下配置后，重启服务：

logging:
  level:
    root: info
    com.one.mapper: trace

前端编码

引入axios.min.js和vue.js，放入前端js的目录下面。


用开发者工具定位div，选取div.desc-interlist。

desc-interlist把整个包起来，挂载点大一点没关系，也可以用right-interlist item_main。

前端projectList.html的代码

<script src="/lemon/js/vue.js"></script>
<script src="/lemon/js/axios.min.js"></script>
<script>
    var myvue = new Vue({
        el: "desc-interlist",
        data: {},
        methods: {
            
        },
        created () {
            let url = lemon.config.global.adminUrl + "/project/toList";
            let userId = sessionStorage.getItem("userId");
            axios.get(url,{
                headers: {"Authorization":$.cookie("sessionId")},
                params: {"userId": userId}
            }).then(response=>{
                let result = response.data;
                if(result.status==1&result.data!=null){
                    console.log(result.data);
                }else{
                    location.href = lemon.config.global.rootUrl+"/html/login.html";
                }
            })
        }
    })

访问项目列表页面

登录后，访问项目列表页面，已经可以在控制台输出当前用户的项目列表

遇到的问题汇总

问题一：
访问项目列表页面，提示vue.js:634 [Vue warn]: Cannot find element: desc-interlist。

解决方法：
核对名称无误后，在desc-interlist前面加一个点，问题解决。

问题解决，已经不报相关提示了。

问题二：
访问项目列表页面，提示DevTools failed to parse SourceMap: http://www.ck.org/lemon/js/axios.min.map

解决方法：
将axios.min.map加入到axios.min.js所在的同级js目录下，问题解决。

问题解决，已经不报相关提示了。