微信小程序如何調用后臺service（圖文教程）

篇文章給大家帶來的內容是關于微信小程序如何調用后臺service（圖文教程），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

寫在前頭，本篇文章簡單記錄一下，在前后端分離的微信小程序應用中，前端訪問后臺service的實現思路，沒有過多涉及技術實現方面。

先上一張官網的圖片，它很清楚的講明了要在后臺service為每一個小程序用戶提供登錄信息需要做哪些事情。用戶拿到了后臺給的登錄憑據，訪問后臺service。

靜默授權與非靜默授權

先來講講這兩個概念，靜默授權，顧名思義，這授權動作對于用戶來說是感知不到的，小程序端悄咪咪得就做了。因此，沒有知會用戶的授權方式拿到的信息也是不太重要的。但是，靜默授權是開始重要的一步，因為它為接下來的動作提供了code。調用靜默授權可用小程序提供的API:wx.login()。再來講講非靜默授權，顧名思義，它的授權是要有明顯動靜的，而且它是要得到用戶認可才可以執行。API:wx.getUserInfo()，這個接口要不要用可根據小程序的實際需求來。

后臺獲取openId

小程序提供了一個接口code2session，拿著我們靜默授權獲取到的臨時登錄憑證code再調用一下這個接口就能獲取到openId了。openId是在當前小程序中對用戶唯一性的標識。注意，這一步是在后臺服務器做的，我們參考一下官網的文檔（后端API）就會更清楚了。它說：

后端API不能直接在小程序內通過wx.request調用，即api.weixin.qq.com不能被配置為服務器域名。

但是我們會有疑問，我們在自己開發的時候，在小程序端調用是success的，和官網說的并不一樣。如果你碰到和我一樣的疑問可以看看這個（重點在4.4.2服務器接口）。

基于OAuth2.0生成token

在后臺，可以用SpringSecurity的OAuth2.0這一個工具，用openId來生成前端請求后端數據的附帶校驗信息token。具體是如何實現的筆者也沒有深入了解……獲取到了這個token后，前端可將其存入webStorage中，每一次調用后臺service的時候，就可以利用請求的攔截器在config參數中加入token。后端就可以確定發送請求的用戶身份，保證了系統的安全性。

總結：以上大致描繪了小程序后臺自定義登錄態的開發思路。

本文參考：微信小程序開發基礎教程 https://www.html.cn/study/20.html

以上就是微信小程序如何調用后臺service（圖文教程）的詳細內容，更多請關注其它相關文章！

更多技巧請《轉發 + 關注》哦！

ue+ueditor+springboot, 實現word文檔上傳編輯

前言

`前端導入word文檔（doc和docx格式都支持），Ueditor富文本回顯進行二次編輯，目前ueditor項目archived了，實現兩種格式的相關材料相對稀缺。

`解決思路：

1.上傳word文件

2.后臺讀取word內容（圖片需要額外處理保存到服務器固定的地址，該地址能讓瀏覽器直接訪問），生成html文件

3.后臺讀取html文件內容返回給前端

一、目標

通過上傳word文件，通過后臺進行解析回顯到前端。

二、代碼步驟

后端代碼結構：

1.maven依賴庫

<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>3.15</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>3.15</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml-schemas</artifactId>
<version>3.15</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-scratchpad</artifactId>
<version>3.15</version>
</dependency>
<dependency>
<groupId>fr.opensagres.xdocreport</groupId>
<artifactId>org.apache.poi.xwpf.converter.xhtml</artifactId>
<version>1.0.6</version>
</dependency>

2.vue頁面讀取ueditor的配置

代碼如下：

