Skip to content
这是一个用SpringBoot+JPA打造的基于微信服务号平台的点餐系统的后端,前端是一个使用Vue.js构建的运行于微信公众号的WebApp。前后端完全分离,前后端之间通过RESTful风格的接口相连。
Java FreeMarker CSS HTML
Branch: master
Clone or download
Latest commit cf9f75f Mar 1, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src add annotation Sep 21, 2018
.gitignore Update .gitignore Oct 11, 2018
README.md Update README.md Mar 1, 2019
pom.xml wechat pay done(liao account) Apr 10, 2018
sqmax.sql modify readme.md Jun 2, 2018

README.md

基于SpringBoot的微信点餐系统

运行环境:

  1. MySQL。可以下载这个在线安装器:https://dev.mysql.com/downloads/windows/installer/8.0.html,安装MySQL社区版。
  2. Redis。下载地址:https://github.com/servicestack/redis-windows/tree/master/downloads,下载最新版redis-latest.zip,解压即可。可以在解压后的根目录下看到redis-server.exe文件,双击即可启动redis服务器。
  3. Nginx。下载地址:http://nginx.org/en/download.html。下载的zip压缩包,解压后根目录下有nginx.exe文件,双击即可启动nginx服务器。
  4. IDEA。下载地址:https://www.jetbrains.com/idea/download/#section=windows
  5. JDK1.8+、maven、IDEA。

注:IDEA不要下载Community版,下载Ultimate版。 MySQL数据库我用的是5.7.21的版本,本项目的建表语句好像不兼容5.6的版本,建议也装5.7以上的版本。 推荐一个比较好用的MySQL客户端:Navicat for MySQL。 Redis客户端图形界面:Redis Desktop Manager。Maven远程仓库最好改为阿里云仓库,网上有介绍修改方式,很简单。

运行方式:

  1. 使用命令git clone https://github.com/sqmax/springboot-project.git将项目克隆到本地。
  2. 将项目导入IDEA。在IDEA里,File->open...,然后选择项目文件夹(springboot-project)。如果是初次使用spring boot,这个过程可能会有点久,需要下载许多依赖的jar包。
  3. 为IDEA安装lombok插件。在IDEA里,File->Settings...->Plugin,搜索lombok,安装。项目wiki介绍日志时有提到为什么安装这个插件。
  4. 项目的配置文件在resources目录下,application.yml文件。修改MySQL数据库连接信息。我的数据库账号密码分别为root,123456,改为你的即可。
  5. 在MySQL数据库终端运行建表语句的sql脚本(或者使用刚下载的Navicat for MySQL图形化工具),本项目的建表语句为项目根路径下的sqmax.sql
  6. 启动redis。在刚才解压的Redis根目录下,双击redis-server.exe即可运行redis服务。
  7. 最后就可以启动项目了。在IDEA里以Spring Boot的方式运行SellApplication这个主类。可以看到这和我们传统的web项目启动的方式不一样,我们没有配置tomcat等之类的服务器,因为Spring Boot已将服务器引入起步依赖中了。
  8. 经过以上步骤,我们的项目应该已经可以启动起来了。访问:http://127.0.0.1:8080/sell/seller/product/list,即可来到我们的卖家端的商家管理系统界面。效果如下:

访问买家的前端界面

  1. 项目的前后端是完全分离的,买家端前端的代码在另一个仓库,使用git clone https://github.com/sqmax/vuejs-project.git下载前端项目,其中项目根路径(vuejs-project)下的dist目录就是前端编译后的代码。
  2. 修改nginx的配置文件,让nginx可以找到前端代码。在nginx根目录下的conf目录下有一个nginx.conf文件,它就是我们要修改的配置文件,其中有下面一段:
 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   F:\vuejs-project\dist; #前端资源路径
            index  index.html index.htm;
        }
	location /sell/ {
		proxy_pass http://127.0.0.1:8080/sell/;
	}

上面的F:\vuejs-project\dist;该为你刚才git clone下的前端项目的dist目录。

  1. 双击nginx.exe启动nginx服务器,如果已启动过,命令行进入nginx的根目录,输入nginx -s reload重启nginx服务器。
  2. 浏览器访问:http://127.0.0.1/#/order/,这是会出现空白界面,按F2打开浏览器的开发者工具,在浏览器的控制台输入document.cookie='openid=abc123' 向该域名下添加cookie。再次访问:http://127.0.0.1,这时就可以访问到前端界面了。如下:

6. 对于手机端微信公众号内访问,还要使用到内网穿透工具,由于微信里不能直接访问ip地址,还要购买域名,还涉及到挺复杂的微信调试。这里就不再介绍。可以使用postman这个工具模拟微信点餐下单。访问接口参见controller包下以Buyer开头的类。
7. 如果想查看微信端的访问效果,可以在微信客户端访问这个链接:http://sell.springboot.cn/。(注意这是师兄上线的项目演示) 如果使用电脑访问的话,可以首先访问:http://sell.springboot.cn/#/order/; 然后,按F12打开浏览器的开发者工具,点击控制台,在控制台输入:document.cookie='openid=abc123'; 然后重新访问:http://sell.springboot.cn,就可以看到前端效果了。

关于IDEA。对于使用Eclipse的伙伴,可以尝试一下IDEA。我做这个项目也是第一次使用IDEA,感觉非常智能好用,可以参见一下这个仓库:https://github.com/judasn/IntelliJ-IDEA-Tutorial,非常好的IDEA使用教程。

关于前端。前端的vue.js项目,我也没有学习,我只是拿来做演示,有兴趣的可以到慕课网学习。

慕课网地址:

Spring Boot 企业微信点餐系统
Vue.js 2.5 + cube-ui 重构饿了么 App

You can’t perform that action at this time.