1、效果图

2、代码

  1. <template>
  2. <div style=" overflow: hidden;">
  3. <el-row>
  4. <el-col :span="18" :offset="3">
  5. <div
  6. id="dataShow"
  7. onmouseover="this.style.overflow='overlay'"
  8. onmouseout="this.style.overflow='hidden'"
  9. class="dataShow"
  10. >
  11. <div
  12. v-for="(item,index) in radioInfoList"
  13. :key="index"
  14. style="background-color: #f5f5f5; padding:24px;"
  15. >
  16. <el-row>
  17. <el-col :span="20" :offset="3">
  18. <span class="aa">
  19. {{ item.message1 }}
  20. </span>
  21. </el-col>
  22. <el-col :span="1">
  23. <span>
  24. <svg-icon slot="reference" icon-class="girl" style="font-size: 40px" /> <!--对应头像-->
  25. </span>
  26. </el-col>
  27. </el-row>
  28. <br>
  29. <el-row>
  30. <el-col :span="1">
  31. <span>
  32. <svg-icon slot="reference" icon-class="person" style="font-size: 40px" />
  33. </span>
  34. </el-col>
  35. <el-col :span="20">
  36. <span class="bb">
  37. {{ item.message2 }}
  38. </span>
  39. </el-col>
  40. </el-row>
  41. </div>
  42. </div>
  43. </el-col>
  44. </el-row>
  45. </div>
  46. </template>

  js

  1. radioInfoList: [{
  2. user: '周先生',
  3. robot: '专属客服小美',
  4. message1: '您好,周先生,我是你的专属客服',
  5. message2: '你好,有什么事情',
  6. time1: '2019-11-19 09:05:55',
  7. time2: '2019-11-19 09:06:55'
  8. }, {
  9. user: '周先生',
  10. robot: '专属客服小美',
  11. message1: '好的,我们稍后会把账单以短信的形式发给您,请您务必按照承诺在今晚六点之前还款,以免对您的账户及个人信用产生不良影响。我行会持续跟踪您的还款情况,如未按时到账将再次与您联系',
  12. message2: '这个,最近手头有点近,能缓两天吗,届时一定本息还完',
  13. time1: '2019-11-19 09:07:55',
  14. time2: '2019-11-19 09:08:55'
  15. },
  16. {
  17. user: '周先生',
  18. robot: '专属客服小美',
  19. message1: ' 我能理解您的情况,我建议您想办法通知家人、朋友或同事周转一下,在今晚六点之前周转,避免给您的账户和个人信用带来不良影响,可以吗?\n',
  20. message2: '那好吧,我去筹钱',
  21. time1: '2019-11-19 09:10:33',
  22. time2: '2019-11-19 09:10:55'
  23. }, {
  24. user: '周先生',
  25. robot: '专属客服小美',
  26. message1: ' 好的,周先生,你满意本次服务的话请给个好评?\n',
  27. message2: '好的',
  28. time1: '2019-11-19 09:11:03',
  29. time2: '2019-11-19 09:11:26'
  30. }, {
  31. user: '周先生',
  32. robot: '专属客服小美',
  33. message1: '好的,周先生,再见,祝您生活愉快',
  34. message2: '再见',
  35. time1: '2019-11-19 09:11:40',
  36. time2: '2019-11-19 09:11:55'
  37. }],
  38. visible: false,
  1. // 滚动到底部
    scrollToBottom() {
    this.$nextTick(() => {
    const div = document.getElementById('dataShow')
    div.scrollTop = div.scrollHeight
    })
    },

  css

  1. <style>
  2. .font{
  3. font-size: 16px;
  4. font-weight: bold;
  5. font-family: "微软雅黑 Light";
  6. }
  7. .dataShow{
  8. overflow-y: hidden;
  9. overflow-x: hidden;
  10. margin-bottom: -24px;
  11. margin-top: -24px;
  12. height:600px;
  13. margin-bottom: 5%;
  14. margin-top: 5%;
  15. }
  16. .aa{
  17. float: right;
  18. position: relative;
  19. display: inline-block;
  20. max-width: calc(40%);
  21. min-height: 35px;
  22. line-height: 2.1;
  23. font-size: 15px;
  24. padding: 6px 10px;
  25. text-align: left;
  26. word-break: break-all;
  27. background-color: #9eea6a;
  28. color: #000;
  29. border-radius: 4px;
  30. box-shadow: 0px 1px 7px -5px #000;
  31. border:0px solid #000;
  32. margin-top: 0;
  33. margin-right: 10px;
  34. }
  35. .aa:after {
  36. content: "";
  37. border-top: solid 5px #00800000;
  38. border-left: solid 10px #9eea6a;
  39. border-right: solid 10px #00800000;
  40. border-bottom: solid 5px #00800000;
  41. position: absolute;
  42. top: 10px;
  43. left: 100%;
  44. }
  45. .bb{
  46. display: inline-block;
  47. line-height:30px;
  48. font-style: normal;
  49. background-color: white;
  50. letter-spacing: 2px;
  51. position: relative;
  52. max-width: calc(40%);
  53. min-height: 35px;
  54. line-height: 2.1;
  55. font-size: 15px;
  56. padding: 6px 10px;
  57. text-align: left;
  58. word-break: break-all;
  59. border-radius: 4px;
  60. color: #000;
  61. box-shadow: 0px 1px 7px -5px #000;
  62. border:0px solid #000;
  63. margin-top: 0;
  64. margin-left: 10px;
  65. }
  66. .bb:after {
  67. content: "";
  68. border-top: solid 5px #00800000;
  69. border-left: solid 10px #00800000;
  70. border-right: solid 10px white;
  71. border-bottom: solid 5px #00800000;
  72. position: absolute;
  73. top: 10px;
  74. right: 100%;
  75.  
  76. }
  77.  
  78. </style>

  3、关于滚动条的问题(Chrome 和 其他浏览器 做不同的处理)

  1. <template>
  2. <div class="app-container">
  3. <el-row style=" overflow: hidden;">
  4. <el-col :span="" :offset="" style="margin-top: 3px">
  5. <div
  6. id="dataShow"
  7. onmouseover="this.style.overflow='scroll'"
  8. onmouseout="this.style.overflow='hidden'"
  9. :class="[browser==='Chrome'? 'dataShowCM': 'dataShowFF']"
  10. >
  11. <div
  12. v-for="(item,index) in radioInfoList"
  13. :key="index"
  14. style="background-color: #f5f5f5; padding:24px;"
  15. >
  16. <el-row v-if="!(item.customerSen==null || item.customerSen =='')">
  17. <el-row style="margin-bottom: 5px">
  18. <el-col :span="" :offset="">
  19. <span style="font-size: 16px;color: #f5f5f5;background-color: #dadada;">
  20. {{ item.customerTime }}
  21. </span>
  22. </el-col>
  23. </el-row>
  24. <el-col :span="" :offset="">
  25. <span class="aa">
  26. {{ item.customerSen }}
  27. </span>
  28. </el-col>
  29. <el-col :span="">
  30. <span>
  31. <el-popover
  32. placement="bottom"
  33. :title="customer"
  34. width=""
  35. trigger="hover"
  36. content=""
  37. >
  38. <div class="block">
  39. <el-tooltip placement="top" content="点击查看大图">
  40. <el-image
  41. :src="userSrc"
  42. style="height: 120px"
  43. :preview-src-list="srcList"
  44. /></el-tooltip>
  45. </div>
  46. <svg-icon slot="reference" icon-class="person" style="font-size: 40px" />
  47. </el-popover>
  48. </span>
  49. </el-col>
  50. </el-row>
  51. <el-row v-if="!(item.robotSen==null || item.robotSen== '')">
  52. <el-row style="margin-bottom: 5px">
  53. <el-col :span="" :offset="">
  54. <span style="font-size: 16px;color: #f5f5f5;background-color: #dadada;margin-bottom: 10px">
  55. {{ item.robotTime }}
  56. </span>
  57. <br>
  58. </el-col>
  59. </el-row>
  60. <el-col :span="">
  61. <span>
  62. <el-popover
  63. placement="bottom"
  64. title="专属客服"
  65. width=""
  66. trigger="hover"
  67. :content="item.user"
  68. >
  69. <div class="block">
  70. <el-tooltip placement="top" content="点击查看大图">
  71. <el-image
  72. style="height: 120px"
  73. :src="robotSrc"
  74. :preview-src-list="robotList"
  75. />
  76. </el-tooltip>
  77. </div>
  78. <svg-icon slot="reference" icon-class="girl" style="font-size: 40px" />
  79. </el-popover>
  80. </span>
  81. </el-col>
  82. <el-col :span="">
  83. <span class="bb">
  84. {{ item.robotSen }}
  85. </span>
  86. </el-col>
  87. </el-row>
  88. </div>
  89. </div>
  90. <div style="background-color: white;">
  91. <el-divider/>
  92. <el-divider content-position="left">
  93. <el-tooltip content="文字对话正在进行中。。。" placement="top">
  94. <el-button
  95. v-if="isButton"
  96. id="start"
  97. type="success"
  98. plain
  99. @click="start"
  100. ><svg-icon icon-class="click" />对话已建立</el-button>
  101. </el-tooltip>
  102. <el-tooltip content="点击开始对话。。。" placement="top">
  103. <el-button
  104. v-if="!isButton"
  105. id="start"
  106. type="danger"
  107. plain
  108. @click="start"
  109. ><svg-icon icon-class="stop" />开始对话</el-button>
  110. </el-tooltip>
  111. <el-tooltip content="操作记录" placement="top">
  112. <el-button
  113. id="start"
  114. type="warning"
  115. plain
  116. @click="toRadioTalk"
  117. ><svg-icon icon-class="editor" />操作记录</el-button>
  118. </el-tooltip>
  119. </el-divider>
  120. <el-row>
  121. <el-col :span="" :offset="">
  122. <el-input
  123. id="condition"
  124. v-model="condition"
  125. type="textarea"
  126. autofocus
  127. clearable
  128. maxlength=""
  129. show-word-limit
  130. :autosize="{minRows:3,maxRows:6}"
  131. resize="none"
  132. placeholder="在这里输入..."
  133. @keyup.enter.native="submitSearch"
  134. />
  135. </el-col>
  136. </el-row>
  137. <el-row style="margin: 4px 4px">
  138. <el-button
  139. id="submit"
  140. onmouseover="this.style.backgroundColor='#129611';this.style.color='#f5f5f5'"
  141. onmouseout="this.style.backgroundColor='#f5f5f5';this.style.color='#606060'"
  142. @click="submitSearch"
  143. >
  144. <svg-icon icon-class="enter" />发送
  145. </el-button>
  146. </el-row>
  147. </div>
  148. </el-col>
  149. </el-row>
  150. </div>
  151. </template>
  152.  
  153. <script>
  154. export default {
  155. name: 'Index',
  156.  
  157. data() {
  158. return {
  159. isShow: true,
  160. isButton: false,
  161. radioTxt: '',
  162. condition: '',
  163. startRow: {
  164. dialogueId: '',
  165. robotSen: '',
  166. robotTime: '',
  167. customerSen: '',
  168. customerTime: ''
  169. },
  170. dialogueId: '',
  171. endRow: {},
  172. dataList: [], // 单次对话的信息
  173. radioInfoList: [], // 信息列表
  174. visible: false,
  175. customer: '',
  176. userSrc: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
  177. robotSrc: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
  178. robotList: [
  179. 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
  180. ],
  181. srcList: [
  182. 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
  183. ],
  184. browser: 'Chrome'
  185. }
  186. },
  187. created() {
  188. this.browser = this.myBrowser()
  189. console.log('当前浏览器:' + this.browser)
  190. this.startRow = {}
  191. this.customer = '王先生' + '\n' + '地区:浙江杭州'
  192. },
  193. methods: {
  194. // 滚动到底部
  195. scrollToBottom() {
  196. this.$nextTick(() => {
  197. const div = document.getElementById('dataShow')
  198. div.scrollTop = div.scrollHeight
  199. })
  200. },
  201. toRadioTalk() {
  202. this.$router.push({
  203. path: '/talkTest/talkList'
  204. })
  205. },
  206. start() {
  207. this.condition = ''
  208. this.endRow = {}
  209. this.dataList = []
  210. const data = {
  211. sysMap: {
  212. features: '开始对话'
  213. },
  214. parameterList:
  215. []
  216. }
  217. this.$request({
  218. url: '/talk/start',
  219. method: 'post',
  220. data
  221. }).then(res => {
  222. this.isButton = true
  223. this.endRow = res.retMap.talk
  224. this.radioInfoList.push(this.endRow)
  225. this.dataList.push(this.endRow)
  226. // Cookies.set('dialogueId', res.retMap.talk.dialogueId)
  227. this.dialogueId = res.retMap.talk.dialogueId
  228. // Cookies.set('talkRecord', this.radioInfoList)
  229. console.log(this.dialogueId)
  230. this.scrollToBottom()
  231. }).catch(e => {
  232. console.log(e)
  233. this.$message.error('未知错误,请联系开发人员...')
  234. this.isButton = false
  235. })
  236. },
  237. saveToTxt(id, list) {
  238. const data = {
  239. sysMap: {
  240. features: '写入txt'
  241. },
  242. parameterList:
  243. [
  244. id,
  245. list,
  246. this.$store.getters.name
  247. ]
  248. }
  249. this.$request({
  250. url: '/talk/writeToTxt',
  251. method: 'post',
  252. data
  253. }).then(res => {
  254. console.log(res.retCode)
  255. if (res.retCode === 'IF0000') {
  256. console.log('记录已保存')
  257. } else {
  258. console.log('记录保存失败')
  259. }
  260. })
  261. },
  262. // 去掉回车换行符
  263. clearBr(key) {
  264. key = key.replace(/<\/?.+?>/g, '')
  265. key = key.replace(/[\r\n]/g, '')
  266. return key
  267. },
  268. /* keySubmit() {
  269. var test = this.condition
  270. console.log('---' + test)
  271. var tt = this.clearBr(test)
  272. console.log('-tt--' + tt)
  273. if (tt === '' || tt === undefined || tt === null) {
  274. this.$message.error('当前没有输入。。。')
  275. this.scrollToBottom()
  276. }
  277. },*/
  278. submitSearch() {
  279. this.condition = this.clearBr(this.condition)
  280. console.log('对话id' + this.dialogueId)
  281. if (this.condition === '' || this.condition === undefined || this.condition === null) {
  282. this.$message.error('当前没有输入。。。')
  283. this.scrollToBottom()
  284. } else if (this.dialogueId === undefined || this.dialogueId === '') {
  285. this.$message.error('请先start')
  286. this.condition = ''
  287. } else {
  288. console.log('id' + this.dialogueId)
  289. this.startRow = {}
  290. this.startRow.robotSen = null
  291. this.startRow.robotTime = null
  292. this.startRow.customerSen = this.condition
  293. this.startRow.dialogueId = this.dialogueId
  294. var d = new Date()
  295. this.startRow.customerTime = d.getFullYear() + '-' + ((d.getMonth() < ? '' + (d.getMonth() + ) : (d.getMonth() + ))) +
  296. '-' + (d.getDate() < ? '' + d.getDate() : d.getDate()) + ' ' + (d.getHours() < ? '' + d.getHours() : d.getHours()) +
  297. ':' + (d.getMinutes() < ? '' + d.getMinutes() : d.getMinutes()) + ':' + (d.getSeconds() < ? '' + d.getSeconds() : d.getSeconds())
  298. // this.startRow.dialogueId = Cookies.get('dialogueId')
  299. this.radioInfoList.push(this.startRow)
  300. this.dataList.push(this.startRow)
  301. const data = {
  302. sysMap: {
  303. features: '对话细节'
  304. },
  305. parameterList:
  306. [
  307. this.startRow.dialogueId,
  308. this.startRow.customerSen,
  309. this.startRow.customerTime
  310. ]
  311. }
  312. this.$request({
  313. url: '/talk/talking',
  314. method: 'post',
  315. data
  316. }).then(res => {
  317. this.endRow = res.retMap.talk
  318. this.radioInfoList.push(this.endRow)
  319. this.dataList.push(this.endRow)
  320. this.scrollToBottom()
  321. this.condition = ''
  322. if (res.retCode === 'IF0002') {
  323. // this.$message.error('对话结束,记录已保存')
  324. this.saveToTxt(this.startRow.dialogueId, this.dataList)
  325. this.isButton = false
  326. this.startRow.dialogueId = ''
  327. }
  328. })
  329. }
  330. },
  331. myBrowser() {
  332. var userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
  333. var isOpera = userAgent.indexOf('Opera') > - // 判断是否Opera浏览器
  334. var isIE = userAgent.indexOf('compatible') > - &&
  335. userAgent.indexOf('MSIE') > - && !isOpera // 判断是否IE浏览器
  336. var isEdge = userAgent.indexOf('Edge') > - // 判断是否IE的Edge浏览器
  337. var isFF = userAgent.indexOf('Firefox') > - // 判断是否Firefox浏览器
  338. var isSafari = userAgent.indexOf('Safari') > - &&
  339. userAgent.indexOf('Chrome') === - // 判断是否Safari浏览器
  340. var isChrome = userAgent.indexOf('Chrome') > - &&
  341. userAgent.indexOf('Safari') > - // 判断Chrome浏览器
  342.  
  343. if (isIE) {
  344. var reIE = new RegExp('MSIE (\\d+\\.\\d+);')
  345. reIE.test(userAgent)
  346. var fIEVersion = parseFloat(RegExp['$1'])
  347. if (fIEVersion === ) {
  348. return 'IE7'
  349. } else if (fIEVersion === ) {
  350. return 'IE8'
  351. } else if (fIEVersion === ) {
  352. return 'IE9'
  353. } else if (fIEVersion === ) {
  354. return 'IE10'
  355. } else if (fIEVersion === ) {
  356. return 'IE11'
  357. } else {
  358. return ''
  359. }// IE版本过低
  360. // eslint-disable-next-line no-unreachable
  361. return 'IE'
  362. }
  363. if (isOpera) {
  364. return 'Opera'
  365. }
  366. if (isEdge) {
  367. return 'Edge'
  368. }
  369. if (isFF) {
  370. return 'FF'
  371. }
  372. if (isSafari) {
  373. return 'Safari'
  374. }
  375. if (isChrome) {
  376. return 'Chrome'
  377. }
  378. }
  379. }
  380. }
  381. </script>
  382.  
  383. <style>
  384. .font{
  385. font-size: 16px;
  386. font-weight: bold;
  387. font-family: "微软雅黑 Light";
  388. }
  389. /* <!--非Chrome 隐藏滚动条-->*/
  390. .dataShowFF{
  391. height:600px;
  392. overflow-y: hidden;
  393. overflow-x: hidden;
  394. margin-bottom: -14px;
  395. margin-top: 0px;
  396. background-color: #f5f5f5;
  397. scrollbar-width: none;
  398. }
  399. /* <!--Chrome 隐藏滚动条-->*/
  400. .dataShowCM{
  401. height:600px;
  402. overflow-y: hidden;
  403. overflow-x: hidden;
  404. margin-bottom: -14px;
  405. margin-top: 0px;
  406. background-color: #f5f5f5;
  407. }::-webkit-scrollbar {
  408. display: none;
  409. }
  410. .aa{
  411. float: right;
  412. position: relative;
  413. display: inline-block;
  414. max-width: calc(%);
  415. line-height: 2.1;
  416. min-height: 35px;
  417. font-size: 15px;
  418. padding: 6px 10px;
  419. text-align: left;
  420. word-break: break-all;
  421. background-color: #9eea6a;
  422. color: #;
  423. border-radius: 4px;
  424. box-shadow: 0px 1px 7px -5px #;
  425. border:0px solid #;
  426. margin-top: ;
  427. margin-right: 10px;
  428. }
  429. .aa:after {
  430. content: "";
  431. border-top: solid 5px #;
  432. border-left: solid 10px #9eea6a;
  433. border-right: solid 10px #;
  434. border-bottom: solid 5px #;
  435. position: absolute;
  436. top: 10px;
  437. left: %;
  438. }
  439. .bb{
  440. display: inline-block;
  441. line-height:30px;
  442. font-style: normal;
  443. background-color: white;
  444. letter-spacing: 2px;
  445. position: relative;
  446. max-width: calc(%);
  447. min-height: 35px;
  448. line-height: 2.1;
  449. font-size: 15px;
  450. padding: 6px 10px;
  451. text-align: left;
  452. word-break: break-all;
  453. border-radius: 4px;
  454. color: #;
  455. box-shadow: 0px 1px 7px -5px #;
  456. border:0px solid #;
  457. margin-top: ;
  458. margin-left: 10px;
  459. }
  460. .bb:after {
  461. content: "";
  462. border-top: solid 5px #;
  463. border-left: solid 10px #;
  464. border-right: solid 10px white;
  465. border-bottom: solid 5px #;
  466. position: absolute;
  467. top: 10px;
  468. right: %;
  469.  
  470. }
  471. #condition{
  472. border:1px solid #f4c08a;
  473. }
  474. #submit{
  475. border:0px solid #;
  476. float: right;
  477. }
  478. #start{
  479. border:0px solid #;
  480. }
  481. </style>

