開發(fā)文檔1. 系統(tǒng)架構概述 本系統(tǒng)核心架構為 FreeMarker+hibernate+Spirng 的 mvc 分層架構。1.1 分層架構模型 img1.2 數據流轉模型 (前端) img2. 框架目錄介紹 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 靜態(tài)頁的封裝包包 com\mi\cms\staticpage\exception 靜態(tài)頁的異常處理類型 com\mi\cms\statistic 內容發(fā)布統(tǒng)計包 com\mi\cms\statistic\workload 流量統(tǒng)計包 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 靜態(tài)頁的封裝包 com\mi\cms\staticpage\exception 靜態(tài)頁的異常處理類型 com\mi\cms\statistic 流量統(tǒng)計包 com\mi\cms\statistic\workload 內容發(fā)布統(tǒng)計包 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. 開發(fā)流程指導 3.1 展現層 3.1.1Freemarer 介紹 FreeMarker 是一個用 Java 語言編寫的模板引擎，它基于模板來生成文本輸出。FreeMarker 與 Web 容器無關，即在 Web 運行時，它并不知道 Servlet 或 HTTP。它不僅可以用作表現層的實現技術，而且還可以用于生成 XML，JSP 或 Java 等。img3.1.2 后臺頁面 后臺管理頁面全部采用 vue 工程開發(fā)，參考4. 后臺管理頁面 vue 工程開發(fā)](#_4. 后臺管理頁面 vue 工程開發(fā))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 @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);}//自動裝配對象 @AutowiredprivateCmsLogMng manager; } //統(tǒng)一返回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@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;//自動裝配dao層 @Autowiredpublicvoid setDao(CmsConfigDao dao) {this.dao= dao;} } 需要@Service@Transactional注解標志該類為業(yè)務邏輯層，所有的 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 簡介 Hibernate 是一個開放源代碼的對象關系映射框架，它對 JDBC 進行了非常輕量級的對象封裝，使得 Java 程序員可以隨心所欲的使用對象編程思維來操作數據庫。 Hibernate 可以應用在任何使用 JDBC 的場合，既可以在 Java 的客戶端程序使用，也可以在 Servlet/JSP 的 Web 應用中使用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 注解標志該類是 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核心功能包的pojocom.mi.cms.entity.main.base 輔助功能包的pojo基礎類com.mi.cms.entity.main.hbm 輔助功能包Hibernate實體映射文件com.mi.cms.entity.assist輔助功能包的pojocom.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 @AutowiredprivateChannelMng 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 文件中引入自定義標簽 beandirective.cms_channel_list=cms_channel_list3.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 循環(huán)變量${a.url} 輸出 a 對象的 url 屬性4. 后臺管理頁面 vue 工程開發(fā) 4.1 環(huán)境準備 Vue 簡介Vue.js 提供一個官方命令行工具，可用于快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動一個帶熱重載、保存時靜態(tài)檢查以及可用于生產環(huán)境的構建配置的項目：推薦查閱官方文檔 https://cn.vuejs.org/v2/guide/installation.html1、安裝必要環(huán)境 Node.js 下載地址 http://nodejs.cn/. 安裝最新版本 Npm（最新版 node 自帶）2、開發(fā)環(huán)境安裝和啟動使用命令行執(zhí)行以下命令 執(zhí)行安裝 node 包cd 項目路徑（vue 工程路徑）npminstall （推薦使用 cnpm install，http://npm.taobao.org/ 加快依賴下載速度） npmrun dev;4.2 工程包介紹 目錄結構：imgimg一級目錄說明：build webpack 打包配置文件config 全局配置文件 api 域名 appid 配置node_modules:node依賴文件夾src項目源代碼 static 全局資源文件夾（css images js） index.html 入口文件二級目錄說明:\1. config／dev.env.js 開發(fā)環(huán)境配置文件，修改源代碼時會讀取此文件中的配置項config／prod.env.js 生產環(huán)境配置文件，打包完成時會讀取使用此文件中的配置項imgimg以上圖（config／dev.env.js）為例，定義了 6 個屬性NODE_ENV : 標識當前環(huán)境 （當前環(huán)境為開發(fā)者環(huán)境）BaseUrl：項目的 api 資源 地址Appid：項目的 appidaesKey：項目的 aesKey (加密用)ivKey：項目的 ivKey (加密用)appKey：項目的 appKey (加密用)配置好相應的屬性 即可在任意 js 文件中使用該變量，調用方式為process.env.xxxprocess.env.baseUrlimg2.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 新增頁面 后臺管理頁面采用單頁組件化開發(fā)功能模塊統(tǒng)一存放在 src／views 目錄下，推薦以導航樹層級管理頁面，例如下圖img1 功能某塊統(tǒng)一以單文件組件的形式構造，命名以. vue 結尾，單文件組件開發(fā)詳情查看 https://cn.vuejs.org/v2/guide/single-file-components.html2. 頁面基礎樣式框架基于 element-ui2.x 版本3. 頁面詳解：此處以用戶列表功能為事例說明用戶功能列表路徑為 src/views/userMange/list.vue4.3.2 數據交互 后臺數據交互采用 axios, 更多https://www.npmjs.com/package/axios（推薦） https://www.kancloud.cn/yunye/axios/234845（漢化文檔）1. 創(chuàng)建數據請求方法 (請求方法統(tǒng)一存放在 src/api.js 文件下)2. 將所有的接口地址統(tǒng)一存放在 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() 方法可以發(fā)送一個 post 請求，其他請求類型有 get ，put ，delete 等，具體參考 axios 文檔this.$api.memberList 此參數為 api 地址 在頁面中使用 this.?$api.XXX 即可調用 src/api 中的 地址變量此方法為獲取所有用戶列表信息，傳遞了一個參數對象 params: {// 只需要業(yè)務參數 ?queryUsername: "",queryEmail: "",queryGroupId: "",queryStatus: "",pageNo: "",pageSize: ""} 在成功的回調函數中，可以將列表數據賦值給自定義的一個變量，在頁面中調用該變量即可，2 列表封裝接口示例本系統(tǒng)封裝了一個 list 和一個 form 混合img此類文件的作用為 將一些公用的方法和變量插入頁面組件中，在頁面則可直接使用該變量以及方法以 src/views/userMange/list.vue 為例在頁面<script></script>中引入mixinsimg此處引入了 list.js 此文件預先定義了基礎列表所需要的變量以及方法，簡單的列表查詢及操作，可直接使用該混合文件，具體變量及方法，查看文件內注釋在頁面中的 created 方法中 調用了created(){this.initTableData(this.$api.memberList,this.params);}該方法為混合方法，作用為初始化列表信息，第一個參數傳遞的為 api 接口地址，第二個參數為自定義參數對象，調用該函數后會自動初始化列表以及賦值，在頁面上直接使用 tableData 屬性即可數據加密方法介紹如業(yè)務參數需要加密，則需要在頁面組件中引用 src/untils/aes.js調用示例：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 將組件添加至路由表 頁面編寫完成后需要將組件注冊到路由中關于路由采用的是 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 對象（自定義添加時，也保持同樣的規(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：角色權限名稱（角色管理中樹狀結構的名字）role：頁面顯示權限（就是路由表中的 meta：{role:’xxxx’}）api：頁面組件所擁有的調用后臺 api 的地址4.3.5 組件使用 vue 是一個組件化開發(fā)的 js 一切皆為組件在本系統(tǒng)中頁面基礎組件采用了 element2.0 組件庫 (頁面中以 el-xxxx 開頭)自定義組件為自行封裝（頁面中以 cms-xxxx 開頭）自定義組件存放在img開發(fā)中，一些公用的功能可以封裝為自定義組件此處以 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);//觸發(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> 此處封裝了一個標簽和輸入框，對外 props 暴露了 3 個屬性 value label width在頁面上使用方法為<cms-inputlabel=’標簽名’ width=’120’ v-model=’xxx’></cms-input>通過this.$emit('input',value);//觸發(fā)input 事件，并傳入新值 向使用者傳遞返回值4.4 后臺頁面發(fā)布 后臺源碼的開發(fā)文件不可直接運行在瀏覽器中，需要通過命令打包將源碼生成為靜態(tài)文件1. 使用命令行工具進入 工程目錄img項目工程中如果沒有 node_modules 文件夾，則執(zhí)行 npminstall （推薦使用 cnpm install，http://npm.taobao.org/ 加快依賴下載速度） 如果有則忽略此步驟3. 執(zhí)行命令 npm run build出現 building for production 則成功執(zhí)行，等待命令完成完成后會出現下圖img出現上圖，說明打包編譯完成，在項目中會有一個 dist 文件夾imgdist 文件夾中有兩個文件img4、將 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.jsimg將 jeeadmin 文件夾重命名為 admin 即可本文作者： IIsKei 本文鏈接： http://www.iskei.cn/posts/48599.html 版權聲明： 本博客所有文章除特別聲明外，均采用 CC BY-NC-SA 4.0 許可協(xié)議。轉載請注明出處！

?

轉載于:https://www.cnblogs.com/Jeely/p/11224267.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。