|
阅读：7292回复：2
项目学习记录 2 接 112调整：更改了 136 112. Express 连接数据库 npm install mysql --save 在 nodejs 的 express 目录下新建一个 db 文件夹，在里面创建一个 configSQL.js // # configSQL.js const mysql = require('mysql2') const pool = mysql.createConntection({ host: 'IP地址', // # 如果是云服务器，就是云服务的 公网 地址 user: 'root', password: 'root', // # 第一次使用mysql的时候，需要你设置下你的密码，重置密码的方法后面会说到 port: 3306, database: 'test' // # 被连接的 MYSQL 中的 test 数据源 }) pool.connection() // # 连接到数据库 module.exports = pool // # 暴露文件 完成之后，在同目录下创建一个：query.js // # query.js const pool = require('./configSQL') let SQL = null let querySQL = (SQL, callback) => { pool.query(SQL, (err, result) => { callback(err, result) }) } // 查看 某数据表中的全部数据 let show = (callback) => { SQL = 'SELECT * FROM 表名' querySQL(SQL, callback) } // 新增 let add = (attributeNames, attributes, callback) => { // # 注意：这里的 SQL 中用到的引号 是 反引号(英文状态下的 ‘~’ 键) SQL = `INSERT INTO t_page_data(${attributeNames}) VALUES('${attributes}');` querySQL(SQL, callback) } // 删除 let del = (ID, callback) => { SQL = `DELETE FROM t_page_data WHERE id = ${ID};` querySQL(SQL, callback) } module.exports = { show, add, del } router 文件里面的 index.js（也有可能叫 router.js） // # index.js/router.js const express = require('express') const royter = express.Router() const dbQuery = require('../db/query') router.get('/show', (req, res, next) => { dbQuery.show((err, result) => { console.log(err, result) res.send(result) }) }) router.get('/add', (err, result) => { dbQuery.add('title', 'content内容'， (err, result) => { console.log(err, result) res.send(result) }) }) router.get('/del', (req, res, next) => { dbQuery.del(1, (err, result) =>{ console.log(err, result) res.send(result); }) }) module.exports = router npm start 运行项目 在浏览器地址中输入：127.0.0.1:3000/show 查看 或者使用 postman 113. 终端拉取git 代码 add Add file contents to the index bisect Find by binary search the change that introduced a bug branch List, create, or delete branches checkout Checkout a branch or paths to the working tree clone Clone a repository into a new directory commit Record changes to the repository diff Show changes between commits, commit and working tree, etc fetch Download objects and refs from another repository grep Print lines matching a pattern init Create an empty Git repository or reinitialize an existing one log Show commit logs merge Join two or more development histories together mv Move or rename a file, a directory, or a symlink pull Fetch from and merge with another repository or a local branch push Update remote refs along with associated objects rebase Forward-port local commits to the updated upstream head reset Reset current HEAD to the specified state rm Remove files from the working tree and from the index show Show various types of objects status Show the working tree status tag Create, list, delete or verify a tag object signed with GPG git pull 拉取代码 git log 查看日志 114. npm升级 npm install -g npm 115. 安装 eachrts npm install echarts --save 116. Web生成JSON 文件 JSON文件 { "name": "news", "dataNews": [ { "title": "四川大学联合成都知识视觉实现AI辅助更新《民法典》系列慕课", "introduction": "在《民法典》文本正式发布后仅10小时，四川大学法学院王竹教授担任首席专家的四川大学“智慧法治”超前部署学科应用研究成果之一—— AI辅助视频修改/生成系统，极速更新发布在中国大学MOOC上的《民法总则》课程。通过 AI辅助能更迅速便捷的协助老师完成本次课程的修改，自然的表情、精准的口型，为学生流利讲述《民法典》最新内容、重点知识，带来耳目一新的视觉体验。知识视觉为该系统研发与系列慕课发布提供全程技术服务。", "url": "https://mp.weixin.qq.com/s?__biz=MzUxNzQyOTc3OQ==&mid=2247492450&idx=1&sn=30bd7ca6b9c5ae9286e60f57aa1f041b&chksm=f99aec1eceed6508fbf9ed1eeaa77e1093ca82fd5963caff5173425c6c4a35675abe852b6abe&mpshare=1&scene=1&srcid=&sharer_sharetime=1591090390670&sharer_shareid=84085128d525701d175cb8e191595107&key=ff7553310ee7a31ad02a929843394ee9cadd3ba7b4aecbf1dae2d26b84b1e513751dab0acf8b40f52714677b2e74a9ab31c65d04187f8f2b5d0333ba3c2926dfe4f40f6eea3a8805c4e176db155330ed&ascene=1&uin=MjAyMTk0MzgxNA%3D%3D&devicetype=Windows+10+x64&version=62090070&lang=zh_CN&exportkey=AxH8hMnkKKITV25AGYLZNGc%3D&pass_ticket=rDVTt2M763GEfgIj1wycXcX6B4H%2FAwkTD3dLQOC2OckgSRcO9vjpfZHkt7VsLSk0", "year": "2020", "time": "2020.06.02", "color": "purple" }, { "title": "基于乳腺癌全组织病理切片的HE和Ki-67图像的识别和配准以及Ki-67图像的自动定量分析", "introduction": "华西病理研究室携手知识视觉共同研发并实现乳腺癌全切片的HE和Ki-67图像的的识别和配准以及Ki-67图像的自动定量分析。Ki-67的评分与乳腺浸润性导管癌（IDC）的诊断、分类、预后和治疗高度相关。我们的研究表明，基于WTS的Ki-67染色自动定量分析以及HE图像识别和配准的方法具有巨大潜力，并且Ki67的自动评分可以成功解决一致性、可重复性和准确性的问题", "url": "https://diagnosticpathology.biomedcentral.com/articles/10.1186/s13000-020-00957-5", "year": "2020", "time": "2020.05.29", "color": "purple" } ] } 读取本地的 JSON 文件 ES6/ES2015 // # 引入 import jsonData from '../../../JSON/newsCompany' // # 读取 console.log(jsonData) 生成文件，并注入'灵魂'数据 // # 这是我准备的数据 files: [ { title: '四川大学联合成都知识视觉实现AI辅助更新《民法典》系列慕课', introduction: '在《民法典》文本正式发布后仅10小时，四川大学法学院王竹教授担任首席专家的四川大学“智慧法治”超前部署学科应用研究成果之一—— AI辅助视频修改/生成系统，极速更新发布在中国大学MOOC上的《民法总则》课程。通过 AI辅助能更迅速便捷的协助老师完成本次课程的修改，自然的表情、精准的口型，为学生流利讲述《民法典》最新内容、重点知识，带来耳目一新的视觉体验。知识视觉为该系统研发与系列慕课发布提供全程技术服务。', url: 'https://mp.weixin.qq.com/s?__biz=MzUxNzQyOTc3OQ==&mid=2247492450&idx=1&sn=30bd7ca6b9c5ae9286e60f57aa1f041b&chksm=f99aec1eceed6508fbf9ed1eeaa77e1093ca82fd5963caff5173425c6c4a35675abe852b6abe&mpshare=1&scene=1&srcid=&sharer_sharetime=1591090390670&sharer_shareid=84085128d525701d175cb8e191595107&key=ff7553310ee7a31ad02a929843394ee9cadd3ba7b4aecbf1dae2d26b84b1e513751dab0acf8b40f52714677b2e74a9ab31c65d04187f8f2b5d0333ba3c2926dfe4f40f6eea3a8805c4e176db155330ed&ascene=1&uin=MjAyMTk0MzgxNA%3D%3D&devicetype=Windows+10+x64&version=62090070&lang=zh_CN&exportkey=AxH8hMnkKKITV25AGYLZNGc%3D&pass_ticket=rDVTt2M763GEfgIj1wycXcX6B4H%2FAwkTD3dLQOC2OckgSRcO9vjpfZHkt7VsLSk0', year: '2020', time: '2020.06.02', color: 'purple' } ] // # 安装一个 JS 插件 // # https://github.com/eligrey/FileSaver.js npm install file-saver --save // # 引入 JS 插件 import { saveAs } from 'file-saver' // # 使用插件 download () { let content = JSON.stringify(this.files) // any kind of extension (.txt,.cpp,.cs,.bat) let filename = 'File.txt' let blob = new Blob([content], { type: 'text/plain;charset=utf-8' }) saveAs(blob, filename) } // # 在 适当的地方 调用 download // # 然后将 File.txt 文件 改为 File.json 117. 静态网页生成器 // # 静态网站生成器Hexo、Gitbook、Vuepress、Docsify、Docute、Nuxthttp://blog.amdoing.com/static-site-generator-hexo-gitbook-vuepress-and-so-on/ // # HEXO // ## hexo史上最全搭建教程 https://blog.csdn.net/sinat_37781304/article/details/82729029 // ## 从零创建一个最简单的 HEXO npm install hexo-cli -g hexo init blog cd blog npm install hexo server (简写：hexo s) // ## hexo clean 清除缓存文件（db.json）和已生成的静态文件（public）。 在某些情况下（比如更换主题后），发现对站点的更改无论如何都不生效时，可以尝试该命令 // ## -p --port 重设端口 // ## -s --static 只是用静态文件 // ## -l --log 启动日记记录，使用覆盖记录格式 // ## generate 生成静态文件 hexo generate (简写：hexo g) // ## deploy 部署网站,同样可以接受参数 hexo deploy (简写：hexo d) -g --generate: 部署之前预先生成静态文件 -m --message: 这里与后面部署到 GitHub/Gitee 上结合使用 // ## new hexo new [title] 创建的 md 文件在 /source/_posts/blog.md中，一样可以接受参数 -p --path: 自定义新文章的路径 -r --replace: 如果存在同名文章，将其替换 -s --slug: 文章的Slug，作为新文章的文件名和发布后的URL // # VuePress // # 启动 vuepress vuepress dev docs // # 中止 Ctrl + C // # 对 MD 文件进行修改后，发现页面上有的地方有的地方没有 // # 重新启动一下 VuePress：vuepress dev docs // # 修改 md 文件 不需要 重新启动 // # 修改 配置文件 需要 重新启动 118. npm init 快速创建 package.json 文件 npm init -y // # package.json { "name": "VuePress", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } 119. 通过 DOC 生成一个 md 文件 echo "## 内容" > README.md --- home: true heroImage: ./public/favicon.ico actionText: 快速上手 → actionLink: /guide/ features: - title: 简洁至上 details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。 - title: Vue驱动 details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。 - title: 高性能 details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。 footer: MIT Licensed | Copyright © 2018-present xxxxxx --- 120. 获取字符串中某个字符最后一次出现的位置下标 str.lastIndexOf('某个字符') // # Eg: let ccc = '123.45.6.jpg' ccc.lastIndexOf('.') // # 8 121. formData 序列化的时候，会变成共对象 有一个 formData 对象嘛，然后对他进行 JSON转字符串的操作，打印转换后的JSON对象时，可以发现 formdata变成空对象了 122.js blob流和base64，以及file和base64的相互转换 js blob流和base64，以及file和base64的相互转换 http://www.fly63.com/article/detial/4309 将上传的文件进行base64转码，并转换为JSON数据格式 https://blog.csdn.net/wang_jun8072/article/details/102724459?utm_medi um=distribute.pc_relevant_download.none-task-blog-BlogCommendFromBaidu-12.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-BlogCommendFromBaidu-12.nonecas 123. Webstotm 打包项目 npm run build 124. 获取当前窗口的宽高 initPage () { this.wrapWidth = window.innerWidth this.wrapHeight = window.innerHeight } 125. 超出部分显示省略号 .setEllipsis{ white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } // # 如果是表格，需要给 table 添加 新的 css 样式 table-layout: fixed; // ## text-overflow:ellipsis; 只对溢出的部分有效 // ## 如果当前的 DOM 比如 div 是 百分比宽度的或者是自己变宽变窄的话，是不是有效的 // ## 你可以设置一个固定的宽度，那么 这个 css样式就可以生效了！ 126. 插槽 slot Eg： <v-select :items="selectColor" label="label" prepend-icon="*" > <template v-slot:item="{ item }"> <v-list-item> <v-list-item-avatar> // # 这也相当于是一个插槽 <v-icon :color="item.color">mdi-stop</v-icon> </v-list-item-avatar> <v-list-item-content> // # 这也相当于是一个插槽 <v-list-item-title>pw_ item.content </v-list-item-title> </v-list-item-content> </v-list-item> </template> </v-select> data () { return { selectColor: [ { color: 'red', content: 'red' }, { color: 'orange', content: 'orange' }, { color: 'yellow', content: 'yellow' }, { color: 'green', content: 'green' }, { color: 'indigo', content: 'indigo' }, { color: 'blue', content: 'blue' }, { color: 'purple', content: 'purple' } ] } } 127. document 获取 value document.getElementById('').value 128. vue 中获取 被点击元素 DOM function clickDom () { let dom = event.target } 129. 随机生成颜色 getRandomColor () { // # 方法1 let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'] let color = '#' for (let i = 0; i < 6; i++) { color = color + arr[Math.ceil(Math.random() * (arr.length - 1))] } return color // # 方法2 let method = '#' let random = 0 let setMethod = (en, num) => { let color = null random = Math.ceil(Math.random() * 3) if (random === 0) { color = en + en } else if (random === 1) { color = en + num } else if (random === 2) { color = num + en } else if (random === 3) { color = num + num } return color } for (let i = 0; i < 3; i++) { let getEn = String.fromCharCode(65 + Math.ceil(Math.random() * 5)) let getNum = Math.ceil(Math.random() * 9).toString() let getMethod = setMethod(getEn, getNum) console.log(getMethod) method = method + getMethod } return method }, 130. 进制转换 10 与 16 10 → 16 let num = 20 console.log('10转16：', num.toString(16)) 16 → 10 let value = 'FF' console.log('16转10：', parseInt(value, 16)) 131. 跨域 举一个简单的例子。你打开百度的网页，此时浏览器的地址栏是http://www.baidu.com，假如在这个页面中有一段js代码，这一段代码发起了一个ajax请求，假定请求的服务端的URL是http://www.google.com。 那么这个时候浏览器就会怀疑了。你这个网页是百度的网页儿。那么网页里面的代码肯定也是百度的代码了。 而你百度的代码却访问谷歌的服务器，那么此时此刻，即便是按照我们生活中的常识来判断， 发起这个访问也是要经过谷歌服务器的同意的。 如果谷歌不同意，那么就不允许访问了。因此，一般这个时候浏览器会先向谷歌服务器发起一次options请求。 这个请求的参数包含了发起请求的网页的地址。 也就是询问谷歌是否允许来自于百度网页的请求。 此时谷歌的服务器会向浏览器返回一个响应。 告诉浏览器自己是否愿意接受来自百度网页的请求。 如果允许了，那么浏览器就会继续的发起这个请求。 如果谷歌浏览器返回的是拒绝。那么浏览器就会报一个跨域的请求错误。 作者：至诚大兵 链接：https://www.zhihu.com/question/305052491/answer/562906787 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 132. console.dir() 与 console.log() console.log() 会在浏览器控制台打印出信息 console.dir() 可以显示一个对象的所有属性和方法 133. 正则表达式 汉字 匹配汉字文字： [\u4e00-\u9fa5] 匹配非汉字字符： [^\u4e00-\u9fa5] 匹配双字节字符（汉字、中文标点符号等）： [^\x00-\xff] 134. input color 调色板 // # 获取 color 的颜色 <input type="color" @change="getColor"> // # @change 来自 vue getColor (e) { let color = e.target } 135. postman post 传参 Body > raw > JSON(raw 这一行最后一个，是一个下来菜单) 136. onbeforeunload事件 页面跳转时触发的事件 https://blog.csdn.net/hljqfl/article/details/86369159 window.onbeforeunload = function(){ return "onbeforeunload is work"; } // # 后续在实际的使用过程中发现，onbeforeunload 并没有生效 // # 我使用的是 vue 嘛 // # 百度搜索后，有的网友写到，使用 vue 的生命周期来做， // # 我尝试后发现，依然没有触发 onbeforeunload // ### 几经波折后，看到 onbeforeunload 有写在 body 上使用的方法 // # 灵机一动直接 setInterval(() => { // this.pages = Math.ceil((this.isTouchSearch ? this.uploadData.data.length : this.files.length) / this.pagination.rowsPerPage) // # this.resumable.files.some(file => file.isUploading() === true) // # resumable 是我运用的一个上传插件，这里我是判断 files 文件里是否有正在上传的文件 if (this.resumable.files.some(file => file.isUploading() === true)) { document.body.onbeforeunload = this.onbeforeunload_window // # 让document.body 绑定上 onbeforeunload } else { document.body.onbeforeunload = null // # 里面没有正在上传的文件的话，就不绑定 } }) // # 使用后发现 onbeforeunload 只执行了一次，于是去百度搜索了一番 // # 或许这篇文章能帮到你https://blog.csdn.net/liusaint1992/article/details/49648165?utm_source=blogxgwz2 onbeforeunload_window () { let txt = '关闭此页面将会停止所有上传任务，是否确定关闭？' setTimeout(() => { document.body.onbeforeunload = null // # 让其取消绑定 setTimeout(() => { document.body.onbeforeunload = this.onbeforeunload_window // # 然后有恢复绑定，这样就不会出现只执行一次的问题了 }, 50) }, 50) return txt } 补充： 浏览器兼容情况 IE、Chrome、Safari 完美支持 Firefox 不支持文字提醒信息 Opera 不支持 IE6,IE7 使用 onbeforeunload 遇到的bug 凡是 <a> 标签 都会触发 onbeforeunload事件 包括 href=”javascript:void(0)” 这种。 在IE6，IE7 下面 点击 里面的 a 标签，蛋疼的事情就发生了。 解决方法： 给这 a标签的 父级 添加 οnclick=function(){return false} 即可，不过添加了这个之后 要确保 父级里面没有 input type=”checkbox” 的标签，否则会导致其无效不可点击。 其次，现在的 onbeforeunload 对主流浏览器已经不支持自定义提示了。 137. lsbridge 页面与页面之间的数据传递 npm install lsbridge --save 在需要的地方引入 lsbridge// # 比如在Vue中， import bridge from 'lsbridge' // # 将数据发送 bridge.send('my-bridge', { message: 'Hello world' }) // # 获取数据 bridge.subscribe('my-bridge', function(data) { console.log(data) // # {message: 'Hello world'} }) [ZeXu_于2020-08-04 11:07编辑了帖子]
|
|
|
板凳#
发布于：2020-07-31 07:40
哈哈，有一干货文章，谢楼主分享，学习了
|
|
|
