项目-博客-插件库 (代码已开源)

node mongodb

该博客是本人5年前写的，主要技术栈用的是node+mongodb+swig模板引擎+vue+boot+微信小程序，通过小程序的引流，网站的用户量达到3000+，插件上传俩量达到4000+ 个。

可以实现用户注册，用户登陆，私人博客文章展示，插件上传，插件功能的预览和下载，技术书籍的电子版，前端技术相关的视频学习等功能。

相关的代码和安装流程，可以查阅本人的github,代码已经开源，下载安装就可部署此网站和管理系统。

主要实现的功能如下：

后台管理系统

  • 网站用户管理
  • 网站菜单管理(包括pc和h5)
  • 内容管理(博客的创建、列表、编辑、删除)
  • 视频管理(视频的上传、编辑、删除)
  • 菜单管理(jq22功能网站)
  • 资源管理(jq22功能网站)(资源的上传、pdf文件书籍的上传、zip插件的上传)

    网站

  • 博客列表
  • 登陆入口
  • 热点文章
  • 静态资源链接汇总展示
  • 视频列表页
  • 前端资料库(类jq22)，资源的列表页、资源的功能演示页、资源的下载页

    手机端网站(vue)

  • 纯博客网站

    微信小程序

  • 纯博客微信小程序

阅读更多

mongodb windows 安装

node mongodb

MongoDB是一个基于分布式文件存储 [1] 的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。它支持的数据结构非常松散，是类似json的bson格式，因此可以存储比较复杂的数据类型。Mongo最大的特点是它支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。

MongoDB下载

阅读更多

卫健委(中国继续医学教育网)项目完结总结

vue nuxt scss webpack

中国继续医学教育网 - 卫健委 - 2022/01 ~ 2022/04/10

项目介绍

中国继续医学教育网是国家卫健委健康委能力建设和继续教育中心的线上为各级医院的医师做专业技能课程的培训和线上考级的线上平台。项目主要承载的直播，录播，音频，线上视频购买，线上考试和线上证书的发放。

项目架构选择

项目主要包括3个系统：
后台管理系统：https://www.ncme.org.cn/admin/#/login?redirect=%2F；
PC端的线上学习网站：https://www.ncme.org.cn/；
手机端的H5学习网站：https://www.ncme.org.cn/ncme-h5/；
后台管理系统采用的是：vue + element + vuex的全家桶的前端架构模式；
PC端的线上学习网站采用的是：nuxt + element-ui
手机端的H5学习网站采用的是：nuxt + vant

ToB的网站，项目要求首屏渲染速度要快，尤其是SEO的要求比较高，所以选择了服务端渲染，有头部标签管理方便，SEO优化比较好的nuxt，并且项目资金压力不大，服务器方面的费用不用考虑。

项目的坑

1.首先管理系统包括用户、属性、课程、项目、运营、财务、消息、权限、统计、学院等十大系统，需求太多，前期给的文档需求不全，导致后期工期不变，需求一直再加，工期没有商量余地，导致时间太紧，bug率太高。
2.项目的需求文档不全，导致课程、项目系统变成了俄罗斯套娃，代码变得非常的难维护。
3.nuxt当时没有接触过这个框架，在时间紧的基础上还是不要采取不熟悉框架，不过好赖都过来了。
4.直播相关的业务采用的第三方的CC，导致调用他们的API各种问题，沟通很麻烦。

项目的交付

国家级别的项目相对来说还是比较好交付的，就是应为功能太多，导致有些问题没有测试到，结果到了线上数据全部上去，访问量达到30W+的时候暴露了一些没测到问题，但是整体还能说得过去。

项目总结

1、大型项目前期的需求一定要确定好，最起码要确定十有八九。
2、前期项目的框架要尽量选择自己熟悉的，大项目不适合去选用新的框架。
3、工期是最重要，那其实就是需求一定要仔细过，做到时间功能的合理安排。
4、UI层面的适当找比较初级的程序员写好，但前提是一定要有自己的代码书写规范文档。

H5支付完整demo及问题总结

支付

参考链接：https://pay.weixin.qq.com/wiki/doc/api/index.html

1.开通H5支付，注意：在申请时填写的域名必须和调起H5支付访问的页面一样！
2.跟小程序支付类似，拿到公众号的appId, 商户号、商户秘钥.

H5支付采坑问题记录：

当所有参数准备好，并调用接口时，返回MWEB_URL如下：
MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096

访问该链接，出现以下错误：

原因：商户侧统一下单传的终端IP(spbill_create_ip)与用户实际调起支付时微信侧检测到的终端IP不一致导致的，

（在网上找了各种各样的方法，获取本地真实的ip，全都无效，问题依旧如此）

解决方法：要获取spbill_create_ip。在前端js中引入了搜狐的js库，

1
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

document.write(returnCitySN[“cip”]+’,’+returnCitySN[“cname”]);

这条语句即可拿到手机端的真实ip,returnCitySN[“cip”]将该值作为参数传到后台，作为spbill_create_ip的值调起微信支付接口。

当前调起微信支付的域名和申请H5授权的域名不一致时会出现如下图所示：

原因：当前调起微信支付的域名和申请H5授权的域名不一致。

解决方法：将该项目放到域名服务器上，并使得调起支付的访问链接的域名和H5授权的域名一致！

1.解决以上两个问题后，不能在浏览其中访问返回的MWEB_URL，而是要通过前端类似于window.location.href=”MWEB_URL”去调用。
① 不能直接在手机微信端，必须在手机浏览器上调用。会提示“系统繁忙，请稍后再试”

hexo 域名相关的问题

vue router

国内主机需要备案，国外主机不用

github 上面的博客空间属于国外空间，绑定域名可以 不用备案

购买域名

国内域名我选择了阿里云，登陆阿里云网站，直接购买域名就行，不需要买云解析

阅读更多

v-if和v-for不要同时使用

vue 
1
2
3
4
5
<ul>
  <li v-for="item in list" v-if="item.isActive">{{item}}</li>
//   [vue/no-use-v-if-with-v-for]
// The 'undefined' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.eslint-plugin-vue
</ul>

v-for和v-if不要同时使用，因为v-for的优先级比v-if高，这意味着 v-if 将分别重复运行于每个 v-for 循环中，效率和性能都比较低。

阅读更多

修改element源码，发布属于自己的element包，实现自定义并修改element源码的bug，来实现线上使用自己的包来打包文件

我们在项目中，在采用element框架的时候，框架本身也是有bug的或者不符合我们产品需求需要我们改动的，但是，如果是本地打包完上传到服务器的话，可以修改本地的element源码，如果是服务器打包的话，那我们就得自己发一个npm的包来进行打包了。

案例：修改element Cascader 级联选择器，清空数据，下拉框仍然回显最后选择的数据的问题

阅读更多