vue开发chrome插件，实现获取界面数据和保存到数据库功能

2024-09-29 19:46:20

前言

最近在评估项目时，要开启评估平台，查看平台和保存平台，感觉非常繁琐，开发了一款可以获取评估平台数据，查看项目排期和直接保存数据到数据库的chrome插件，由于我需要使用之前vue封装的一个日历插件，这里就用vue来开发这个插件。

开发前准备

要开发一个chrome插件，我们首先需要了解chrome插件的基本结构和对应的功能。
每个扩展的文件类型和目录数量有所不同，但都必须有 manifest。一些基本但有用的扩展程序可能仅由 manifest 及其工具栏图标组成。

manifest.json

 {
  "name": "My Extension", // "扩展名"
  "version": "2.1", // 当前创建扩展版本号
  "description": "Gets information from Google.", //"扩展描述"
  "icons": { // 扩展工具界面使用图标
   "128": "icon_16.png",
   "128": "icon_32.png",
   "128": "icon_48.png",
   "128": "icon_128.png"
  },
  "background": { // 扩展常常用一个单独的长时间运行的脚本来管理一些任务或者状态
   "persistent": false,
   "scripts": ["background_script.js"] // 后台常驻脚本，自动运行，直到关闭浏览器。可根据需求自行设置
  },
  "permissions": ["https://*.google.com/", "activeTab"], //开启拓展权限
  "browser_action": {
   "default_icon": "icon_16.png",  // 器右上角显示
   "default_popup": "popup.html" /** 鼠标移入，显示简短扩展文本描述 **/
  },
   "content_scripts": [{  // ontent scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。
  "js": ["script/contentscript.js"], /** 需要注入的脚本 **/
  "matches": [  /** 匹配网址(支持正则)，成功即注入（其余属性自行查询） **/
    "http://*/*",
    "https://*/*"
   ]
  }]
  }

vue开发chrome插件

我们需要使用vue来开发插件，几经搜索，查到一款样板，很方便我们进行vue开发插件，便引入该样板来进行开发。

引入vue-web-extension样板来实现vue开发

 npm install -g @vue/cli
 npm install -g @vue/cli-init
 vue init kocal/vue-web-extension new-tab-page

然后切换到项目目录安装依赖项

 cd new-tab-page
 npm install

我们可以运行

 npm run watch:dev

在项目根目录中会得到一个dist 文件夹，我们直接安装解压的扩展程序，选择这个dist,就可以进行开发并监视更改。

样板文件的基本格式

├── dist
│ └── <the built extension>
├── node_modules
│ └── <one or two files and folders>
├── package.json
├── package-lock.json
├── scripts
│ ├── build-zip.js
│ └── remove-evals.js
├── src
│ ├── background.js
│ ├── icons
│ │ ├── icon_128.png
│ │ ├── icon_48.png
│ │ └── icon.xcf
│ ├── manifest.json
│ └── popup
│ ├── App.vue
│ ├── popup.html
│ └── popup.js
└── webpack.config.js

可以看出，样板文件使用 webpack进行打包，

src文件夹包含我们将用于扩展的所有文件。manifest 文件和 background.js 对于我们来说是熟悉的，但也要注意包含Vue 组件的 popup 文件夹。当样板文件将扩展构建到 dist 文件夹中时，它将通过vue-loader 管理所有 .vue 文件并输出一个浏览器可以理解的 JavaScript 包。

在 src 文件夹中还有一个 icons 文件夹。如果你看一眼 Chrome 的工具栏，会看到我们的扩展程序的新图标（也被称为 browser action）。这就是从此文件夹中拿到的。如果单击它，你应该会看到一个弹出窗口，显示“Hello world！” 这是由 popup/App.vue 创建的。

最后，请注 scripts 文件夹的两个脚本：一个用于删除 eval 用法以符合 Chrome Web Store 的内容安全策略，另一个用于当你要把扩展上传到Chrome Web Store时将其打包到 .zip 文件中。

