開發(fā)文檔1. 系統(tǒng)架構(gòu)概述 本系統(tǒng)核心架構(gòu)為 FreeMarker+hibernate+Spirng 的 mvc 分層架構(gòu)。1.1 分層架構(gòu)模型 img1.2 數(shù)據(jù)流轉(zhuǎn)模型 (前端) img2. 框架目錄介紹 2.1Cms 包介紹 具體包名 相關(guān)功能描述 com\mi\cms 常量包 com\mi\cms\action 通用 action 抽象類包 com\mi\cms\action\directive cms 自定義標(biāo)簽包, 公用部分繼承于 abs 包 com\mi\cms\action\directive\abs 公用部分自定義標(biāo)簽的抽象包 com\mi\cms\action\front 前臺(tái) action 包 com\mi\cms\action\member 會(huì)員中心包 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 會(huì)員中心包 com\mi\cms\dao\assist 輔助 dao 的接口層 com\mi\cms\dao\assist\impl 輔助 dao 的接口實(shí)現(xiàn)層 com\mi\cms\dao\main 核心的 dao 接口層 com\mi\cms\dao\main\impl 核心的 dao 接口實(shí)現(xiàn)層 com\mi\cms\entity\assist cms 輔助實(shí)體類子類 com\mi\cms\entity\assist\base cms 輔助實(shí)體類基類 com\mi\cms\entity\assist\hbm hibernate 輔助實(shí)體類的關(guān)系映射文件 com\mi\cms\entity\back cms 備份實(shí)體類子類 com\mi\cms\entity\back\base cms 備份實(shí)體類基類 com\mi\cms\entity\back\hbm hibernate 備份實(shí)體類類的關(guān)系映射文件 com\mi\cms\entity\main cms 核心實(shí)體類子類 com\mi\cms\entity\main\base cms 核心實(shí)體類基類 com\mi\cms\entity\main\hbm hibernate 核心實(shí)體類的關(guān)系映射文件 com\mi\cms\lucene 搜索引擎封裝包 com\mi\cms\manager\assist 輔助的 service 接口層 com\mi\cms\manager\assist\impl 輔助的 service 接口實(shí)現(xiàn)層 com\mi\cms\manager\main 核心的 service 接口層 com\mi\cms\manager\main\impl 核心的 service 接口實(shí)現(xiàn)層 com\mi\cms\service service 封裝層 com\mi\cms\staticpage 靜態(tài)頁的封裝包包 com\mi\cms\staticpage\exception 靜態(tài)頁的異常處理類型 com\mi\cms\statistic 內(nèi)容發(fā)布統(tǒng)計(jì)包 com\mi\cms\statistic\workload 流量統(tǒng)計(jì)包 com\mi\cms\web 攔截器包 com\mi\cms\task 任務(wù)包 com\mi\cms\task\job 具體任務(wù)包 2.2Common 包介紹 具體包名 相關(guān)功能描述 com\mi\common\captcha 驗(yàn)證碼封裝包 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 收索引擎的基礎(chǔ)包 com\mi\common\office 文檔轉(zhuǎn)換相關(guān)工具類 com\mi\common\page jeecms 分頁封裝包 com\mi\common\security 安全認(rèn)證相關(guān)的包 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 的簡(jiǎn)單封裝 com\mi\cms\manager\main 核心的 service 接口層 com\mi\cms\manager\main\impl 核心的 service 接口實(shí)現(xiàn)層 com\mi\cms\service service 封裝層 com\mi\cms\staticpage 靜態(tài)頁的封裝包 com\mi\cms\staticpage\exception 靜態(tài)頁的異常處理類型 com\mi\cms\statistic 流量統(tǒng)計(jì)包 com\mi\cms\statistic\workload 內(nèi)容發(fā)布統(tǒng)計(jì)包 com\mi\cms\web 攔截器包 2.3Core 包介紹 具體包名 相關(guān)功能描述 com\mi\core 一般常量和異常處理 com\mi\core\action\front 核心前臺(tái)的 action com\mi\core\dao 核心 dao 的接口 com\mi\core\dao\impl 核心 dao 的接口實(shí)現(xiàn)類 com\mi\core\entity 登錄認(rèn)證和核心用戶的實(shí)體子類 com\mi\core\entity\base 登錄認(rèn)證和核心用戶的實(shí)體基類 com\mi\core\entity\hbm 相關(guān)的 hibernate 的映射文件 com\mi\core\manager 核心的 service 接口層 com\mi\core\manager\impl 核心的 service 接口實(shí)現(xiàn)層 com\mi\core\security 認(rèn)證登錄、退出相關(guān) com\mi\core\tpl 模板接口和相關(guān) service 層 com\mi\core\web 定義內(nèi)容顯示的接口，工具類，和錯(cuò)誤頁面的指定 com\mi\core\web\util uri 幫助類 2.4 頁面資源介紹 具體包名 相關(guān)功能描述 WebContent r 前臺(tái)資源文件，如 css、img、js 等 jeeadmin 后臺(tái)頁面和資源文件（由 vue 源碼工程打包） thirdparty 第三方插件（ckeditor 編輯器、swf 上傳、My97DatePicker 日期選擇） u 默認(rèn)的用戶上傳資源目錄 WebContent/WEB-INF cache 緩存文件 common 通用頁面 config 核心的配置文件，如果 action，service,manager,dao,bean 等 plug 為插件配置文件目錄 directive 標(biāo)簽向?qū)０逦募? error 錯(cuò)誤頁面 ftl 自定義的 freemark 宏文件 ispeek ip 地址庫 languages 國(guó)際化配置 jeecms/admin 后臺(tái) jeecms/front 前臺(tái) jeecms/tpl 模版 jeecore/admin 公用國(guó)際化 jeecms/adminapi API 接口消息國(guó)際化 plug 插件國(guó)際化配置 lucene lucene 文件夾 t/cms 前臺(tái)模板頁面 t/cms/www 站點(diǎn)資源目錄 t/cms/www/default 站點(diǎn)方案 3. 開發(fā)流程指導(dǎo) 3.1 展現(xiàn)層 3.1.1Freemarer 介紹 FreeMarker 是一個(gè)用 Java 語言編寫的模板引擎，它基于模板來生成文本輸出。FreeMarker 與 Web 容器無關(guān)，即在 Web 運(yùn)行時(shí)，它并不知道 Servlet 或 HTTP。它不僅可以用作表現(xiàn)層的實(shí)現(xiàn)技術(shù)，而且還可以用于生成 XML，JSP 或 Java 等。img3.1.2 后臺(tái)頁面 后臺(tái)管理頁面全部采用 vue 工程開發(fā)，參考4. 后臺(tái)管理頁面 vue 工程開發(fā)](#_4. 后臺(tái)管理頁面 vue 工程開發(fā))3.1.3 前臺(tái)模版頁面 img在 default 目錄相應(yīng)的文件夾添加 html，在 html 文件中引入 freemark 機(jī)制控制 control 層傳輸對(duì)象的顯示。3.2 控制層 3.2.1SpringMVC 簡(jiǎn)介 Spring 框架提供了構(gòu)建 Web 應(yīng)用程序的全功能 MVC 模塊。使用 Spring 可插入的 MVC 架構(gòu)，通過策略接口，Spring 框架是高度可配置的，而且包含多種視圖技術(shù)，例如 FreeMarker、JavaServer Pages（JSP）技術(shù)、Velocity、Tiles、iText 和 POI。Spring MVC 框架并不知道使用的視圖，所以不會(huì)強(qiáng)迫您只使用 JSP 技術(shù)。Spring MVC 分離了控制器、模型對(duì)象、分派器以及處理程序?qū)ο蟮慕巧?#xff0c;這種分離讓它們更容易進(jìn)行定制。3.2.2 控制層實(shí)現(xiàn) 3.2.2.1 配置 SpringMVC 支持 Web.xml 配置 Spring 后臺(tái)核心調(diào)度器<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 后臺(tái)核心調(diào)度器匹配路徑<servlet-mapping><servlet-name>JeeCmsAdminApi</servlet-name><url-pattern>/api/admin/*</url-pattern></servlet-mapping> Web.xml 配置 Spring 前臺(tái)核心調(diào)度器<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 前臺(tái)核心調(diào)度器匹配路徑<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 @Controllerpublic 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);}//自動(dòng)裝配對(duì)象 @AutowiredprivateCmsLogMng manager; } //統(tǒng)一返回JSON對(duì)象 ApiResponse apiResponse = newApiResponse(request, body, message, code); ResponseUtils.renderApiJson(response,request, apiResponse); 另外一個(gè)例子// 需要簽名認(rèn)證（建議保存、修改、刪除類方法添加簽名注解） @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);//通用認(rèn)證必填參數(shù) 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 擴(kuò)展配置 jeecms-servlet-admin-api.xml后臺(tái)Spring國(guó)際化、攔截器、SpringMVC視圖解析器配置jeecms-servlet-front.xml前臺(tái)Spring國(guó)際化、攔截器、SpringMVC視圖解析器配置jeecms-servlet-admin-api-action.xml 后臺(tái)action配置文件jeecms-servlet-front-action.xml前臺(tái)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 采集、欄目、內(nèi)容、流量公用service包3.3.2service 類代碼編寫樣例 @Service@Transactionalpublic 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;//自動(dòng)裝配dao層 @Autowiredpublicvoid setDao(CmsConfigDao dao) {this.dao= dao;} } 需要@Service@Transactional注解標(biāo)志該類為業(yè)務(wù)邏輯層，所有的 service 層均采用接口開發(fā)模式@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 簡(jiǎn)介 Hibernate 是一個(gè)開放源代碼的對(duì)象關(guān)系映射框架，它對(duì) JDBC 進(jìn)行了非常輕量級(jí)的對(duì)象封裝，使得 Java 程序員可以隨心所欲的使用對(duì)象編程思維來操作數(shù)據(jù)庫。 Hibernate 可以應(yīng)用在任何使用 JDBC 的場(chǎng)合，既可以在 Java 的客戶端程序使用，也可以在 Servlet/JSP 的 Web 應(yīng)用中使用3.4.2DAO 類代碼編寫樣例 持久層采用 Hibernate4，緩存采用 Ehcachecom.mi.cms.dao.main.impl 核心DAO層com.mi.cms.dao.assist.impl 輔助DAO層@Repositorypublic class CmsConfigDaoImplextends HibernateBaseDao<CmsConfig, Integer>implementsCmsConfigDao {publicCmsConfig findById(Integer id) {CmsConfigentity = get(id);returnentity;}//重寫getEntityClass方法 @OverrideprotectedClass<CmsConfig> getEntityClass() {returnCmsConfig.class;} } @Repository 注解標(biāo)志該類是 DAO 層組件，可以選擇繼承 HibernateBaseDao 基礎(chǔ)類，需要實(shí)現(xiàn)接口。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核心功能包的pojocom.mi.cms.entity.main.base 輔助功能包的pojo基礎(chǔ)類com.mi.cms.entity.main.hbm 輔助功能包Hibernate實(shí)體映射文件com.mi.cms.entity.assist輔助功能包的pojocom.mi.cms.entity.assist.base輔助功能包的pojo基礎(chǔ)類com.mi.cms.entity.assist.hbm輔助功能包Hibernate實(shí)體映射文件3.5 自定義標(biāo)簽 3.5.1 定義標(biāo)簽類 ? 自定義標(biāo)簽類所屬包 com.mi.cms.action.directive? 標(biāo)簽類需要實(shí)現(xiàn) Freemarker 內(nèi)置接口 TemplateDirectiveModel? 獲取標(biāo)簽參數(shù)可以用 DirectiveUtils 工具類獲取public classChannelDirective implements TemplateDirectiveModel {/*** 輸入?yún)?shù)，欄目ID。*/publicstatic final String PARAM_ID = "id";/*** 輸入?yún)?shù)，欄目路徑。*/public static final String PARAM_PATH ="path";/*** 輸入?yún)?shù)，站點(diǎn)ID。存在時(shí)，獲取該站點(diǎn)欄目，不存在時(shí)獲取當(dāng)前站點(diǎn)欄目。*/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 @AutowiredprivateChannelMng channelMng;} 3.5.2 配置標(biāo)簽 1.jeecms-context.xml 配置 Spring bean<bean id="cms_content_list"class="com.mi.cms.action.directive.ContentListDirective"/> 2.jeecms-context 文件中 jeecms.properties 文件中引入自定義標(biāo)簽 beandirective.cms_channel_list=cms_channel_list3.5.3 標(biāo)簽應(yīng)用 [@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 標(biāo)簽名稱 count、titLen、orderBy、channelOption、channelId 標(biāo)簽參數(shù)tag_list 標(biāo)簽結(jié)果a 循環(huán)變量${a.url} 輸出 a 對(duì)象的 url 屬性4. 后臺(tái)管理頁面 vue 工程開發(fā) 4.1 環(huán)境準(zhǔn)備 Vue 簡(jiǎn)介Vue.js 提供一個(gè)官方命令行工具，可用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動(dòng)一個(gè)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目：推薦查閱官方文檔 https://cn.vuejs.org/v2/guide/installation.html1、安裝必要環(huán)境 Node.js 下載地址 http://nodejs.cn/. 安裝最新版本 Npm（最新版 node 自帶）2、開發(fā)環(huán)境安裝和啟動(dòng)使用命令行執(zhí)行以下命令 執(zhí)行安裝 node 包c(diǎn)d 項(xiàng)目路徑（vue 工程路徑）npminstall （推薦使用 cnpm install，http://npm.taobao.org/ 加快依賴下載速度） npmrun dev;4.2 工程包介紹 目錄結(jié)構(gòu)：imgimg一級(jí)目錄說明：build webpack 打包配置文件config 全局配置文件 api 域名 appid 配置node_modules:node依賴文件夾src項(xiàng)目源代碼 static 全局資源文件夾（css images js） index.html 入口文件二級(jí)目錄說明:\1. config／dev.env.js 開發(fā)環(huán)境配置文件，修改源代碼時(shí)會(huì)讀取此文件中的配置項(xiàng)config／prod.env.js 生產(chǎn)環(huán)境配置文件，打包完成時(shí)會(huì)讀取使用此文件中的配置項(xiàng)imgimg以上圖（config／dev.env.js）為例，定義了 6 個(gè)屬性NODE_ENV : 標(biāo)識(shí)當(dāng)前環(huán)境 （當(dāng)前環(huán)境為開發(fā)者環(huán)境）BaseUrl：項(xiàng)目的 api 資源 地址Appid：項(xiàng)目的 appidaesKey：項(xiàng)目的 aesKey (加密用)ivKey：項(xiàng)目的 ivKey (加密用)appKey：項(xiàng)目的 appKey (加密用)配置好相應(yīng)的屬性 即可在任意 js 文件中使用該變量，調(diào)用方式為process.env.xxxprocess.env.baseUrlimg2.src/api api 以及全局?jǐn)r截器src/assets 源碼中的資源文件（JS,CSS,iamges）src/components 自定義組件目錄src/directive 自定義指令目錄src/mixins 自定義混合目錄src/plugs 第三方插件目錄（jquery 相關(guān)的插件可存放在此）src/router 路由，角色目錄src/store vuex 定義目錄src/untils 全局方法，簽名，加密函數(shù)存放目錄src/views 功能頁面目錄src/APP.vue 根組件（無需修改）src/config.js 項(xiàng)目路徑配置文件src/main.js 頁面入口文件src/permissions.js 全局路由鉤子配置文件4.3 新增功能模塊講解 4.3.1 新增頁面 后臺(tái)管理頁面采用單頁組件化開發(fā)功能模塊統(tǒng)一存放在 src／views 目錄下，推薦以導(dǎo)航樹層級(jí)管理頁面，例如下圖img1 功能某塊統(tǒng)一以單文件組件的形式構(gòu)造，命名以. vue 結(jié)尾，單文件組件開發(fā)詳情查看 https://cn.vuejs.org/v2/guide/single-file-components.html2. 頁面基礎(chǔ)樣式框架基于 element-ui2.x 版本3. 頁面詳解：此處以用戶列表功能為事例說明用戶功能列表路徑為 src/views/userMange/list.vue4.3.2 數(shù)據(jù)交互 后臺(tái)數(shù)據(jù)交互采用 axios, 更多https://www.npmjs.com/package/axios（推薦） https://www.kancloud.cn/yunye/axios/234845（漢化文檔）1. 創(chuàng)建數(shù)據(jù)請(qǐng)求方法 (請(qǐng)求方法統(tǒng)一存放在 src/api.js 文件下)2. 將所有的接口地址統(tǒng)一存放在 src/api.js 下如圖imgimg如圖：api.js 定義了一個(gè) setAdminApi 函數(shù) 用于拼接重復(fù)的 api 地址api 文檔中以 / api/admin / 為路徑的則可使用該函數(shù) ，否則直接填寫完整路徑例如 bsaeUpload:’/api/member/upload/o_upload’,// 普通文件上傳3．數(shù)據(jù)請(qǐng)求示例1. 普通未封裝請(qǐng)求接口示例在頁面的<script>下引用 axios 然后在需要的方法中調(diào)用 axios 請(qǐng)求 此處以 created 方法中調(diào)用為示例 （具體功能，請(qǐng)根據(jù)自身情況修改使用）axios.post(this.$api.memberList,this.params).then(res=>{~!//此處為請(qǐng)求成功的回調(diào) }).catch(error=>{//此處為請(qǐng)求失敗的回調(diào) }) 說明：axios.post() 方法可以發(fā)送一個(gè) post 請(qǐng)求，其他請(qǐng)求類型有 get ，put ，delete 等，具體參考 axios 文檔this.$api.memberList 此參數(shù)為 api 地址 在頁面中使用 this.?$api.XXX 即可調(diào)用 src/api 中的 地址變量此方法為獲取所有用戶列表信息，傳遞了一個(gè)參數(shù)對(duì)象 params: {// 只需要業(yè)務(wù)參數(shù) ?queryUsername: "",queryEmail: "",queryGroupId: "",queryStatus: "",pageNo: "",pageSize: ""} 在成功的回調(diào)函數(shù)中，可以將列表數(shù)據(jù)賦值給自定義的一個(gè)變量，在頁面中調(diào)用該變量即可，2 列表封裝接口示例本系統(tǒng)封裝了一個(gè) list 和一個(gè) form 混合img此類文件的作用為 將一些公用的方法和變量插入頁面組件中，在頁面則可直接使用該變量以及方法以 src/views/userMange/list.vue 為例在頁面<script></script>中引入mixinsimg此處引入了 list.js 此文件預(yù)先定義了基礎(chǔ)列表所需要的變量以及方法，簡(jiǎn)單的列表查詢及操作，可直接使用該混合文件，具體變量及方法，查看文件內(nèi)注釋在頁面中的 created 方法中 調(diào)用了created(){this.initTableData(this.$api.memberList,this.params);}該方法為混合方法，作用為初始化列表信息，第一個(gè)參數(shù)傳遞的為 api 接口地址，第二個(gè)參數(shù)為自定義參數(shù)對(duì)象，調(diào)用該函數(shù)后會(huì)自動(dòng)初始化列表以及賦值，在頁面上直接使用 tableData 屬性即可數(shù)據(jù)加密方法介紹如業(yè)務(wù)參數(shù)需要加密，則需要在頁面組件中引用 src/untils/aes.js調(diào)用示例：import { Encrypt } from "../untils/aes";let aesKey = this.$store.state.aesKeyletivKey = this.$store.state.ivKey;letaesPassword = Encrypt(this.params.pwd, aesKey, ivKey); 4.3.3 將組件添加至路由表 頁面編寫完成后需要將組件注冊(cè)到路由中關(guān)于路由采用的是 vue-router，更多詳細(xì)：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:'會(huì)員管理', //會(huì)員管理 component: childView,isParent: true,redirect: '/user/list',children: [{path: '/user/list', //會(huì)員列表 name: '會(huì)員列表',component:resolve => { require(['@/views/user/userMange/list.vue'], resolve) },},{path: '/user/save', //會(huì)員添加 name: '會(huì)員添加',component:resolve => { require(['@/views/user/userMange/add.vue'], resolve) },hidden: true},{path: '/user/update', //會(huì)員添加 name: '會(huì)員修改',component:resolve => { require(['@/views/user/userMange/edit.vue'], resolve) },hidden: true}]}, { path：訪問地址（唯一不可重復(fù)）meta：{role:’xxxx’} 角色權(quán)限名, 不可重復(fù)，而且不同板塊前綴要不同，比如用戶模塊叫 user 另外會(huì)員管理叫 userMember 這樣是不行的name:’路由名稱’, 【也就是菜單名】component: component:resolve => { require(['@/views/user/userMange/list.vue'], resolve) },懶加載頁面組件，在點(diǎn)擊該功能時(shí)才加載文件children:子路由4.3.4 權(quán)限控制 權(quán)限文件為 src/routers/roles.js角色權(quán)限編是一個(gè)按照路由層級(jí)來構(gòu)造的 json 對(duì)象（自定義添加時(shí)，也保持同樣的規(guī)則）以用戶列表角色為例{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：角色權(quán)限名稱（角色管理中樹狀結(jié)構(gòu)的名字）role：頁面顯示權(quán)限（就是路由表中的 meta：{role:’xxxx’}）api：頁面組件所擁有的調(diào)用后臺(tái) api 的地址4.3.5 組件使用 vue 是一個(gè)組件化開發(fā)的 js 一切皆為組件在本系統(tǒng)中頁面基礎(chǔ)組件采用了 element2.0 組件庫 (頁面中以 el-xxxx 開頭)自定義組件為自行封裝（頁面中以 cms-xxxx 開頭）自定義組件存放在img開發(fā)中，一些公用的功能可以封裝為自定義組件此處以 cms-input 組件為例img組件頁面與功能頁面結(jié)構(gòu)完全相同< 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);//觸發(fā)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> 此處封裝了一個(gè)標(biāo)簽和輸入框，對(duì)外 props 暴露了 3 個(gè)屬性 value label width在頁面上使用方法為<cms-inputlabel=’標(biāo)簽名’ width=’120’ v-model=’xxx’></cms-input>通過this.$emit('input',value);//觸發(fā)input 事件，并傳入新值 向使用者傳遞返回值4.4 后臺(tái)頁面發(fā)布 后臺(tái)源碼的開發(fā)文件不可直接運(yùn)行在瀏覽器中，需要通過命令打包將源碼生成為靜態(tài)文件1. 使用命令行工具進(jìn)入 工程目錄img項(xiàng)目工程中如果沒有 node_modules 文件夾，則執(zhí)行 npminstall （推薦使用 cnpm install，http://npm.taobao.org/ 加快依賴下載速度） 如果有則忽略此步驟3. 執(zhí)行命令 npm run build出現(xiàn) building for production 則成功執(zhí)行，等待命令完成完成后會(huì)出現(xiàn)下圖img出現(xiàn)上圖，說明打包編譯完成，在項(xiàng)目中會(huì)有一個(gè) dist 文件夾imgdist 文件夾中有兩個(gè)文件img4、將 index.html 改名為 index.do 后，將 index.do 和 static 文件夾放到 ROOT 下的 / jeeadmin/jeecms 文件夾下，eclipse 下放到 / WebContent/jeeadmin/jeecms 下4.5 修改后臺(tái)地址 1. 帶部署路徑和端口的此類情況無須修改，如下http://xxx.jeecms.com/jeeadmin/jeecms/index.do http://xxx.jeecms.com/project/jeeadmin/jeecms/index.do \2. 需要調(diào)整后臺(tái)路徑此類情況須要修改http://xxx.jeecms.com/admin/jeecms/index.do http://xxx.jeecms.com/project/admin/jeecms/index.do 此處修改源碼工程中的 src/config.jsimg將 jeeadmin 文件夾重命名為 admin 即可本文作者： IIsKei 本文鏈接： http://www.iskei.cn/posts/48599.html 版權(quán)聲明： 本博客所有文章除特別聲明外，均采用 CC BY-NC-SA 4.0 許可協(xié)議。轉(zhuǎn)載請(qǐng)注明出處！

?

轉(zhuǎn)載于:https://www.cnblogs.com/Jeely/p/11224267.html

總結(jié)

以上是生活随笔為你收集整理的jeecms v9开发资料的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。