主頁 > 企業開發 > Element Ul快速入門

Element Ul快速入門

2023-01-04 07:31:48 企業開發

Element Ul快速入門

Element Ul是基于Vue的一套桌面端組件庫，提前封裝好的Ul模板，方便開發者快速搭建一個網站前端界面

官網：https://element.eleme.cn/

1.Element Ul安裝

image-20230102224810063

image-20230102225445520

image-20230102225518231

在插件中，點擊添加插件 搜索element

image-20230102225823470

安裝成功，界面如下所示

image-20230102230049176

如果安裝成功，會看到如下界面

image-20230102230420479

2.Icon圖示的使用

<i ></i>
<i ></i>
<i ></i>

3.Button按鈕

是Element Ul 提供的一組常用的操作按鈕組件，直接使用封裝好的el-button,比如

 <el-button>按鈕</el-button>

image-20230102231434648

基于el-button,按鈕，可以使用type、plain、round、circle屬性對按鈕進行修飾，

type：設定按鈕的樣式

 <el-button>默認按鈕</el-button>
  <el-button type="primary">主要按鈕</el-button>
  <el-button type="success">成功按鈕</el-button>
  <el-button type="info">資訊按鈕</el-button>
  <el-button type="warning">警告按鈕</el-button>
  <el-button type="danger">危險按鈕</el-button>

plain 可以減弱按鈕的背景顏色效果

<el-button type="primary" plain>主要按鈕</el-button>

round 可以給按鈕設定圓角

<el-button type="primary" round>主要按鈕</el-button>

circle 將按鈕設定為圓形

 <el-button type="primary" icon="el-icon-edit" circle></el-button>

disabled設定按鈕的可以狀態

 <el-button type="primary" icon="el-icon-edit "  circle disabled></el-button>

loading屬性可以給按鈕設定"加載中"的效果

<template>
    <div>
        <el-button type="primary" icon="el-icon-edit " circle @click="test()" :loading=loading></el-button>
    </div>
</template>
<script>
    export default {
        name: "test",
        methods:{
            test(){
              //  alert("11111");
                this.loading = true;
                setTimeout(()=>{
                    this.loading = false;
                },3000)
            }
        },
        data(){
            return{
                loading:false
            }
        }
    }
</script>

<style scoped>

</style>

size屬性可以設定按鈕的大小，medium，small,mini

<el-button type="primary" size="medium">主要按鈕</el-button>

image-20230102233206601

4.Link超鏈接

文字超鏈接，使用 el-link標簽來實作

<el-link href="https://www.baidu.com" target="_blank">baidu</el-link>
target="_blank 可以讓頁面在新的視窗打開

disabled 設定超鏈接不可用

underline設定下劃線

? :underline="false" 來去掉超鏈接的下劃線

icon給文字超鏈接設定圖示

<el-link href="https://www.baidu.com" icon="el-icon-phone-outline" :underline="false"  target="_blank">baidu</el-link>

5.Radio單選框

使用el-radio標簽即可，通過v-model進行物件資料的系結，label表示該單選框的值，文本直接寫入到標簽內部即可

<template>
  <el-radio v-model="radio" label="1">選項1</el-radio>
  <el-radio v-model="radio" label="2">選項2</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

change系結切換事件

 <el-radio v-model="radio" label="2" @change="change">選項1</el-radio>
 <el-radio v-model="radio" label="2" @change="change">選項2</el-radio>
	methods:{
            change(){
                console.log('當前radio的值： '+this.radio);
            }
        }

6.Checkbox多選框的使用

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = ['上海', '北京', '廣州', '深圳'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>

image-20230103090738352

image-20230103090746680

7.input輸入框

<el-input v-model="input" placeholder="請輸入內容"></el-input>
<el-button type="success" @click="click">成功按鈕</el-button>
methods:{         
            click(){
                this.input="hello"
            }
}
 data(){
            return{
                input:''
            }
        }

通過size屬性修改輸入框的尺寸，large/medium / small / mini,size修改的是輸入框的高度

 <el-input v-model="input" size="mini" placeholder="請輸入內容"></el-input>

修改寬度可以在外出嵌套一個div，通過修改div的寬度來實作輸入框寬度的修改

<div style="width: 200px">
    <el-input v-model="input" size="mini" placeholder="請輸入內容"></el-input>         
 </div>

image-20230103092109886

show-password 屬性設定可以切換顯示隱藏的密碼框

通過 prefix-icon 和 suffix-icon 屬性在 input 組件首部和尾部增加顯示圖示

 <el-input v-model="input" show-password prefix-icon="el-icon-phone" suffix-icon="el-icon-remove" placeholder="請輸入內容"></el-input>

image-20230103092649380

maxlength、minlength限制輸入框的字符長度

show-word-limit //顯示輸入了幾個字符，一共能輸入幾個字符
<el-input v-model="input" maxlength="6" show-word-limit  placeholder="請輸入內容"></el-input>

image-20230103092944472

8. Select下拉框

使用el-select/el-option 標簽進行操作，v-model進行資料系結,label進行文本的展示，value是當前選項的值

v-model的值為當前被選中的el-option的 value 屬性值
disabled 表示禁止使用
change 下拉框進行修改之后會自動觸發該事件(該事件加在el-select中)

  <el-select v-model="value" placeholder="請選擇" @change="change1">
       <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="https://www.cnblogs.com/yin-jihu/archive/2023/01/03/item.value"
            :disabled="item.disabled">
      /el-option>
  </el-select>

<script>
  export default {
      methods:{
            change1(){
                console.log('當前選擇的是：'+this.value)
            }
      }
    data() {
      return {
        options: [{
          value: '選項1',
          label: '黃金糕',
          disabled:true
        }, {
          value: '選項2',
          label: '雙皮奶'
        }, {
          value: '選項3',
          label: '蚵仔煎',
          disabled:true
        }, {
          value: '選項4',
          label: '龍須面'
        }, {
          value: '選項5',
          label: '北京烤鴨'
        }],
        value: ''
      }
    }
  }
</script>

image-20230103095027266

9.Switch開關

switch組件表示兩種相互對立狀態之間的切換，開發，el-switch標簽完成，v-model進行資料系結，Boolean表示開/關的狀態，active-color屬性與inactive-color屬性來設定開關的背景色，

active-text屬性與inactive-text屬性來設定開關的文字描述，

change事件進行開/關操作時觸發該方法
<el-switch
  v-model="value"
  active-color="#13ce66" //打開的顏色
  inactive-color="#ff4949"//關閉的顏色
  active-text="按月付費" //設定打開的文本
  inactive-text="按年付費"
  @change="change1"> 
</el-switch>
<script>
  export default {
    data() {
      return {
        value: true
      }
    },
  methods:{
            change1(){
                console.log('當前開關的狀態是：'+this.value)
            },      
   };
</script>

image-20230103102902190

10.Upload上傳檔案

10.1前端

使用el-upload組件完成，action屬性為后端請求的介面

        <el-upload
                
                drag
                action="http://localhost:8082/excel/import"
                multiple>
            <i ></i>
            <div >將檔案拖到此處，或<em>點擊上傳</em></div>
            <div  slot="tip">只能上傳jpg/png檔案，且不超過500kb</div>
        </el-upload>

10.2后端

springboot +easyExcel完成Excel資料的決議

1.pom.xml匯入easyExcel相關依賴

   <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel</artifactId>
            <version>2.2.6</version>
        </dependency>

2.創建一個類，用來映射Excel檔案

image-20230103112702274

ExcelVo

package com.example.upload.vo;

import com.alibaba.excel.annotation.ExcelProperty;
import lombok.Data;

@Data
public class ExcelVo {
    @ExcelProperty("標號")
    private Integer id;
    
    @ExcelProperty("姓名")
    private String name;
    
    @ExcelProperty("性別")
    private String gender;
    
    @ExcelProperty("年齡")
    private String age;
    
    @ExcelProperty("班級")
    private String classes;
    
}

ExcelService

package com.example.upload.service;

import com.example.upload.vo.ExcelVo;

import java.io.InputStream;
import java.util.List;

public interface ExcelService {
    public List<ExcelVo> list(InputStream inputStream);
}

ExcelServiceimpl

package com.example.upload.service.impl;

import com.alibaba.excel.EasyExcel;
import com.alibaba.excel.context.AnalysisContext;
import com.alibaba.excel.event.AnalysisEventListener;
import com.example.upload.service.ExcelService;
import com.example.upload.vo.ExcelVo;

import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;

public class ExcelServiceimpl implements ExcelService {

    @Override
    public List<ExcelVo> list(InputStream inputStream) {
        List<ExcelVo> list = new ArrayList<>();
        EasyExcel.read(inputStream)
                .head(ExcelVo.class)
                .sheet()
                .registerReadListener(new AnalysisEventListener<ExcelVo>() {


                    @Override
                    public void invoke(ExcelVo excelVo, AnalysisContext analysisContext) {
                        list.add(excelVo);
                    }

                    @Override
                    public void doAfterAllAnalysed(AnalysisContext analysisContext) {
                        System.out.println("資料決議完成");
                    }
                }).doRead();

        return list;
    }
}

ExcelController

package com.example.upload.controller;

import com.example.upload.service.ExcelService;
import com.example.upload.vo.ExcelVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.util.List;

@RestController
@RequestMapping("/excel")
public class ExcelController {
    @Autowired
    private ExcelService excelService;

   @PostMapping("/import")
    public String importData(@RequestParam("file")MultipartFile file){
       try {
           List<ExcelVo> list = excelService.list(file.getInputStream());
           for (ExcelVo excelVo:list){
               System.out.println(excelVo);
           }
       } catch (IOException e) {
           return "false";
       }
    return  "success";
   }

}

需要解決跨域問題

CorsConfig

package com.example.upload.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowCredentials(false)
                        .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                        .allowedOrigins("*");
            }
        };
    }
}

示例：

image-20230103120336503

11.Form表單

Form組件，每一個表單域由一個el-form-item組件構成的，表單域中可以放置各種型別的表單控制元件，input、select、CheckBox、radio、switch，表單域的的值直接跟Vue物件進行系結

11.1基本使用

<el-form ref="form" :model="form" label->
  <el-form-item label="活動名稱">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活動區域">
    <el-select v-model="form.region" placeholder="請選擇活動區域">
      <el-option label="區域一" value="https://www.cnblogs.com/yin-jihu/archive/2023/01/03/shanghai"></el-option>
      <el-option label="區域二" value="https://www.cnblogs.com/yin-jihu/archive/2023/01/03/beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動時間">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col  :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即時配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動性質">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
      <el-checkbox label="地推活動" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源">
    <el-radio-group v-model="form.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場地免費"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即創建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log(this.form);
      }
    }
  }
</script>

image-20230103125346854

11.2資料效驗

Form 組件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，并將 Form-Item 的 prop 屬性設定為需校驗的欄位名即可，

<template>
    <div>

        <el-form ref="form" :model="form" :rules="rules"  label->
            <el-form-item label="活動名稱" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活動區域"  prop="region" >
                <el-select v-model="form.region" placeholder="請選擇活動區域">
                    <el-option label="區域一" value="https://www.cnblogs.com/yin-jihu/archive/2023/01/03/shanghai"></el-option>
                    <el-option label="區域二" value="https://www.cnblogs.com/yin-jihu/archive/2023/01/03/beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活動時間" >
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col  :span="2">-</el-col>
                <el-col :span="11">
                    <el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"   @click="submitForm('form')">立即創建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>

    export default {
        name: "test",
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }

        },
        data() {
            return {
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: ''
                },
                rules: {
                    name: [
                        { required: true, message: '請輸入活動名稱', trigger: 'blur' },
                        { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
                    ],
                    region: [
                        { required: true, message: '請選擇活動區域', trigger: 'change' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '請選擇日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '請選擇時間', trigger: 'change' }
                    ],

                }

            }

        }
    }
</script>

<style scoped>

</style>

image-20230103131827633

11.3自定義資料效驗（郵箱效驗）

郵箱效驗的正則運算式

const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/

<template>
    <div style="width: 500px">

        <el-form ref="form" :model="form" :rules="rules"  label->
            <el-form-item label="郵箱" prop="email">
                <el-input v-model="form.email"></el-input>
            </el-form-item>


            <el-form-item>
                <el-button type="primary"   @click="submitForm('form')">立即創建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>

    export default {
        name: "test",
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //alert('submit!');
                        alert(this.form.email)
                    } else {
                        //console.log('error submit!!');
                        alert("error submit")
                        return false;
                    }
                });
            }

        },
        data() {
            var checkEmail = (rule,value,callback)=>{
                //const mailReg = /^([a-z0-9A-Z]+[-|\\.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-zA-Z]{2,}$/
                const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
                if (!value){
                    return callback(new Error('郵箱不能為空'))
                }
                setTimeout(()=>{
                    if (mailReg.test(value)){
                        callback()
                    }else{
                        callback(new Error('請輸入正確的郵箱格式'))
                    }
                },100)
            }
            return {
                form: {
                    email: '',

                },
                rules: {
                    email: [
                        { required: true,validator:checkEmail , trigger: 'blur' },

                    ]

                }

            }

        }
    }
</script>

<style scoped>

</style>

image-20230103133700197

image-20230103133711131

11.4數字型別效驗

數字型別的驗證需要在 v-model 處加上 .number 的修飾符，這是 Vue 自身提供的用于將系結值轉化為 number 型別的修飾符，

<template>
    <div style="width: 500px">

        <el-form ref="form" :model="form" :rules="rules"  label->
            <el-form-item label="年齡" prop="age"
                :rules="[
                    { required: true, message: '年齡不能為空',  },
                    { type:'number', message: '年齡必須為數字值', trigger: 'blur' }
                ]">
                <el-input v-model.number="form.age"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary"   @click="submitForm('form')">立即創建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>

    export default {
        name: "test",
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert(this.form.age)
                    } else {
                        alert("error submit")
                        return false;
                    }
                });
            }

        },
        data() {
            return {
                form: {
                    age: '',
               }
            }
        }
    }
</script>
<style scoped>
</style>

image-20230103134327493

image-20230103134355120

12.CRUD小案例

1.資料庫

image-20230103135402028

2.后端

1.在pom.xml添加mybatis plus相關依賴

  <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.3.2</version>
        </dependency>
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity</artifactId>
            <version>1.7</version>
        </dependency>

2.application.properties

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=123456

在啟動類(Application)中指定mapper的位置

@MapperScan("com.example.upload.mapper")

3.LianxiController

package com.example.upload.controller;


import com.example.upload.entity.Lianxi;
import com.example.upload.service.LianxiService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import org.springframework.stereotype.Controller;

import java.util.List;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author southwind
 * @since 2023-01-03
 */
@RestController
@RequestMapping("/lianxi")
public class LianxiController {

    @Autowired
    private LianxiService lianxiService;

    @GetMapping("/list")
    public List<Lianxi> list(){
        return this.lianxiService.list();
    }
/*
一般來講的話是以兩種方式為主，分別為Post和Get，這兩種方式都是向一個url傳參，而Get方式體現到了地址欄里，Post方式則將內容放在了 body 里面，
@PathParam 和 @PathVariable 注解是用于從 request 中接收請求的，兩個都可以接收引數，關鍵點不同的是@PathParam 是從 request 里面拿取值，
而 @PathVariable 是從一個url模板里面來填充(系結 URL 占位符到功能處理方法的引數上，主要實作RESTFULL風格的請求)，也就是從地址欄中取值（以鍵值對形式），
@PathVariable
它是以“/”方式來獲取引數值，
 */
    @GetMapping("/findById/{id}")
    public Lianxi findById(@PathVariable("id") Integer id){
        return this.lianxiService.getById(id);
    }

    @DeleteMapping("/delete/{id}")
    public boolean delete(@PathVariable("id") Integer id){
        return this.lianxiService.removeById(id);
    }

    //RequestBody是把json格式字串串 ，轉換為java型別的
    @PostMapping("/add")
    public boolean add(@RequestBody Lianxi lianxi){
        return  this.lianxiService.save(lianxi);
    }

    @PutMapping("/update")
    public boolean update(@RequestBody Lianxi lianxi){
        return  this.lianxiService.updateById(lianxi);
    }
}

3.前端

1.安裝axios插件

image-20230103175843881

2.首頁資料加載

image-20230103201321791

<template>
    <el-table
            :data="https://www.cnblogs.com/yin-jihu/archive/2023/01/03/tableData"
            border
            style="width: 650px">
        <el-table-column
                fixed
                prop="bookid"
                label="編號"
                >
        </el-table-column>
        <el-table-column
                prop="name"
                label="書名"
                >
        </el-table-column>
        <el-table-column
                prop="price"
                label="價格"
                >
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                >
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">洗掉</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: "Index",
        created() {
            let  _this = this;
            axios.get('http://localhost:9000/lianxi/list').then(function (resp) {
                  //alert(resp.data[0].name);
                    // console.log(resp.data)
                _this.tableData = resp.data;
            })
        },
        methods:{
            handleClick(row) {
                console.log(row);
            }
        },
        data() {
            return {
                tableData: []
            }
        }

    }
</script>

<style scoped>

</style>

3.洗掉資料

<template>
    <el-table
            :data="https://www.cnblogs.com/yin-jihu/archive/2023/01/03/tableData"
            border
            style="width: 650px">
        <el-table-column
                fixed
                prop="bookid"
                label="編號"
                >
        </el-table-column>
        <el-table-column
                prop="name"
                label="書名"
                >
        </el-table-column>
        <el-table-column
                prop="price"
                label="價格"
                >
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                >
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">編輯</el-button>
                     <!-- scope.row 指一行的資料-->
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">洗掉</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: "Index",
        created() {
            let  _this = this;
            axios.get('http://localhost:9000/lianxi/list').then(function (resp) {
                  //alert(resp.data[0].name);
                    // console.log(resp.data)
                _this.tableData = https://www.cnblogs.com/yin-jihu/archive/2023/01/03/resp.data;
            })
        },
        methods:{
            handleDelete(row) {
                let  _this = this;
                 //console.log(row.name);
                this.$confirm('是否確定洗掉《'+row.name+'》?', '提示', {
                    confirmButtonText: '確定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('http://localhost:9000/lianxi/delete/'+row.bookid).then(function (resp) {
                        if (resp.data){
                            _this.$alert('《'+row.name+'》 洗掉成功', '提示', {
                                confirmButtonText: '確定',
                                callback: action => {
                                    //重新加載一下頁面
                                    location.reload();
                                }
                            });
                        }
                    })
                }).catch(() => {
                   /* this.$message({
                        type: 'info',
                        message: '已取消洗掉'
                    });*/
                });
            }
        },
        data() {
            return {
                tableData: []
            }
        }

    }
</script>

<style scoped>

</style>

4.修改資料

index.vue

<template>
    <el-table
            :data="https://www.cnblogs.com/yin-jihu/archive/2023/01/03/tableData"
            border
            style="width: 650px">
        <el-table-column
                fixed
                prop="bookid"
                label="編號"
                >
        </el-table-column>
        <el-table-column
                prop="name"
                label="書名"
                >
        </el-table-column>
        <el-table-column
                prop="price"
                label="價格"
                >
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                >
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">編輯</el-button>
                     <!-- scope.row 指一行的資料-->
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">洗掉</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: "Index",
        created() {
            let  _this = this;
            axios.get('http://localhost:9000/lianxi/list').then(function (resp) {
                  //alert(resp.data[0].name);
                    // console.log(resp.data)
                _this.tableData = https://www.cnblogs.com/yin-jihu/archive/2023/01/03/resp.data;
            })
        },
        methods:{
            handleEdit(row){
                //把id傳給update頁面
                this.$router.push('/update?id='+row.bookid)
            },
            handleDelete(row) {
                let  _this = this;
                 //console.log(row.name);
                this.$confirm('是否確定洗掉《'+row.name+'》?', '提示', {
                    confirmButtonText: '確定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('http://localhost:9000/lianxi/delete/'+row.bookid).then(function (resp) {
                        if (resp.data){
                            _this.$alert('《'+row.name+'》 洗掉成功', '提示', {
                                confirmButtonText: '確定',
                                callback: action => {
                                    //重新加載一下頁面
                                    location.reload();
                                }
                            });
                        }
                    })
                }).catch(() => {
                   /* this.$message({
                        type: 'info',
                        message: '已取消洗掉'
                    });*/
                });
            }
        },
        data() {
            return {
                tableData: []
            }
        }

    }
</script>
<style scoped>
</style>

update.vue

<template>
    <el-form ref="form" :model="form" :rules="rules"  label->
           <el-form-item label="編號" prop="bookid"
                      :rules="[
                    { required: true, message: '編號不能為空',  },
                    { type:'number', message: '編號不能為數字' }
                ]">
               <el-input v-model.number="form.bookid" readonly></el-input>
           </el-form-item>
        <el-form-item label="書名" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="價格" prop="price"
                      :rules="[
                    { required: true, message: '價格不能為空',  },
                    { type:'number', message: '價格不能為數字' }
                ]">
            <el-input v-model.number="form.price"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary"   @click="submitForm('form')">立即修改</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "Update",
        created() {
            let _this = this;
            //this.$route.query.id可以用來接收點擊編輯傳過來的id
            axios.get('http://localhost:9000/lianxi/findById/'+this.$route.query.id).then(function (resp){
               // console.log(resp.data);
                _this.form = resp.data;
            })
        },
        data(){
         return {
             form: {
                 bookid: '',
                 name: '',
                 price: ''

             },
             rules: {
                 name: [
                     { required: true,message:'請輸入圖書名稱' , trigger: 'blur' },
                     {min:3,max:20,message: '長度在3 到20 個字符',trigger: 'blur' }
                 ]

             }
         }
     },
        methods:{
            submitForm(formName) {
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //console.log(this.form);
                        axios.put('http://localhost:9000/lianxi/update',this.form).then(function (resp) {
                            if (resp.data){
                                _this.$alert('《'+_this.form.name+'》 修改成功', '提示', {
                                    confirmButtonText: '確定',
                                    callback: action => {
                                        _this.$router.push('/index')
                                    }
                                });
                            }
                        })
                    } else {
                        alert("error submit")
                        return false;
                    }
                });
            }
        }
    }
</script>
<style scoped>
</style>

5.添加資料

<template>
    <el-form ref="form" :model="form" :rules="rules"  label->
        <el-form-item label="編號" prop="bookid"
                      :rules="[
                    { required: true, message: '編號不能為空',  },
                    { type:'number', message: '編號不能為數字' }
                ]">
            <el-input v-model.number="form.bookid" ></el-input>
        </el-form-item>
        <el-form-item label="書名" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="價格" prop="price"
                      :rules="[
                    { required: true, message: '價格不能為空',  },
                    { type:'number', message: '價格不能為數字' }
                ]">
            <el-input v-model.number="form.price"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary"   @click="submitForm('form')">添加</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "Add",
        data(){
            return {
                form: {
                    bookid: '',
                    name: '',
                    price: ''

                },
                rules: {
                    name: [
                        { required: true,message:'請輸入圖書名稱' , trigger: 'blur' },
                        {min:3,max:20,message: '長度在3 到20 個字符',trigger: 'blur' }
                    ]

                }
            }
        },
        methods:{
            submitForm(formName) {
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //console.log(this.form);
                        axios.post('http://localhost:9000/lianxi/add',this.form).then(function (resp) {
                            if (resp.data){
                                _this.$alert('《'+_this.form.name+'》 添加成功', '提示', {
                                    confirmButtonText: '確定',
                                    callback: action => {
                                        _this.$router.push('/index')
                                    }
                                });
                            }
                        })
                    } else {
                        alert("error submit")
                        return false;
                    }
                });
            }
        }
    }
</script>
<style scoped>
</style>

image-20230103201458329

收藏 關注 評論

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541146.html

標籤：其他

上一篇：記錄--短視頻滑動播放在 H5 下的實作

下一篇：【前端除錯】- 更好的除錯方式 VSCode Debugger

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