/**
* 獲取UE文件上傳配置
* @param request
* @param response
* @throws IOException
*/
@GetMapping(value="/config")
public void ueConfig(HttpServletRequest request, HttpServletResponse response) throws IOException {
response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
String urlPrefix=ueProperties.getSavepath();
log.info("urlPrefix="+urlPrefix);
String exec="{\n" +
" /* 上傳圖片配置項 */\n" +
" \"imageActionName\": \"catcherImage\", /* 執行上傳圖片的action名稱 */\n" +
" \"imageFieldName\": \"upfile\", /* 提交的圖片表單名稱 */\n" +
" \"imageMaxSize\": 2048, /* 上傳大小限制，單位B */\n" +
" \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 上傳圖片格式顯示 */\n" +
" \"imageCompressEnable\": true, /* 是否壓縮圖片,默認是true */\n" +
" \"imageCompressBorder\": 800, /* 圖片壓縮最長邊限制 */\n" +
" \"imageInsertAlign\": \"none\", /* 插入的圖片浮動方式 */\n" +
" \"imageUrlPrefix\": \"" + urlPrefix + "\", /* 圖片訪問路徑前綴 */\n" +
" \"imagePathFormat\": \"/ueditor/image/{yyyy}{mm}{dd}/\", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */\n" +
" /* {filename} 會替換成原文件名,配置這項需要注意中文亂碼問題 */\n" +
" /* {rand:6} 會替換成隨機數,后面的數字是隨機數的位數 */\n" +
" /* {time} 會替換成時間戳 */\n" +
" /* {yyyy} 會替換成四位年份 */\n" +
" /* {yy} 會替換成兩位年份 */\n" +
" /* {mm} 會替換成兩位月份 */\n" +
" /* {dd} 會替換成兩位日期 */\n" +
" /* {hh} 會替換成兩位小時 */\n" +
" /* {ii} 會替換成兩位分鐘 */\n" +
" /* {ss} 會替換成兩位秒 */\n" +
" /* 非法字符 \\ : * ? \" < > | */\n" +
" /* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */\n" +
"\n" +
" /* 涂鴉圖片上傳配置項 */\n" +
" \"scrawlActionName\": \"uploadscrawl\", /* 執行上傳涂鴉的action名稱 */\n" +
" \"scrawlFieldName\": \"upfile\", /* 提交的圖片表單名稱 */\n" +
" \"scrawlPathFormat\": \"/ueditor/image/{yyyy}{mm}{dd}/\", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */\n" +
" \"scrawlMaxSize\": 2048000, /* 上傳大小限制，單位B */\n" +
" \"scrawlUrlPrefix\": \"\", /* 圖片訪問路徑前綴 */\n" +
" \"scrawlInsertAlign\": \"none\",\n" +
"\n" +
" /* 截圖工具上傳 */\n" +
" \"snapscreenActionName\": \"uploadimage\", /* 執行上傳截圖的action名稱 */\n" +
" \"snapscreenPathFormat\": \"/ueditor/image/{yyyy}{mm}{dd}/\", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */\n" +
" \"snapscreenUrlPrefix\": \"\", /* 圖片訪問路徑前綴 */\n" +
" \"snapscreenInsertAlign\": \"none\", /* 插入的圖片浮動方式 */\n" +
"\n" +
" /* 抓取遠程圖片配置 */\n" +
" \"catcherLocalDomain\": [\"127.0.0.1\", \"localhost\", \"img.baidu.com\"],\n" +
" \"catcherActionName\": \"catchimage\", /* 執行抓取遠程圖片的action名稱 */\n" +
" \"catcherFieldName\": \"source\", /* 提交的圖片列表表單名稱 */\n" +
" \"catcherPathFormat\": \"/ueditor/image/{yyyy}{mm}{dd}/\", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */\n" +
" \"catcherUrlPrefix\": \"" + urlPrefix + "\", /* 圖片訪問路徑前綴 */\n" +
" \"catcherMaxSize\": 2048000, /* 上傳大小限制，單位B */\n" +
" \"catcherAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 抓取圖片格式顯示 */\n" +
"\n" +
" /* 上傳視頻配置 */\n" +
" \"videoActionName\": \"uploadvideo\", /* 執行上傳視頻的action名稱 */\n" +
" \"videoFieldName\": \"upfile\", /* 提交的視頻表單名稱 */\n" +
" \"videoPathFormat\": \"/ueditor/video/{yyyy}{mm}{dd}/\", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */\n" +
" \"videoUrlPrefix\": \"\", /* 視頻訪問路徑前綴 */\n" +
" \"videoMaxSize\": 10240000, /* 上傳大小限制，單位B，默認10MB */\n" +
" \"videoAllowFiles\": [\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\"], /* 上傳視頻格式顯示 */\n" +
" /* 上傳文件配置 */\n" +
" \"fileActionName\": \"uploadfile\", /* controller里,執行上傳視頻的action名稱 */\n" +
" \"fileFieldName\": \"upfile\", /* 提交的文件表單名稱 */\n" +
" \"filePathFormat\": \"/ueditor/file/{yyyy}{mm}{dd}/\", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */\n" +
" \"fileUrlPrefix\": \"\", /* 文件訪問路徑前綴 */\n" +
" \"fileMaxSize\": 10240000, /* 上傳大小限制，單位B，默認10MB */\n" +
" \"fileAllowFiles\": [\n" +
" \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
" \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
" \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
" ], /* 上傳文件格式顯示 */\n" +
" /* 列出指定目錄下的圖片 */\n" +
" \"imageManagerActionName\": \"listimage\", /* 執行圖片管理的action名稱 */\n" +
" \"imageManagerListPath\": \"/ueditor/image/{yyyy}{mm}{dd}/\", /* 指定要列出圖片的目錄 */\n" +
" \"imageManagerListSize\": 20, /* 每次列出文件數量 */\n" +
" \"imageManagerUrlPrefix\": \"" + urlPrefix + "\", /* 圖片訪問路徑前綴 */\n" +
" \"imageManagerInsertAlign\": \"none\", /* 插入的圖片浮動方式 */\n" +
" \"imageManagerAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], /* 列出的文件類型 */\n" +
" /* 列出指定目錄下的文件 */\n" +
" \"fileManagerActionName\": \"listfile\", /* 執行文件管理的action名稱 */\n" +
" \"fileManagerListPath\": \"/ueditor/file/{yyyy}{mm}{dd}/\", /* 指定要列出文件的目錄 */\n" +
" \"fileManagerUrlPrefix\": \"\", /* 文件訪問路徑前綴 */\n" +
" \"fileManagerListSize\": 20, /* 每次列出文件數量 */\n" +
" \"fileManagerAllowFiles\": [\n" +
" \".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\",\n" +
" \".flv\", \".swf\", \".mkv\", \".avi\", \".rm\", \".rmvb\", \".mpeg\", \".mpg\",\n" +
" \".ogg\", \".ogv\", \".mov\", \".wmv\", \".mp4\", \".webm\", \".mp3\", \".wav\", \".mid\",\n" +
" \".rar\", \".zip\", \".tar\", \".gz\", \".7z\", \".bz2\", \".cab\", \".iso\",\n" +
" \".doc\", \".docx\", \".xls\", \".xlsx\", \".ppt\", \".pptx\", \".pdf\", \".txt\", \".md\", \".xml\"\n" +
" ] /* 列出的文件類型 */\n" +
"}";
PrintWriter writer=response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
}