在 package.json 文件中还声明了各种脚本。我们将用 npm run watch:dev 来开发扩展，然后使用 npm run build-zip 生成一个ZIP文件以上传到 Chrome Web Store。

创建插件界面

我们直接修改popup.html

popup.html

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <link href="popup.css" rel="external nofollow" rel="stylesheet">
 <div id="app">
 </div>
 <script src="popup.js"></script>
</body>
</html>

这里我们引入popup.css和popup.js 在popup.css放入我们需要用的样式在popup.js中，来引入我们的vue文件

popup.js

 import Vue from 'vue'
 import { Tabs,TabPane, Dialog, Button,Form,FormItem,Input,DatePicker,Message,Alert,Tooltip,MessageBox } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import App from './App'
 Vue.use(Tabs);
 Vue.use(TabPane);
 Vue.use(Dialog);
 Vue.use(Button);
 Vue.use(Form);
 Vue.use(FormItem);
 Vue.use(Input);
 Vue.use(DatePicker);
 Vue.use(Tooltip);
 Vue.use(Alert);
 Vue.prototype.$message = Message;
 Vue.prototype.$confirm = MessageBox.confirm;
 new Vue({
  el: '#app',
  render: h => h(App)
 })

这里，我们主要按需引入element-ui中的控件，和app.vue组件

app.vue

 <template>
 <div id="app" style="height: 580px;overflow-y: hidden;width:680px;">
  <div>
   模板
  </div>
  <customPlan :projectData="projectData" :loginPerson="loginPerson"></customPlan>
 </div>
</template>

<script>
import customPlan from '../components/customPlan'
let { Pinyin } = require('../script/pinyin')
let pinyin = new Pinyin()
export default {
 components: { customPlan },
 data() {
  return {
   loginPerson: '',
   projectData: {
    departmentName: '',
    developer: '',
    endDate: '',
    evaluator: '',
    isDeprecated: false,
    isIncludeSaturday: false,
    isNewComponent: false,
    issureAdress: '',
    msg: '',
    name: '',
    startDate: '',
    workDay: '',
    year: 2020
   }
  }
 },
 created() {
  this.getUrl()
 },
 methods: {
  getCaption(obj) {
   var index = obj.lastIndexOf('，')
   obj = obj.substring(index + 1, obj.length)
   return obj
  },
  /**
  * @desc 获取当前页面的url
  */
  getUrl() {
   chrome.tabs.getSelected(null, tab => {
    console.log(tab,"tab")
    this.projectData.issureAdress = tab.url
    chrome.tabs.sendMessage(tab.id, { greet: 'hello' }, response => {
     if (response && response.developer && response.processName) {
      let developer = pinyin
       .getFullChars(this.getCaption(response.developer))
       .toLowerCase()
      this.projectData.evaluator = developer
      this.projectData.name = response.processName
     } else if (response && response.developer && !response.processName) {
      var index = response.developer.lastIndexOf('@')
      response.developer = response.developer.substring(
       index + 1,
       response.developer.length
      )
      this.loginPerson = response.loginPerson
      this.projectData.evaluator = response.developer
      this.projectData.name =response.peocessName
     }
    })
   })
  }
 }
}
</script>

在manifest.json中引入

  "browser_action": {
   "default_title": "测试",
   "default_popup": "popup/popup.html"
  },

这里我们主要引入了我们的日历控件customPlan，大家可以按需引入自己需要的组件。到这里，我们的插件界面基本搭建完成了。

获取当前界面数据，并在插件中进行监听

需要获取当前界面数据，就需要在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。就需要content_scripts里面引入我们需要的contentscript.js文件，在这个js文件中，可以获取浏览器所访问页面的详细信息

 "content_scripts": [{
  "js": ["script/contentscript.js"],
  "matches": [
   "http://*/*",
   "https://*/*"
  ]
 }]

