【《基于Django架构的数码产品资讯系统设计》11000字（论文）】

摘要本文描述了数码产品资讯系统的设计与实现过程。总体分为数据获取、数据处理、数据展示三大模块。数据获取采用Python的request库爬取中关村在线网站的手机数据；数据处理采用Python的pandas库以及正则匹配等工具处理非规格化数据；数据展示采用完全的前后端分离独立开发。后端以及后台管理员界面采用Django架构，前端用于向客户展示的界面选择采用微信小程序。两者之间通过drf框架进行通信，实现数据同步。通过不同产品的数据展示、数据对比等模块，为消费者在选购电子产品时提供参考的依据以及交流的平台。关键词：Django，网络爬虫，数据库，微信小程序，数码产品绪论课题的背景与意义5G手机成为电子产品消费的新风口,5G、计算摄影、折叠屏等新技术应用于智能手机,智能手机的换机市场被重新唤醒[1]。2019年年中，华为发布了国内首部商用5G手机，经过了两年多的发展，我国的5G建设已经基本成熟。2020年开始，几乎所有的主流厂商的旗舰机型不再提供4G版本，5G手机的价格也下探到千元的价位。与此同时，不少消费者反馈自己使用的4G手机存在卡顿、网速慢的问题，并且即使在不开通5G套餐的情况下使用5G手机，也可以达到约300Mbps的网络带宽，这是现阶段4G手机远远达不到的速度。4G的痛点逐渐显现出来，所以不少消费者选择了优先更换5G手机[2]。面对越来越多的换机需求和各大厂商的各种机型，构建一个数码产品资讯平台帮助消费者挑选适合自己的设备有存在的必要。此外，随着互联网产业的不断发展，微信已经成为国内使用人数最多的“连接型”应用，它几乎涵盖了人们日常生活的方方面面。2017年微信小程序的推出，突出了三个关键词：“工具”“连接”与“场景”。电子产品换代是一个相对低频率的需求，大部分消费者的换机周期在25个月左右，相较于吃穿住行这种高频需求，开发者往往不愿意花大成本来满足这些低频需求，用户也往往不愿意专门安装传统APP来满足自己低频率的需求。现在移动端的用户量已经远远大于PC端的用户量，针对传统网页的移动浏览体验并不好的现状，微信小程序的出现直面这些问题，无需安装、触手可及、用完即走、无需卸载的特性很好地解决了低频需求的痛点[3]。因此，利用微信小程序做一个前端来展示数码产品的信息以及提供简单的交流平台不失为一个有实现意义的方案。这个选题要求开发一套完整的数据获取、处理、展示的系统，对有换机需求的消费者和一些数码产品爱好者有一定的参考意义。首先，通过对数码产品的各种参数进行对比，给予消费者直观的可视化展示，帮助消费者在选择设备时对设备的各项配置参数有更加详细的了解，做出更加适合自己的选择，提升自己的消费体验。其次，为数码爱好者提供一个参数对比和查询的平台，并对相关产品进行评价，帮助对数码产品不太了解的人群更好地选购产品。最后，平台可以收集用户需求，帮助数码厂商的产品经理更加明确用户需求所在，设计和发布更加适合市场需求的产品。国内外研究现状和分析国外研究现状国外关于网络爬虫的研究国外对于网络爬虫的研究开始较早，最早出现在上世纪90年代初期。在互联网出现以后，网络上的信息变得十分混乱，大量的冗余信息充斥着互联网。这时，网络爬虫就以搜索引擎的形式应运而生，比如1994年创建的雅虎，就用网络爬虫的技术大大提高了数据获取的效率，这就是初代网络爬虫。随着网络爬虫的普及，出现了一系列的主题网络爬虫系统，1994年，DeBra[4]设计了一种基于网页内容分析策略的Fish-Search算法，但是该算法并不能计算链接和主题的相关度。2007年，Almpanidis[5]等人开发了一个潜在的语义索引分类器，结合链接分析和文本内容，以检索和索引领域特定的网络文档。国外关于数据系统的研究网络爬虫给我们带来了大量的数据，为了更好地利用这些海量数据，仅靠人工处理显然是不现实的。不少的国外企业已经为了更高效率的生产开发了不少的数据分析系统，比如日立公司[6]在2019年就有相关的专利申请。此外，在生物科学科研领域，ParkYoungKyu[7]等人就开发了一个数据分析系统来对某种基因治疗法的数据进行研究、分析和处理。国内研究现状国内关于网络爬虫的研究国内关于网络爬虫起步相对国外较晚，但也有不少的成就。2006年，苏祺[8]等人根据对Shark-Search主题爬取算法的分析,提出了一种基于链接聚类的改进Shark-Search算法。2011年，吴黎兵[9]等人提出一种可部署于单一网域及多网域间的分布式爬虫DSpider。DSpider能够通过调整节点规模和连接超时阈值,有效部署于局域网和广域网中。近年来，网络爬虫广泛应用在国内的金融、教育、旅游、医学等各学科各行业当中。国内关于数据系统的研究由于近年来互联网的高速发展，很多行业的数据都通过网络进行存储，构成了海量的数据库，这是一笔巨大的数据资源。2019年，王娇娇[10]等人设计了作物长势监测仪数据采集与分析系统，体现了数据分析系统在农业领域的应用。2020年，贾文成[11]分析了数据分析系统在会计系统领域的可行性，体现了数据分析系统在金融领域的应用。2021年，吴斌[12]提出基于智能数据分析的医院服务质量优化决策支持系统设计方法，体现了数据分析系统在医学领域的应用。如今国内外的数据分析系统基本都是基于大数据和人工智能等核心技术，能够更好地为各行业各领域服务。国内关于微信小程序开发的研究微信作为一款国产软件，它的用户群体大多是国内用户，所以很少有国外开发者会对微信小程序的开发有研究。与此相反，国内有不少的开发者致力于微信小程序的开发，比如刘刚[12]还有其他的开发者也出版了相关的教程供大家学习和研究。随着微信小程序的推出，涌现了不少的例如“‘互联网+’可以连接一切,微信正在‘连接一切’,而小程序正在悄然改变这一切。”[13]的类似观点。近年来，越来越多的国内开发者选择利用微信小程序这一平台免安装、跨平台的特点来吸引新用户，覆盖领域也十分广泛，包含了人们日常的吃穿住行，以及医院挂号、游戏娱乐等领域。研究发展的趋势和期望关于网络爬虫的发展趋势当前，静态网络爬虫技术已经十分成熟。但是，随着ajax技术的发展，现在大多数的网页数据采用了动态加载的技术，使用传统的爬虫技术经常无法正常获取数据。因此，接下来对于爬虫技术的相关研究应该以事件为驱动，更好地适应新一代web的发展趋势[14]关于数据系统的发展趋势近些年来，随着互联网用户的高速增加，每时每刻都在产生大量的数据.随着虚拟机技术以及云计算技术的发展，大数据的时代已经来临。面对海量的数据，传统的数据分析和管理的方法显然不能够满足需求，并且传统数据分析方法和数据管理方式已经比较稳定，所以在未来相当长的一段时间内，如果原有的系统能够满足应用场景的部分需求，可以通过性能提升来加强可靠性，如果需求得不到满足，那么就需要在大数据框架的基础上设计新的系统技术来进行数据的管理和分析[15,16]。课题主要研究内容与拟解决的主要问题本课题的研究基本内容包括网络爬虫、数据处理、微信小程序和web应用的开发。该课题最终目标为构建一套关于数码产品资讯数据全流程的系统，系统的功能包括数据获取、数据维护、数据查询、数据对比、产品评价、个性化推荐等功能。通过本课题的研究，可以在国内目前众多数码厂商的激烈竞争，产品型号百花齐放的情况下，为消费者在面对选购产品时一头雾水毫无头绪的现状提供帮助，解决产品选择困难，产品信息相对分散的问题。本系统基于用户需求，借助于电子商务蓬勃发展的时代，各式各样的电子产品的参数信息都能很容易通过电商平台以及一些主流数码评测网站上找到，因此可以运用网络爬虫技术来获取这些零散的数据并进行集中处理并展示，更好地帮助用户了解各个产品的信息并构造一个交流的平台，解决用户不知道如何选购电子产品的问题，让消费者在选购时不再感到困扰。同时也可以解决数码爱好者查询各个产品参数流程较为复杂的问题，让极客们在比较参数时能有更加直观、舒适的感受。系统主要的功能模块如下：1. 初始数据的获取模块2. 管理员后台登录模块3. 管理员后台数据增删改查模块4. 用户前端数据查询模块5. 用户前端数据对比模块6. 用户前端数据排行模块7. 用户前端个性化推荐模块8. 用户前端评价交流模块根据以上功能模块，可以发现在研究的过程中，拟解决的主要问题有：爬虫稳定性、个性化推荐算法、微信小程序和后台数据库的数据同步等。论文的组织形式与架构本文将按照以下六个章节的结构布局进行阐述：第一章，绪论，叙述了本文的选题背景和意义，以及国内外在这一领域的研究现状和期望。。第二章，系统需求分析，对系统的目标用户、所需功能进行阐述。第三章，系统总体设计，对系统的各个模块以及数据库的设计进行阐述。第四章，关键技术分析，对系统采用的关键技术以及代码实现进行阐述第五章，系统功能介绍，对系统的使用方法以及所包含的功能进行阐述。第六章，结语，对系统的完成情况做出总结，同时对自己在课题完成过程中的情况做出评价。系统需求分析系统总体需求分析本系统的目标是搭建一个数码产品资讯平台，通过收集各个品牌产品的数据，通过微信小程序的形式表现出来，从而使得消费者在选购电子产品之前能够有一个对比的平台，同时也能够有一个和平台的其他用户沟通交流的平台。对此系统的各项业务流程叙述如下所示：在浏览器中输入后台网址进入后台管理员登录界面。登录完成后进入列表页，每页九个以卡片的形式展示所有的产品简介。可以通过搜索框检索关键字来缩小显示范围。上方包含一个新增产品的按钮，点击后跳转到新增产品页，输入各个信息后可以将数据存入数据库并直接跳转到该产品的详情页。每个卡片中包含一个查看详情的按钮，点击后可以跳转到产品的详情界面。详情界面中可以展示产品的全部数据，同时包含编辑参数的按钮以及一个删除产品的按钮。点击编辑参数的按钮后跳转到产品参数的编辑界面，表单内容和添加产品相同，并且自动填充。点击删除产品的按钮后将弹出二次确认框，确认删除后将直接跳转到产品列表页面。客户点开小程序后将默认进入产品列表页，此外底部的tabbar还有产品对比、产品排行、以及我的信息共计四个菜单选项。产品列表页按照产品的品牌分类，点击左侧可以快速切换品牌。点击列表页中的产品可以跳转到产品详情页面，展示各项参数以及对产品的所有评论。点击底部发表评论按钮默认跳转到登录界面，若已登录则直接跳转到发表评论界面。产品对比界面可以通过品牌形成二级菜单，选择两个产品加入对比跳转到对比的详情页。产品排行中可以看到按照不同属性的升序以及降序排列。我的信息默认为登录以及注册两个按钮，分别指向登录页面和注册页面，若已登录，则显示个人的基本信息以及所发表的所有评论。该系统通过便携易使用的微信小程序，能够大大激起消费者在选购产品前的使用兴趣，从而给予消费者一些基础知识，做出更加适合自己的选择。用例图分析该系统共有三种用户，分别为后台管理员、普通用户以及游客。其中后台管理员拥有独立于普通用户的账户系统，可以对数据库中所有数据进行增删改查的操作。后台管理员的用例图如REF_Ref100345666\r\h图2-1所示。后台管理员用例图普通用户无法访问后台，但是可以享受微信小程序中的所有查询功能，并且允许添加评论。普通用户用例图如REF_Ref37347202\w\h图2-2所示。普通用户用例图游客能够进入微信小程序查看参数以及进行产品对比等功能，但是不能添加和查看自己的评论。游客的用例图如下REF_Ref37347227\w\h图2-3所示。游客用例图可行性分析为了提供足够的数据以供消费者参考，本系统在构建数据库之前，需要先获取数据，这里采用Python中的request库对中关村在线网址进行网络爬虫，最后获得了共计1400余条产品数据，对其进行预处、规格化等过程后，其中有效数据约800条左右，已经足够消费者作为参考的依据，后期管理员可以定期爬取网站数据以更新产品数据。后台管理界面采用Django框架进行开发，ORM工具中modelForm的使用大大降低了开发的难度，十分便捷。微信小程序和Django后台采用drf框架进行数据交换，避免了jwt中较为复杂的token验证过程。总体方案可行。系统总体设计系统功能模块设计根据该系统的需求分析，得出该系统的功能模块设计图如REF_Ref37347310\w\h图3-1所示。系统功能模块设计图下面简要阐述部分模块的设计思路及内容：后台信息管理模块产品信息管理：所有管理员可以选择获取数据，并对其进行预处理后导入数据库，也可以在后台管理的UI界面进行数据的基本增删改查操作。评论信息管理：管理员可以选择普通添加的评论进行删除、编辑的操作。用户信息管理：管理员可以删除、修改用户的个人信息。前台数据展示模块查看产品信息：所有用户都可以查看所有产品的参数，选择两个产品进行参数对比，查看产品的数据排行。登录后的用户可以在产品详情页添加评论。个人信息管理：游客可以登录或者注册。普通用户登录后可以查看自己发表过的所有评论数据库设计概念模型设计（E-R关系图）通过需求分析，该系统需要根据用户类型进行权限的划分，此外需要通过品牌来检索对应的产品，每个产品又需要评论的功能来实现用户之间的交流。综上所述，该系统需要有以下实体：用户、产品信息、评论信息、品牌信息。各实体之间的关系图如REF_Ref37785775\r\h图3-2所示。E-R实体关系图概念数据库表设计表STYLEREF1\s3SEQ表\*ARABIC\s11用户表：User属性名id名称编号类型int(11)是否允许为空非空备注自增，主键username用户名varchar(20)非空password密码varchar(64)非空可加密用户表（User）如REF_Ref37949433\h表31所示，用于保存普通用户的账号密码数据，并不保存管理员的用户数据，管理员用户数据由Django中的auth系统独立完成，表结构在此不做过多描述。表STYLEREF1\s3SEQ表\*ARABIC\s12产品信息表：Phone属性名名称类型是否允许为空备注id编号int(11)非空自增，主键name产品名varchar(100)非空cpu处理器varchar(100)可空price价格int(11)可空单位：人民币resolution分辨率varchar(100)可空thick厚度varchar(100)可空length长度varchar(100)可空width宽度varchar(100)可空brand_id品牌int(11)可空Brand表，外键screen_refresh_rate屏幕刷新率varchar(50)可空screen_size屏幕大小varchar(32)可空单位：英寸screen_material屏幕材质varchar(100)可空rear_camera后置摄像头text可空front_camera前置摄像头text可空speakervibrating_motortouch_idface_idnfcwired_chargingwireless_charginginterfacescreen_typephone_typephone_image扬声器振动马达指纹识别面部识别nfc有线充电无线充电机身接口屏幕类型手机类型手机图像varchar(100)varchar(100)varchar(100)varchar(100)varchar(200)varchar(100)varchar(100)varchar(100)texttextvarchar(100)可空可空可空可空可空可空可空可空可空非空非空必填相对路径，默认指向暂无信息的图片产品信息表（Phone）如REF_Ref37949463\h表32所示，保存了所有产品的参数信息，将品牌独立成为另外一个表以方便在数据库层级加速品牌的检索条件。表STYLEREF1\s3SEQ表\*ARABIC\s13评论信息表：PhoneComment属性名名称类型是否允许为空备注id编号bigint(20)非空自增，主键content内容varchar(50)非空create_timeauthor_idphone_id创建时间作者产品varchar(50)int(11)int(11)非空非空非空自动获取系统时间User表，外键Phone表，外键评论信息表（PhoneComment）如REF_Ref37949481\h表33所示，用于保存登录用户在产品详情页下发表的评论信息。表STYLEREF1\s3SEQ表\*ARABIC\s14品牌信息表：Brand属性名名称类型是否允许为空备注id编号bigint(20)非空自增，主键name品牌名称varchar(50)非空品牌信息表（Brand）如REF_Ref37949548\h表34所示，用于保存所有产品的品牌，为了加速以及方便小程序端较为常用的品牌检索而创建。关键技术分析系统开发及测试的运行环境开发系统：Windows11。开发工具：Pycharm、VSCode、微信开发者工具后台测试环境：Windows11（Edge）、macOSMonterey（Chrome）。微信小程序测试环境：Windows11（开发者工具）、HarmonyOS2.0.0（微信8.0.21）、iOS15.3.1（微信8.0.20）系统架构：Django+MySQL+DRF+小程序MINA。系统相关技术介绍requests及BeautifulSouprequests库是Python中用于网络请求方面的库，用于模拟用户访问并获得对应url网址页面中的html或者json等数据，使用简单、高效、便捷。BeautifulSoup库是一个可以解析html或者xml文档的Python库，提取完成后可以通过Python语言中利用html选择器的方式获取想要的数据，大大降低了从复杂的html页面中提取数据的难度，方便了数据的获取。DjangoDjango是一个以Python为开发语言的开源Web框架。在遵循传统JavaWeb等MVC框架的基础上，其采用了MTV的开发模式，即模型（数据层），模板（表现层），视图（业务层）。其中，在模型层，Django采用了ORM模型，即对象-关系映射模型。通过在model中建立对象即可轻松建表，同时，也提供了大量的增删改查的方法，对应的方法能够自动地将对应操作转化为对应的SQL语句。通过ORM模型，我们可以非常简单的对后台数据库执行操作，而不用自己书写复杂的SQL语句，降低了开发的负担。Django还有一个名为DjangoRESTframework(DRF)的一个RESTful风格API框架，利用这个框架可以方便地打通小程序后Django后台的数据交互问题，实现前后端分离，为以后的开发维护留下了大量的空间。MySQLDjango中的默认数据库为SQLLite3，其实在本项目中已经足够使用了，但是为了后续迁移的方便，在本项目中还是采用了MySQL作为数据存储的工具。MySQL是Oracle公司旗下当前最流行的关系型数据库之一，从MySQL5.5版本以后，默认支持InnoDB引擎，支持了ACID事务，也支持索引。同时，MySQL是一个开源数据库，因此成为了很多人的数据库的首选。微信小程序MINA框架MINA是微信官方提供的开发框架，通过微信官方开发者工具，可以看到每个界面都是一个page，共有四种类型的文件，分别为js文件，用于实现业务的逻辑；wxml文件，用于实现页面的渲染；wxss文件，用于控制渲染的样式；json文件，用于配置当前页面的组件。通过在js中利用官方提供的wx.request方法，可以得到类似ajax的数据交互体验，获取api中获取到的数据，用于前端渲染。整体得到了一个类似于h5的开发体验，易于上手。系统关键技术介绍数据获取与预处理在系统上线运行之前，首先要获取足够多的产品数据，并将其导入数据库，总体流程如REF_Ref100416037\r\h图4-1所示。数据获取与预处理流程图访问中关村在线首页可以查看所有手机的列表信息，为了获取更多参数，需要在首页第一次进行数据爬虫，获取所有产品的具体参数所在的url地址。核心代码如下所示：def