```

3.前端導入文件

代碼如下：

methods: {
ready(editorInstance) {
  this.editorInstance=editorInstance
  async uploadWordFile(event) {
  const file=event.target.files[0];
  if (!file) return;
  // 將Word文件轉換為HTML
  const htmlContent=await this.convertWordToHtml(file);
  const jsonData=JSON.parse(htmlContent)
  // 設置UEditor的內容
  console.log(jsonData)
  this.editorInstance.execCommand('inserthtml',jsonData.data)
},
async convertWordToHtml(wordFile) {
  // 這里應該是Word文件轉HTML的后端接口調用代碼
  // 假設有一個轉換Word為HTML的后端API
  const formData=new FormData();
  formData.append('file', wordFile);
  const response=await fetch('/api/ue/uploadFile',{
  method:'POST',
  body:formData
})
if (response.ok) {
	return await response.text();
}
throw new Error('轉換失敗');
}
}

4.后端讀取文件生成html

代碼如下：


/** word文檔上傳
*
* @param file
* @return
*/
@PostMapping("/uploadFile")
public Object uploadFile(@RequestParam(name="file") MultipartFile file){
  String filename=file.getOriginalFilename();
  JSONObject result=new JSONObject();
  String visitHtml="";
  try {
    if (filename.endsWith(".docx")) {
    //TODO 處理docx格式的
    visitHtml=WordConverHtmlUtils.docxToHtmlText(file, ueProperties);
    } else if (filename.endsWith(".doc")) {
    //TODO 處理doc格式的
    visitHtml=WordConverHtmlUtils.docToHtmlText(file, ueProperties);
  } else {
  	log.error("不支持的文件格式！");
  }
  result.put("state", "SUCCESS");
  result.put("data", visitHtml);
  log.info("result: {}", result.toString());
  } catch (Exception e) {
 		 log.error("文件找不到異常！");
  	 e.printStackTrace();
  }
  return result;
}

5.WordConverHtmlUtils工具類

??????????

options.URIResolver(new BasicURIResolver(picUri));

picUri地址，必須能通過瀏覽器直接訪問，否則編輯器中無法渲染出來圖片； 比如作者：http://localhost:8000/resource/ueditor/file/20240404/1712220732312.png（本地搭建NG測試）

??????????

代碼如下：
package com.ue.demo.utils;
import cn.hutool.core.lang.UUID;
import com.ue.demo.config.UeProperties;
import lombok.extern.slf4j.Slf4j;
import org.apache.poi.hwpf.HWPFDocument;
import org.apache.poi.hwpf.converter.PicturesManager;
import org.apache.poi.hwpf.converter.WordToHtmlConverter;
import org.apache.poi.hwpf.usermodel.PictureType;
import org.apache.poi.xwpf.converter.core.BasicURIResolver;
import org.apache.poi.xwpf.converter.core.FileImageExtractor;
import org.apache.poi.xwpf.converter.xhtml.XHTMLConverter;
import org.apache.poi.xwpf.converter.xhtml.XHTMLOptions;
import org.apache.poi.xwpf.usermodel.XWPFDocument;
import org.springframework.web.multipart.MultipartFile;
import org.w3c.dom.Document;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.*;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
/**
* @author:Peanut
* @create: 2024-04-05 10:22
* @version: 1.0.0
* @description:
*/
@Slf4j
  public class WordConverHtmlUtils {
        private final static String FILE_URL_PRE="/ueditor/file/";
        /**
        * 上傳docx文檔，返回解析后的Html
        */
        public static String docxToHtmlText(MultipartFile file, UeProperties ueProperties) throws Exception {
        try {
        String fileName=UUID.fastUUID().toString();
        //圖片存放地址
        String imagePath=ueProperties.getSavepath().concat(FILE_URL_PRE).concat("/");
        String fileOutName=imagePath.concat(fileName).concat(".html");
        log.info("上傳docx文檔解析");
        log.info("上傳docx文檔，返回解析后的Html, imagePath:{}", imagePath);
        log.info("fileOutName:{}", fileOutName);
        //獲取一個用操作Word的對象
        XWPFDocument document=new XWPFDocument(file.getInputStream());
        //導出為html時的一些基本設置類
        XHTMLOptions options=null;
        //判斷word文件中是否有圖片
        if(document.getAllPictures().size() > 0) {
        //獲取默認的對象，設置縮進indent
        options=XHTMLOptions.getDefault().indent(4);
        // 如果包含圖片的話，要設置圖片的導出位置
        File imageFolder=new File(imagePath);
        //設置圖片抽取器的目的地文件夾 用于存放圖片文件
        options.setExtractor(new FileImageExtractor(imageFolder));
        // URI resolver word的html中圖片的目錄路徑
        //??????????????????????????????????
        //?????????? 這里需要設置為前端能過直接訪問到的圖片地址， 比如作者：http://localhost:8000/resource/ueditor/file/20240404/1712220732312.png，
        //?????????? 否則，ueditor編輯器無法顯示word文檔中的圖片
        String picUri=ueProperties.getShowpath().concat(imagePath.substring(imagePath.indexOf("ueditor")));
        options.URIResolver(new BasicURIResolver(picUri));
      }
      //獲取輸出的html文件對象
      File outFile=new File(fileOutName);
      if(!outFile.getParentFile().exists()){
      outFile.getParentFile().mkdirs();
      }
      //創建所有的父路徑，如果不存在父目錄的話
      outFile.getParentFile().mkdirs();
      //創建一個輸出流
      OutputStream out=new FileOutputStream(outFile);
      //html轉換器
      XHTMLConverter.getInstance().convert(document, out, options);
      log.info("html轉換器 success");
      //處理生成的html，字符串形式給前端
      return readHtmlStr(fileOutName);
      } catch (Exception e) {
      log.error("docxToHtmlText 解析異常", e);
      }
      return "";
}
/**
* 上傳doc格式Word文檔，返回解析后的Html
* @param file
* @param ueProperties
* @return
* @throws Exception
*/
public static String docToHtmlText(MultipartFile file, UeProperties ueProperties) throws Exception {
      //使用字符數組流獲取解析的內容
      ByteArrayOutputStream baos=new ByteArrayOutputStream();
      OutputStream outStream=new BufferedOutputStream(baos);
      try {
      String fileName=UUID.fastUUID().toString();
      //將上傳的文件傳入Document轉換
      //圖片存放地址
      String docPath=ueProperties.getSavepath().concat(FILE_URL_PRE).concat("/");
      String imagePath=docPath.concat("image/");
      String fileOutName=docPath.concat(fileName).concat(".html");
      log.info("上傳doc文檔，返回解析 ");
      log.info("fileOutName:{}", fileOutName);
      //創建圖片文件的存儲目錄
      new File(imagePath).mkdirs();
      //poi中doc文檔對應的實體類
      HWPFDocument hwpfDocument=new HWPFDocument(file.getInputStream());
      //使用空的文檔對象構建一個轉換對象
      WordToHtmlConverter converter=new WordToHtmlConverter(DocumentBuilderFactory
      .newInstance()
      .newDocumentBuilder()
      .newDocument());
      //設置存儲圖片的管理者--使用匿名內部類實現 該類實現了PicturesManager接口，實現了其中的savePicture方法
      converter.setPicturesManager(new PicturesManager() {
      FileOutputStream out=null;
      //在下面的processDocument方法內部會調用該方法 用于存儲word中的圖片文件
      @Override
      public String savePicture(byte[] bytes, PictureType pictureType, String name, float width, float height) {
      try {
      //單個照片的保存
      out=new FileOutputStream(imagePath + name);
      out.write(bytes);
      } catch (IOException exception) {
      exception.printStackTrace();
      }finally {
      if(out !=null) {
      try {
      out.close();
      } catch (IOException e) {
      e.printStackTrace();
      }
      }
}
//這里要返回給操作者（HtmlDocumentFacade）一個存儲的路徑 用于生成Html時定位到圖片資源
//??????????????????????????????????
//?????????? 這里需要設置為前端能過直接訪問到的圖片地址， 比如作者：http://localhost:8000/resource/ueditor/file/20240404/1712220732312.png，
//?????????? 否則，ueditor編輯器無法顯示word文檔中的圖片
			return ueProperties.getShowpath().concat(imagePath.substring(imagePath.indexOf("ueditor"))).concat(name);
      }
      });
      //使用外觀模式，將hwpfDocument文檔對象設置給HtmlDocumentFacade中的Document屬性
      converter.processDocument(hwpfDocument);
      //獲取轉換器中的document文檔
      Document htmlDocument=converter.getDocument();
      //充當文檔對象模型 （DOM） 樹形式的轉換源樹的持有者 -- 源樹
      DOMSource domSource=new DOMSource(htmlDocument);
      //轉換器 該對象用于將源樹轉換為結果樹
      Transformer transformer=TransformerFactory.newInstance().newTransformer();
      //設置輸出時的以什么方式輸出，也可說是結果樹的文件類型 可以是html/xml/text或者是一些擴展前三者的擴展類型
      transformer.setOutputProperty(OutputKeys.METHOD , "html");
      //設置一些必要的屬性 設置輸出時候的編碼為utf-8
      transformer.setOutputProperty(OutputKeys.ENCODING , "utf-8");
      //轉換 將輸入的源樹轉換為結果樹并且輸出到streamResult中
      transformer.transform(domSource , new StreamResult(new File(fileOutName)));
      log.info("html轉換器 success");
      //處理生成的html，字符串形式給前端
      return readHtmlStr(fileOutName);
      } catch (Exception e) {
      log.error("docToHtmlText 異常", e);
      } finally {
      baos.close();
      outStream.close();
      }
      return null;
}
/**
* 讀取html文件，轉成字符串返回給前端
* 去除換行，以及連續兩個空格
* @param htmlDirPath html文件路徑
* @return
* @throws IOException
*/
private static String readHtmlStr(String htmlDirPath) throws IOException {
log.info("處理生成的html，字符串形式給前端:{} ...Start..", htmlDirPath);
String htmlStr="";
try {
Path htmlPath=Paths.get(htmlDirPath);
htmlStr=new String(Files.readAllBytes(htmlPath));
htmlStr=htmlStr.replaceAll("\\n", "");
htmlStr=htmlStr.replaceAll("\\s{2,}", " ");
log.info("處理生成的html，字符串形式給前端。。。end");
} catch (IOException e) {
log.error("處理生成的html，字符串形式出錯了, {}", e.getMessage());
}
return htmlStr;
}
}

6.后端配置文件

代碼如下：

spring.application.name=ue
server.port=8000
##UE編輯器配置
#編輯器訪問服務器的圖片地址
ue.showpath=http://localhost:8000/resource
#ue文件存儲路徑前綴
ue.savepath=/Users/cookie/Documents/coding/uedemo
```
!!! ue.showpath=生產上有nginx需要在nginx.conf進行配置