contentscript.js文件配置如下

document.addEventListener('click', function (e) {
  let isCurrect = e.path.length > 3&&e.path[4].innerText&&e.path[4].innerText.indexOf('提交需求') != -1 && e.target.innerText === '确 定' && document.getElementsByClassName('layout-nav') && document.getElementsByClassName('layout-nav')[0].children
  if (isCurrect) {
    if (document.getElementsByClassName('user-table') && document.getElementsByClassName('user-table')[0] && document.getElementsByClassName('user-table')[0].getElementsByClassName('el-table__row').length > 0) {
      var port = chrome.runtime.connect({ name: "custommanage" });//通道名称
      let loginPerson = document.getElementsByClassName('layout-nav') && document.getElementsByClassName('layout-nav')[0].children ? document.getElementsByClassName('layout-nav')[0].children[0].innerText : ''
      let partMentName = document.getElementsByClassName('layout-nav') && document.getElementsByClassName('layout-nav')[0].children ? document.getElementsByClassName('layout-nav')[0].children[3].innerText : ''
      let processName = document.getElementsByClassName('el-input__inner') && document.getElementsByClassName('layout-nav')[0].children ? document.getElementsByClassName('el-input__inner')[0].title : ''
      let tableElement = document.getElementsByClassName('user-table') ? document.getElementsByClassName('user-table')[0].getElementsByClassName('el-table__row') : []
      let choseSelect = []
      for (let value of tableElement) {
        if (value.innerText.indexOf(partMentName) !== -1) {
          choseSelect = value
        }
      }
      let developPerson = ''
      let startTime = ''
      let endTime = ''
      if (choseSelect && choseSelect.getElementsByTagName('td')) {
        developPerson = choseSelect.getElementsByTagName('td')[1].innerText
        startTime = choseSelect.getElementsByTagName('td')[3].getElementsByTagName('input')[0].title
        endTime = choseSelect.getElementsByTagName('td')[4].getElementsByTagName('input')[0].title
      }
      let item = {
        "loginPerson": loginPerson,
        "processName": processName,
        "developPerson": developPerson,
        "startTime": startTime,
        "endTime": endTime
      }
      port.postMessage(item);//发送消息
    } else {
      alert('未查到该项目预排人员与预排时间，请点开插件或打开定制管理系统手动添加项目!')
    }
  }
});

这里获取元素就是js基本知识了。主要使用chrome插件的api

chrome.runtime.connect

保持长期连接的模式，在content scripts与Chrome扩展程序页面之间建立通道（可以为通道命名），可以处理多个消息。在通道的两端分别拥有一个chrome.runtime.Port对象，用以收发消息。这里主要在我们点击需要的按钮时，就会向chrome插件发送消息。
在content scripts主动建立通道如下：

 var port = chrome.runtime.connect({name: "custommanage"});//通道名称
 port.postMessage({joke: "Knock knock"});//发送消息
 port.onMessage.addListener(function(msg) {//监听消息
   port.postMessage({answer: "custommanage"});
 });

获取到界面信息后，在content scripts发生请求消息给Google Chrome扩展程序，我们在插件中就需要获取获取的界面信息了

chrome扩展获取信息

我们在background.js中建立通道，获取web界面传回的信息

chrome.tabs.query(
 { active: true, currentWindow: true },
 function (tabs) {
  var port = chrome.tabs.connect(//建立通道
   tabs[0].id,
   { name: "custommanage" }//通道名称
  );
 });
chrome.runtime.onConnect.addListener((port) => {
 console.assert(port.name == "custommanage");
 port.onMessage.addListener((res) => {
   addActon(res)
 });
});

addAction函数即是保存我们获取的数据到数据库。

 /**
  * @desc 添加获取数据到数据库
  */