get_res(url):

try:

r

=

requests.get(url,

headers=hd)

r.encoding

=

r.apparent_encoding

demo

=

r.text

return

demo

except:

print('connection

error')

time.sleep(10)

get_res(url)

whd

=

''

hf_list

=

[]

for

num

in

range(1,

33):

#

total

33

pages

of

list

url

=

'/cell_phone_index/subcate57_0_list_1_0_4_1_0_{}.html'.format(num)

soup

=

BeautifulSoup(get_res(url),

'html.parser')

cs_tag

=

soup.select(

'body

>

div.wrapper.clearfix

>

div.content

>

div.list-box

>

div

>

-intro

>

ul

>

li:nth-child(8)

>

a')

for

web

in

cs_tag:

hf

=

whd

+

web['href']

hf_list.append(hf)

print(num)

df

=

pd.DataFrame({'cs_href':

hf_list})

获取到所有产品参数的url链接后，进行第二次数据爬虫，对每个界面的数据进行获取并记录。关键代码如下所示：cnt

=

1

for

url

in

urllist:

soup

=

BeautifulSoup(get_res(url),

'html.parser')

name_tag

=

soup.select('body

>

duct-model.title.clearfix

>

h1')

brand_tag

=

soup.select('#_j_breadcrumb')

print(name_tag[0].get_text())

print(brand_tag[0].get_text())

dict

=

{}

dict['产品名']

=

name_tag[0].get_text()

dict['品牌']

=

brand_tag[0].get_text()

for

i

in

range(0,

100):

csn_tag

=

soup.select('#newPmName_{}'.format(i))

csd_tag

=

soup.select('#newPmVal_{}'.format(i))

if

len(csn_tag)

==

0:

continue

for

csn,

csd

in

zip(csn_tag,

csd_tag):

dict[csn.get_text()]

=

csd.get_text()

ndf

=

pd.DataFrame(dict,

index=[1])

df

=

df.append(ndf,

ignore_index=True)

print(cnt)

print(df)

cnt

+=

1

print(df)

获取到参数数据后，显然存在大量数据并不符合我们的要求，所以要进行数据处理的工作以得到规格化的数据，这里采用正则匹配的方式清除干扰，同时对不符合要求的数据进行删除。这里展示部分字段的处理逻辑：data["产品名"]

=

data["产品名"].str.replace(r"参数$",

"")

data["CPU型号"]

=

data["CPU型号"].str.replace(r"手机性能排行>$",

"")

data["CPU型号"]

=

data["CPU型号"].str.replace(r"更多.*$",

"")

data["电商报价"]

=

data["电商报价"].str.replace(r"^.*?￥.*?(?=￥.*)",

"")

data["电商报价"]

=

data["电商报价"].str.replace(r"^.*?￥.*?(?=￥.*)",

"")

data

=

data[~data['电商报价'].isin(['预约抢购'])]

data["电商报价"]

=

data["电商报价"].str.replace(r"^￥",

"")

data["分辨率"]

=

data["分辨率"].str.replace(r"像素.*$",

"")

管理员后台系统管理员后台系统由完整的Django框架完成，前端展示采用DjangoTemplate完成，前后端融合开发。管理员对产品数据进行增删改查的业务流程图如REF_Ref100420614\r\h图4-2所示。管理员后台流程图数据库建立完成以后，将REF_Ref100428735\r\h4.3.1中最后所得的规格化数据库导入数据库。由于数据量较大，因此在产品列表页加入了搜索和分页的功能。核心代码如下。@login_required(login_url='/phone/login/')

#

未登录重定向回登录界面

def

phone_list_view(request):

search_word

=

request.GET.get('search',

None)

all_phones

=

Phone.objects.all().order_by("id")

if

search_word:

all_phones

=

Phone.objects.filter(Q(name__icontains=search_word)|

Q(phone_type__icontains=search_word)|

Q(brand__name__icontains=search_word)).order_by("id")

if

not

all_phones:

return

redirect("phone_home")

current_pagnum

=

request.GET.get('page',

'1')

paginator

=

Paginator(all_phones,

9)

#

Django

官方分页工具

current_phones

=

paginator.page(number=current_pagnum)

return

render(request,

'phone/phone_home.html',

{

'current_phones':

current_phones,

'num_pages':

paginator.num_pages,

'search_word':

search_word,

'current_count':

paginator.count,

'current_page':

current_pagnum,

})

其余后台部分代码受篇幅限制，本文不做过多展示，可以在附件中进行查看。用户微信小程序系统基于微信小程序的框架以及开发限制，这里采用了前后端分离的方案，并没有采用微信小程序提供的云数据库进行数据存储，而是选择了调用本地的MySQL数据库。后期若有需要真正投入使用仅需将后台Django程序在远程服务器上运行，然后在小程序的全局变量中更改对应的服务器IP地址即可直接投入使用。普通用户端小程序的添加评论业务流程如REF_Ref100419434\r\h图4-3所示，微信小程序添加评论流程图在产品详情页点击添加评论的按钮后会根据登录情况进行分界面的跳转，业务逻辑代码实现如下所示：bindAddComment:

function

(e)

{

if(!this.data.hasUserInfo){

wx.navigateTo({

url:

'/pages/login/login',

})

}else{

console.log('/pages/comment/comment?phone='

+

this.data.phone_

+

"&userid="

+

this.data.userInfo.userid)

wx.navigateTo({

url:

'/pages/comment/comment?phone='

+

this.data.phone_

+

"&userid="

+

this.data.userInfo.userid,

})

}

},

由于微信小程序没有session机制，为了判断当前用户的登录状态，需要调用微信小程序的本地存储能力，在用户登录完成后，将用户信息写入本地存储，每次小程序启动时，都将从本地存储中读取相应的数据。若能够读取到，则说明当前为登录状态，若未能获取对应字段，说明当前状态未登录，当前用户身份为游客。登录的核心业务逻辑如下所示：formSubmit:

function

(e)

{

console.log(e.detail.value)

var

dataInfo

=

e.detail.value

if

(!dataInfo.username

||

!dataInfo.password)

{

wx.showToast({

title:

'用户名或密码为空！',

icon:

'none'

})

return;

}

wx.request({

url:

app.globalData.serverIp

+

'api/wxlogin/',

data:

{

"username":

dataInfo.username,

"password":

dataInfo.password

},

method:

"POST",

success:

(result)

=>

{

console.log("success")

if

(!result.data.status)

{

wx.showToast({

title:

result.data.error_message,

icon:

'none'

})

return;

}

wx.showToast({

title:

"登录成功！",

icon:

'none'

})

app.globalData.currentUserInfo

=

{

"userid":

result.data.userid,

"username":

dataInfo.username

}

wx.setStorageSync('userinfo',

{

"userid":

result.data.userid,

"username":

dataInfo.username

})

wx.navigateBack()

},

fail:

(res)

=>

{

console.log("fail")

},

complete:

(res)

=>

{

},

})

},

在全局的app.js文件的onLaunch方法中，加入如下代码，即可实现打开小程序时的登录情况判断，将用户信息读入内存，加速各个环节的判断，避免反复调用存储造成系统性能降低。const

currentUser

=

wx.getStorageSync('userinfo')

||

null

this.globalData.currentUserInfo

=

currentUser

为了提高用户在选择产品时的选择效率，因此构建了一个二级菜单。一级菜单的内容为所有产品的品牌。在进入产品对比的选择界面时，小程序端会向后台发送请求，得到品牌-产品的json数据。选择品牌后，二级菜单将会自动切换为此品牌的所有产品，方便用户筛选。实现的关键代码如下如下：bindMultiPickerChangeA:

function

(e)

{

var

result

=

e.detail.value;

(result);

this.setData({

is_selectedA:

true,

infoA:

this.data.sourceFourth[result[0]].children[result[1]]

})

},

removeA:

function

(e)

{

console.log("removeA")

this.setData({

is_selectedA:

false

})

},

//选择列变更时，处理下级数组变更

bindMultiPickerColumnChange:

function

(e)

{

var

column

=

e.detail.column;

var

index

=

e.detail.value;

var

array

=

this.data.arrayFourth;

if

(column

==

0)

{

array[1]

=

array[column][index].children;

this.setData({

arrayFourth:

array

});

}

else

if

(column

==

1)

{

//最后一列不处理

}

},

同时需要在后端api方面给予数据的支持，实现代码如下：class

WxGetSelectInfoView(APIView):

def

get(self,

request,

*args,

**kwargs):

brand

=

Brand.objects.all().values_list("name",

flat=True)

all_brands

=

list(brand)

branddict_list

=

[{"name":

item,

"children":

None}

for

item

in

all_brands]

print(branddict_list)

for

name

in

branddict_list:

all_phones

=

Phone.objects.filter(brand=name['name']).values()

name['children']

=

list(all_phones)

print(branddict_list)

return

Response({"status":

True,

"select_dict":

branddict_list})

其余用户微信小程序端的实现代码部分由于篇幅限制就不在本文中进行阐述，可以在附件中进行进一步的了解。系统功能介绍管理员后台系统登录页在浏览器中输入对应的后台管理网址，若未登录，所有界面都会被重定向到登录界面，管理员只有通过登录Django超级用户之后方可进入后台管理界面。登录页面如REF_Ref100427170\r\h图5-1所示：后台管理员登录界面产品列表页登录完成后，系统将会自动跳转到产品列表页，如REF_Ref100427842\r\h图5-2所示。产品列表页上方搜索按钮集合了品牌、产品名、手机类型三个字段的模糊搜索，例如：搜索“华为”即可出现如REF_Ref100428461\r\h图5-3所示的结果。搜索结果列表页列表页底部含有分页功能，如REF_Ref100428554\r\h图5-4所示。列表页底部的分页新增产品如果资讯网站的数据更新不大，管理员也可以不需要再运行爬虫更新数据，可以的点击上方新增产品的按钮即可实现手动新增单个产品的内容，部分界面如REF_Ref100429776\r\h图5-5所示新增产品产品详情界面在产品列表界面点击查看产品详情的按钮即可跳转到对应的产品详情界面，如REF_Ref100429924\r\h图5-6所示。产品详情界面删除手机在产品详情界面点击删除手机的按钮之后，会弹出二次确认框，点击确认即可删除该产品并返回列表页，如REF_Ref100430462\r\h图5-7所示。删除确认框编辑参数点击编辑参数即可跳转到产品编辑的界面，界面风格和REF_Ref100430542\r\h图5-5新增产品界面相同，但是可以自动填充当前产品的信息。用户微信小程序数据平台产品列表页打开小程序后将自动展示所有产品的列表，并按照品牌分类。如REF_Ref100431263\r\h图5-8所示。小程序产品列表页点击左侧品牌标签即可切换右侧手机信息，如REF_Ref100431516\r\h图5-9所示。切换左侧品牌产品详情页点击右侧任意产品即可进入该产品的详情页，如REF_Ref100431674\r\h图5-10所示。产品详情页产品评论将产品详情页拉到底部，即可查看当前产品的所有评论。如REF_Ref100431965\r\h图5-11所示。产品评论点击最下方评论，若当前用户已登录，会跳转到添加评论的界面，如REF_Ref100432168\r\h图5-12所示。添加产品评论输入内容并点击提交后即可返回产品详情页，并展示最新的评论。如REF_Ref100432277\r\h图5-13所示。测试添加评论若点击添加评论时当前用户并未登录，将会自动跳转到登录界面，如REF_Ref100434265\r\h图5-14所示。用户登录界面产品对比点击下方tabbar中的对比按钮即可进入产品对比的选择界面，如REF_Ref100432511\r\h图5-15所示。产品对比选择分别点击两个按钮，将会分别弹出二级选择菜单，如REF_Ref100432629\r\h图5-16所示。二级选择菜单选择完毕两个产品以后，将会出现开始对比的按钮，如REF_Ref100432745\r\h图5-17所示。选择完毕后出现按钮点击开始对比按钮，即可进入产品对比详情界面，如REF_Ref100432829\r\h图5-18所示。产品对比详情产品信息排行返回主页，点击下方排行按钮，即可查看所有手机按照价格、屏幕尺寸等信息的升序排行以及降序排行结果，以价格降序排行为例，如REF_Ref100432973\r\h图5-19所示。价格排行降序个人信息管理若当前用户为游客，即未登录状态，点击tabbar中的“我的”模块，会显示登录和注册两个选项。点击注册按钮，输入账号以及两遍密码之后，符合用户名唯一以及两次密码相同的条件后即可实现注册，如REF_Ref100434058\r\h图5-20所示。注册界面同样点击登录按钮即可进入登录界面，界面和点击评论时的按钮相同，如REF_Ref100434265\r\h图5-14所示。结语系统总体评价本系统包含了后台管理员UI界面，增删改查的模块。前台用户数据展示平台，微信小程序的界面，对程序员来说做到了开发方便、便于维护、模块可扩展。对用户来说做到了功能丰富、体验流畅。通过集合中关村在线网