您的位置:时时app平台注册网站 > web前端 > vue中使用Ueditor编辑器彩世界网址

vue中使用Ueditor编辑器彩世界网址

2019-10-16 01:15

API 层

  • api/ – 诉求数据,Mock数据,反向校验后端api

webpack.base.confg.js   webpack的功底配置文件

module.export = {

    // 编译入口文件

    entry: {},

    // 编写翻译输出路径

    output: {},

    // 一些实施方案安插

    resolve: {},

    resolveLoader: {},

    module: {

        // 各类差异品种文件加载器配置

        loaders: {

        ...

        ...

        // js文件用babel转码

        {

            test: /.js$/,

            loader: 'babel',

            include: projectRoot,

            // 哪些文件无需转码

            exclude: /node_modules/

        },

        ...

        ...

        }

    },

    // vue文件一些有关陈设

    vue: {}

}

 

  // 配置ueditor的图纸上传服务器预览路线

util 层

  • util/ – 存放项目全局的工具函数
  • … 假诺中期项目要求,举个例子需求写一些vue自定义的一声令下,能够在此个依据必要活动创设目录,也属于util层

dev-server.js

  // ueditor 顾客发起上传图片央求

业务层

  • service/ – 管理服务端重临的数量(类似data format),举例 service 同期调用了差异的api,把差异的回到数据整合在共同在统一发送到 store 中

npm run build      铺排   是将Vue网页放到服务器上

大家在命令行中输入npm run build命令后,vue-cli会自动实行项目揭露打包。你在package.json文件的scripts字段中能够见见,你实行的npm run build命令就相对推行的 node build/build.js     开垦使用           npm run dev       项目根目录生成了dist文件夹,这一个文件夹里边正是我们要传播服务器上的文本。

dist文件夹下目录富含:

  • index.html 主页文件:因为大家开采的是单页web应用,所以说经常独有三个html文件。
  • static 静态能源文件夹:里边js、CSS和部分图片。

          mounted() {

架构划虚构计

在付出那些项如今,作者去参与了首都的第二届 vueconf 大会,此中有一个大旨是阴明讲的《丹佛掘金队 Vue.js 2.0 后端渲染及重构施行》,讲了掘金队重构后的架构划虚拟计,小编觉着她们的架构划虚构计的挺不错,所以参考丹佛掘金的架构,设计了三个更切合大家自个儿事务场景的架构

.

|-- build                            // 项目营造(webpack)相关代码

|   |-- build.js                     // 生产意况营造代码

|   |-- check-version.js             // 检查node、npm等版本

|   |-- dev-client.js                // 热重载相关

|   |-- dev-server.js                // 创设地面服务器

|   |-- utils.js                     // 营造筑工程具相关

|   |-- webpack.base.conf.js         // webpack基础配置

|   |-- webpack.dev.conf.js          // webpack开垦条件布置

|   |-- webpack.prod.conf.js         // webpack生产意况布置

|-- config                           // 项目支出条件布置

|   |-- dev.env.js                   // 开辟碰着变量

|   |-- index.js                     // 项目有个别布署变量

|   |-- prod.env.js                  // 生产情状变量

|   |-- test.env.js                  // 测验情状变量

|-- src                              // 源码目录

|   |-- components                     // vue公共组件

|   |-- store                          // vuex的情事管理

|   |-- App.vue                        // 页面入口文件

|   |-- main.js                        // 程序入口文件,加载各个公共组件

|-- static                           // 静态文件,比方部分图形,json数据等

|   |-- data                           // 群聊剖判得到的多少用于数据可视化

|-- .babelrc                         // ES6语法编写翻翻译并配词置

|-- .editorconfig                    // 定义代码格式

|-- .gitignore                       // git上传供给忽视的文件格式

|-- README.md                        // 项目表达

|-- favicon.ico

|-- index.html                       // 入口页面

|-- package.json                     // 项目基本音讯

 

 

      // console.log(this.editor.setContent("1223"))

Vue 项目框架结构划设想计与工程化实行

2018/07/25 · JavaScript · Vue

原来的小讲出处: Berwin   

文中会叙述自个儿从0~1搭建三个上下端分离的vue项目详细经过

Feature:

  • 一套很实用的架构划设想计
  • 由此 cli 工具生成新品类
  • 透过 cli 工具开端化配置文件
  • 编写翻译源码与机关上传CDN
  • Mock 数据
  • 反向检查测试server api接口是还是不是相符预期

近日大家导航在支付一款新的成品,名字为 快言,是叁个大旨词社区,具体这一个产品是干什么的就不进行讲了,有意思味的友人能够点进去玩一玩~

那些项指标1.0乞丐版上线后,须要二个管制体系来保管这几个产品,这一年自个儿手里快言项目标法力已经上线,权且并未有别的急需支付的机能,所以本人跑去找小编非常把后台这几个类型给轰下了。

// 检查 Node 和 npm 版本

require('./check-versions')()

 

// 获取 config/index.js 的暗中认可配置

var config = require('../config')

 

// 倘使 Node 的条件不能够看清当前是 dev / product 意况

// 使用 config.dev.env.NODE_ENV 作为当下的境遇

 

if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)

 