function addProject (params) {
   let paramsObj = Object.assign({}, params)
   let optsUpdata = {
    method: 'POST', //请求方法
    body: JSON.stringify(paramsObj), //请求体
    headers: {
     Accept: 'application/json',
     'Content-Type': 'application/json'
    }
   }
   fetch('http://****/api/EditConfirmWork', optsUpdata)
    .then(response => {
     return response.json()
    })
    .then(data => {
     if (data.code === 0) {
      alert('更新成功!')
     }
    })
    .catch(error => {
     alert(error)
    })
}

这里我们采用fetch函数来连接数据库，和修改数据库，后端接口也需要做一些跨域相关处理，才能正常连接，我这里用的Node开发的后端，大致代码如下

//跨域
app.all('*', function (req, res, next) {
 res.header("Access-Control-Allow-Origin", "*");
 res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
 res.header('Access-Control-Allow-Credentials', true)
 next();
});

到此，获取界面数据，并自动保存到数据库功能已完成,background.js我们在manifest.json引用下。

"background": {
  "scripts": ["script/background.js"]
 },

我们需要将编辑好的插件通过webpack打包，还需要在webpack.config.js配置一下，然后运行npm run watch:dev 就可以得到我们需要的dist，安装到扩展程序就可使用了。

webpack.config.js配置如下

const webpack = require('webpack');
const ejs = require('ejs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WebpackShellPlugin = require('webpack-shell-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');
const { VueLoaderPlugin } = require('vue-loader');
const { version } = require('./package.json');

const config = {
 mode: process.env.NODE_ENV,
 context: __dirname + '/src',
 entry: {
  'popup/popup': './popup/popup.js',
  'script/contentscript': './script/contentscript.js',
  'script/background': './script/background.js'
 },
 output: {
  path: __dirname + '/dist',
  filename: '[name].js',
 },
 resolve: {
  extensions: ['.js', '.vue'],
 },
 module: {
  rules: [
   {
    test: /\.vue$/,
    loaders: 'vue-loader',
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
   },
   {
    test: /\.css$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader'],
   },
   {
    test: /\.scss$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
   },
   {
    test: /\.sass$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax'],
   },
   {
    test: /\.(png|jpg|gif|svg|ico)$/,
    loader: 'file-loader',
    options: {
     name: '[name].[ext]?emitFile=false',
    },
   },
   {
    test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
    loader: 'url-loader',
    options: {
     esModule: false,
     limin: 10000,
     name: "font/[name].[hash:8].[ext]"
    }
   }
  ],
 },
 plugins: [
  new VueLoaderPlugin(),
  new MiniCssExtractPlugin({
   filename: '[name].css',
  }),
  new CopyWebpackPlugin([
   { from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
   { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
   {
    from: 'manifest.json',
    to: 'manifest.json',
    transform: (content) => {
     const jsonContent = JSON.parse(content);
     jsonContent.version = version;

     if (config.mode === 'development') {
      jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
     }

     return JSON.stringify(jsonContent, null, 2);
    },
   },
  ])
 ],
};

if (config.mode === 'production') {
 config.plugins = (config.plugins || []).concat([
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"',
   },
  }),
 ]);
}

if (process.env.HMR === 'true') {
 config.plugins = (config.plugins || []).concat([
  new ChromeExtensionReloader(),
 ]);
}

function transformHtml(content) {
 return ejs.render(content.toString(), {
  ...process.env,
 });
}

module.exports = config;

我们数据改变后，如果想点开插件就查看对应界面，这里就按需引入我们需要的组件，来实现不同的界面展示。

最后附上manifest.json完整的配置

 {
 "name": "插件",
 "description": "描述",
 "version": 2.0,
 "manifest_version": 2,
 "icons": {
  "48": "icons/icon_426.png",
  "128": "icons/icon_426.png"
 },
 "browser_action": {
  "default_title": "插件",
  "default_popup": "popup/popup.html"
 },
 "permissions": [
  "tabs",
  "<all_urls>"
 ],
 "background": {
  "scripts": ["script/background.js"]
 },
 "content_scripts": [{
  "js": ["script/contentscript.js"],
  "matches": [
   "http://*/*",
   "https://*/*"
  ]
 }]
}

