jeecms v9開發資料

開發文檔

1. 系統架構概述
本系統核心架構爲 FreeMarker+hibernate+Spirng 的 mvc 分層架構。

1.1 分層架構模型
img

1.2 數據流轉模型 (前端)
img

2. 框架目錄介紹
2.1Cms 包介紹
具體包名    相關功能描述
com\mi\cms    常量包
com\mi\cms\action    通用 action 抽象類包
com\mi\cms\action\directive    cms 自定義標籤包, 公用部分繼承於 abs 包
com\mi\cms\action\directive\abs    公用部分自定義標籤的抽象包
com\mi\cms\action\front    前臺 action 包
com\mi\cms\action\member    會員中心包
com\mi\cms\api    
com\mi\cms\api\admin\assist    Api 輔助包
com\mi\cms\api\admin\main    Api 主要 controller 包
com\mi\cms\api\front    API 前端包
com\mi\cms\api\member    Api 會員中心包
com\mi\cms\dao\assist    輔助 dao 的接口層
com\mi\cms\dao\assist\impl    輔助 dao 的接口實現層
com\mi\cms\dao\main    核心的 dao 接口層
com\mi\cms\dao\main\impl    核心的 dao 接口實現層
com\mi\cms\entity\assist    cms 輔助實體類子類
com\mi\cms\entity\assist\base    cms 輔助實體類基類
com\mi\cms\entity\assist\hbm    hibernate 輔助實體類的關係映射文件
com\mi\cms\entity\back    cms 備份實體類子類
com\mi\cms\entity\back\base    cms 備份實體類基類
com\mi\cms\entity\back\hbm    hibernate 備份實體類類的關係映射文件
com\mi\cms\entity\main    cms 核心實體類子類
com\mi\cms\entity\main\base    cms 核心實體類基類
com\mi\cms\entity\main\hbm    hibernate 核心實體類的關係映射文件
com\mi\cms\lucene    搜索引擎封裝包
com\mi\cms\manager\assist    輔助的 service 接口層
com\mi\cms\manager\assist\impl    輔助的 service 接口實現層
com\mi\cms\manager\main    核心的 service 接口層
com\mi\cms\manager\main\impl    核心的 service 接口實現層
com\mi\cms\service    service 封裝層
com\mi\cms\staticpage    靜態頁的封裝包包
com\mi\cms\staticpage\exception    靜態頁的異常處理類型
com\mi\cms\statistic    內容發佈統計包
com\mi\cms\statistic\workload    流量統計包
com\mi\cms\web    攔截器包
com\mi\cms\task    任務包
com\mi\cms\task\job    具體任務包
2.2Common 包介紹
具體包名    相關功能描述
com\mi\common\captcha    驗證碼封裝包
com\mi\common\dic    分詞
com\mi\common\email    郵件包
com\mi\common\fck    fck 編輯器封裝包
com\mi\common\file    文件操做封裝包
com\mi\common\hibernate4    hibeinate 封裝包
com\mi\common\image    圖片的封裝包
com\mi\common\ipseek    ip 地址庫封裝
com\mi\common\lucene    收索引擎的基礎包
com\mi\common\office    文檔轉換相關工具類
com\mi\common\page    jeecms 分頁封裝包
com\mi\common\security    安全認證相關的包
com\mi\common\security\annotation    
com\mi\common\security\encoder    
com\mi\common\security\rememberme    
com\mi\common\security\userdetails    
com\mi\common\upload    上傳封裝包
com\mi\common\util    工具包
com\mi\common\web    常量包
com\mi\common\web\freemarker    freemarker 視圖封裝包
com\mi\common\web\session    session 包
com\mi\common\web\session\cache    session 緩存包
com\mi\common\web\springmvc    springMVC 的簡單封裝
com\mi\cms\manager\main    核心的 service 接口層
com\mi\cms\manager\main\impl    核心的 service 接口實現層
com\mi\cms\service    service 封裝層
com\mi\cms\staticpage    靜態頁的封裝包
com\mi\cms\staticpage\exception    靜態頁的異常處理類型
com\mi\cms\statistic    流量統計包
com\mi\cms\statistic\workload    內容發佈統計包
com\mi\cms\web    攔截器包
2.3Core 包介紹
具體包名    相關功能描述
com\mi\core    通常常量和異常處理
com\mi\core\action\front    核心前臺的 action
com\mi\core\dao    核心 dao 的接口
com\mi\core\dao\impl    核心 dao 的接口實現類
com\mi\core\entity    登陸認證和核心用戶的實體子類
com\mi\core\entity\base    登陸認證和核心用戶的實體基類
com\mi\core\entity\hbm    相關的 hibernate 的映射文件
com\mi\core\manager    核心的 service 接口層
com\mi\core\manager\impl    核心的 service 接口實現層
com\mi\core\security    認證登陸、退出相關
com\mi\core\tpl    模板接口和相關 service 層
com\mi\core\web    定義內容顯示的接口，工具類，和錯誤頁面的指定
com\mi\core\web\util    uri 幫助類
2.4 頁面資源介紹
具體包名    相關功能描述    
WebContent        
r    前臺資源文件，如 css、img、js 等    
jeeadmin    後臺頁面和資源文件（由 vue 源碼工程打包）    
thirdparty    第三方插件（ckeditor 編輯器、swf 上傳、My97DatePicker 日期選擇）    
u    默認的用戶上傳資源目錄    
WebContent/WEB-INF        
cache    緩存文件    
common    通用頁面    
config    核心的配置文件，若是 action，service,manager,dao,bean 等 plug 爲插件配置文件目錄    
directive    標籤嚮導模板文件    
error    錯誤頁面    
ftl    自定義的 freemark 宏文件    
ispeek    ip 地址庫    
languages    國際化配置    
jeecms/admin    後臺
jeecms/front    前臺
jeecms/tpl    模版
jeecore/admin    公用國際化
jeecms/adminapi    API 接口消息國際化
plug    插件國際化配置
lucene    lucene 文件夾    
t/cms    前臺模板頁面    
t/cms/www    站點資源目錄    
t/cms/www/default    站點方案
3. 開發流程指導
3.1 展示層
3.1.1Freemarer 介紹
FreeMarker 是一個用 Java 語言編寫的模板引擎，它基於模板來生成文本輸出。FreeMarker 與 Web 容器無關，即在 Web 運行時，它並不知道 Servlet 或 HTTP。它不只能夠用做表現層的實現技術，並且還能夠用於生成 XML，JSP 或 Java 等。

