开放性创新实践——联系人信息管理总结-优快云博客

本文链接：https://blog.youkuaiyun.com/sherryaxx/article/details/117714356

开放性创新实践·软件部分总结

——题目：联系人信息管理

实现效果：

纯纯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个省份）………………