三、實現效果

成功通過導入word文章，回顯內容到ueditor編輯器

總結

*贈人玫瑰，手留余香*

源碼地址：

https://gitee.com/gwancookie/uedemo

**讀取word文檔生成html借鑒：**

https://blog.csdn.net/qq_44717657/article/details/124497326

天給大家推薦一款超不錯的CMS內容管理系統DoraCMS-Admin。

dora-cms 基于vue.js+eggjs+express+mongodb構建的一套后臺CMS管理系統，star高達2.8K+。結構簡單、易于拓展，非常適合進行二次開發。

技術棧

vue+vuex+vue-router 全家桶
webpack
nodejs+eggjs+express
mongodb 4+

功能結構圖

模板開發

公用模板header

{% header adaptor="default" %}

<!-- 模板靜態資源 -->
{% assets 'base.css index.css media.css swiper.min.css list.css swiper.min.js' %}
{% endassets %}

<!-- 二次開發靜態資源 -->
{% assets 'dora.front.js white.css' %}
{% endassets %}

{% endheader %}

獲取推薦文檔recommend

{% recommend pageSize=3 %}
{% for item in recommend %}
<li><a href="{{item.url}}" target="_blank">{{item.stitle}}</a></li>
{% endfor %}

獲取熱門標簽hottags

{% hottags pageSize=15 %}
{% for tagItem in hottags %}
<li><a href="{{tagItem.url}}">{{tagItem.name}}</a></li>
{% endfor %}

更多的模板調用這里不詳細介紹了，大家可以去查看下面的文檔。

https://www.doracms.com/frontend/showdata/

目前市面上有很多內容管理系統（如織夢CMS、帝國等），都是以php開發為主，而DoraCMS 則是基于nodejs，只要有一些前端開發基礎，很快就能上手。而且DoraCMS完全開源，你可以自由定制屬于自己的網站內容管理平臺。

end，附上項目地址鏈接。

# 文檔地址
https://www.doracms.com/

# 倉庫地址
https://github.com/doramart/DoraCMS/

好了，今天就分享到這里。如果感興趣可以去看看，希望對大家有所幫助哈！

在線咨詢

上一篇：網頁數據如何使用Python的方式進行解析？
下一篇：天天上網的你，了解URL的發展史嗎？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

微信小程序如何調用后臺service（圖文教程）

技術棧

功能結構圖

模板開發

您的項目需求