// 使用 NodeJS 自带的文件路径工具

var path = require('path')

 

// 使用 express

var express = require('express')

 

// 使用 webpack

var webpack = require('webpack')

 

// 三个足以强制张开浏览器并跳转到内定 url 的插件

var opn = require('opn')

 

// 使用 proxyTable

var proxyMiddleware = require('http-proxy-middleware')

 

// 使用 dev 环境的 webpack 配置

var webpackConfig = require('./webpack.dev.conf')

 

// default port where dev server listens for incoming traffic

 

// 如果未有一些名运营端口,使用 config.dev.port 作为运营端口

var port = process.env.PORT || config.dev.port

 

// Define HTTP proxies to your custom API backend

//

 

// 使用 config.dev.proxyTable 的配置作为 proxyTable 的代理配置

var proxyTable = config.dev.proxyTable

 

// 使用 express 运维一个服务

var app = express()

 

// 运维 webpack 举办编写翻译

var compiler = webpack(webpackConfig)

 

// 运营 webpack-dev-middleware,将 编写翻译后的文书暂存到内部存款和储蓄器中

var devMiddleware = require('webpack-dev-middleware')(compiler, {

  publicPath: webpackConfig.output.publicPath,

  stats: {

    colors: true,

    chunks: false

  }

})

 

// 运转 webpack-hot-middleware,约等于大家常说的 Hot-reload

var hotMiddleware = require('webpack-hot-middleware')(compiler)

// force page reload when html-webpack-plugin template changes

compiler.plugin('compilation', function (compilation) {

  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {

    hotMiddleware.publish({ action: 'reload' })

    cb()

  })

})

 

// proxy api requests

// 将 proxyTable 中的央求配置挂在到运行的 express 服务上

Object.keys(proxyTable).forEach(function (context) {

  var options = proxyTable[context]

  if (typeof options === 'string') {

    options = { target: options }

  }

  app.use(proxyMiddleware(context, options))

})

 

// handle fallback for HTML5 history API

// 使用 connect-history-api-fallback 相配财富,假使不包容就足以重定向到钦赐地址

app.use(require('connect-history-api-fallback')())

 

// serve webpack bundle output

// 将暂存到内部存款和储蓄器中的 webpack 编译后的公文挂在到 express 服务上

app.use(devMiddleware)

 

// enable hot-reload and state-preserving

// compilation error display

// 将 Hot-reload 挂在到 express 服务上

app.use(hotMiddleware)

 

// serve pure static assets

// 拼接 static 文件夹的静态能源路线

var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)

// 为静态财富提供响应服务

app.use(staticPath, express.static('./static'))

 

// 让我们以此 express 服务监听 port 的伏乞,並且将此服务作为 dev-server.js 的接口暴光

module.exports = app.listen(port, function (err) {

  if (err) {

    console.log(err)

    return

  }

  var uri = ':' port

  console.log('Listening at ' uri 'n')

 

  // when env is testing, don't need open it

  // 假设不是测量检验情状,自动张开浏览器并跳到我们的支付地址

  if (process.env.NODE_ENV !== 'testing') {

    opn(uri)

  }

})

 

 

 

 

编写翻译源码

前方说了小编们的品种是纯前端工程,所以希望是编写翻译出多个无其余依赖的纯html文件

彩世界网址 1

在应用 vue-cli 发轫化项目标时候,官方的 webpack 模板会把webpack的陈设都安装好,项素不相识成好了以往一贯运转 npm run build 就足以编写翻译源码,不过编写翻译出来的html中依据的js、css是地点的,所以小编明日要做的事情正是想方法把那么些编写翻译后的静态文件上传cdn,然后把html中的本地地址替换到上传cdn之后的地方

花色是因而webpack插件 HtmlWebpackPlugin 来生成html的,所以小编想以此插件应该会有接口来扶植自身材成职分,所以本身查看了这几个插件的文书档案,开掘那个插件会接触一些事件,笔者倍感这一个事件应该能够扶助作者成功职务,所以自身写了demo来尝试一下逐项事件都以干什么用的乃至有怎么样界别,经过尝试开采了多个事件称为 html-webpack-plugin-alter-asset-tags的风波能够扶植作者成功职务,所以笔者写了下边那样的代码:

var qcdn = require('@q/qcdn') function CdnPlugin (options) {} CdnPlugin.prototype.apply = function (compiler) { compiler.plugin('compilation', function(compilation) { compilation.plugin('html-webpack-plugin-alter-asset-tags', function(htmlPluginData, callback) { console.log('> Static file uploading cdn...') var bodys = htmlPluginData.body.map(upload(compilation, htmlPluginData, 'body')) var heads = htmlPluginData.head.map(upload(compilation, htmlPluginData, 'head')) Promise.all(heads.concat(bodys)) .then(function (result) { console.log('> Static file upload cdn done!') callback(null, htmlPluginData) }) .catch(callback) }) }) } var extMap = { script: { ext: 'js', src: 'src' }, link: { ext: 'css', src: 'href' }, } function upload (compilation, htmlPluginData, type) { return function (item, i) { if (!extMap[item.tagName]) return Promise.resolve() var source = compilation.assets[item.attributes[extMap[item.tagName].src].replace(/^(/)*/g, '')].source() return qcdn.content(source, extMap[item.tagName].ext) .then(function qcdnDone(url) { htmlPluginData[type][i].attributes[extMap[item.tagName].src] = url return url }) } } module.exports = CdnPlugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var qcdn = require('@q/qcdn')
 
function CdnPlugin (options) {}
 
CdnPlugin.prototype.apply = function (compiler) {
  compiler.plugin('compilation', function(compilation) {
    compilation.plugin('html-webpack-plugin-alter-asset-tags', function(htmlPluginData, callback) {
      console.log('> Static file uploading cdn...')
 
      var bodys = htmlPluginData.body.map(upload(compilation, htmlPluginData, 'body'))
      var heads = htmlPluginData.head.map(upload(compilation, htmlPluginData, 'head'))
 
      Promise.all(heads.concat(bodys))
        .then(function (result) {
          console.log('> Static file upload cdn done!')
          callback(null, htmlPluginData)
        })
        .catch(callback)
    })
  })
}
 
var extMap = {
  script: {
    ext: 'js',
    src: 'src'
  },
  link: {
    ext: 'css',
    src: 'href'
  },
}
 
function upload (compilation, htmlPluginData, type) {
  return function (item, i) {
    if (!extMap[item.tagName]) return Promise.resolve()
    var source = compilation.assets[item.attributes[extMap[item.tagName].src].replace(/^(/)*/g, '')].source()
    return qcdn.content(source, extMap[item.tagName].ext)
      .then(function qcdnDone(url) {
        htmlPluginData[type][i].attributes[extMap[item.tagName].src] = url
        return url
      })
  }
}
 
module.exports = CdnPlugin

其实原理并不复杂,compilation.assets 里保存了文本内容,htmlPluginData 里保存了怎么输出html, 所以从 compilation.assets 中读取到文件内容然后上传CDN,然后用上传后的CDN地址把htmlPluginData 中的本地地址替换掉就行了。

下一场将以此插件增多到build/webpack.prod.conf.js布署文件中。

此地有个关键点是,html中的信赖和静态文件中的依赖是见仁见智的管理情势

哪些意思呢,举个例证:

源码编译后生成了多少个静态文件,把这一个静态文件上传到cdn,然后用cdn地址替换掉html里的本地地址(正是上边CdnPlugin正好做的事体)

你以为水到渠成了? No!No!No!

CdnPlugin 只是把在html中引进的编写翻译后的js,css上传了cdn,然而js,css中引进的图片恐怕字体等文件并没上传cdn

假诺代码中引进了本地的有些图片或字体,编写翻译后那么些地方依旧本地的,此时的html是有依附的,是不纯的,若是只把html上线了,代码中依附的这一个图片和字体在服务器上找不到文件就能有标题

故此供给先把源码中凭仗的静态文件(图片,字体等)上传到cdn,然后在把编写翻译后的静态文件(js,css)上传cdn。

代码中依靠的静态文件比方图片,怎么上传cdn呢?

答案是用 loader 来实现,webpack 中的 loader 以自个儿的通晓它是二个filter,可能是中间件,可想而知正是 import 二个文本的时候,这几个文件先通过loader 过滤二回,把过滤后的结果回到,过滤的历程能够是 babel 这种编写翻译代码,当然也得以是上传cdn,所以小编写了上面那样的代码:

var loaderUtils = require('loader-utils') var qcdn = require('@q/qcdn') module.exports = function(content) { this.cacheable && this.cacheable() var query = loaderUtils.getOptions(this) || {} if (query.disable) { var urlLoader = require('url-loader') return urlLoader.call(this, content) } var callback = this.async() var ext = loaderUtils.interpolateName(this, '[ext]', {content: content}) qcdn.content(content, ext) .then(function upload(url) { callback(null, 'module.exports = ' JSON.stringify(url)) }) .catch(callback) } module.exports.raw = true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var loaderUtils = require('loader-utils')
var qcdn = require('@q/qcdn')
 
module.exports = function(content) {
  this.cacheable && this.cacheable()
  var query = loaderUtils.getOptions(this) || {}
 
  if (query.disable) {
    var urlLoader = require('url-loader')
    return urlLoader.call(this, content)
  }
 
  var callback = this.async()
  var ext = loaderUtils.interpolateName(this, '[ext]', {content: content})
 
  qcdn.content(content, ext)
    .then(function upload(url) {
      callback(null, 'module.exports = ' JSON.stringify(url))
    })
    .catch(callback)
}
 
module.exports.raw = true

其实正是把 content 上传CDN,然后把CDN地址抛出去

有了那个loader 之后,在 import 图片的时候,获得的就是二个cdn的地方~

然则本人不想在支付景况也上传cdn,小编梦想唯有在转移境况才用这些loader,所以作者设置了三个 disable 的选项,如果 disabletrue,我使用 url-loader 来管理那一个文件内容。

终极把loader也加多到布署文件中:

rules: [ ..., { test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: path.join(__dirname, 'cdn-loader'), options: { disable: !isProduction, limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } } ]

