Extjs5整合SpringMVC—环境搭建

安装Sencha Cmd6.5

sencha cmd下载地址

下载web端Extjs5项目

请切换到es的cms分支

生成web端可运行文件

  • 切换到es的代码目录,进入web子目录
  • 使用sencha app watch 命令,生成可运行文件
mp:es c4w$ cd web
mp:web c4w$ sencha app watch
Sencha Cmd v6.5.0.180
...
[INF] Server started at port : 1841
[INF] Waiting for changes...

下载server端的SpringMVC项目

请切换到se项目的cms分支

安装Eclipse和Tomcat

  • 请使用JDK1.8以上版本
  • 请使用Tomcat8以上版本

将上述两个项目import到Eclipse

Extjs5整合SpringMVC—环境搭建_第1张图片
import两个项目

下载依赖的Maven库

se采用maven管理依赖库,使用Maven->Update Project...下载本地缺少的库文件。

Extjs5整合SpringMVC—环境搭建_第2张图片
maven更新

准备数据库环境

  • 本地安装Mysql5.1
  • 建立一个名为bat的数据库实例,用户名:root 密码:root
Extjs5整合SpringMVC—环境搭建_第3张图片
数据库使用utf8字符集
  • 执行 src/main/resources/sql/mysql/init.sql 生成数据库表和演示数据

运行se

Run on Server的方式运行se。

Extjs5整合SpringMVC—环境搭建_第4张图片
运行se

Extjs5整合SpringMVC—环境搭建_第5张图片
控制台输出

访问 http://localhost:8080/login 可以看到jsp方式的登录页面。

在Tomcat中添加设置上下文

刚才的运行生成了一个tomcat的server实例,Open它进行web上下文设置,设置结果如下:

Extjs5整合SpringMVC—环境搭建_第6张图片
设置tomcat的web模块

从Extjs提供的界面登录

上面的操作,相当于让tomcat将名为/es的上下文指向项目一的目录。
重新启动Server,访问:http://localhost:8080/es/web/
将看到另一个登录渠道:

Extjs5整合SpringMVC—环境搭建_第7张图片
Extjs方式的登录

点击 确定即可以登录进入主界面。

Extjs5整合SpringMVC—环境搭建_第8张图片
原型主界面

你可能感兴趣的:(Extjs5整合SpringMVC—环境搭建)