開發文檔 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  然后在需要的方法中調用 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 許可協議。轉載請注明出處！