img

3.1.2 後臺頁面
後臺管理頁面所有采用 vue 工程開發，參考

4. 後臺管理頁面 vue 工程開發](#_4. 後臺管理頁面 vue 工程開發)

3.1.3 前臺模版頁面
img

在 default 目錄相應的文件夾添加 html，在 html 文件中引入 freemark 機制控制 control 層傳輸對象的顯示。

3.2 控制層
3.2.1SpringMVC 簡介
Spring 框架提供了構建 Web 應用程序的全功能 MVC 模塊。使用 Spring 可插入的 MVC 架構，經過策略接口，Spring 框架是高度可配置的，並且包含多種視圖技術，例如 FreeMarker、JavaServer Pages（JSP）技術、Velocity、Tiles、iText 和 POI。Spring MVC 框架並不知道使用的視圖，因此不會強迫您只使用 JSP 技術。Spring MVC 分離了控制器、模型對象、分派器以及處理程序對象的角色，這種分離讓它們更容易進行定製。

3.2.2 控制層實現
3.2.2.1 配置 SpringMVC 支持
Web.xml 配置 Spring 後臺核心調度器

<servlet>

       <servlet-name>JeeCmsAdminApi</servlet-name>

       <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

       <init-param>

           <param-name>dispatchOptionsRequest</param-name>

           <param-value>true</param-value>

        </init-param>

       <init-param>

           <param-name>contextConfigLocation</param-name>

           <param-value>

              /WEB-INF/config/jeecms-servlet-admin-api.xml

           </param-value>

       </init-param>  

       <load-on-startup>3</load-on-startup>

    </servlet>
Web.xml 配置 Spring 後臺核心調度器匹配路徑

<servlet-mapping>

     <servlet-name>JeeCmsAdminApi</servlet-name>

     <url-pattern>/api/admin/*</url-pattern>

  </servlet-mapping>
Web.xml 配置 Spring 前臺核心調度器

<servlet>

       <servlet-name>JeeCmsFront</servlet-name>

       <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

       <init-param>

           <param-name>contextConfigLocation</param-name>

           <param-value>

              /WEB-INF/config/jeecms-servlet-front.xml

              /WEB-INF/config/plug/*/-servlet-front-action.xml

           </param-value>

       </init-param>

       <load-on-startup>2</load-on-startup>

    </servlet>
Web.xml 配置 Spring 前臺核心調度器匹配路徑

<servlet-mapping>

       <servlet-name>JeeCmsFront</servlet-name>

       <url-pattern>*.jhtml</url-pattern>

    </servlet-mapping>

    <servlet-mapping>

       <servlet-name>JeeCmsFront</servlet-name>

       <url-pattern>*.jspx</url-pattern>

    </servlet-mapping>

    <servlet-mapping>

       <servlet-name>JeeCmsFront</servlet-name>

       <url-pattern>*.jsp</url-pattern>

    </servlet-mapping>

    <servlet-mapping>

       <servlet-name>JeeCmsFront</servlet-name>

       <url-pattern>*.htm</url-pattern>

    </servlet-mapping>
3.2.2.2Spring Controller
com.mi.cms.api.admin.main核心管理模塊Controller
com.mi.cms.api.admin.assist輔助管理模塊Controller
@Controller

public class CmsLogApiAct {
         @RequestMapping("/log/operating_list")

         publicvoid list(String queryUsername, String queryTitle,Integer category,

                            StringqueryIp, Integer pageNo, Integer pageSize,HttpServletRequest request,

                            HttpServletResponseresponse){

                   Stringbody = "\"\"";

                   Stringmessage = Constants.API_MESSAGE_SUCCESS;

                   Stringcode = ResponseCode.API_CODE_CALL_SUCCESS;

                   if(pageNo==null) {

                            pageNo=1;

                   }

                   if(pageSize==null) {

                            pageSize=10;

                   }

                   if(category==null) {

                            category=CmsLog.OPERATING;

                   }

                   Paginationpage =null;

                   CmsSitesite = CmsUtils.getSite(request);

                   WebErrorserrors = WebErrors.create(request);

                   if(category.equals(CmsLog.OPERATING)) {

                            page= manager.getPage(CmsLog.OPERATING, site.getId(),queryUsername, queryTitle,queryIp, pageNo, pageSize);

                   }elseif (category.equals(CmsLog.LOGIN_SUCCESS)) {

                            page= manager.getPage(CmsLog.LOGIN_SUCCESS, null,queryUsername, queryTitle,queryIp, pageNo, pageSize);

                   }elseif (category.equals(CmsLog.LOGIN_FAILURE)) {

                            page= manager.getPage(CmsLog.LOGIN_FAILURE, null,null, queryTitle, queryIp, pageNo,pageSize);

                   }else{

                            errors.addErrorString(Constants.API_MESSAGE_PARAM_ERROR);

                   }

                   if(errors.hasErrors()) {

                            message= errors.getErrors().get(0);

                            code= ResponseCode.API_CODE_PARAM_ERROR;

                   }else{

                            inttotalCount = page.getTotalCount();

                            List<CmsLog>list = (List<CmsLog>) page.getList();

                            JSONArrayjsonArray = new JSONArray();

                            if(list!=null&&list.size()>0) {

                                     for(int i = 0; i < list.size(); i++) {

                                               jsonArray.put(i,list.get(i).convertToJson());

                                     }

                            }

                            body= jsonArray.toString()+",\"totalCount\":"+totalCount;

                   }

                   ApiResponseapiResponse = new ApiResponse(request, body, message, code);

                   ResponseUtils.renderApiJson(response,request, apiResponse);

         }

         //自動裝配對象
         @Autowired
         privateCmsLogMng manager;
}
//統一返回JSON對象

ApiResponse apiResponse = newApiResponse(request, body, message, code);
ResponseUtils.renderApiJson(response,request, apiResponse);
另一個例子

// 須要簽名認證（建議保存、修改、刪除類方法添加簽名註解）

@SignValidate

@RequestMapping("/group/save")

public void save(CmsGroup bean,StringviewChannelIds,String contriChannelIds,

                            HttpServletRequestrequest,HttpServletResponse response){

                   Stringbody = "\"\"";

                   Stringmessage = Constants.API_MESSAGE_PARAM_REQUIRED;

                   Stringcode = ResponseCode.API_CODE_PARAM_REQUIRED;

                   WebErrorserrors = WebErrors.create(request);

                   //通用認證必填參數

                   errors= ApiValidate.validateRequiredParams(request, errors, bean.getName(),bean.getPriority(),

                                     bean.getAllowMaxFile(),bean.getAllowPerDay(),bean.getAllowFileSize(),bean.getAllowFileTotal());

                   if(!errors.hasErrors()) {

                            Integer[]viewChannel = StrUtils.getInts(viewChannelIds);

                            Integer[]contriChannel = StrUtils.getInts(contriChannelIds);

                            errors= validateArrayLength(errors, viewChannel, contriChannel);

                            if(errors.hasErrors()) {

                                     message= errors.getErrors().get(0);

                                     code= ResponseCode.API_CODE_PARAM_ERROR;

                            }else{

                                     bean.init();

                                     bean= manager.save(bean, viewChannel, contriChannel);

                                     log.info("saveCmsGroup id={}", bean.getId());

                                     cmsLogMng.operating(request,"cmsGroup.log.save", "id=" + bean.getId()

                                                        +";name=" + bean.getName());

                                     body="{\"id\":"+"\""+bean.getId()+"\"}";

                                     message =Constants.API_MESSAGE_SUCCESS;

                                     code= ResponseCode.API_CODE_CALL_SUCCESS;

                            }

                   }

                   ApiResponseapiResponse = new ApiResponse(request, body, message, code);

                   ResponseUtils.renderApiJson(response,request, apiResponse);

         }
3.2.2.3SpringMVC 擴展配置
jeecms-servlet-admin-api.xml後臺Spring國際化、攔截器、SpringMVC視圖解析器配置

jeecms-servlet-front.xml前臺Spring國際化、攔截器、SpringMVC視圖解析器配置

jeecms-servlet-admin-api-action.xml 後臺action配置文件

jeecms-servlet-front-action.xml前臺action配置文件

配置 action bean

<bean id="ftpApiAct"class="com.mi.cms.api.admin.main.FtpApiAct"></bean>
3.3 邏輯層
3.3.1 類存放包介紹
com.mi.cms.manager.main.impl核心service層

com.mi.cms.manager.assist.impl 輔助service層

com.mi.cms.service 採集、欄目、內容、流量公用service包

3.3.2service 類代碼編寫樣例
@Service

@Transactional

public class CmsConfigMngImplimplements CmsConfigMng {

         @Transactional(readOnly= true)

         publicCmsConfig get() {
                   CmsConfigentity = dao.findById(1);
                   returnentity;
         }
         publicvoid updateCountCopyTime(Date d) {

                   dao.findById(1).setCountCopyTime(d);

         }

 

         publicvoid updateCountClearTime(Date d) {

                   dao.findById(1).setCountClearTime(d);

         }

 

         publicCmsConfig update(CmsConfig bean) {

                   Updater<CmsConfig>updater = new Updater<CmsConfig>(bean);

                   CmsConfigentity = dao.updateByUpdater(updater);

                  entity.blankToNull();

                   returnentity;

         }

         publicMarkConfig updateMarkConfig(MarkConfig mark) {

                   get().setMarkConfig(mark);

                   returnmark;

         }

         publicvoid updateMemberConfig(MemberConfig memberConfig) {

                   get().getAttr().putAll(memberConfig.getAttr());

         }
         privateCmsConfigDao dao;

         //自動裝配dao層

         @Autowired

         publicvoid setDao(CmsConfigDao dao) {

                   this.dao= dao;
         }
}
須要@Service@Transactional

註解標誌該類爲業務邏輯層，全部的 service 層均採用接口開發模式

@Transactional(readOnly = true)只讀事物

3.3.3 配置 service bean
jeecms-context.xml 中增長 servicebean 的配置

<bean   id="cmsConfigMng"class="com.mi.cms.manager.main.impl.CmsConfigMngImpl"/>
3.4 持久層
3.4.1Hibernate4 簡介
Hibernate 是一個開放源代碼的對象關係映射框架，它對 JDBC 進行了很是輕量級的對象封裝，使得 Java 程序員能夠爲所欲爲的使用對象編程思惟來操做數據庫。 Hibernate 能夠應用在任何使用 JDBC 的場合，既能夠在 Java 的客戶端程序使用，也能夠在 Servlet/JSP 的 Web 應用中使用

3.4.2DAO 類代碼編寫樣例
持久層採用 Hibernate4，緩存採用 Ehcache

com.mi.cms.dao.main.impl 核心DAO層

com.mi.cms.dao.assist.impl 輔助DAO層

@Repository

public class CmsConfigDaoImplextends HibernateBaseDao<CmsConfig, Integer>

                   implementsCmsConfigDao {

         publicCmsConfig findById(Integer id) {

                   CmsConfigentity = get(id);

                   returnentity;

         }

         //重寫getEntityClass方法

         @Override

         protectedClass<CmsConfig> getEntityClass() {
                   returnCmsConfig.class;
         }
}
@Repository 註解標誌該類是 DAO 層組件，能夠選擇繼承 HibernateBaseDao 基礎類，須要實現接口。

3.4.3 配置 DAO bean
jeecms-context.xml 中增長 dao bean 的配置

<beanid="cmsConfigDao"class="com.mi.cms.dao.main.impl.CmsConfigDaoImpl"/>
3.4.4POJO
com.mi.cms.entity.main核心功能包的pojo

com.mi.cms.entity.main.base 輔助功能包的pojo基礎類

com.mi.cms.entity.main.hbm 輔助功能包Hibernate實體映射文件

com.mi.cms.entity.assist輔助功能包的pojo

com.mi.cms.entity.assist.base輔助功能包的pojo基礎類

com.mi.cms.entity.assist.hbm輔助功能包Hibernate實體映射文件

3.5 自定義標籤
3.5.1 定義標籤類
​ 自定義標籤類所屬包 com.mi.cms.action.directive

​ 標籤類須要實現 Freemarker 內置接口 TemplateDirectiveModel

​ 獲取標籤參數能夠用 DirectiveUtils 工具類獲取

public classChannelDirective implements TemplateDirectiveModel {

         /**

          * 輸入參數，欄目ID。

          */

         publicstatic final String PARAM_ID = "id";

         /**

          * 輸入參數，欄目路徑。

          */

    public static final String PARAM_PATH ="path";

         /**

          * 輸入參數，站點ID。存在時，獲取該站點欄目，不存在時獲取當前站點欄目。

          */

         publicstatic final String PARAM_SITE_ID = "siteId";

 

         @SuppressWarnings("unchecked")

         publicvoid execute(Environment env, Map params, TemplateModel[] loopVars,

                            TemplateDirectiveBodybody) throws TemplateException, IOException {

                   CmsSitesite = FrontUtils.getSite(env);

                   //getrequired params from directive

                   Integerid = DirectiveUtils.getInt(PARAM_ID, params);

                   Channelchannel;

                   if(id != null) {

                            channel= channelMng.findById(id);

                   }else {

                            Stringpath = DirectiveUtils.getString(PARAM_PATH, params);

                            if(StringUtils.isBlank(path)) {

                                     //若是path不存在，那麼id必須存在。

                                     thrownew ParamsRequiredException(PARAM_ID);

                            }

                            IntegersiteId = DirectiveUtils.getInt(PARAM_SITE_ID, params);

                            if(siteId == null) {

                                     siteId= site.getId();

                            }

                            channel= channelMng.findByPathForTag(path, siteId);

                   }

 

                   Map<String,TemplateModel> paramWrap = new HashMap<String, TemplateModel>(

                                     params);

                   //putresult to view

                   paramWrap.put(OUT_BEAN,DEFAULT_WRAPPER.wrap(channel));

                   Map<String,TemplateModel> origMap = DirectiveUtils

                                     .addParamsToVariable(env,paramWrap);         

                   //render result to response

                   body.render(env.getOut());

                   DirectiveUtils.removeParamsFromVariable(env,paramWrap, origMap);

         }

         //裝配所需service

         @Autowired

         privateChannelMng channelMng;

}
3.5.2 配置標籤
1.jeecms-context.xml 配置 Spring bean

<bean       id="cms_content_list"class="com.mi.cms.action.directive.ContentListDirective"/>
2.jeecms-context 文件中 jeecms.properties 文件中引入自定義標籤 bean

directive.cms_channel_list=cms_channel_list

3.5.3 標籤應用
[@cms_content_list count='9'titLen='15' orderBy='8' channelOption='1' channelId='1']

                  [#list tag_list as a]

                  <li><ahref="${a.url}" title="${a.title}"target="_blank">[@text_cut s=a.title len=titLenappend=append/]</a></li>

                  [/#list]

 [/@cms_content_list]
cms_content_list 標籤名稱 count、titLen、orderBy、channelOption、channelId 標籤參數

tag_list 標籤結果

a 循環變量

${a.url} 輸出 a 對象的 url 屬性

4. 後臺管理頁面 vue 工程開發
4.1 環境準備
Vue 簡介

Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：

推薦查閱官方文檔 https://cn.vuejs.org/v2/guide/installation.html

1、安裝必要環境 Node.js 下載地址 http://nodejs.cn/.

安裝最新版本 Npm（最新版 node 自帶）

2、開發環境安裝和啓動

使用命令行執行如下命令 執行安裝 node 包

cd 項目路徑（vue 工程路徑）

npminstall （推薦使用 cnpm install，http://npm.taobao.org/ 加快依賴下載速度）

npmrun dev;

4.2 工程包介紹
目錄結構：

img

img

一級目錄說明：

build webpack 打包配置文件

config 全局配置文件 api 域名 appid 配置

 node_modules:node依賴文件夾

    src項目源代碼
static 全局資源文件夾（css images js）
index.html 入口文件

二級目錄說明:

\1. config／dev.env.js 開發環境配置文件，修改源代碼時會讀取此文件中的配置項

config／prod.env.js 生產環境配置文件，打包完成時會讀取使用此文件中的配置項

img

img

以上圖（config／dev.env.js）爲例，定義了 6 個屬性

NODE_ENV : 標識當前環境 （當前環境爲開發者環境）

BaseUrl：項目的 api 資源 地址

Appid：項目的 appid

aesKey：項目的 aesKey (加密用)

ivKey：項目的 ivKey (加密用)

appKey：項目的 appKey (加密用)

配置好相應的屬性 便可在任意 js 文件中使用該變量，調用方式爲

process.env.xxx

process.env.baseUrl

img

2.

src/api api 以及全局攔截器

src/assets 源碼中的資源文件（JS,CSS,iamges）

src/components 自定義組件目錄

src/directive 自定義指令目錄

src/mixins 自定義混合目錄

src/plugs 第三方插件目錄（jquery 相關的插件可存放在此）

src/router 路由，角色目錄

src/store vuex 定義目錄

src/untils 全局方法，簽名，加密函數存放目錄

src/views 功能頁面目錄

src/APP.vue 根組件（無需修改）

src/config.js 項目路徑配置文件

src/main.js 頁面入口文件

src/permissions.js 全局路由鉤子配置文件

4.3 新增功能模塊講解
4.3.1 新增頁面
後臺管理頁面採用單頁組件化開發

功能模塊統一存放在 src／views 目錄下，推薦以導航樹層級管理頁面，例以下圖

img

1 功能某塊統一以單文件組件的形式構造，命名以. vue 結尾，單文件組件開發詳情查看 https://cn.vuejs.org/v2/guide/single-file-components.html

2. 頁面基礎樣式框架基於 element-ui2.x 版本

3. 頁面詳解：

此處以用戶列表功能爲事例說明

用戶功能列表路徑爲 src/views/userMange/list.vue

4.3.2 數據交互
後臺數據交互採用 axios, 更多

https://www.npmjs.com/package/axios（推薦）

https://www.kancloud.cn/yunye/axios/234845（漢化文檔）

1. 建立數據請求方法 (請求方法統一存放在 src/api.js 文件下)

2. 將全部的接口地址統一存放在 src/api.js 下如圖

imgimg

如圖：api.js 定義了一個 setAdminApi 函數 用於拼接重複的 api 地址

api 文檔中以 / api/admin / 爲路徑的則可以使用該函數 ，不然直接填寫完整路徑

例如 bsaeUpload:’/api/member/upload/o_upload’,// 普通文件上傳

3．數據請求示例

1. 普通未封裝請求接口示例

在頁面的<script>下引用 axios

![img](http://ovi3ob9p4.bkt.clouddn.com/cms/cms026.png)         
而後在須要的方法中調用 axios 請求 此處以 created 方法中調用爲示例 （具體功能，請根據自身狀況修改使用）

axios.post(this.$api.memberList,this.params)

     .then(res=>{~!

       //此處爲請求成功的回調

     })

     .catch(error=>{

      //此處爲請求失敗的回調 

     })
說明：axios.post() 方法能夠發送一個 post 請求，其餘請求類型有 get ，put ，delete 等，具體參考 axios 文檔

this.$api.memberList 此參數爲 api 地址 在頁面中使用 this.​$api.XXX 便可調用 src/api 中的 地址變量

此方法爲獲取全部用戶列表信息，傳遞了一個參數對象 params: {// 只須要業務參數

​

queryUsername: "",

       queryEmail: "",

       queryGroupId: "",

       queryStatus: "",

       pageNo: "",

       pageSize: ""

     }
在成功的回調函數中，能夠將列表數據賦值給自定義的一個變量，在頁面中調用該變量便可，

2 列表封裝接口示例

本系統封裝了一個 list 和一個 form 混合

img

此類文件的做用爲 將一些公用的方法和變量插入頁面組件中，在頁面則可直接使用該變量以及方法

以 src/views/userMange/list.vue 爲例

在頁面<script></script>中引入mixins

img

此處引入了 list.js 此文件預先定義了基礎列表所須要的變量以及方法，簡單的列表查詢及操做，可直接使用該混合文件，具體變量及方法，查看文件內註釋

在頁面中的 created 方法中 調用了

created(){

this.initTableData(this.$api.memberList,this.params);

}

該方法爲混合方法，做用爲初始化列表信息，第一個參數傳遞的爲 api 接口地址，第二個參數爲自定義參數對象，調用該函數後會自動初始化列表以及賦值，在頁面上直接使用 tableData 屬性便可

數據加密方法介紹

如業務參數須要加密，則須要在頁面組件中引用 src/untils/aes.js

調用示例：

import { Encrypt } from "../untils/aes";

  let aesKey = this.$store.state.aesKey

    letivKey = this.$store.state.ivKey;

               letaesPassword = Encrypt(this.params.pwd, aesKey, ivKey);
4.3.3 將組件添加至路由表
頁面編寫完成後須要將組件註冊到路由中

關於路由採用的是 vue-router，更多詳細：https://router.vuejs.org/zh-cn/index.html

路由表文件爲 src/router/routes.js

{

    path:'/',

    name:'用戶管理', //用戶管理

    component: body,

    iconCls: 'icon-user',

    meta:{

      isLink: true

    },

    children: [{

      path:'/user',

      name:'會員管理', //會員管理

      component: childView,

      isParent: true,

      redirect: '/user/list',

      children: [{

         path: '/user/list', //會員列表

         name: '會員列表',

         component:resolve => { require(['@/views/user/userMange/list.vue'], resolve) },

       },

       {

         path: '/user/save', //會員添加

         name: '會員添加',

         component:resolve => { require(['@/views/user/userMange/add.vue'], resolve) },

         hidden: true

       },

       {

         path: '/user/update', //會員添加

         name: '會員修改',

         component:resolve => { require(['@/views/user/userMange/edit.vue'], resolve) },

         hidden: true

       }

      ]

    }, {
path：訪問地址（惟一不可重複）

meta：{role:’xxxx’} 角色權限名, 不可重複，並且不一樣板塊前綴要不一樣，好比用戶模塊叫 user 另外會員管理叫 userMember 這樣是不行的

name:’路由名稱’, 【也就是菜單名】

component: component:resolve => { require(['@/views/user/userMange/list.vue'], resolve) },

懶加載頁面組件，在點擊該功能時才加載文件

children:子路由

4.3.4 權限控制
權限文件爲 src/routers/roles.js

角色權限編是一個按照路由層級來構造的 json 對象（自定義添加時，也保持一樣的規則）

以用戶列表角色爲例

{

  name:'用戶管理',

  role:'userlist',

  api:[

    '/api/admin/user/list',

    '/api/admin/user/get'

  ],

  children: [{

    name:'添加',

    role:'useradd',

    api:[

      '/api/admin/user/save'

    ],

  },

  {

    name:'修改',

    role:'useredit',

    api:['/api/admin/user/update'],

  },

  {

    name:'刪除',

    role:'userdelete',

    api:[

      '/api/admin/user/delete'

    ],

  },

  ]
name：角色權限名稱（角色管理中樹狀結構的名字）

role：頁面顯示權限（就是路由表中的 meta：{role:’xxxx’}）

api：頁面組件所擁有的調用後臺 api 的地址

4.3.5 組件使用
vue 是一個組件化開發的 js 一切皆爲組件

在本系統中頁面基礎組件採用了 element2.0 組件庫 (頁面中以 el-xxxx 開頭)

自定義組件爲自行封裝（頁面中以 cms-xxxx 開頭）

自定義組件存放在

img

開發中，一些公用的功能能夠封裝爲自定義組件

此處以 cms-input 組件爲例

img

組件頁面與功能頁面結構徹底相同

< 
template>

    <divclass="cms-inline-input">

        <labelfor=""class="cms-inline-label">{{label}}:</label>

         <el-input  :value="currentValue"@input="handleInput"

         :style="{width:width+'px'}"

         ></el-input>

    </div>

</template>

<script>

exportdefault {

    name:'cms-input',

    props:{

         value:'',

         label:{

          type:String,

            default:'label'

         },

         width:{

              type:Number,

              default:160

         }

    },

    data(){

        return{

          currentValue:this.value

        }

    },

    methods:{

    handleInput(value){

       this.$emit('input',value);//觸發input 事件，並傳入新值

    }

    }

}

</script> 

<stylescoped lang="scss">

    .cms-inline-input{

        display:inline-block;

        position:relative;

        margin-left:12px;

    }

    .cms-inline-label{

        font-size:14px;

        color:#5a5e66;

    }

</style>
此處封裝了一個標籤和輸入框，對外 props 暴露了 3 個屬性 value label width

在頁面上使用方法爲

<cms-inputlabel=’標籤名’ width=’120’ v-model=’xxx’></cms-input>

經過this.$emit('input',value);//觸發input 事件，並傳入新值

向使用者傳遞返回值

4.4 後臺頁面發佈
後臺源碼的開發文件不可直接運行在瀏覽器中，須要經過命令打包將源碼生成爲靜態文件

1. 使用命令行工具進入 工程目錄

img

項目工程中若是沒有 node_modules 文件夾，則執行
npminstall （推薦使用 cnpm install，http://npm.taobao.org/ 加快依賴下載速度）

若是有則忽略此步驟

3. 執行命令 npm run build

出現 building for production 則成功執行，等待命令完成完成後會出現下圖

img

出現上圖，說明打包編譯完成，在項目中會有一個 dist 文件夾

img

dist 文件夾中有兩個文件

img

4、將 index.html 更名爲 index.do 後，將 index.do 和 static 文件夾放到 ROOT 下的 / jeeadmin/jeecms 文件夾下，eclipse 下放到 / WebContent/jeeadmin/jeecms 下

4.5 修改後臺地址
1. 帶部署路徑和端口的此類狀況無須修改，以下

http://xxx.jeecms.com/jeeadmin/jeecms/index.do

http://xxx.jeecms.com/project/jeeadmin/jeecms/index.do

\2. 須要調整後臺路徑此類狀況需要修改

http://xxx.jeecms.com/admin/jeecms/index.do

http://xxx.jeecms.com/project/admin/jeecms/index.do

此處修改源碼工程中的 src/config.js

img

將 jeeadmin 文件夾重命名爲 admin 便可


本文做者： IIsKei
本文連接： http://www.iskei.cn/posts/48599.html
版權聲明： 本博客全部文章除特別聲明外，均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明出處！