以上就是vue开发chrome插件，实现获取界面数据和保存到数据库功能的详细内容，更多关于vue开发chrome插件的资料请关注我们其它相关文章！

Vue在chrome44偶现点击子元素事件无法冒泡的解决方法

前言公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的. 现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是'卡'.点不动.点了没反应. 再大致介绍下项目环境: chrome 44(打包到用户客户端内) Vue 2.6.10 左侧列表布局列表的每个绿色方框是一个vue组件,名叫ListItem,列表的组件叫List 代码类似这样 // List.vue <template> <div class="
使用Vue开发自己的Chrome扩展程序过程详解

前言浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序.它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等. 好消息是浏览器扩展并不难写.可以用你已经熟悉的 Web 技术(HTML.CSS 和 JavaScript)创建 -- 就像普通网页一样.但是与网页不同的是,扩展程序可以访问许多特定于浏览器的 API,这才是有趣的地方. 在本教程中,我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展.这个扩展程序的 JavaScript 部分,我
详解vue-cli3开发Chrome插件实践

之前找了不少如何开发谷歌插件的文章,结果发现都是些很基础的内容,并没有写到如何快速编译打包插件.我就在想为什么不能通过webpack来打包插件呢?如果通过webpack编译的话,就能使开发过程变得更舒服,使文件结构趋向模块化,并且打包的时候直接编译压缩代码.后来发现了 vue-cli-plugin-chrome-ext 插件,通过这个插件能很方便地用 vue-cli3 来开发谷歌插件,并能直接引用各种UI框架跟npm插件. tip:如果你没接触过谷歌插件开发的话建议先看看基础文档: Chrome
通过实例解析chrome如何在mac环境中安装vue-devtools插件

1之前在windows上装过,最近刚换了个mac本,重新安装下,也是为了记录下我安装的过程. github下载vue-devtool到本地下载地址https://github.com/vuejs/vue-devtools#vue-devtools 注意,下载的时候默认的是在dev分支,要切换到master,然后克隆到本地(可以先放桌面) 2.将下载的项目文件放入 Chrome浏览器的插件文件夹在浏览器地址栏输入chrome://version/ 找到路径之后,可以在顶部工具栏"前往"
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

一.vue中解决chrome浏览器自动播放音频需求有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频.不光是这样,在页面加载完毕的情况下,用户没有click.dbclick.touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException: 解决
vue.js 初体验之Chrome 插件开发实录

背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码,这样在实际开发中
用VueJS写一个Chrome浏览器插件的实现方法

浏览器基本已经天下大统了,放眼望去都是Chromium的天下.那么,能写一个浏览器插件也算是一种回报率不错的技能. 基本知识浏览器插件官方的说法叫扩展程序,允许你为浏览器增加各种功能,但不需要深入研究浏览器本身的代码.你可以用HTML,CSS和JavaScript创建新的扩展程序,如果你曾经写过网页,那么写一个插件是非常轻松的事情. 常见的插件一般就是地址栏后面的一个图标,点击后给你当前网页提供各种功能,或者在你点击网页右键时弹出额外的菜单. 程序目录结构最简单的扩展程序只需要3个文件,或者
vue开发chrome插件，实现获取界面数据和保存到数据库功能

前言最近在评估项目时,要开启评估平台,查看平台和保存平台,感觉非常繁琐,开发了一款可以获取评估平台数据,查看项目排期和直接保存数据到数据库的chrome插件,由于我需要使用之前vue封装的一个日历插件,这里就用vue来开发这个插件. 开发前准备要开发一个chrome插件,我们首先需要了解chrome插件的基本结构和对应的功能. 每个扩展的文件类型和目录数量有所不同,但都必须有 manifest. 一些基本但有用的扩展程序可能仅由 manifest 及其工具栏图标组成. manifest.js
VSCode Vue开发推荐插件和VSCode快捷键(小结)