基于element-ui 模仿微信聊天页面以及滚动条隐藏在chrome和其他浏览器的处理的更多相关文章

  1. iOS开发之微信聊天页面实现

    在上篇博客(iOS开发之微信聊天工具栏的封装)中对微信聊天页面下方的工具栏进行了封装,本篇博客中就使用之前封装的工具栏来进行聊天页面的编写.在聊天页面中主要用到了TableView的知识,还有如何在俩 ...

  2. 基于element UI 的上传插件

    为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...

  3. 基于element ui的图片预览插件

    写插件很简单,满足两个条件即可,一.基本的逻辑思路,二.熟悉插件语法要求.本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图: 项目采用的是vue-element-admi ...

  4. 基于element ui的级联选择器组件实现的分类后台接口

    今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持.     这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...

  5. vue的ui库使用Element UI,纯html页面,不使用webpack那玩意

    使用手册访问:https://cloud.tencent.com/developer/doc/1270 第一步:在head添加样式 <link rel="stylesheet" ...

  6. vue基于 element ui 的按钮点击节流

    vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...

  7. 基于element ui 实现七牛云自定义key上传文件,并监听更新上传进度

    借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload&quo ...

  8. javascript 禁止页面选取-兼容IE、Chrome和firefox浏览器

    在做到一个页面需要禁止网页内容被选取的时候,碰到浏览器兼容的问题,解决方法如下 1.单独使用适用于IE.Chrome浏览器,主要是在head的<script>标签里面加上如下代码 docu ...

  9. 从APP跳转到微信指定联系人聊天页面功能的实现与采坑之旅

    起因: 最近做的APP中有一个新功能:已知用户微信号,可点击直接跳转到当前用户微信聊天窗口页面. 当时第一想法是使用无障碍来做,并且觉得应该不难,只是逻辑有点复杂.没想到最终踩了好多坑,特地把踩过的坑 ...

