预约系统项目复盘

[wangshengfei]

概述

背景：和别人合作的一个小外包项目，内容不复杂，简单复盘整个过程，实战经验和问题总结。
项目：一个预约系统。入口是放在微信公众号里面的底部 menu 的外链。

开发

前端

1. 开发
   cra 起ts项目（选择typescript模板）
   react-router，react-redux hooks写法
   主要依赖：
   • axios
   • ahooks
   • ant design ant mobile按需加载
   • date-fns
   • less
2. 部署
   npm run build 打包之后，压缩给后端。由后端解压放到网站的根目录。后端配置下启动服务。

后端

后端使用的 iis，.net 开发。

给的接口是 IP 形式的。

沟通

使用石墨记录接口文档，可以多人实时在线编辑。
尽量不适用 word 传输文件
邮箱传递打包压缩的文件

后端的 ASP.NET 框架会自动生成一份接口文档 ASP.NET Web API Help Page。地址类似
http://xxx.xxx.xxx.xxx:1203/Help
但最好事先和后端约定好 请求和返回的参数字段。这样避免后期联调的问题。

遇到的问题

跨域访问

前端使用 axios 或其他请求库
.net IIS 后端需要配置跨域访问

单页应用 browserHistory 模式刷新页面或者访问某个路由会出现 404 的情况

单页应用 history 模式会出现这种情况，需要配置重定向，将所有路由重定向到 index.html
由于后端是iis，有三步：

1. 安装 IIS UrlRewrite
2. 需要在网站的根目录新建一个文件，web.config
   将下面的代码放进去

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
       <rewrite>
            <rules>
                <rule name="ReactRouter" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url=".*" />
                    <conditions>
						<add input="{HTTP_METHOD}" pattern="^GET$" />
						<add input="{HTTP_ACCEPT}" pattern="^text/html" />
						<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
					</conditions>
					<action type="Rewrite" url="/index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

备注：注意是网站根目录（前端 index.html 文件的那个目录），而不是 webapi 的 web.config，也不是后端代码的配置。如果放到 webapi 里面是不会生效的。如果配置了正确 web.config 但是没有安装 UrlRewrite 会直接报错 500 服务器错误。

3. 重启服务

CRA 遇到的一个 issue

升级最新版本(v4.0.1)可以解决这个问题，就可以把 verifyTypeScriptSetup 文件删除了。
https://github.com/facebook/create-react-app/releases/tag/v4.0.1
updated 2020-11-28

cra v4.0版本 npm start 报错
临时解决方案
facebook/create-react-app#9868 (comment)
updated 2020-11-21

参考

https://router.vuejs.org/zh/guide/essentials/history-mode.html
https://blog.yahui.wang/2018/05/18/React-Router-browserHistory-IIS/