网站目录文件,国际国内新闻最新消息今天,有限公司企业网站建设方案,seo 最新文章目录 1.项目定位2.项目开发流程3.需求分析4.技术选型5.Ant design pro初始化5.1快速使用5.2初始化过程 6.项目依赖的报错处理6.1项目出现的问题6.2怎么查看问题6.3怎么解决报错6.4关于pnpm的安装 7.项目启动和运行7.1项目如何启动7.2双击跳转7.3登录和注册7.4页面分析7.5关… 文章目录 1.项目定位2.项目开发流程3.需求分析4.技术选型5.Ant design pro初始化5.1快速使用5.2初始化过程 6.项目依赖的报错处理6.1项目出现的问题6.2怎么查看问题6.3怎么解决报错6.4关于pnpm的安装 7.项目启动和运行7.1项目如何启动7.2双击跳转7.3登录和注册7.4页面分析7.5关于startdev的说明 1.项目定位
了解做项目的基本思路这次以一个简单的例子入手从简单的到困难的之前的这个方式确实有点问题这次找了一个简单的项目进行学习和交流
2.项目开发流程
1需求的分析
2概要设计、详细设计
3技术选项
4初始化、引入需要的技术
5写一个Demo
6写业务代码
7单元测试
8代码的提交和评审
9部署和发布上线
3.需求分析
1注册和登录的功能–用户的信息即登录名和明码
2对于用户的管理—管理员之类的可以看到包含这个用户的数量之类的
3用户的校验仅仅某些人符合要求–指定人群
4.技术选型
前端三件套htmlcss之类的react组件库 Ant Design Umi Ant Design Pro(现成的管理系统)
后端javaspring bootspring mvc mybatismysqlmybatis-plus
部署服务器
5.Ant design pro初始化
这个初始化的过程实际上就是生成一个模版这个是我自己的一个理解因为我自己也是第一次使用这个相关的内容yupi使用的是这个ant design pro这个工具进行的初始化但是我发现他的这个教程里面当时的 官方的文档和我现在看到的这个官方文档不完全一样有很多地方都变化了毕竟这个技术在不断的更新迭代这个也是可以理解的
5.1快速使用
进入官网之后点击这个快速使用就会看到下面的这个页面内容 5.2初始化过程
这个初始化的过程在我们的文档里面有的按照步骤操作就可以了哈 我自己操作的这个过程里面这个没有选择umi的版本但是提示让我选择了这个simple还是complete这个是有的
安装依赖的时候如果你没有这个tyarn的话使用第一行的就会报错
但是如果你使用第三行的指令这个速度会非常慢
我的个人做法就是去切换这个镜像源 1npm config set registry https://registry.npmmirror.com 检查是不是安装成功 2npm config get registry 附下面的这个是我第一次按照这个鱼皮的视频安装的过程下面的这个是我从视频里面截取的可见他和现在这个官网有很大的区别不知道这个视频是几年前录制的我第一次就是跟着教程搞得最后发现一堆报错解决方案就是我自己独立按照最新的这个文档重新搞了一次遇到问题的时候百度找到了这个跟换镜像源的方法问题的已解决我认为这个才是成长的过程勇敢的迈出第一步这个是我们作为初学者必须要经历的过程 6.项目依赖的报错处理
上面的这个初始化工作完成之后我们就可以使用这个开发者工具把这个项目打开进行处理了推荐使用这个web storm这个工具
6.1项目出现的问题
这个其实在yupi讲这个内容里面并没有出现这个也是因为我们的这个ant design pro这个初始化的问题下面的这个是我按照上面的步骤打开项目遇到的问题 6.2怎么查看问题
可以打开下面的这个文件app.tsx这个文件打开之后刷新一下应该全是红的证明我们的这个项目文件里面是存在很多的这个问题的我自己最开始是显示有9个错误 6.3怎么解决报错
其实我们的这个工具在提示我们就是运行这个 pnpm install这个命令 这个pnpm和我们上面提到这个yarn一样都属于这个包管理工具pnpm兼容现在这个npm生态且这个很高效节省这个磁盘的空间 下面的这个是yupi当时的这个操作使用这个yarn:但是当我输入之后发现这个是无法被识别的我知道这个时候需要靠我自己了 于是我尝试了一下这个提示的命令npnm install命令 6.4关于pnpm的安装
出现上面的报错之后我知道需要解决这个pnpm问题于是就查了一下
1安装这个pnpmnpm install -g pnpm 2再次使用上面的那个指令这个时候就不会报错了 到此为止我们的这个app.tsx里面的全部报错都消失了说明我们的这个依赖是引入成功的
7.项目启动和运行
7.1项目如何启动
点击我们的这个package.json里面的这个start前面的按钮直接启动我们的这个项目 7.2双击跳转
点击下面的这个运行起来的这个日志里面的local对应的这个内容就可以跳转到浏览器里面去 7.3登录和注册
下面的就是跳转的页面这个上面已经告诉了我们登录名和密码直接输入就可以了 7.4页面分析
我们就来之后就可以发现这个页面非常简单我们可以看到这个表格点击这个右边的这个齿轮我们可以更换这个页面的皮肤和颜色样式之类的 7.5关于startdev的说明
这个start就是我们上面使用的她的下面有一个dev但是如果我们使用这个启动就会发现这个也是可以跳转的但是跳转之后的这个页面是无法成功登陆的
这个主要是因为哦我们的这个dev里面的mock是none这个mock就是假数据也就是模拟数据我们的这个start里面可以使用但是dev里面把这个mock关闭了所以我们进不去了
