（建站20天感悟）使用WPFReact前端搭建管理客户端

一、简介

搭建这个开源项目的目的是开发一个自己的网站，搭建一个B/S的开源项目（计划中还有一些C/S客户端和移动App）。

1.1 我现有的网站

众所周知，站长有一个使用付费主题构建的网站（）。 已经运行一年多了，目前为止没有出现什么大问题。

网站以文章分享为主，偶尔也会分享站长工作期间制作的原创文章。 大部分转载自各大公众号、博客园、CSDN等平台。

【网站广告】目前，网站有在线教育广告。 程序员的副业可以参考【20天建网站的灵感】。

1.2 想法：开发一个新网站

网站运作不佳？ 不再？

运行得很好！ 网站将持续改版！

建立网站时有许多免费和付费插件可供选择。 只要你有好的审美，就可以搭配很多个性化的网站风格。

就因为它太好了，而且是用 PHP 制作的，PHP 是世界上最好的语言，但我仍然要自己开发一个网站，只是为了一件事：

❝

因为我是一名程序员，我想要完全自主可控！

有些特殊功能，站长们都知道，如果不自己开发的话，配置起来并不容易：

访问源IP监控和限制（白名单、黑名单）； 访客偏好分析； 广告出现概率配置及好友链接排序及检查

...

1.3 目前的开发计划使用WTM在后台构建前端和后端（React + .NET Core Web API）。 使用 WPF 对 React 前端进行建模来构建管理客户端。 前台也使用React（稍后会详细介绍）。 前端后端和后台后端使用同一个。2． 采取行动 2.1 创建项目 2.1.1 申请域名

哈哈，这个没必要。 建立网站会让人上瘾。 如果站长已经申请了域名，就用这个名称创建一个仓库名称即可。

2.1.2 访问并创建项目

国内用户可能需要科学上网，不然登录会有点慢。 以下是站长创建的仓库截图：

仓库创建信息

部分描述：

仓库创建初始模板

2.2 使用WTM 构建后台框架 2.2.1 为什么使用WTM 构建后台框架？ 从头开始搭建权限框架对于站长来说是非常耗时的。 毕竟他做B/S才不到2年。 其实主要是因为懒。没有理由不选择WTM，请看原作者的话

❝

WTM框架，全称是MVVM（不是“我好坏”的拼音首字母），WTM是一个快速开发框架，它有多快呢？ 至少在目前的开源项目中，我还没有看到更接地气、更快的开发框架。 WTM的设计理念是最大程度地加快开发速度、降低开发成本。

Java在中国占据主导地位的原因有很多，包括BAT的示范效应和微软自身的战略失误。 幸运的是，微软这两年终于想通了。 core的诞生和获得都是在正确的方向上。 当然，要实现像Java这样的生态系统还有很长的路要走，所以我会贡献一点。

WTM自开源以来，受到了越来越多开发者的喜爱。 WTM一定会以更加成熟稳重的态度回报您的厚爱。 特别感谢闲心（）授权WTM开发的项目免费使用其付费版本。 提升自己，造福他人，我并不孤单！

2.2.2 克隆存储库

原谅我对git不熟悉，使用clone上面创建的仓库：

https://github.com/dotnet9/lqclass.com.git

克隆存储库

本地仓库目录结构

2.2.3 使用WTM搭建后端 2.2.3.1 访问WTM项目体验地址：点击浏览 2.2.3.2 打开主页后，点击下图中的生成模板项目入口

生成项目条目

2.2.3.3 创建WTM项目第一步，输入项目名称：

填写项目名称

2.2.3.4 创建生成WTM项目第二步，项目配置

配置项

解释如下几点：

该框架支持三种UI：LayUI、React前后端分离、Vue前后端分离。

站长对LayUI使用的MVC模型不熟悉； 站长以前对Vue略知一二。 自从加入现在的公司以来，他一直从事React开发，对React比较熟悉，所以你知道，我选择React。

最后点击【开始配置】即可创建动画图片。 网站会打包下载配置好的框架：

下载项目

2.2.3.5 将WTM项目复制到本地仓库

在本地仓库创建src目录存放源码，将WTM网站生成的项目源码拖入其中，使用Open

复制 WTM 项目

初始项目解决方案结构

2.3 项目论证

你没看错，使用WTM生成工程已经完成。 下载后直接解压，无需任何配置。 选择项目名称对应的名称，点击运行（运行时会根据个人网络的实际情况自动下载前后端依赖包，时间可长可短）。

VS直接运行项目

项目运行演示

2.4 注意事项

严重性 代码 说明 项目 文件 行 禁止显示状态
错误 MSB3073 命令“npm install”已退出，代码为 1。 lqclass.com F:\dotnet\lqclass.com\src\lqclass.com\lqclass.com.csproj 36 

解决方案：

前端需要配置npm淘宝源，或者科学上网，否则下载前端包时会失败。

站长使用的是淘宝源，安装了cnpm包。 使用cnpm下载前端项目依赖包后，然后在VS中一键运行。 React前端路径：\src\\`

三、结论

该项目已创建。 您可以先提交代码。 我不会截图。 您可以访问仓库地址查看：点击浏览。

接下来，站长将后端和前端部署在云服务器上。 几个月前，他在香港购买了一台腾讯云服务器。 无需注册，部署非常方便。 下一篇文章见。

时间就像流水，只能流走，却一去不复返。