1
2
3
4
5
6
7
8
9
10
11
12
rules: [
  ...,
  {
    test: /.(png|jpe?g|gif|svg)(?.*)?$/,
    loader: path.join(__dirname, 'cdn-loader'),
    options: {
      disable: !isProduction,
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  }
]

写好了 cdn-loadercdn-plugin 之后,已经能够编写翻译出二个无别的依靠的纯html,下一步便是把那个html文件透露上线

主要文件package.json

ackage.json文件是种类根目录下的贰个文本,定义该品养费用所须要的种种模块以至部分体系布局消息(如项目名称、版本、描述、笔者等)。

package.json 里的scripts字段,这几个字段定义了您能够用npm运行的授命。在开荒情况下,在命令行工具中运作npm run dev 就一定于执行 node build/dev-server.js  .也正是翻开了一个node写的开采用实行提出服务器。因而能够旁观script字段是用来钦命npm相关命令的缩写。

  "scripts": {

    "dev": "node build/dev-server.js",

    "build": "node build/build.js"

  },

 

dependencies字段和devDependencies字段

  • dependencies字段指项目运作时所依据的模块;
  • devDependencies字段钦定了体系费用时所依据的模块;

在指令行中运维npm install命令,会自行安装dependencies和devDempendencies字段中的模块。package.json还应该有多数相关计划

        return {

一体化架构图

彩世界网址 2

webpack配置相关

咱俩在上头说了运行npm run dev 就相当于执行了node build/dev-server.js,表达那一个文件十二分首要,先来熟识一下它。 

 

全局事件机制

  • event-bus/ – 首要用以管理特别须要

有关这一层笔者想详细说一下,这一层最开始本身感觉没什么用,并且那么些事物很凶险,新手操作不当很轻便出bug,所以就没加,后来有多个急需正好用到了自身才了然event-bus是用来干什么的

event-bus 小编不推荐在业务中动用,在业务中采纳这种全局的风云机制非常轻易出bug,何况大许多需求通过vuex维护状态就能够化解,那event-bus 是用来干什么的呢?

用来管理非常须要的,,,,那怎样是差别经常要求吗,小编说一下我们在什么地点用到了event-bus

场景:

咱俩的花色是纯前端项目,又是个管理体系,所以登录功效就比极美妙

彩世界网址 3

地方是登录的总体流程图,关于登入前端供给做多少个专门的学业:

  1. 监听全数api的响应,假设未登陆后端会再次回到三个错误码
  2. 若果后端再次来到叁个未登陆的错误码,前端需求跳转到公司合併的登入宗旨去登录,登入成功后会跳转回当前地点并在url上指点sid
  3. 监听全部路由,假设开掘路由上带有sid,表明是从登入核心跳过来的,用这一个sid去央求一下客户消息
  4. 登录成功并获得客户音讯

通过地点一二种的登入流程,最终的结果是登录之后会得到二个顾客音讯,这一个得到客商音信的操作是在router里发起的施行,那么难点就来了,router中拿到了客户新闻小编愿意把这一个客户消息放到store里,因为在router中拿不到vue实例,不能直接操作vuex的情势,那年如果未有event-bus 就很难操作。

进而常常 event-bus 大家都会用在表现层上面包车型大巴别的层级(未有vue实例)之间通讯,並且须要求很精晓自个儿在做什么样

干什么 event-bus 很轻巧出标题?好像它正是一个平时的轩然大波机制而已,为何那么凶险?

那是个好主题素材,小编说一下我已经碰着的贰个主题素材。先描述一个很简短的作业场景:“步向贰个页面然后加载列表,然后点击了翻页,重新拉取一下列表”

用event-bus来写的话是这么的:

watch: { '$route' () { EventHub.$emit('word:refreshList') } }, mounted () { EventBus.$on('word:refreshList', _ => { this.changeLoadingState(true) .then(this.fetchList) .then(this.changeLoadingState.bind(this, false)) .catch(this.changeLoadingState.bind(this, false)) }) EventBus.$emit('word:refreshList') }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
watch: {
  '$route' () {
    EventHub.$emit('word:refreshList')
  }
},
mounted () {
  EventBus.$on('word:refreshList', _ => {
    this.changeLoadingState(true)
      .then(this.fetchList)
      .then(this.changeLoadingState.bind(this, false))
      .catch(this.changeLoadingState.bind(this, false))
  })
  EventBus.$emit('word:refreshList')
}

watch 路由,点击翻页后触发事件再一次拉取一下列表,

效果写完后测验了意识成效都好使,没什么难题就上线了

然后过了几天不常二回开掘怎么 network 里那样多种复的呼吁?点了一回翻页怎么发了如此多个 fetchList 的伏乞???什么景况????

此地有二个菜鸟很轻易忽视的难点,即正是涉世特别丰硕的人也会在不上心的场地犯错,这正是生命周期差别步的标题,event-bus 的注解周期是大局的,唯有在页面刷新的时候 event-bus 才会复位内幕,而组件的扬言周期相对来讲就短了无数,所以地方的代码当自家步向那么些组件然后又销毁了那个组件然后又走入那些组件每每四回之后就能够在 event-bus 中监听了过八个 word:refreshList 事件,每一遍触发事件实际都会有好八个函数在实践,所以才会在 network 中窥见N多个同样的乞请。

于是开掘那么些bug之后尽快加了几行代码把这么些标题修复了:

destroyed () { EventHub.$off('word:refreshList') }

1
2
3
destroyed () {
  EventHub.$off('word:refreshList')
}

从今出了那么些主题材料之后,笔者就好像与自己一只开垦后台的伙伴说了这几个事,提议持有业务供给Infiniti不要在利用event-bus了,除非很了然的明亮自个儿正值干什么。

 

揭橥上线

品类框架结构搭建好了未来一度得以起来写作业了,所以自个儿每一天的白昼是在支付业务职能,上午和星期天的光阴用来支付编写翻译上线的效果与利益

 

基本功设备层

  • init – 自动化初步化配置文件
  • dev – 运行dev-server,hot-reload,http-proxy 等援救开垦
  • deploy – 编写翻译源码,静态文件上传cdn,生成html,公布上线

        destroyed() {

工夫选型

收纳那个职务后,作者首先思索那个类型事后会变得非常复杂,效率会要命多。所以须求专心设计项目架构和开辟流程,保险项目早先时期复杂度更加高的时候,代码可维护性依然维持最早的事态

后台项目需求频仍的出殡和埋葬乞请,操作dom,以致保证种种情况,所以自身急需先为项目选取一款合适的mvvm框架,综合考虑最终项目框架选取使用 Vue,原因是:

  • 左边轻易,团队新人能够很轻巧就参加到这些连串中开展付出,对开垦者水平要求好低(究竟是集团项目,门槛低自个儿感觉不行重大)
  • 本人个人小编对Vue还算相比熟习,一年前2.0还没发布的时候阅读过vue 1.x的源码,对vue的法则有询问,项目支出中相见的全数标题作者都有信心能缓慢解决掉
  • 实验商讨了大家团队的分子,超越50%都利用过vue,对vue多少都有过支付经历,而且此前组织内也用vue开拓过部分品类

进而最终选项了Vue

    }

api-proxy

尽管品类得以健康费用了,但小编以为还非常不够,作者希望项目能够有 mock 数据的效应并且能够检查服务端重临的多少是还是不是准确,可以幸免因为接口再次来到数据不得法的标题debug好久。

于是小编付出了二个大约的模块 api-proxy ,便是包裹了多个http client,能够配备诉求音讯和Mock 法则,开启Mock的时候利用Mock准绳退换Mock数据重临,不开启Mock的时候使用Mock法规来校验接口重返是不是切合预期。

那么 api-proxy 怎么样使用呢?

例如:

. └── api └── log ├── index.js └── fetchLogs.js

1
2
3
4
5
6
.
└── api
    └── log
        ├── index.js
        └── fetchLogs.js
 

/* * /api/log/fetchLogs.js */ export default { options: { url: '/api/operatelog/list', method: 'GET' }, rule: { 'data': { 'list|0-20': [{ 'id|3-7': '1', 'path': '/log/opreate', 'url': '/operate/log?id=3', 'user': 'berwin' }], 'pageData|7-8': { 'cur': 1, 'first': 1, 'last': 1, 'total_pages|0-999999': 1, 'total_rows|0-999999': 1, 'size|0-999999': 1 } }, 'errno': 0, 'msg': '操作日志列表' } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*
* /api/log/fetchLogs.js
*/
export default {
  options: {
    url: '/api/operatelog/list',
    method: 'GET'
  },
  rule: {
    'data': {
      'list|0-20': [{
        'id|3-7': '1',
        'path': '/log/opreate',
        'url': '/operate/log?id=3',
        'user': 'berwin'
      }],
      'pageData|7-8': {
        'cur': 1,
        'first': 1,
        'last': 1,
        'total_pages|0-999999': 1,
        'total_rows|0-999999': 1,
        'size|0-999999': 1
      }
    },
    'errno': 0,
    'msg': '操作日志列表'
  }
}

/* * /api/log/index.js */ import proxy from '../base.js' import fetchLogs from './fetchLogs.js' export default proxy.api({ fetchLogs })

1
2
3
4
5
6
7
8
9
/*
* /api/log/index.js
*/
import proxy from '../base.js'
import fetchLogs from './fetchLogs.js'
 
export default proxy.api({
  fetchLogs
})

使用:

import log from '@/api/log' log.fetchLogs(query) .then(...)

1
2
3
import log from '@/api/log'
log.fetchLogs(query)
  .then(...)

虚拟到新鲜情形,也并不是要挟必得这么使用,作者要么抛出了二个api方法来供开荒者通常使用,比如:

// 不使用api-proxy的api import {api} from './base' export default { getUserInfo (sid) { return api.get('/api/user/getUserInfo', { params: { sid } }) } }

1
2
3
4
5
6
7
8
9
10
11
12
// 不使用api-proxy的api
import {api} from './base'
 
export default {
  getUserInfo (sid) {
    return api.get('/api/user/getUserInfo', {
      params: {
        sid
      }
    })
  }
}

这个 api 就是 axios ,并没做什么样万分管理。

                pathRewrite: {

表现层

  • store/ – Vuex 状态管理
  • router/ – 前端路由
  • view/ – 种种业务页面
  • component/ – 通用组件

          },

整治与总括

因此地点一多种做的事,最终整理一下体系工程化的生命周期

彩世界网址 4

叩问越来越多能够看自个儿写过的 PPT

1 赞 收藏 评论

彩世界网址 5

  五、   实施上述代码恐怕晤面世的题目

先导化配置文件

项目花费中会用到部分配备文件,比方开采境况亟待计划二个server地址用来设置api须要的server。开垦意况的安插文件各个人都不均等,所以笔者在 .gitignore 中把这些dev.conf 屏蔽掉,并未入到版本库中,所以就带来了三个标题,每一次有新人步入到那么些项目,在首先次搭建项目标时候,总是要手动创设叁个dev.conf 文件,笔者梦想能自动创设布局文件

正巧以前本人写了叁个近似于 vue-cli 的工具 speike-cli,也是通过沙盘生成项指标八个工具,所以那一遍正好派上用场,作者把铺排文件定义了八个模板,然后使用 speike 来生成了贰个配备文件

// package.json { "scripts": { "init": "speike init ./config/init-tpl ./config/dev.conf" } }

1
2
3
4
5
6
// package.json
{
  "scripts": {
    "init": "speike init ./config/init-tpl ./config/dev.conf"
  }
}

彩世界网址 6

          serverUrl: "",

揭橥上线

大家部门有温馨的揭露上线的工具叫 hera 能够把代码公布到docker机上进展编写翻译,然后把编译后的纯html文件表露到先行布署好的服务器的钦点目录中

编写翻译的流水生产线是先把代码发布到编写翻译机上 -> 编写翻译机运营 docker (docker能够确认保障编写翻译碰着一致) -> 在 docker 中执行 npm install 安装信任 -> 施行 npm run build 编译 -> 把编译后的 html 发送到服务器

因为每一趟编写翻译都急需设置信任,速度特别慢,所以大家有贰个 diffinstall 的逻辑,每回安装信任都博览会开三次diff,把有缓存的直接用缓存copy到node_modules,没缓存的使用qnpm安装,之后会把此番新装置的正视性缓存一份。正视缓存了随后每一趟安装依赖速度显明快了大多。

明天项目早就得以平常费用和上线啦~

    在ueditor.config.js中期维修改如下代码:

分选vue周边重视(全家桶)

框架定了Vue 后,接下去自个儿索要选取部分vue套餐来支援开拓,作者选拔的套餐有:

  • vuex – 项目复杂后,使用vuex来治本状态至关重要
  • element-ui – 基于vue2.0 的零部件库,饿了么的那套组件库还蛮好用的,功用也全
  • vue-router – 单页应用不可缺少供给采纳前端路由(这种管理类别非常相符单页应用,系统有的时候索要再三的切换页面,使用单页应用能够很便捷的切换页面并且数量也是按需加载,不会再一次加载信任)
  • axios – vue 官方推荐的http客商端
  • vue-cli 的 webpack 模板,那套模板是功力最全的,有hot reload,linting,testing,css extraction 等成效

  如果Ueditor必要动用文件以致图片的上传则在ueditor.config.js中张开如下配置:

目录结构

. ├── README.md ├── build # build 脚本 ├── config # prod/dev build config 文件 ├── hera # 代码发表上线 ├── index.html # 最基础的网页 ├── package.json ├── src # Vue.js 大旨业务 │ ├── App.vue # App Root Component │ ├── api # 接入后端服务的底蕴 API │ ├── assets # 静态文件 │ ├── components # 组件 │ ├── event-bus # 伊芙nt Bus 事件总线,类似 伊芙ntEmitter │ ├── main.js # Vue 入口文件 │ ├── router # 路由 │ ├── service # 服务 │ ├── store # Vuex 状态管理 │ ├── util # 通用 utility,directive, mixin 还应该有绑定到 Vue.prototype 的函数 │ └── view # 各类页面 ├── static # DevServer 静态文件 └── test # 测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.
├── README.md
├── build                   # build 脚本
├── config                  # prod/dev build config 文件
├── hera                    # 代码发布上线
├── index.html              # 最基础的网页
├── package.json
├── src                     # Vue.js 核心业务
│   ├── App.vue             # App Root Component
│   ├── api                 # 接入后端服务的基础 API
│   ├── assets              # 静态文件
│   ├── components          # 组件
│   ├── event-bus           # Event Bus 事件总线,类似 EventEmitter
│   ├── main.js             # Vue 入口文件
│   ├── router              # 路由
│   ├── service             # 服务
│   ├── store               # Vuex 状态管理
│   ├── util                # 通用 utility,directive, mixin 还有绑定到 Vue.prototype 的函数
│   └── view                # 各个页面
├── static                  # DevServer 静态文件
└── test                    # 测试
 

从目录结构上,能够窥见大家的类型中平素不后端代码,因为大家是纯前端工程,整个git旅馆都以前面三个代码,包涵中期公布上线都从前面一个项目独立上线,不注重后端~

代码发表上线的时候会先实行编写翻译,编写翻译的结果是三个无任何借助的html文件 index.html,然后把那个 index.html 公布到服务器上,在编写翻译阶段具有的注重,包含css,js,图片,字体等都会自行上传到cdn上,最后生成二个无任何依据的纯html,大致是上面包车型客车旗帜:

<!DOCTYPE html><html><head><meta charset=utf-8><title>快言处理后台</title><link rel=icon href= href= rel=stylesheet></head><body><div id=app></div><script type=text/javascript src= type=text/javascript src= type=text/javascript src=;

1
<!DOCTYPE html><html><head><meta charset=utf-8><title>快言管理后台</title><link rel=icon href=https://www.360.cn/favicon.ico><link href=http://s3.qhres.com/static/***.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=http://s2.qhres.com/static/***.js></script><script type=text/javascript src=http://s8.qhres.com/static/***.js></script><script type=text/javascript src=http://s2.qhres.com/static/***.js></script></body></html>

 

最初化项目

本次该有的都有了,能够欢快的写码了,为了现在有周边的田间管理体系创建项目便利,笔者把本次精心设计的架构,编写翻译逻辑等定制作而成了模版,日后能够直接利用speike 选拔那几个模板来变化项目。

彩世界网址 7

    </template>

  出现此种现象的原由是配置ueditor的图样以至文件的后台上传递口不科学;

  注:

 

          serverUrl: "/api/ue",

          res.setHeader('Content-Type', 'text/html'); //IE8下载要求安装再次来到头尾text/html 否则json重临文件会被一向下载张开

    <buttontype="" @click="gettext">点击</button>

  // 服务器统一乞求接口路线

  // 将editor进行销毁

  // 服务器统一乞请接口路线,配置的服务端接口

                }

  var foo = req.ueditor;

  var img_url = '/ueditor';

 

            }

    exportdefault {

  this.editor.destroy();

  var ueditor = require("ueditor");

  var imgname = req.ueditor.filename;

        res.redirect('/ueditor/nodejs/config.js');

    nodejs中的config.js就是下载的ueditor包的jsp文件夹下config.json文件

  服务端项目文件中在public中增添如下目录以致文件

 

  三、   文本的引进

    //后台接口地址

    npm install –save-dev ueditor

  现在将不会再冒出上述报错,但是也将不只怕进展图纸的上传:如下图:

    import'../static/Ueditor/ueditor.parse.min.js'

 

  六、   假如利用的是node的express做服务端,接口开采如下

     彩世界网址 8

    import'../static/Ueditor/lang/zh-cn/zh-cn.js'

  开垦接口

  //加载ueditor 模块

 

    从Ueditor的官方网站下载1.4.3.3jsp本子的Ueditor编辑器,官方网址地址为:

          res.ue_up(img_url); //你固然输入要保留的地点。保存操作交给ueditor来做

    //前端全数的/ueditor'央求都会呈请到后台的/ueditor'路线之下

 

  //使用模块

      // 获取editor中的文本

  var dir_url = '/ueditor';

  上述接口中的"/api/ue"接口正是安顿在前台项目ueditor.config.js文件中的serverUrl地址;

    <divid="editor"></div>

  //  顾客端发起图片列表乞求

      }

 

  // 客商端发起其余央求

        res.setHeader('Content-Type', 'application/json');

  假若Ueditor无需使用文件以至图片的上传则在ueditor.config.js中开展如下配置:(将serverUrl注释掉)

 

  app.use("/api/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {

          console.log('config.json')

   

          methods: {

    首先下载编辑器包

 彩世界网址 9

 

  if (req.query.action === 'uploadimage') {

                  console.log(this.editor.getContent())

                changeOrigin: true,

            data() {

      }

    注:ueditor中的images文件夹是上传图片后存款和储蓄的地点

              gettext() {

    将上述Ueditor文件夹拷贝到vue项目标static文件夹中,此文件夹为项指标静态服务文件夹;

              }

                    editor: null,

          },

      this.editor = UE.getEditor('editor');

       彩世界网址 10

        window.UEDITOR_HOME_URL = "/static/Ueditor/"

  四、   在对应vue的componnent文件中采用富文本编辑器

          res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的有所图片

 </script>

      // 实例化editor编辑器

               }

  举行上述配置后,绝对要在webpack的代理中增加如下代理:

 

  '/ueditor': {

                target: '',

  二、   修改配置

}));

     下载解压后会获得要是下文件目录:

          }

  // serverUrl: URL "jsp/controller.jsp",

    </div>

    在vue项目标进口文件main.js中校Ueditor全体的底蕴文件引进如下:(路线自行配制)

    }

    import'../static/Ueditor/ueditor.all.min.js'

    import'../static/Ueditor/ueditor.config.js'

      '^/ueditor': '/ueditor'

    <!--editor的div为富文本的承上启下容器-->

    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

  1. 1.   并发如下报错

    // 这里是配置Ueditor内部实行理文件件央求时的静态文件服务地点

  elseif (req.query.action === 'listimage') {

    <div>

      http://ueditor.baidu.com/website/

    <script>

  一、   下载包:

 

  上述接口中img_url的'/ueditor'和res.redirect的'/ueditor/nodejs/config.js'配置都以选择的express静态文件服务对图纸存款和储蓄路径和图表私下认可配置文件的贮存和伏乞;

 

   彩世界网址 11

    <template>

          },

 

  else {

  //可能假使利用了代理,则足以如下实行配置

    //这里能够效仿服务器实行get和post参数的传递

本文由时时app平台注册网站发布于web前端,转载请注明出处:vue中使用Ueditor编辑器彩世界网址

关键词: