原创 yarn的安裝和使用,並配置用戶環境變量

1.使用npm安裝 npm i yarn -g verbose 2.切換到淘寶鏡像 yarn config set registry https://registry.npm.taobao.org 3.查看版本號 yarn -

原创 vue+element-ui+sortable.js實現表格拖拽功能

效果如下: 1.vue使用cli創建項目就不說了,本人使用的是cli3.x版本 2.下載element-ui npm i element-ui -S 3.引入element-ui,找到main.js,加入如下代碼 // 導入e

原创 在vue中實現圖片懶加載,並引入promise判斷加載狀態和優化

爲什麼需要懶加載? 答: 當你的一個網頁,圖片有幾十張,上百張時,同時的加載,有可能會導致網頁出現很長一段時間的空白,而且用戶並不一定會瀏覽全部的圖片,全部加載完,也會浪費用戶的瀏覽,這樣的體驗是很不好的. 效果如圖: 那麼如何

原创 vue使用cli3.x整合electron桌面應用

注: 使用yarn,相信我,不然你會遇到很多麻煩 一.啓動一個Electron桌面程序 1.使用cli3.x創建一個vue項目,過程略 vue create hello-world 2.進入項目,下載依賴包 yarn insta

原创 在vue中,封裝個分類選擇下拉列表

效果如下: 1.在components目錄下新建個文件SubjectCatalog.vue組件,代碼如下: <template> <div class="subject-catalog"> <div class="s

原创 在cookie中取對應的值的小方法和使用js-cookie插件

cookie裏面有多個字段,你想提取特定的字段的,可以用這個這個大佬的代碼,就幾行。尊重原創,鏈接: https://stackoverflow.com/a/21125098 代碼如下 // 取得指定cookie字段的方法

原创 uni-app小程序端調內置地圖和打開外部app和調撥打電話

效果如圖: 部分代碼如下: 1.html代碼 <view class="service"> <a href="#" @click.prevent="openMap"> <image src="../../

原创 mongoose populate 查詢返回指定字段

使用mogoose處理分類數據時,還要獲取上一級的父類name,默認情況下只找到父_id(存在parent),還要根據父_id查詢到name,這時我們需要用到populate方法 情況一: 直接鏈式,返回name(值爲1),不返回

原创 mongoDB開啓權限認證及node連接數據庫的配置

1.打開cmd命令窗口 2.輸入mongo,如圖 3.創建管理用戶(這一步一定要給我先做了) use admin db.createUser( {user: "admin",pwd: "123456",roles: [ { r

原创 vue+elementUI+表格,實現輸入框失去焦點獲取當前id和當前輸入框改變的內容

實現的效果: 步驟: 一. html代碼 <!-- 用戶列表表格 --> <div class="user-list-table"> <el-table :data="tableData" stripe s

原创 vue+elementUI表單優化,修改行數據,不用發送請求初始化表單

寫出這個優化之前,是因爲服務器有點差,每次修改上下架狀態的時候,發送修改狀態的請求,爲了頁面顯示的"文本"狀態也改變,還需要發送一次初始化列表的數據,對於以後數據量大的時候,是很不友好的,而且前端的優化,不就是減少請求麼,所以就

原创 vue實現帶省市區三級聯動的表單demo

效果如下: 省市區三級聯動插件: v-distpicker github地址: https://github.com/jcc/v-distpicker 效果的部分代碼: 一.html代碼 <div class="content"

原创 vue動態增加,刪除表單輸入框

效果如下: 參考代碼: 後端url: disparamModule/disparamInit返回的數據結構 一. html代碼 <div class="distribution-set-container"> <!-- 麪

原创 vue+elementUI麪包屑組件封裝

一.選擇用哪種樣式 二.在組件文件夾下創建組件 三.在Bread.vue複製如下代碼 <template> <!-- 麪包屑 --> <div class="bread"> <el-breadcrumb separa

原创 vue+elementUI實現點擊按鈕互斥效果

先看看實現的效果吧! 步驟: 一.html代碼 <!-- 等級篩選 --> <div class="level-screening"> <el-button size="medium"