首先这几个是VSCode推荐Vue开发必备的插件 Vetur -- 语法高亮.智能感知.Emmet等包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) EsLint -- 语法纠错 Debugger for Chrome -- 映射vscode上的断点到chrome上,方便调试(配置有点麻烦,其实我没用这个) Auto Close Tag -- 自动闭合HTML/XML标签 Auto Rename Tag -- 自动
基于Python开发chrome插件的方法分析

本文实例讲述了基于Python开发chrome插件的方法.分享给大家供大家参考,具体如下: 谷歌Chrome插件是使用HTML.JavaScript和CSS编写的.如果你之前从来没有写过Chrome插件,我建议你读一下这个.在这篇教程中,我们将教你如何使用Python代替JavaScript. 创建一个谷歌Chrome插件首先,我们必须创建一个清单文件:manifest.json. { "manifest_version": 2, "name": "Py
Django 接收Post请求数据,并保存到数据库的实现方法

要说基本操作,大家基本都会,但是有时候,有些操作使用小技巧会节省很多时间. 本篇描述的就是使用dict小技巧,保存到数据库,用来节省大家编码的工作量. 主要内容:通过for循环拿到post表单中的值并保存到一个dict中,然后通过**dict保存到数据库中. 1.用户提交了一个表单,表单内容包含csrf. 2.服务端除了表单中的csrf要过滤掉,其它的都要保存到数据库中. 3.具体看下方代码: 下面的代码分别为修改和保存,其中修改是根据ID修改的. 要注意, 1.保存前的resourcesOld
Python 获取 datax 执行结果保存到数据库的方法

执行 datax 作业,创建执行文件,在 crontab 中每天1点(下面有关系)执行: 其中 job_start 及 job_finish 这两行记录是自己添加的,为了方便识别出哪张表. #!/bin/bash source /etc/profile user1="root" pass1="pwd" user2="root" pass2="pwd" job_path="/opt/datax/job/" j
Chrome插件(扩展)开发全攻略(完整demo)

写在前面我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/sxei/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图: 前言什么是Chrome插件严格来讲,我们正在说的东
Vue Element前端应用开发之获取后端数据

概述在前面随笔<循序渐进VUE+Element 前端应用开发之动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定,菜单顺利弄好了,就需要进一步开发页面功能了,本篇随笔介绍一个案例,通过获取后端数据后,进行产品信息页面的处理. 1.后端数据的获取处理前后端的边界则非常清晰,前端可以在通过网络获取对应的JSON就可以构建前端的应用了. 我们通过Vue.config.js的配置信息,可以
解决Vue axios post请求,后台获取不到数据的问题方法

最近做项目,需要用到vue,后台是php,第一次使用axios进行请求,本以为同ajax一样,会很简单,但是结果往往不让人满意啊,get请求很简单,这里就不说了,主要说下 post请求方式. 使用axios进行post请求,后台居然接收不到数据,这就纳闷了,于是网上一顿搜索,现在将所用的解决办法给大家说下: 1.new URLSearchParams方式起初使用params.append("属性名":属性值)的方式,对于简单的数据传递这样是没有问题的,后台可以正常接收数据,但我发现一
Vue.js使用axios动态获取response里的data数据操作

今天开发时,使用axios返回的response中data有多个数据: 如果是获取cn里的数据的,可以用: response.data.cn 但是需求是根据选择来获取数据的,会发生变化,最开始的想法是,用一个变量来记录需要获取的key: 假设need是需要获取的某个key const dkey = this.need; response.data.dkey 这样发现获取不到数据,这是因为vue.js把dkey当成data里的某一个key了,类似于上面的"cn". 折腾了很久才突然想起,

vue开发chrome插件，实现获取界面数据和保存到数据库功能

相关推荐

随机推荐