搜索到
12
篇与
的结果
-
谷歌插件开发1 谷歌插件功能：切换不同颜色的谷歌浏览器当前页的背景颜色第一步：创建一个名为chrome的文件夹。第二步：在创建的文件夹下创建manifest.json、popup.html、popup.js。第三步：在manifest.json中写入以下代码{ “manifest_version”: 3,//开发版本 “name”: “My Popup Extension”,//插件名称 “version”: “1.0”,//插件版本 “action”: { “default_popup”: “popup.html”//默认浏览器按钮页面 }, //权限设置 “permissions”: [ “activeTab”,//浏览器当前页 “tabs”,//所有页 “scripting”//可以通过 JavaScript 代码与网页进行交互、修改页面内容和行为 ] }第四步：在popup.html中写入以下代码（html布局以及js引入），popup.html是浏览器按钮插件的弹框一般在右上角展示。<!– * @Author: liangzai * @Date: 2023-06-07 16:27:25 * @LastEditTime: 2023-06-25 13:57:10 * @LastEditors: liangzai * @Description: 页面布局 –> <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <style> ul{ list-style: none; margin: 0; padding: 10px; display: flex; align-items: center; flex-direction: column; text-align: center; } body{ width: 300px; height: 200px; } div{ width: 300px; height: 200px; } li{ width: 100%; margin-top: 10px; padding: 10px; cursor: pointer; } </style> <script src=”popup.js”></script> </head> <body> <div> <ul> <li class=”li” style=”border: 1px solid gray;border-radius: 10px;”>灰色</li> <li class=”li” style=”border: 1px solid blue;border-radius: 10px;”>蓝色</li> <li class=”li” style=”border: 1px solid skyblue;border-radius: 10px;”>天空蓝</li> <li class=”li” style=”border: 1px solid green;border-radius: 10px;”>绿色</li> </ul> </div> <!– <script src=”popup.js”> –> </script> <!– <script src=”background.js”></script> –> </body> </html>第五步：在popup.js中编写以下逻辑/* * @Author: liangzai * @Date: 2023-06-25 10:45:40 * @LastEditTime: 2023-06-25 16:24:52 * @LastEditors: liangzai * @Description: 动态修改浏览器的背景颜色 */ document.addEventListener(“DOMContentLoaded”, function() { //元素加载完后再执行 var colorArr = [“gray”,”blue”,”skyblue”,”green”];//颜色切换数组 var li = document.getElementsByClassName(“li”);//获取popup.html中的li元素 for(let i = 0; i < li.length; i++) { (function(index){ li[index].addEventListener(“click”, function(){ const colorIndex = index; //获取点击元素的下标 const color = colorArr[colorIndex];//获取数组中对应的颜色 //获取当前的标签页 chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { const tabId = tabs[0].id;//当前页的tabId chrome.scripting.executeScript({ //在当前活动的标签页中执行自定义的 JavaScript 脚本 target: { tabId: tabId },//指向当前页 function:changeBackgroundColor//执行的函数 , args:[color] //函数的传值 }); }); }) })(i)//使用闭包的方式来执行这样可以获取到index } //上面方法需要定义的函数 function changeBackgroundColor(color){ //修改浏览器当前页面的背景颜色 document.body.style.backgroundColor = color; } })结束语：通过这个案例可以简单的了解下谷歌插件开发的流程。结果截图：选择不同的颜色可以切换不同的背景颜色。 -
vue3封装el-button 1、确认安装最新版nodenode -v2、全局安装vite，并在cmd中输出npm install -g create-vite@latest3、创建vite项目vue版本，完成后安装依赖启动项目create-vite my-projectcd my-project //切换到项目目录npm install //安装依赖npm run dev //启动项目4、在components目录下创建ELBUTTON.vue<!-- * @Author: liangzai * @Date: 2023-06-30 14:06:50 * @LastEditTime: 2023-07-07 17:19:09 * @LastEditors: liangzai * @Description: 封装el-button子组件 --> <template> <button ref="button" class="el-button" :class="[typeClass,sizeClass,disableClass]" :disabled="disabled" @click="clickButton"> <slot></slot> </button> </template> <script setup lang="ts"> import { computed ,ref} from 'vue'; //defineProps 来接收组件的传值 const props = defineProps({ type: { type:String, default:"" }, size: { type:String, default:"" }, disabled: { type:Boolean, default:"false" } }) //定义自定义click事件 const emit = defineEmits(["click"]) let typeClass = computed(()=>props.type?`el-button--${props.type}` : ""); //type字段对应的类名 let sizeClass = computed(()=>props.size?`el-button--${props.size}` : ""); //size字段对应的类名 let disableClass = computed(()=>props.disabled == true ?`el-button--disabled` : ""); //disabled字段对应的类名 //获取元素 const button = ref(null) //定义点击事件 const clickButton = ()=>{ emit('click') } </script> <style scoped> .el-button{ display: inline-block;/* 设置为行内样式 */ text-align: center; /* 文字居中 */ cursor: pointer; /* 手指形状 */ padding: 14px 20px; border-radius: 5px; /* 圆角 */ font-size: 14px; /* 字体大小 */ outline: none; /* 外部的线 */ border: none; /* 取消默认边框 */ } /* type为primary时对应的颜色 */ .el-button--primary{ background: #409EFF; color: white; } /* type为success时对应的颜色 */ .el-button--success{ background: #67C23A; color: white; } /* type为danger时对应的颜色 */ .el-button--danger{ background: #f56c6c; color: white; } /* size为large时对应的字体大小和长度宽度 */ .el-button--large{ width: 200px; height: 40px; font-size: 18px; line-height: 10px; } /* size为small时对应的字体大小和长度宽度 */ .el-button--small{ width: 100px; height: 25px; font-size: 18px; line-height: 10px; } /* disabled为禁用时对应的背景颜色 */ .el-button--disabled{ background: rgba(64,158,255,.5); } </style>5、在App.vue中引入子组件ELBUTTON.vue<!-- * @Author: liangzai * @Date: 2023-06-30 14:06:50 * @LastEditTime: 2023-07-07 17:21:40 * @LastEditors: liangzai * @Description: 主入口文件 --> <template> <div> <!-- 传递type、size、disabled，设置点击事件来控制按钮的禁用 --> <el-button type="primary" size="small" :disabled="disabled" @click="changeStatus">按钮</el-button> </div> </template> <script setup> import {ref} from "vue" import elButton from "./components/ELBUTTON.vue" //定义disabled状态 let disabled = ref(false) //改变状态 const changeStatus = ()=>{ disabled.value = true; } </script> <style> body{ margin: 0; padding: 0; } </style>6、查看界面上的效果即可//没禁用时候的效果//禁用时候的效果
-
nodejs实现mysql的增删改查 1、初始化生成package.json文件先在cmd中查看是否安装node 使用node -v来查看是否安装node，如果出现具体的版本还则进行下一步，否则去node官网安装node.js在创建好的文件夹中cmd并输入以下代码初始化npm init2、创建test.js文件并安装mysql模块npm install mysql3、文件夹中引入mysql模块const mysql = require(‘mysql’);4、配置连接数据库的内容const connection = mysql.createConnection({ host: 'localhost',//主机名 port: 3306,//端口号 user: 'root',//用户名 password: 'root',//密 码 database: 'wb'//数据库名 });5、连接数据库connection.connect();6、为了让增加、修改、删除看的更清晰，查询封装成一个方法以便看到输出的结果function searchSql (){ connection.query('select * from wb_user', (err, data) => { if (err) throw err; console.log("查询内容==============>",data); } ); } //用到的时候只需要去调用方法即可7、插入数据connection.query(`insert into wb_user (user_id,user_name,display_name,password,status,create_date,login_times) values ("cszh","cszh","语文老师","123456",1,now(),0)`, (err, data) => { if (err) throw err; console.log("插入数据==============>",data); //调用查询方法 searchSql(); //断开数据库连接 connection.end(); } );插入数据执行结果图：8、修改数据connection.query('update wb_user set user_name="zszs" where user_id="cszh"', (err, data) => { if (err) { throw err;}else{ console.log("修改内容==============>",data); //调用查询方法 searchSql(); //断开数据库连接 connection.end(); } } ); 修改数据执行结果图：9、删除数据connection.query('delete from wb_user where user_id="cszh"', (err, data) => { if (err) throw err; console.log("删除数据==============>",data); //调用查询方法 searchSql(); //断开数据库连接 connection.end(); } );删除数据执行结果图：10、执行完sql记得断开连接 connection.end();这样我们就完成了简单的nodejs操作mysql的增删改查了。
-
-
前端跨域的解决方案 跨域出现的原因协议(http,https等)域名(例baidu.com)端口(:8080/3000等等)协议不同，域名不同，端口不同都会出现跨域的情况例1 协议不同http://baidu.com:8080https://baidu.com:8080例2 域名不同http://172.0.0.1:8080https://172.0.0.2:8080例3 端口不同http://baidu.com:8080http://baidu.com:8081总结：只要这三个中存在任意一个不一样，就会出现跨域情况解决跨域的方法jsonp利用script标签不受跨域的影响来实现原生的形式 //动态生成script标签 var script = document.createElement('script'); //设置请求地址和回调函数 script.src = '请求地址?参数&callback=getData'; //动态创建的script添加到body中 document.body.appendChild(script); //执行请求的回调函数 function getData(res){ //转成对象 JSON.parse(res); } jquery ajax的形式$.ajax({ url: '请求地址', type: 'get或者post', dataType: 'jsonp', // 解决跨域的重点这里写成jsonp jsonpCallback: "callback", //回调函数 });vue形式实例化vue对象上绑定$jqueryvue.$jquery.jsonp('请求地址',{ ..., jsonp:'自定义回调函数' }).then(function(result){ console.log(result); })iframe跨域通过iframe的src属性来获取数据<iframe src="https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist" frameborder="0"></iframe>路由解决跨域const express = require("express"); const app = express(); app.all("*", function (req, res, next) { //设置允许跨域的域名，*代表允许任意域名跨域 res.header("Access-Control-Allow-Origin", "*"); next(); })路由级别设置跨域res.setHeader("Access-Control-Allow-Origin", "*");跨域资源共享（CORS）##先引入express const express = require("express"); ##引入cors const cors = require("cors"); ##实例化express const app = express(); ##解决跨域 app.use(cors());//解决问题的关键Nginx代理跨域下载nginx寻找文件nginx.conflocation下配置location / { add_header Access-Control-Allow-Origin *; }Nginx反向代理跨域server { listen 81; # 监听的端口 server_name localhost; #监听的主机名 也可以是域名或者ip地址 location / { proxy_pass 需要跨域的地址; #反向代理 } }vue.config.js（vue2）module.exports = { dev: { proxyTable: { // 配置跨域 '/api':{ target:`接口`, //请求后台接口 changeOrigin:true, // 允许跨域 pathRewrite:{ '^/api' : '' // 重写请求 } } }vue.config.js (vue3)module,exports = { devServer: { proxy: { '/api': { target: `接口地址`, //接口域名,端口看各自设置的 changeOrigin: true, //是否跨域 ws: true, //是否代理 websockets secure: true, //是否https接口 pathRewrite: { //路径重置 '^/api': '' } } } } }
