首页
关于
Search
1
前端跨域的解决方案
24 阅读
2
vue3封装el-button
21 阅读
3
nodejs实现mysql的增删改查
20 阅读
4
表格内容溢出显示省略号浮空提示内容
19 阅读
5
实现数组的push、filter、map方法
18 阅读
未分类
JavaScript
登录
Search
标签搜索
JavaScript
vue
组件封装
nodejs
笔记
谷歌插件
mysql
Nginx
数组
数组方法实现
原生js
promise
async、await
靓仔
累计撰写
15
篇文章
累计收到
0
条评论
首页
栏目
未分类
JavaScript
页面
关于
搜索到
14
篇与
的结果
2023-08-10
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的增删改查了。
2023年08月10日
20 阅读
0 评论
0 点赞
2023-08-10
nodeJs实现请求网络上的请求下载图片到本地
这是我博客开通的第一天,期待你们的访问和指导。
2023年08月10日
13 阅读
0 评论
0 点赞
2023-08-10
前端跨域的解决方案
跨域出现的原因协议(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': '' } } } } }
2023年08月10日
24 阅读
0 评论
0 点赞
2023-06-04
vue2中.sync操作符的使用方法
.sync操作符简化了父子组件传参后更新值的操作,减少了一半的开发量通过.sync代替实现。原来的实现逻辑(父组件v-bind传参给子组件,子组件props接收传过来的值,子组件中button上定义点击事件,事件中通过this.$emit(“事件名”,”修改的值”)来传给父组件,最后父组件在子组件上用子组件定义的事件名来获取子组件修改的内容。)过程相对繁琐故基本使用.sync来代替。例如:<!-- 父组件 --> <template> <div> <h1>{{ message }}</h1> <child-component :message.sync="message"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { name: 'ParentComponent', data() { return { message: '父组件' }; }, components: { ChildComponent } } </script> <!-- 子组件 --> <template> <div> <input type="text" v-model="Message"> <button @click="updateMsg">Update Message</button> </div> </template> <script> export default { name: 'ChildComponent', props: { message: { type: String, default:"" } }, data() { return { Message: this.message }; }, methods: { updateMsg() { this.$emit('update:message', this.Message); } } } </script>父组件中通过v-bind传值给子组件并在绑定的属性后添加.sync,子组件通过props接受到对应的message值,在子组件中定义对应的Message在页面展示,给对应的按钮添加点击事件,通过this.$emit来更新组件的值(特别注意:第一个参数的值一定要写成“update:props对应的值”),第二个参数是要修改的值,这样就能实现组件的实时更新了。
2023年06月04日
9 阅读
0 评论
0 点赞
1
2
3