微信小程序建设网站-从无到有搭建陌陌小程序(前后端)的全过程

5. 打包并启动

开发完成后就可以计划上线了。 首先在开发者工具中上传写好的代码,点击上传,定义版本号和注释,然后去微信公众平台的版本管理提交初审。 初审通过后,即表示上线成功。 ,您可以在陌陌搜索您的小程序并访问。

[外链图片传输失败,源站可能有防盗链机制,建议保存图片直接上传(img-AAQ2Kokz-1685412683254)(null)]

概括

至此,即使前端的工作完成了,其实如果不涉及复杂的数据处理,后端就没有必要了,所有简单的数据都可以存储在后端。 如果你的小程序是这样的,那么本文就可以到此结束了。 您也无需阅读其余部分。 如果需要更灵活的交互、更复杂的逻辑,那么前端socket是必不可少的。 如何完成比较复杂的前端数据socket,关注我你就知道了。

后端

后端主要提供给小程序数据套接字,以便小程序的每个页面都可以显示排行榜数据。 这里我提供了http套接字,返回的字符串是Json格式。 使用的语言是Java,使用的框架是SpringBoot。 最终的java代码打包成war包,部署在云主机上的Web服务器Tomcat中。 Tomcat 可以手动将通过 url 传来的请求分发到我的程序代码中。 在处理逻辑中,处理完请求并接收到相应的数据后,会以Json字符串的格式返回。

主要流程如下:

[外链图片传输失败,源站可能有防盗链机制微信小程序建设网站,建议保存图片直接上传(img-tlY15lBT-1685412683110)(null)]

服务器搭建 1.购买云服务器

首先,要存储前端程序代码,你需要一台机器,你自己的笔记本也可以,但是你的笔记本不能保证24小时开机、内网访问,所以你需要订购云服务器; 其次,外网能够访问意味着需要有公网IP,购买的云服务器就会配备相应的IP地址。

这里我使用的是腾讯云服务器,进入官网订购:腾讯云,选择服务器配置,然后支付。

根据预算和实际需求(其实是因为舍不得花钱),我选择了一台配置比较低的机器:

2. 购买域名

域名用于映射到IP,方便直接使用域名访问IP绑定的服务器。 虽然我们订购的云服务器也可以直接使用IP和端口来访问,但首先IP不好记,其次Momo不允许使用IP加端口形式的url。 所以我只能“慷慨解囊”购买域名。

域名可以在任何域名服务提供商处订购。 为了方便,我直接在腾讯云上购买了。 购买链接:域名注册

[外链图片传输失败,源站可能有防盗链机制,建议保存图片直接上传(img-AbDyewFd-1685412683238)(null)]

3、域名解析

购买域名后,如何使用该域名? 不与IP结合使用的域名是没有意义的域名。 这里我们需要把这个域名或者它的子域名绑定到我们需要对外提供服务的服务器对应的IP上,也就是我刚才订购的云服务器的IP上。

在腾讯云后台的云解析中,点击您的域名,添加一条记录。 一般主要是添加A记录,即将域名与IPv4地址绑定。 您可以添加多个,并使用主机记录来区分每一级域名。 @表示直接使用二级域名xxx.com,其他表示使用五级以上域名,自己二级域名以下的多级域名都在你的掌控之下。

[外链图片传输失败,源站可能有防盗链机制,建议保存图片直接上传(img-awgREaTU-1685412683004)(null)]

4. 域名备案

为什么需要域名备案? 这,是不是全世界的王地啊,互联网,一亩三分地,自然是属于国家的,不能只让你访问服务。 在这块土地上开垦荒地也不是不可以,但是需要向国家报告,接受监督。

整个小程序建设过程中,域名注册耗时最长,足足十几二十天。 进入备案页面:备案管理开始备案,具体就不赘述了,

详细备案流程请参见:网站备案

主要流程包括以下几个部分:

(1) 处理幕布摄影

(二)备案信息审核

(3)填写主题信息

(4)填写网站信息

(五)上传材料

(六)确认备案信息并提交审核

(七)通过初审并完成备案

5. 购买SSL证书

为什么需要 SSL 证书? 因为配置了SSL证书后,我们的url就可以以https开头了,这就是陌陌小程序中需要的域名访问方式,而且以加密传输的形式更加安全。

说到订购,其实你可以选择“购买”免费证书,也能达到同样的目的,只不过加密功能没有付费证书强,安全性自然也弱一些。 但这并不妨碍我选择免费的,毕竟我穷。

进入订购页面:SSL证书,选择需要订购的证书的配置,下单收款,下载证书微信小程序建设网站,用于后续配置Web服务器。

概括

经过以上5大步骤,我们的服务器就具备了使用https合约通过域名访问的能力。 接下来的工作就是开发我们的前端socket,并将前端程序代码部署到这个服务器上,供小程序访问。

后端程序开发

环境:

我不会详细介绍安装这个工具的细节。 网上有很多教程,如果你不懂前端开发,安装这套环境是没有用的。 假设读者也了解一定的前端开发知识。

下面列出了Java代码中最重要的部分来说明前端程序如何提供http套接字:

@RestController
@RequestMapping(value = "/movie")
public class MovieListController extends MovieBaseController{
    private static final Logger log = org.slf4j.LoggerFactory.getLogger(MovieListController.class);
    /**
     * 豆瓣top250电影
     * test: http://localhost:8080/movie/top250?start=0&limit=10
     */
    @RequestMapping(value = "/top250")
    public CommonRespVo<List<ListCommonVo>> getMovieTop250() {
        try {
            HttpServletRequest request = this.getHttpServletRequest();
            String start = request.getParameter("start");
            String limit = request.getParameter("limit");
            String url = String.format("https://api.douban.com/v2/movie/top250?start=%s&count=%s",start,limit);
            JSONObject jsonObject = HttpUtil.getInfoFromHttpApi(url);
            List<ListCommonVo> listCommonVos = this.movieListDataTrans(jsonObject);
            if (CollectionUtils.isNotEmpty(listCommonVos)) {
                return new CommonRespVo(listCommonVos, CommonRespVoCode.SUCCESS);
            }
        } catch (Exception e) {
            log.error("获取豆瓣top250电影信息异常",e);
        }
        return new CommonRespVo(CommonRespVoCode.FAILED.code, "未获取到数据");
    }
    
    /**
     * 华语top100电影
     * test: http://localhost:8080/movie/chinaTopMovie?start=0&limit=10
     */
    @RequestMapping(value = "/chinaTopMovie")
    public CommonRespVo<List<JSONObject>> getChinaTopMovie() {
        try {
            List<JSONObject> result = this.getSubList(Lists.newArrayList(ChinaTopMovieData.chinaTopMovieData));
            if (CollectionUtils.isNotEmpty(result)) {
                return new CommonRespVo(result, CommonRespVoCode.SUCCESS);
            }
        } catch (Exception e) {
            log.error("获取华语Top电影信息异常",e);
        }
        return new CommonRespVo(CommonRespVoCode.FAILED.code, "未获取到数据");
    }
    //省略后续代码
}

上面的代码是两个socket之一,一个是通过公共API获取豆瓣top250电影信息,另一个是通过爬虫数据获取中国top100电影信息。 可以看到SpringBoot使用RestController注解来表示处理http请求,并按照每个RequestMapping对应的方式返回json格式的数据。

RequestMapping注解的作用是为每个方法映射一个url。 @RequestMapping 注解可以应用于控制器类或其下的方法。 当在类级别添加@RequestMapping注解时,该注解将应用于控制器的所有方法。 方法上的@RequestMapping注解将补充类级别上@RequestMapping的声明。 这就是为什么最终的url是添加类的方法中的路径。 本地测试时,在浏览器中传递 url::8080/movie/chinaTopMovie?start=0&limit=10 即可获取返回的数据。

程序代码开发完成后,使用Maven构建项目,并将代码打包成war包文件。 可以在目标目录中找到war包。 这个war包的用途后面会提到。

数据源

排名数据必须是权威客观的,所以其实我不能随便排列一些数据,而且我也没有能力去统计这几类信息的相关排名,所以我想到了拿Freedom:从他人那里获取已经具有一定权威的数据。 豆瓣有一些公开的开源API可以获取我想要的一些数据,其他数据在其他主要排名网站上也有,但是没有现成的API可以为我提供他们的数据。 既然他们不给,那我就只能自己去拿了。

我用Python写了一些爬虫软件来定期爬取特定排行榜网站上的数据,并用这些数据来更新我本地的静态数据,这样我的Java程序就可以获取到比较新的数据。 虽然我这里可以做得更好,但是为了快速上线,我没有时间用数据库来落地爬取的数据。 这有一个不好的结果。 每次服务重启后,都会有一段时间数据不更新。 这在我可以接受的范围内,以后有时间我会解决这个问题。

豆瓣的api示例:通过该url,可以批量获取热门电影列表的数据。

python爬虫使用urlopen,通过urllib.request.urlopen()函数来访问目标url并返回该url对应的网页数据。 然后使用BeautifulSoup来分析网页数据,主要是遍历搜索文档树,得到你想要的部分数据。

部署前端程序

准备:

首先登录订购的云服务器,安装部署前的环境,主要安装JRE和Tomcat。 安装完成后,需要配置Tomcat。

1.安装环境 2.配置Tomcat 3.部署应用

将我们用Maven打包的war包复制到安装Tomcat的webapps目录下,如这里右图所示:

[root@VM_0_12_centos webapps]# pwd
/usr/local/tomcat8/webapps
[root@VM_0_12_centos webapps]# ls
docs  examples  host-manager  manager  ROOT  wxrank  wxrank.war

这里就是上图中的wxrank.war文件,然后进入Tomcat的bin文件夹,运行startup.bat启动tomcat,然后就可以手动解压war包并部署了。

概括

为了方便起见,上面的一些文件是在我的笔记本上下载的,然后通过FileZilla上传到云服务器上。 我还使用此工具在笔记本电脑和云服务器之间进行其他文件传输。

Tomcat配置部署成功后,我们的前端socket就可以通过url访问了。

总结

虽然不难,但整个过程确实相当漫长。 之前我只知道如何搭建,但并没有完全实践过。 整个过程走完之后,我心中对软件开发的整体看法变得更加具体了,这就是最大的收获。

以下是小程序的成品,扫描看看:

[外链图片传输失败,源站可能有防盗链机制,建议保存图片直接上传(img-bf1DqoB2-1685412683128)(null)]

还有很多数据没有规划好,以后有时间再优化。 另外,由于我购买了所有的云服务器,无论如何我都必须充分利用它们,所以我在里面建立了一个个人博客,点击下面我的博客链接查看疗效:

原文链接:随缘记——从0开始搭建陌陌小程序(前后端)全过程

更新:后端代码git地址:,培训项目不再维护,域名忘记续费被别人抢了