# WeChatApp **Repository Path**: sai_team/WeChatApp ## Basic Information - **Project Name**: WeChatApp - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2021-06-01 - **Last Updated**: 2021-12-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README **京西商城 小程序+SB开发手册** **小组成员: 陈耀伟405 甘建文410 李丁成415** **腾讯文档地址:https://docs.qq.com/doc/DUFBSQmlKQktQS1Rl** ## 一、项目分工 1. 小程序:陈耀炜 2. 后端:陈耀炜 3. 前端:陈耀炜 4. 数据库设计:陈耀炜 5. 数据爬取/表格导出/docker配置:甘建文 6. 其他:李丁成 ## 二、小程序端 ### 核心业务功能 首页,我的,购物车,下单,订单,搜索,商品详情,广告 ### 首页:商品列表和广告推送,index文件 #### 首页样式 ![](media/cee291570b831c9ac42d89f54c2dcd83.png) ![](media/f2a2a338a57438e33072cefb53cdc5de.png) #### 获取商品列表api ![](media/2fb185413551a33b776af139cf324076.png) ![](media/5e260c96eb27ccd645d038c9337223a5.png) 方法:post 参数:pageNum 商品页数 返回:json字符串;goodList:包含商品列表;totalPages,商品总页数 #### c)获取广告api ![](media/f58e69c6195319ce0ab0022d7dd30787.png) ![](media/ef22e1ba3e7b90156d2869b597cdfa8c.png) 方法:post 返回:json字符串,包含推送的广告信息 #### d)获取首页分类api ![](media/0e7e3ef2d7b573c6521702adc1de6ed3.png) ![](media/0a48aef5e66d85867217abd9168da8c8.png) 方法:post 参数:无 返回:json字串,包含分类数组 ![](media/ff1e6fe5aabf5bf16e0ec11f8bc2c67f.png) #### e)下拉刷新api:基本应用于所有列表,其余不在赘述 ![](media/4d6aea20f487a21d9563689cf61d460c.png) ![](media/84ce7ec6bf59ba77995e5b51eeea3088.png) 判断页数pageNum是否大于totalPages,若小于则调用获取商品列表api,并合并两个商品列表,pageNum+1。 ### 商品搜索:动态展示搜索目录,search文件 #### 动态获取搜索目录api ![](media/c338b9c6aca1d8d6a5c4b8ae0cade843.png) 方法:post 返回:json字符串,包含符合搜索关键字的商品列表search_list ![](media/055be3d73b42f00492e0cc2e85ff3342.png) #### b)获取搜索商品api ![](media/cdc6495f5e55b9293f688d5751ac6050.png) 方法:post 参数:pageNum,当前商品页数;keyword:查询关键词 返回:json字符串,包含 totalPages,符合查询条件商品总页数;pageNum,当前商品页数; good_list,商品列表: 同样包含下拉刷新功能 ### 商品详情:显示商品具体信息,goods文件 #### 获取商品详细信息(图片,价格,参数,介绍等)api ![](media/d27132bdf8314ed123bfe6b570271686.png) 方法:post 参数:id,商品的id 返回:json字符串,包含 good,商品价格,封面,介绍;goodslide,商品展示图;goodintro,商品介绍图;goodversion,商品版本 ![](media/4b8361938ef6f7eccae2d16d7b59f732.png) ![](media/e55a9d112607850f649e932d08a1449d.png) ### 购物车与下单 #### 添加购物车api,selectgood文件 ![](media/0c209431cac4f19c31f45b77f7dd41cf.png) > 从缓存中取得商品属性,并合并成一个购物车商品列表:attr_item放进缓存 ![](media/f6dd839fb4fc320dbe0ad83b95e92a23.png) #### 显示购物车api,cart文件 ![](media/aecb6c97d39d567b1769537ae5fc1c8d.png) > 从缓存中获取购物车商品列表 #### 下单api,pay文件 ![](media/bd3e63ac87c56a007868e2e8dac44ea1.png) > 方法:post > 参数:payList,付款的商品列表;receiverName,收货人姓名;mobile,收货人电话; > city,province,addressDetail,分别为收货人城市,省份和详细地址 > 返回:lockedMessage,判断用户时候支付成功,若用户账号被锁定,则禁止交易 ### 我的:订单,地址信息和注销,mine文件 ![](media/dc748316a8214f977cc3d56e968bedf5.png) #### 地址修改 > 修改地址api ![](media/b6909859147a62e3f1eab3942bd08ef4.png) > 检测输入是否为空且数据格式是否正确 ![](media/bb7926457ac181734c867c6ffe9131cb.png) #### 订单信息 ![](media/fd6c6bdfbaee3c009f2b2b43d9e9f9c1.png) > 订单信息获取api ![](media/fa47e3b0001f160ad1cc5b6498d472e0.png) > 方法:post > 参数:无 > 返回值:json字符串,包含 orderList,订单列表 ### 分类:显示所有商品分类,categories文件 ![](media/024fcbcd373c77c607af92222056f5a8.png) #### 获取所有分类的api ![](media/3271eb8507060d5f7fb80ec38d08c604.png) ![](media/68ff09569b299876256259eba5f17e16.png) > 方法:post > 参数:无 > 返回值:json字符串,包含 indexNav,商品分类列表 #### 按分类获取商品的api ![](media/62d7a78b948b024a688278e8c91f0329.png) > 方法:post > 参数:keyword,所选的分类;pageNum,商品当前页数 > 返回:json字符串,包含 goods_list ,商品列表;totalPages,商品总页数 > 包含下拉刷新,参考首页,不再赘述 ## 三、工程目录 ### 1.git仓库 > 仓库地址: ### 2.工程目录 因为前端,后端,数据库和微信小程序都是一人完成,所以没有构建多模块项目 ![](media/84d418da54cfa5a6d7ac047805bf164c.png) 静态资源(css,js,img等)放在resources目录下的static中 mybaitis的xml文件放在resources目录下的mybatis中 属性配置在resources目录下的.yml文件中 excepiton:自定义异常 pojo:实体类 security:springsecurity的相关过滤器和manager config:相关配置类 utils:相关工具类 controller文件中: WeChat\*\*的类是关于微信小程序的controller Admin\*\*是关于后台管理程序的controller ## 四、后台管理 ### 核心功能 > 商品管理:包括商品的详细信息,价格,版本等相关信息,可对商品重要字段进行排序,导出商品信息到Excel中 > 比较各商品的销售总量和销售额:用amcharts渲染柱状图和折线图 > 分类管理:添加和删除分类 > 广告管理:定制首页和其他页面的广告推送,热门分类等 > 用户管理:查看用户基本信息和相关的订单信息,对用户进行锁定和冻结等 > 订单管理:查看订单,可根据多个字段进行排序,导出订单信息到excel中 > 后台账号管理:修改密码,增加或删除子账号等 ### 项目框架 > 后端:springboot整合mybatis,springsecurity。 > 前端:thymeleaf模板 ## 五、微信授权登录 ### 1.流程图 ![](media/6313ccbc7f759312be0d99a38bbe19b5.png) ### 具体实现 #### a)springsecurity配置 ![](media/5c0f802b8d680aaaa21e871577a564d9.png) ![](media/bd33fe27b6eee017cca1a2bd546bc168.png) 在UsernamePasswordAuthenticationFilter前添加jwt认证过滤器 #### b)小程序向后台发送请求 > 调用wx.login方法 ![](media/49cf2aa2102cfde95a25f10f929839b3.png) #### c)后台处理登录请求 JwtAuthenticationTokenFilter检测请求没有携带token且url为/wechat/\*\*,则由WxAppletAuthenticationFilter向腾讯服务器请求sessionkey和openid,代码如下 ![](media/470161f3cd9b554b8ce1ae510682fc5c.png) 通过openid查询数据库,若不存在该用户则由WxAppletAuthenticationManager添加用户,代码如下 ![](media/63ba88b06720716f9476ecf0b7b272f5.png) 然后验证用户身份,由JwtTokenUtils根据用户信息生成jwt令牌返回给微信小程序,登录成功 ![](media/14e2124ad4ed52611d327d7ee34a2a00.png) ![](media/dd2966aad300748bdcbbb8e0df5451fd.png) 返回结果: ![](media/969fbf9239ff229fd3397017ff58b9ff.png) ## 六、后台功能 ### 管理员登录+腾讯防水墙 ![](media/8104c3e002ef198ef0d1205bce030fbb.png) ![](media/8fa3c7c3a9d16c2b6b3d452be32bbd42.png) #### springsecurity配置 ![](media/52b0136598c2242c762d71b8bba4c66d.png) #### 防水墙javascript ![](media/9724b07e388e563fb91d6ac1141b9e70.png) #### c)后台ticket检验 ![](media/7c6c8de48d224521603e1c209cf187dd.png) ![](media/127b928d2dff38326ed8ff5e4440dc3b.png) #### 数据库获取用户名密码 ![](media/e346a3e7a161e21eac2b723886e37846.png) ### 商品管理 #### 商品列表 ![](media/18169f3a384b570ddfff7b3d3e98bc96.png) ![](media/0f69589bd6807f8f813cca4f792e697d.png) > 前端使用amcharts渲染柱状图和折线图,展示了每个商品总销售量和总销售额 ![](media/d777b151920658513275d4498849d26c.png) ![](media/b9e4da29ead23ec64114bb369662bd26.png) > 有基本的修改删除和导出列表的功能,点击箭头可以实现字段升序/降序排列,列表使用mybatis的pagehelper插件实现了分页功能,通过左侧导航栏的分类可以实现按分类检索商品。搜索栏可以根据关键词查找商品。 ![](media/8c193cc55f22d10d81931911da530e38.png) ![](media/690b24e28bc97e234a15c18138d88e35.png) > 向上的箭头表示升序排列,向下的箭头表示降序排列,双向箭头表示字段还未排序 ![](media/8d6c3c6f1c7e3c1e382f4581d25a9201.png) > 上图的controller可以根据字段升降序状态,关键词,页数等参数查找不同的商品列表 ![](media/f2c9b4c4ab4103fc90da94f3e66833bb.png) > 利用mybatis的动态sql语句可以满足不同情况的查询要求 #### 修改商品基本属性和广告推送 > 点击修改按钮即可进入商品的修改界面 ![](media/db288715da876743fab6c18d90d37ccb.png) ![](media/e7489938aafee8e0072f0ecf0cdb48f3.png) > 上半部分是基本的商品信息,下面的三个广告选择栏则可以选择商品广告的推送方向。默认全为false,表示不推送商品广告。 ![](media/979d9f71b84e893cf93e926c58de8992.png) ![](media/14736db3a27f50cb7179d2e78b49ba08.png) > 同样使用mybatis的动态sql,一条sql语句即可满足绝大多数的需求 #### c)修改商品的版本 ![](media/f02b41ee76fbd6c0fd23e3ebb0133139.png) > 点击版本按钮可以进入商品版本修改页面,显示了当前商品版本的销售总价和销售数量,库存价格等 ![](media/45e3658a7dc4244087fd697ef643e105.png) ![](media/7022c3db19dcec11251a422ee2d2a497.png) > 点击修改按钮,可以实现即时修改,不用跳转。 ![](media/208256b94bb306b115bf8530d0d7c986.png) > 点击新增可以对商品版本进行添加 ![](media/07fb4898c61f84a1dc69723e5784b25c.png) ![](media/ca631b3fa0e204764186fafd06d5b4f4.png) > 同样是动态sql ### 3.分类管理 #### 展示分类 ![](media/5bf988d7b60edbcf651b86e5a949d4cd.png) #### 添加分类 ![](media/40341996bae60207b2acafc41cd7bc2e.png) > 当首页展示为true时,分类会在微信小程序首页出现,否则只能在微信小程序的分类里查看 ![](media/895de4346a8bddf8fd5a268af6a74551.png) > 分类的改变会实时在侧栏更新 ![](media/cacfe6e8c41c46047a73f9cec54b0216.png) ### 用户管理 #### a)用户信息展示 ![](media/48380a49e2670fb1fbd8efca05cf6370.png) ![](media/be598ffb9e205cedfcd762db33665fc0.png) #### b)用户信息修改 对用户进行锁定(禁止登陆)或冻结(禁止交易) 当登陆为false时用户不能登陆微信小程序,当交易为false时用户不能购买商品 ![](media/1a2c26479257b6c81dd5340f0767939a.png) 依然是动态修改。点击订单可以查看该用户的订单 ### 订单管理 #### 订单展示 ![](media/7d8c80f8366a1bb58e85bd8b671b78dd.png) 通过搜索栏可以根据关键词搜索订单,点击箭头可以按字段升序/降序排列 #### 订单查询 ![](media/e1f06929b5b757933649e504a3b07389.png) ![](media/a764ed91a607dce59cf9eb4452c5615a.png) 利用动态sql根据不同条件来检索订单信息 ### 管理员信息管理 #### 管理员列表 ![](media/aa1bcaec3b0d5f12a2efd2f966bcf279.png) 显示所有的管理员账号,权限为ROLE_ADMIN为超级管理员,可以创建,修改,删除其他管理员账号。权限为ROLE_ROOT为普通管理员账号,不能对其他管理员账号进行修改 。id为1的超级管理员不能被删除或者修改权限,只能更改账号或密码。 #### 修改管理员信息 ![](media/d2a146f65656cadaf19675dcdd1fdb25.png) ![](media/cee8d79cf11324fe9490f027594ae587.png) #### 新增管理员账号 ![](media/7abd7d10542fc521c99af052746c466e.png) > 新添加管理员账号权限默认为ROLE_ROOT ![](media/3e199848bec6190de2e98253331bf974.png) #### 密码找回 > 通过管理员注册邮箱可以找回密码 ![](media/aa209d17ea1851ea806867e5b422515a.png) ![](media/3d71096fd7d93104c0e8d510d895a1a2.png) > 用户名和邮箱填写正确密码会发送至邮箱中 ### 表格导出 #### a)商品列表导出Excel > 点击商品列表右上方导出按钮即可导出商品 ![](media/088d0979fda39f52dc77d7715dc82ac3.png) ![](media/9953a5aa3568ccdde39993eaefdcdbaf.png) ![](media/2b900a9f6a2a4dc83180618abb999dd5.png) > Excel工具类 > controller ![](media/dc6d33c8bada18e621c9bf80b591a001.png) #### b)订单导出Excel ![](media/9bd4ed1f7c7b08eae66aece257ae8e05.png) ![](media/fe55dbc75d79229d70252d0084cb434e.png) ## 七.数据库 sql文件在根目录下 ### 重要实体类 ![](media/e20c3763aca8ded4d03425e7eb4e1a03.png) #### 管理员实体类 ![](media/a7b54b1c3a48fd84a32ca3b0cc55f022.png) ![](media/39196cf52e4e0d78a058a69408697153.png) #### 用户实体类 ![](media/a7e961ed276445d3e32023f5a63d03bd.png) #### 商品基本信息实体类 ![](media/a58b53791296db56ab017103d5788090.png) ![](media/44e2f5987ce95d081e8c11a99fb32b55.png) #### 商品版本实体类 ![](media/e1bd9e0f95c744fa3d32d1a38c60ae90.png) ![](media/ecdad5157fe93cf87d889eec075f60a2.png) #### 订单实体类 ![](media/f0ba7950398742b00efda26283dc0e43.png) ![](media/9054af6fd1c55e14c84214f6dde787a1.png) ### 相关配置,持久层采用mybatist框架 ![](media/52bc27f4ae888d29806e9eabc7b5dc7e.png) ![](media/9ef2ddd80c5754e48e2b371b34724c25.png) ## 八.docker ### dockerfile ![](media/d865e6a26a83bf362bed908bb2fd698f.png) ### docker-compose ![](media/c1e9ed54612a27b462af5be93997f9d9.png) ![](media/a937d8381a5a03f7305efbb3ffa666ef.png) ### 相关命令 docker build -t spring. mvn install dockerfile:build docker -compose up -d ### pom配置 \happy\ \ \com.spotify\ \dockerfile-maven-plugin\ \1.3.6\ \ \\${docker.image.prefix}/\${project.artifactId}\ \ \target/\${project.build.finalName}.jar\ \ \ \ \test\ ### 运行效果 ![](media/915625c5f72d5603dfad63acbf39d5ad.png) 直接用docker运行项目 ![](media/ce5937c22eb16ef326a78006392016ee.png) - -