Background introduction

html2md By helloworld Developer community Open source is a lightweight and powerful html turn md Tools , Pure front end development , No need for back-end interfaces （ NodeJS Empower ）, Support for multiple platforms , One click to convert the article link to md, It is convenient for you to collect and save articles . The interface is as follows :

Technical realization

1. Technology stack

• vue One of the top three swordsmen , Least claim , Progressive framework with high flexibility
• nuxt By using Vue.js and Node.js Best practices to build high-performance applications
• express be based on Node.js platform , Fast 、 to open up 、 minimalist Web Development framework
• element-ui Universe first Vue Third party component library , I'm not satisfied ？
• js-dom One can be found in Node Simulation of the browser environment API The library of
• turndown Use JavaScript take HTML Convert to Markdown
• axios Easy to use 、 Simple and efficient http library , Support for browsers and Node Environmental Science .
• mavon-editor Based on a Vue Of markdown Editor , Support what you see is what you get
• sass Powerful Css One of the preprocessors

2. Tool Architecture

3. Workflow

Update content and technology implementation

Markdown File saving and downloading

html2md Open source has been around for a while , And in Helloworld The developer community is free for everyone to use , Of course, word of mouth is relatively good , Continue refueling , Strive to make more simple and easy-to-use tools for you ~

not long ago , Many fans have an interesting demand ： Converted md Whether the content can be saved as a local file , In response to the enthusiastic support of fans , The answer, of course, is Yes!

Talk is cheap. Show me the code！

The technical idea is probably soy sauce purple ：

• front end ： Convert the current md Content passes through the interface to the back end interface ️ The interface returns a download address ️ Create a dynamic a Tag to pull up the browser's download task ️ That's the end of the download

Request download interface

toDownload () {
  const params = {
    md: this.md,
    url: window.location.origin
  }
  this.$axios.post(`${window.location.origin}/getMdFile`, params)
    .then((res) => {
      this.downLoadFile(res.path)
    })
}

Create download task

downLoadFile (url) {
  const a = document.createElement('a')
  a.download = `${Date.now()}.md`
  a.href = url
  a.click()
}

• Back end ： The back-end interface here is of course our front-end interface node La ！

  • because md The string is long , There's no brain choice here post Mode to receive parameters
  • Because of the adoption of post, Additional introduction required body-parser To parse the input parameters
  • It involves reading and writing directories and files （IO）, Need to quote fs modular
• The process is like this ： Receive input parameters ️ Determine whether the currently downloaded directory exists ️ If it doesn't exist, create a new one download Catalog ️ If the directory exists, write it directly to md file ️ And return the currently created file path to the front end ️ This way, the back-end work is over

body-parser To configure

//  Used to resolve json Format 
app.use(bodyParser.json({ limit: '50mb' }))
//  Used to resolve body Medium  urlencoded  character 
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }))

receive post Enter the reference

app.post('/getMdFile', function (req, res, next) {
  // post  The participation is in  body  Inside , Here we set the default value 
  const qMd = req.body.md || '##  empty '
  const qUrl = req.body.url || 'https://www.helloworld.net'
  // ...
})

Configure download directory name

const folderName = 'download'
const downLoadPath = path.join('./static', folderName)

Determine whether the download directory exists

//  Determine whether the directory exists , If it exists, write it to the file directly 
const isExist = fs.existsSync(downLoadPath)
if (isExist) {
  //  Folder exists 
  writeFile()
  return
}

//  Folder does not exist , Create a （ It's all synchronous operations ）
fs.mkdirSync(downLoadPath)
writeFile()

Return the written file path to

//  write in md file 
function writeFile () {
  //  Here we take the time stamp as the file name 
  const mdName = `${Date.now()}.md`
  try {
    //  Synchronous write , And back to the front end 
    fs.writeFileSync(`${downLoadPath}/${mdName}`, qMd)
    res.status(200).send({
      code: 1,
      path: `${qUrl}/${folderName}/${mdName}`
    })
  } catch (error) {
    res.status(200).send({
      code: 0,
      msg: ' The program is abnormal ~'
    })
  }
}