《基于Vue和express的粉丝商城的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于Vue和express的粉丝商城的设计与实现.docx（32页珍藏版）》请在课桌文档上搜索。
1、本科毕业论文（设计）论文题目：基于VUe*口express的粉丝商城的设计与实现最近几年，随着互联网的不断发展，网上商城也随之成为我们生活的一部分，它为广大消费者提供了一种全新的购物方式，极大地方便了人们。网上商城作为一个虚拟的商店，它具有很多新特点：就卖家而言：它的营业成本与传统商店相比要低许多，它不用需要额外支出租房的费用,而且网上商城里面的产品都来源于各个行业的初始生产厂家，中间省去了很多流程，成本就会降低许多；而就买家而言：他们无需花费额外的精力去到线下商店进行商品的挑选，这样不仅会节省他们的时间，而且能够提高他们的办事效率，以最少的时间、最少的精力和最低的价格购买自己喜欢的东西何乐而
2、不为呢？当人们不用走出家门就能得到自己想要的商品时,就已经体会到了网上商城的优越性。网站的整体规划、体系结构设计、后台的搭建都是在nodejs环境下进行的，主要的研究内容是以HTML、JavaScript、CSS作为基本的编程语言以及Express、VUE3.0相结合的Web网站开发，VUe是JavaSCriPt的渐进框架。所谓渐进，就是将每个结构分成不同的层次，每个层次都是任选的，不同层可以用其它的方式来替代。此外还使用了MySql作为后端数据存储的数据库。前端网页着重以CICmCnt-Ui为主要布局，主要使用WCbStorm作为代码编程软件。关键词：网上商城；VUE；express；粉丝A
3、bstractInrecentyears,duetothecontinuousdevelopmentoftheInternet,onlineshoppingmallshavebecomeapartofourlife,itprovidesanewwayofshoppingforthemajorityofconsumers,greatlyconvenientpeople.Onlinemallasavirtualstore,ithasalotofnewcharacteristics:intermsoftheseller,itsoperatingcostismuchlowercomparedwitht
4、hetraditionalstore,rentitdontneedtheextraspending,andtheinsideoftheonlinemallproductsoriginatefromoriginalmanufacturersinawiderangeofindustries,middlesavesalotofprocess,thecostwillreducealotof;Asforthebuyers,theydonotneedtospendextraenergytoselectgoodsinofflinestores,whichwillnotonlysavethemtime,but
5、alsoimprovetheirefficiency.Whynotbuywhattheylikewiththeleasttime,theleastenergyandthelowestprice?Whenpeoplecangetthegoodstheywantwithoutgoingoutoftheirhouse,theyhaverealizedthesuperiorityofonlineshoppingmall.Theoverallplanning,architecturedesignandbackgroundconstructionofthewebsiteareallcarriedoutun
6、dertheenvironmentofNode.js.ThemainresearchcontentisHTML,JavaScript,CSSasthebasicprogramminglanguageandthewebsitedevelopmentcombinedwithExpressandVUE3.0.VueisanevolutionaryframeworkforJavaScript.Byprogressiveness,eachstructureisdividedintodifferentlevels,eachlevelisoptional,anddifferentlevelscanberep
7、lacedbyotherwaysMySqlisalsousedasthedatabaseforback-enddatastorage.Thefront-endwebpagefocusesontheelement-UIlayoutandmainlyusesWebstormasthecodeprogrammingsoftware.KeyWords：Onlinemall;VUE;Express;fans;node.js摘要IAbstractII目录III1绪论11.1 选题背景及意义11.2 开发现状12开发工具及相关技术介绍22.1 VSCOde编辑器22.2 JavaScript语言22.3 M
8、ySQL数据库22.4 JSON概述22.5 Express框架23系统分析43.1 可行性分析43.1.1 经济可行性43.1.2 技术可行性43.1.3 操作可行性43.2 功能性需求分析43.3 业务流程分析53.4 数据流程分析64系统设计84.1 系统架构设计84.2 系统功能模组设计84.3 数据库设计104.3.1 概念模型设计104.3.2 数据库逻辑设计10433数据库表设计115系统实现155.1 用户登录的实现155.2 系统前台实现165.2.1 首页的实现165.2.2 用户注册的实现165.2.3 商品详情页面的实现175.2.4 评价的实现185.2.5 商品购买
9、的实现185.2.6 个人订单的实现295.2.7 粉丝交流的实现205.3 系统后台实现215.3.1 用户管理的实现215.3.2 商品管理的实现21533订单管理的实现226系统测试246.1 系统测试过程246.2 测试结果257总结与展望26参考文献27致谢28第1章绪论1.1 选题背景及意义网购正日益成为人们的生活必需品，网购也为我们提供了很多便利，而这种便捷的购物体验是普通线下购物无法比拟的。随着因特网逐渐进入我们的生活，线上购物也随之慢慢兴起，也给广大消费者们带来了一个新的购物方式。同时也为广大消费者提供了一种全新的购物方法。上海经济学者齐晓斋对此进行了分析，结果表明，相对于游
10、街商铺，无商铺的零售业无疑是优势。而对于现如今大量涌现的还在上学或者上班的“追星族”来说，去线下购买明星周边和相关的娱乐杂志是很不现实的，因此，粉丝商城的开发就实现了粉丝们可以在线购买明星周边、查看明星资讯的诉求，这样不仅仅是减轻了“上班族”和“学生党”的压力，还节省了大量的时间，这也是我想开发这个线上粉丝商城的初衷。管理员可以随时随地的查看订单的状态，也可以无论何时何地，只要有电脑就都可以对商品进行上新和撤架的操作，用户可以通过自己的喜好对商品进行分类查看，也可以通过搜索关键字的方式快速找到自己喜欢的商品，这样就实现了“追星族”们足不出户也可以拥有明星周边的目的。1.2 开发现状由于近年来网
11、上商城的盛行我们不难发现：在中国，以前的购物方式都用的是传统的线下门店购买的方式，而线上购买的方式似乎更能满足市场的需求。截止目前，有一些大家都比较熟悉的比如像淘宝、京东、拼多多等这些都是现在比较流行的线上购物网站。但是尽管线上商城有这么多的好处，它的有些缺点也是无法规避的，比如说：用户不能在付完款后立刻收到商品,在付款和确认收货之间会存在一定的时间需要商家发货和物流在路上的时间,不过对于不是急需的商品来说这些等待的时间成本也是可以忽略不计的。经过这些年的发展，大量被消费者所喜欢的线上商城已经普及到了国内外。这些线上商城的功能都是相对比较完善的，如它可以进行最基本的用户的注册和登录、产品的搜索
12、、订单的管理、商品的细节展示以及用户与客服之间的在线交流等。如今，互联网的广泛使用也在一定程度上影响到了国内外线下购物中心的发展,但是只通过线上平台在线打字，就可以随时管理商品和订单，是一件多么好的选择呀！通过展示商品内容和发布相关资讯，这样大大的增加了消费者在线购买的欲望。第2章开发工具及相关技术介绍2.1VSCode编辑器VScode是一个受到广大开发者们喜爱的一个轻量级编辑器，它分别可以编辑文本和代码，由于其可以跨平台的特性，它同时也支持诸多不同的热门操作系统。VScode编辑器除了简洁美观的外表之外,还有着许多强大的功能为开发者在开发过程中提供便利，如分页阅览，多个项目切换自如等。代码
13、缩略图可以帮助你快速阅读整体代码格式,还可以下载各种各样的插件，帮助开发者自定义真正适合自己的编辑器。2. 2JavaScript语言JavaScript是一种高级的程序编写语言，主要用来编写HTML网页中的数据交互行为。同时JaVaSCriPt也提供了各种语法来实现对数组、文本和正则表达式等。JavaScript拥有自己的语言和基本对象(ECMASCriPt)以及特有对象模型，用来表述浏览器和网页内容交互的APIo而且JaVaSCriPI也被运用在许许多多的地方：它被Chrome.IE等许多主流浏览器和世界上大部分网站所使用。2.3 MySQL数据库MySQL作为一种开源的关系型数据库，它主
14、要是通过将数据保存在不同的表中来对数据进行存储的，这样的方式不仅提高了数据取用时的灵活性，也为数据的存储提供了便利，而且它的数据存储所占的内存相较于其他数据库来说时比较小的，它所使用的是咱们最常用的结构化查询语言(SQL),MySQL也因为它速度快、整体占有费用低、体积小和开放源码的优点而收到许多程序员的青睐。2.4 JSON概述JSON是一种轻量级的数据交换格式。它是在JS的对象和数组的基础上演变来的，并且，它是以文本形式储存和显示信息数据的，JSON由于它简洁、清晰的层级结构是一种很好的数据交换语言，这也使阅读和编写有很大的好处，同时也提高了网络的传输效率网。JSON的处理器有很多，而其中
15、FastJson是性能比较好的一种Nodejs语言实现的JSON解析器和生成器，是阿里的开源框架，同时也得到了很多企业的喜欢。2.5 Express框架EXPreSS是在node,js平台上开发出来的Web框架，它提供了一系列功能，能够帮助我们创建大量的网络应用程序和大量的手机应用程序。但Express并没有重新绘制node,js现有的功能，而是将其扩展到了基于node.js的Web应用程序，这是一个非常便利和简单的框架EXPreSS架构具有以下三个主要特征：可以设定用于响应HTTP请求的中间件，定义用于实现HTTP请求的路由表，并将参数传递给模板，从而动态地呈现HTML页面(11第3章系统分
16、析3.1 可行性分析3.1.1 经济可行性在系统开发和设计阶段，没有借助到外力，都是由本人独自完成的，这样在人力方面就得到了极大的节省,在物力方面,系统在开发的过程中都是在一台笔记本上完成的，没有用到其他的工具，这样也会节省许多的物力成本。整个网络的部署也是由我独自一人完成的，所以不存在其他的额外成本。3.1.2 技术可行性粉丝商城这个系统的开发主要是在Nodejs环境下进行的，所以只要有一台计算机就可以完成，而且它所占用的内存和其他的编程语言相比较来说是很少的，而且我所使用的数据库是所占内存比较小的MySQL数据库作为数据库，这样就会使得整个系统在开发和设计理论上都是符合技术可行性的。因此上
17、述的这些技术都能更好地确保整个系统高效的开发。3.1.3 操作可行性粉丝商城系统的操作界面都是简单明了的，可以直接看到它的各个功能在哪里，采用的也是比较常见的窗口界面来登录系统，通过电脑就可以访问，用户只要使用过电脑都能对该系统进行简单的访问。该系统用到的是比较人性化和完善化的B/S结构开发的，这样的系统的一个比较好的优势就是会使用户在操作时更加的简洁方便容易上手。3.2 功能性需求分析建立此在线粉丝购物商城的首要目标是为了让广大的粉丝朋友能够更加有效的进行明星周边的购买以及查看一些明星的相关资讯。通过该系统，实现了用户与商户之间的交易，便于管理员进行管理，提高了管理员的日常工作效率，减少了不
18、必要的管理费用。在这个系统中，管理员既可以管理用户的身份，也可以管理自己的身份。在这个系统里，使用者可以看到各种商品的详细介绍，各种商品的实物图，价格等等，让用户能够更快的选择自己喜欢的商品。商品完成挑选后，用户可以把它加入到自己的购物车里，如果顾客在支付之前改变了主意，不想再买它了，在确认订单页可以选择不下单购买。当用户选定要购买的物品后，系统会将订单信息提交给后台系统，后台系统还将自动产生一个随机的的订单号反馈给用户和管理员，这不仅便于管理员管理订单，也便于用户查询自己的订单。管理员在系统中的作用很大，再者，系统中保存的商品和用户的信息都是条例清晰的，管理员也能够很快地找到那些用户和商品是
19、需要修改的。用户用例图如图3.1所示。个人订单粉丝交流用户后援会在线评论商品购买购物车联系我们图3.1用户用例图管理员用例图如图3.2所示。订单管理用户管理后援会管理用者管理管理员粉丝交流管理评论管理商品管理图3.2管理员用例图3.3 业务流程分析该系统的流程主要是针对用户，管理员，商品和订单的关系进行分析。系统业务流程图基本上都是按业务的实际处理的步骤和过程进行绘制的，是一种“流水账”，通过图表的形式来反映业务流程，绘制“流水账”有助于开发人员整理和优化业务流程1。在整个系统的流程中，最重要的是商品的买卖和订单的处理，用户可以在粉丝在线商城中查看不同的功能模块，并且将所需的物品加入到购物车中
20、，用户到购物车查看已加购的物品，确认购买，然后确认信息，同一时间，系统管理员负责后台管理，同时也负责订单的发货。系统业务流程图如图3.3所示。图3.3系统业务流程图3.4 数据流程分析数据流程图，也被称为DFD,它主要是使用图形方法来描述系统的逻辑功能，系统中的数据信息的逻辑流以及逻辑转换的整个过程。它是用于结构分析的关键表达专用工具。系统数据流图如图3.4所示。图3.4系统数据流图第4章系统设计4.1 系统架构设计架构就像我们要建造一座大楼的构架一样。体系结构类似于工程结构。该系统采用了五个层次的体系结构。粉丝商城的系统架构图如下图4.1所示。图4.1系统架构图4.2 系统的功能模组设计对该
21、系统进行需求分析，可以得到其基本的功能要求，取决于各个模块的功能，把这个系统划分成不同的功能模块。系统功能结构如图4.2所示。粉丝商城管理后援会模块用户 模块订单 模块购买 模块商品 模块查询发布田询注册登录订单管理在线付款订单审核个人订单订单生成购物车查看商品购买更新管理下架上架图4.2系统功能结构图前台的功能主要是为用户登录，注册，展示和检索产品，购买和浏览产品，查看订单等。(1)在粉丝商城里，用户可以在明星周边挑选自己喜欢的物品。(2)如果用户对商品的类型和品牌有了准确的目标，可以通过搜索框来查找自己想要的东西，这是查询商品的功能。(3)在注册时用户可以填写自己的个人资料，已经有账号的用
22、户也可以在个人信息这个功能模块下对自己的信息进行修改，主要包括的信息有：姓名、性别、电话和密码等这是个人信息模块。(4)密码修改模块包含了三种功能，分别是用户的原始密码、新用户密码和密码的确认。(5)用户在购买产品后，会产生订单，在付款后订购模块中的操作就会变成已付款。查看尚未发货的订单，一旦订单被已发货，则会显示在已发货的模块中，一旦收到商品,则会显示在已完成的订单模块中，以上是订单模块。(6)订单评价:用户可以对已经完成的订单进行评价，评价以后这条评价会出现在与该商品相关的页面。后台管理系统主要包括：登录，商品的上架和下架，商品信息的查看和修改，订单管理和会员管理这几个功能模块。(1)该模
23、块主要用于添加一些新的商品，包括增加商品名、商品种类和对商品介绍,还有当前所剩的商品数量，也可以增加商品的单价和商品图片，以上是后台管理员增加商品的模块。(2)可以看到所有的物品信息，可以在任何时候更改物品的信息，也可以将已售出的物品下架这是商品管理模块。（3）订单从前台生成的，并将其传送给后台管理员，由管理员在后台修改定单的状态这是订单的管理。4.3 数据库设计4.3.1 概念模型设计概念结构设计是基于需求分析完成的，它把我们的分析成果归纳为一个概念，这对开发人员来说，使复杂流程变得简单容易得多，也可以让开发人员有更加快速的处理方式。系统E-R图如图4.3所示。图4.3系统E-R图如上图所示
24、，使用者在购物时所进行的行为是一对多的，这意味着一个用户可以购买多件物品；管理员对商品的管理也是一对多的；由于每个使用者只能使用一辆购物车,因此使用者和购物车的关系是一种一对一的；另外,货物与购物车是一种多对多的关系，每一种产品都可以在不同的顾客的购物车中出现,并且可以在每一辆购物车中增加更多的产品；用户和自己的订单是一对多的关系，也就是说每个用户都可以有许多的订单;管理员和商品的上架、下架的关系则是一对多的。4.3.2 数据库逻辑设计在此基础上，从系统的实体与属性出发，结合数据设计的基本思路，以下详细介绍了该系统的逻辑设计内容:商品（商品编号，商品名称，封面，种类，品牌，规格，价格，单限，库
25、存，详情）。粉丝后援会（后援会编号,后援会名称，封面，地区，群体人数，微信群号，成立时间）。商品种类（商品种类编号,添加时间，名称）。明星资讯（资讯编号,标题，类别，内容，图片）订单（订单编号,商品名称，购买数量，价格，总价格，支付类型，状态，地址,电话，收货人，商品品类型，下单时间）。购物车（购物车编号，商品编号，购买数量，总额，购买用户，购买时间）。4.3.3 数据库表设计接下来就是把数据库的逻辑设计转换成特定的数据库表格下表显示了粉丝购物中心数据库中各个表格的设计方案。每一张表在数据库查询中都有相应的表。（1） cart（购物车）表的设计方案如表4.3.3.1所示。表4.3.3.1Car
26、t（购物车）表序号字段名称字段类型大小允许为空最大长度备注1idInt4102addtimeDateTime8193tablename10737418232554useridInt4105goodidInt4106goodname10737418232557picture10737418232558buynumberInt4109priceFloat81510discountpriceFloat81511goodtype1073741823255（2） forum（帖子）表的设计方案如表4.332所示。表4.3.3.2forum（帖子）表序号字段名称字段类型大小允许为空最大长度备注1idInt
27、4102addtimeDateTime8193title10737418232554content10737418232555parentidInt4106useridInt4107username10737418232558isdone1073741823255（3）houyuanhui（后援会）表的设计方案如表433.3所示。表4.3.3.3houyuanhui（后援会）表序号字段名称字段类型大小允许为空最大长度备注1idInt4102addtimeDateTime8193houyuanmingcheng10737418232554fengmian10737418232555diqu107
28、37418232556quntirenshuInt4107Weixinqunhao10737418232558Jiarutiaojian10737418232559ChenglishijianDateTime819(4) Iianxiwomen（联系我们）表的设计方案如表4.3.3.4所示。表4.3.3.4IianXiWOmen（联系我们）表序号字段名称字段类型大小允许为空最大长度备注1idInt4102addtimeDateTime8193Wangzhanmingcheng10737418232554fengmian10737418232555gongzuoshijian1073741823
29、2556jianlitoudi10737418232557tougaorexian10737418232558banquanshengming10737418232559Shangwuhezuo107374182325510Wangzhanjianjie1073741823255(5) Iningxingzhoubian(明星周边)表的设计方案如表433.5所示。表4.3.3.5Cart（购物车）表序号字段名称字段类型大小允许为空最大长度备注1idInt4102addtimeDateTime8193Chanpinbianhao10737418232554Chanpinmingcheng1073
30、7418232555fengmian10737418232556chanpinfenlei10737418232557pinpai10737418232558guige10737418232559Chanpinxiangqing107374182325510clicktimeDateTime81911clicknumInt41012priceFloat81513vippriceFloat81514OnelimittimesInt41015alllimittimesInt410(6) orders(订单)表的设计方案如表433.6所示。表4.3.3.6OrderS（订单）表序号字段名称字段类型大
31、小允许为空最大长度备注1idInt4102addtimeDateTime8193orderid10737418232554tablename10737418232555useridInt4106goodidInt4107goodname10737418232558picture10737418232559buynumberInt41010priceFloat81511discountpriceFloat81512totalFloat81513discounttotalFloat81514typeInt41015status107374182325516address10737418232551
32、7tel107374182325518consignee107374182325519logistics107374182325520goodtype1073741823255第5章系统实现5.1用户登录的实现用户登录网页，主要是供前台登录的。当使用者登录时，未注册的使用者可以先注册，然后再登录，而已注册的使用者，则可以直接输入帐号及密码登录。(1)登录界面如图5.1(1)所示。图5.1(1)登录界面(2)登录界面相关代码如图5.1(1)所不。forv.on(*Mbait(l(in)fWt(83data.field;Sf(vue.role.Itl)(if(N4t4.role)(14yr,m(,
33、teWftm三2,(tit:ZOM,ic0!，)“data.role.ro!%(o.tblMMM;Mtp.rqu*t(UtA.rol/loftn,gt,Ut.gU0E)lyr.g(ift,(ti:M!corn62/量%氏lJlstcre.etItM,Tc*e,.re.token);VM21CHMeK(typwryrolejcM).jttrCtitU,)auMeflnd)l”(rolcwjquery(,frole:checM*).Mtr(*title*);te】HU);/三tlf*ttk4)torr.etttM.dU2】.);k41Stcrr.%rt11le*f4U.ro)e)i再尸8秣33Ur
34、y.3Ne4jMaa(d4t4.role,r5ioc,e*t,)fmtion(r用ZdlaBtor.Mitw(*trU*es.W.ld);if(rt.dt.vip)(IglNSfecetxueCf.M.dtJ.vlp)s图5.1(2)登录界面代码5.2系统前台实现5.2.1 首页的实现用户前台的首页主要是为了能使用户一眼就能找到所需要的模块,所以这个模块的页面设计是一个很简洁大方的设计，主要以蓝色为主色调。首页界面如图5.2.1所示。粉丝商城苜页 明星冏边 后遗会 联系我们 粉丝交流 明星资讯个人中心后tf3 瓶车 EeKRemmend明星周边推荐图5.2.1首页界面5.2.2 用户注册的实现
35、用户注册网页主要是为用户进行注册的，在此网页上，用户需要填写帐号、密码、名字、联络方式等内容，并且各项信息都不能为空。用户也可以点击修改个人资料和密码。页面依旧是简洁大方的设计，用户注册界面如图522(1)所示。图522(1)用户注册界面(1)用户注册界面主要代码如图5.2.2所示：1 2 3 0bckgroundzlinear255,l)rgba(56,18292391),rgba(21%238,247.l)4 5 6 7 8 fomitemlabeh用户踩号da$s*NinputNv-if三*t4bleaae,yonghu*9 el-inputv-model-ruleFor.yo11ghu
36、zhangho-autl11 12 elinputv-odel-ruleFor.mimaautocooplete-*offplaceholder*三S*.ypw-passwordM2PlX;13 14 15 el*inputv-iodel*ruleFore.iiima2eaut16 17 fomitem1M1用户姓名i*class*input*viftibleiaee*yonghu,-18 19 221 delruleFor三.Iianxifrsi*autoco三plete*off*PIaCehOlderJ联系方式22 23 24 ilfl25 Kie26 27 28 29 30 31 lat
37、e32 3334 InportCMVaSB8fromM/a&$ets/j$/canvasbg-2.j$N;35 importN/assets/css/canvas-bg-2.css*图5.2.2(2)用户注册界面相关代码图5.2.3 商品详情页面的实现商品详情页面主要是展示一个具体商品的价格、库存、商品规格、商品分类、所属品牌等。(1)商品详情页面如图5.2.3所示。粉丝商城8GGbondMHB：40cm400n图5.2.3商品详情页面5.2.4 评价的实现顾客在购买完商品后，可以发表自己对产品的评价，也可以查看其他顾客的评价,根据产品的评价可以帮助顾客做好挑选产品的决策。商品评价界面如图5.
38、2.4所示。粉丝商城I防星J触后慢会联系我IEI粉丝交流明星资讯个人中心后台管理的翔早在钱客服晚.tond嫡：40cm40n后&E图5.2.4商品评价界面5.2.5 商品购买的实现该网页主要是为消费者所喜爱的周边产品而设计的。的操作。商品购买界面如图525(1)所示。后康会酸系我们给交流明星资讯个人中心后台管理的物车在线NtS.29.90.19.00粉丝商城图525(1)商品购买界面购物车界面如图525(2)所示。SHOP CART呐物乍Y19 00ee： 1.00图5.2.5(2)购物车界面5.2.6 个人订单的实现用户确认订单的网页，主要是让用户确认是否要购买在购物车中添加的商品。目的是为
39、了让用户再次确认订单的收货地址已经购买数量是否正确。订单提交界面如5.2.6.1图所示。粉丝商城选择收货地址CONFIRM/ORDER15101256137 V 清单列表tffi WOO 19.00确认下单总价：19.00图5.261订单提交界面模拟付款界面如图5.2.6.2所示。图5.2.6.2模拟付款界面5.2.7 粉丝交流的实现粉丝交流页面主要是展示系统中所有用户已经发布的帖子以及关于这些帖子的回复帖子，用户在该模块下可以发布一些想和其他用户交流的帖子，如商品的分享以及关于喜欢的明星的日常分享。也可以在其他用户的帖子下面进行跟帖回复。帖子发布界面如图5.2.7.1所示。粉丝商城粉丝滋丽：IMA网一物U文件3MLAIR式袤格GCA，4Byi三M内音图5.2.7.1帖子发布界面帖子评论界面如图527(2)所示。粉丝商城在国家话剧庆剧峰演出六坛 的线访进改自作家季宇的中小g B9),百包文白.m.咖*鱼文港.美设计生 X.灯凫设计黄棒.演员包JMWS松.田&.
