• HTML 引入element ui 并使用axios请求后端

           由于项目开发，需要在前端项目以外新建一个单页面，做数据处理。

    用纯HTML开发，最麻烦的就是处理样式问题以及事件，由于开发单页面没有技术要求，所以直接使用element ui +vue 来开发

    链接：

       element-ui： https://unpkg.com/browse/element-ui@2.7.2/lib/ （版本统一，不然出现样式不生效问题）

           1) element-ui/lib 包，先选择想要的版本，只下载index.js 即可，因为index.js文件是其他所有文件的汇总

           2) element-ui/lib/theme-chalk 组件样式包；下载 index.css文件

            3) element-ui/lib/theme-chalk/fonts 字体包；(element-icons.woff、element-icons.ttf)两个文件，都要下载

         vue：  https://cdn.jsdelivr.net/npm/vue@2.7.2/dist/   选择版本，下载 vue.js

      axios：   https://unpkg.com/axios@0.27.2/dist/axios.min.js  （打开右键另存为即可或者直接右键链接另存为）

      axios（github）：https://github.com/axios/axios/tree/v1.x/dist

    文件结构：

    引入文件需要注意的问题；

            顺序问题： vue.js 要在 element.js 之前，不然不会生效

     在引用elementUI 的css文件时，需要修改字体样式的url：

    如果还不生效，可能是因为在script标签创建vue，在div标签 设置id为【app】

     

    效果：

    测试代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>elementUI本地引入测试title>
    9.     <script src="./element/vue.js">script>
    10.     <script src="./element/element.js">script>
    11.     <link rel="stylesheet" href="./element/element.css">
    12.     <script src="./axios/axios.min.js">script>
    13. head>
    14.  
    15. <body>
    16.     <div id="app" style="margin: auto;">
    17.         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    18.             <el-form-item label="活动名称" prop="name">
    19.                 <el-input v-model="ruleForm.name">el-input>
    20.             el-form-item>
    21.             <el-form-item label="活动区域" prop="region">
    22.                 <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
    23.                     <el-option label="区域一" value="shanghai">el-option>
    24.                     <el-option label="区域二" value="beijing">el-option>
    25.                 el-select>
    26.             el-form-item>
    27.             <el-form-item label="活动时间" required>
    28.                 <el-col :span="11">
    29.                     <el-form-item prop="date1">
    30.                         <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;">
    31.                         el-date-picker>
    32.                     el-form-item>
    33.                 el-col>
    34.                 <el-col class="line" :span="2">-el-col>
    35.                 <el-col :span="11">
    36.                     <el-form-item prop="date2">
    37.                         <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;">
    38.                         el-time-picker>
    39.                     el-form-item>
    40.                 el-col>
    41.             el-form-item>
    42.             <el-form-item label="即时配送" prop="delivery">
    43.                 <el-switch v-model="ruleForm.delivery">el-switch>
    44.             el-form-item>
    45.             <el-form-item label="活动性质" prop="type">
    46.                 <el-checkbox-group v-model="ruleForm.type">
    47.                     <el-checkbox label="美食/餐厅线上活动" name="type">el-checkbox>
    48.                     <el-checkbox label="地推活动" name="type">el-checkbox>
    49.                     <el-checkbox label="线下主题活动" name="type">el-checkbox>
    50.                     <el-checkbox label="单纯品牌曝光" name="type">el-checkbox>
    51.                 el-checkbox-group>
    52.             el-form-item>
    53.             <el-form-item label="特殊资源" prop="resource">
    54.                 <el-radio-group v-model="ruleForm.resource">
    55.                     <el-radio label="线上品牌商赞助">el-radio>
    56.                     <el-radio label="线下场地免费">el-radio>
    57.                 el-radio-group>
    58.             el-form-item>
    59.             <el-form-item label="活动形式" prop="desc">
    60.                 <el-input type="textarea" v-model="ruleForm.desc">el-input>
    61.             el-form-item>
    62.             <el-form-item>
    63.                 <el-button type="primary" @click="submitForm('ruleForm')">立即创建el-button>
    64.                 <el-button @click="resetForm('ruleForm')">重置el-button>
    65.             el-form-item>
    66.         el-form>
    67.         <div>
    68.         div>
    69.     div>
    70. body>
    71.  
    72. <script>
    73.     new Vue({
    74.         el: '#app',
    75.         data: function () {
    76.             return {
    77.                 serverUrl: 'http://127.0.0.1:9001/', //服务器地址
    78.                 multipleSelection: [], //多选数据列
    79.                 dialogFormVisible: false,
    80.                 formLabelWidth: '100px',
    81.                 align: "center",
    82.                 businessIdList: [],
    83.                 businessAddressList: [],
    84.                 clientNameList: [],
    85.                 currentPage: 1, //当前所在页面
    86.                 total: 0, //总条数
    87.                 tableData: [],
    88.                 param: {
    89.                     key: "maintenanceCompany",
    90.                     page: {
    91.                         pageNum: 1,
    92.                         pageSize: 10
    93.                     }
    94.                 },
    95.                 autosize: { minRows: 2, maxRows: 6 },
    96.                 ruleForm: {
    97.                     name: '',
    98.                     region: '',
    99.                     date1: '',
    100.                     date2: '',
    101.                     delivery: false,
    102.                     type: [],
    103.                     resource: '',
    104.                     desc: ''
    105.                 },
    106.                 searchForm: {
    107.                     sign: '',
    108.                     customerAddress: '',
    109.                     userCustomerName: ''
    110.                 },
    111.  
    112.                 rules: {
    113.                     name: [
    114.                         { required: true, message: '请输入活动名称', trigger: 'blur' },
    115.                         { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    116.                     ],
    117.                     region: [
    118.                         { required: true, message: '请选择活动区域', trigger: 'change' }
    119.                     ],
    120.                     date1: [
    121.                         { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
    122.                     ],
    123.                     date2: [
    124.                         { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
    125.                     ],
    126.                     type: [
    127.                         { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
    128.                     ],
    129.                     resource: [
    130.                         { required: true, message: '请选择活动资源', trigger: 'change' }
    131.                     ],
    132.                     desc: [
    133.                         { required: true, message: '请填写活动形式', trigger: 'blur' }
    134.                     ]
    135.                 }
    136.             }
    137.         },
    138.         methods: {
    139.             submitForm(formName) {
    140.                 let that = this
    141.                 this.$refs[formName].validate((valid) => {
    142.                     if (valid) {
    143.                         axios.post(that.serverUrl + '/test/insert', that.ruleForm).then(res => {
    144.                             let data = res.data;
    145.                             if (data.code == 100000) {
    146.                                 that.$message({
    147.                                     message: '添加成功',
    148.                                     type: 'success'
    149.                                 })
    150.                                 that.resetForm("ruleForm")
    151.                             } else {
    152.                                 that.$error(data.message)
    153.                             }
    154.                         })
    155.                     } else {
    156.                         console.log('error submit!!');
    157.                         return false;
    158.                     }
    159.                 });
    160.             },
    161.             cancel(formName) {
    162.                 this.dialogFormVisible = false
    163.                 this.$refs[formName].resetFields();
    164.             },
    165.             resetForm(formName) {
    166.                 this.$refs[formName].resetFields();
    167.                 console.log(this.$refs[formName]);
    168.             },
    169.             handleSelectionChange(val) {
    170.                 this.multipleSelection = val;
    171.                 let data = ''
    172.                 this.idList = []
    173.                 this.businessAddressList = []
    174.                 this.clientNameList = []
    175.                 for (const key in val) {
    176.                     this.idList.push(val[key].sign)
    177.                     this.businessAddressList.push(val[key].customerAddress)
    178.                     this.clientNameList.push(val[key].userCustomerName)
    179.                 }
    180.             },
    181.             search() {
    182.                 let param = Object.assign(this.searchForm, this.param);
    183.                 axios.post(this.serverUrl + '/import-fault-business-sign/findAll', param).then(res => {
    184.                     let result = res.data.data.pageResult;
    185.                     this.tableData = result.datas
    186.                     this.total = result.total
    187.                 })
    188.             },
    189.             selectList() {
    190.                 this.ruleForm.businessId = this.idList.join(',')
    191.                 this.ruleForm.businessAddress = this.businessAddressList.join(',')
    192.                 this.ruleForm.clientName = this.clientNameList.join(',')
    193.                 this.dialogFormVisible = false
    194.                 console.log(this.idList.join(','));
    195.                 console.log(this.businessAddressList.join(','));
    196.                 console.log(this.clientNameList.join(','));
    197.             },
    198.             handleSizeChange(val) {
    199.                 console.log(`每页 ${val} 条`);
    200.                 this.param.page.pageSize = val
    201.                 this.findAll()
    202.             },
    203.             handleCurrentChange(val) {
    204.                 console.log(`当前页: ${val}`);
    205.                 this.currentPage = val
    206.                 this.param.page.pageNum = val
    207.                 this.findAll()
    208.             },
    209.             queryBusiness() {
    210.                 this.findAll()
    211.                 this.dialogFormVisible = true
    212.             },
    213.             //获取数据
    214.             findAll() {
    215.                 axios.post(this.serverUrl + '/test/findAll', this.param).then(res => {
    216.                     let result = res.data.data.pageResult;
    217.                     this.tableData = result.datas
    218.                     this.total = result.total
    219.                     console.log('data', this.tableData);
    220.                 })
    221.             }
    222.         }
    223.     })
    224. script>
    225.  
    226. html>
  • 相关阅读:
    STM32环境搭建+创建工程
    【JVM笔记】Serial回收器：串行回收
    阿里云OSS、用户认证与就诊人
    揭秘拼多多API接口的魅力与价值：商品查询，获取指定商品的详细信息，如价格、库存等
    Redis系列——5种常见数据类型day1-3
    C语言：指针的应用
    如何实现与FDA保持邮件通信安全加密？
    JVM 补充——StringTable
    材料安全数据分析表（一）丨Abnova KLH IgG (小鼠) ELISA试剂盒
    联合体(共用体)
  • 原文地址：https://blog.csdn.net/qq_41897021/article/details/126656063