随机推荐

  1. 微信小程序 客户端时间 与 服务端时间

    服务端时间 db.serverDate(); 在操作数据库,上传数据的时候可以使用服务端时间 wx.cloud.init();//初始化云 const db = wx.cloud.database() ...

  2. 初探 Node.js 框架:eggjs (环境搭配篇)

    eggjs 是一个优秀的 Node.js 框架 概述:为什么标题上说 eggjs 是一个优秀的 Node.js 框架(可跳过)? 换言之,我们为什么选择 eggjs 进行开发而不是之前初学时使用的 E ...

  3. 如何高效地远程部署?自动化运维利器 Fabric 教程

    关于 Python 自动化的话题,在上一篇文章中,我介绍了 Invoke 库,它是 Fabric 的最重要组件之一.Fabric 也是一个被广泛应用的自动化工具库,是不得不提的自动化运维利器,所以,本 ...

  4. java架构之路-(微服务专题)feign的基本使用和nacos的配置中心

    上次回归: 上次我们说了ribbon的基本使用,包括里面的内部算法,算法的细粒度配置,还有我们自己如何实现我们自己的算法,主要还是一些基本使用的知识,还不会使用ribbon的小伙伴可以回去看一下上一篇 ...

  5. Rust学习--变量

    0x0 每种编程语言都有变量的概念,我们可以把变量理解为最简单的存储方式,它是编码过程中是必不可少的. Rust的变量很有特色.变量不可变的特性让人想起了Erlang.以及后面的模式匹配,我觉得作者应 ...

  6. 详解Net Core Web Api项目与在NginX下发布

    前言 本文将介绍Net Core的一些基础知识和如何NginX下发布Net Core的WebApi项目. 测试环境 操作系统:windows 10 开发工具:visual studio 2019 框架 ...

  7. 404 not found Webshell

    404 not found Webshell 克隆或下载项目: git clone https://github.com/CosasDePuma/SecurityNotFound.git Securi ...

  8. el-menu 菜单展示

    <template> <div class="tab-container"> <el-menu class="el-menu-vertica ...

  9. css权重导致的样式不生效问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 仅需60秒,使用k3s创建一个多节点K8S集群!

    作者: Dawid Ziolkowski丨Container Solution云原生工程师 最近,我一直在Kubernetes上进行各种测试和部署.因此,我不得不一次又一次创建和销毁Kubernete ...