开放性创新实践·软件部分 总结
——题目:联系人信息管理
实现效果:
纯纯0基础实现过程:
0.navicate数据库SQL语句创建表
1.了解后端框架+对照老师模板框架学习 增删改查、swagger调试
2.前端面包条、目录,route.ts路径更改 增删改查前端实现
----------------------------------上面就完成了增删改查,下面地图统计--------------------------------------------
3.地图统计 (还是先数据库-后端swagger调试成功-前端显示的顺序)
1).navicate 命令行中写SQL语句实现分类统计 xml中写SQL语句,实现分类统计)
select provience , count(*)
as provience_value
from contact
group by provience;
2). 类似增删改查写一个新的map方法,swagger中可显示map方法,可读数据
划重点!下面是后端流程,一定需要熟悉。
Controller-前台
Service-接口
Impl-实现上面的接口
mapper-接口 dao data access object
Mapper.xml – sql语句 (部分自动生成,部分自己写eg:map的group by)
3).前端实现
前端实现的时候遇到的问题最多,而且特别让人摸不着头脑,也没有了类似可参考例子,但是当实现后发现其实还挺简单的。——我自己说的
这部分一定要不懂多问 问学长问同学问老师……问就是了……自己查 什么useeffect的hook 自己没先前系统知识的话看文档可能稍微有那么点用,但是不如问身边的人
关键词:
async await request.then() useeffect setmapdata (我之前都不知道需要这些异步同步函数什么的,查了各种博客还是不是很明白,最后自己试出来的 其中还遇到了很多……奇怪的……bug,然后莫名奇妙自己就可以运行了)
这部分我不是很懂,写了个async函数,函数里面await API.my.map.request()
request().then()里面读取数据传给setstate(setMapData)
下面的代码,其实vscode是报错的,但是可以运行,就这样吧,报错信息是:
不能将类型“string | undefined”分配给类型“string”。
不能将类型“undefined”分配给类型“string”
(一大片红色,但是能用,代码写的很……蠢,但是能跑的代码,管它多奇怪呢,能实现功能就是好的)
export default function MapPage() {
const [mapData, setMapData] = useState<MapData[]>([]);
const [contact,setContact] = useState<defs.ContactDTO>();
async function map() {
let a = await API.my.map.request(
{
a: contact?.provience_value,
name:contact?.provience, //一定需要
},
)
return a;
}
useEffect(()=>{ //改变组键副效应
map().then(
(value) =>{
switch(value.length)
{
case 1:
setMapData([ {name:value[0].provience,value:value[0].provienceValue},]);break;
case 2:
setMapData([ {name:value[0].provience,value:value[0].provienceValue},{name:value[1].provience,value:value[1].provienceValue},]);break;
}
// case 3:
//…………………………不写了这里太奇怪了 得有32个case(联系人可能分布在32个省份)………………
用到的插件:
pont Maven ……
框架:
springboot
最后