首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue2.0结合Element-ui实战案例

Posted in Javascript onMarch 06, 2019

前言

我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例，后端数据接口，会使用json-server快速搭建一个本地的服务，方便对数据的增删改查，

利用以上技术我们会搭建一个vue案例，效果展示图：

vue2.0结合Element-ui实战案例

以上就是我们最终要实现的全部效果，我会一块一块的讲解，关于脚手架安装和json-server搭建，在本次博客中，不会讲解，如果想看的话，在小编的博客中，也有讲解关于脚手架搭建和json-server搭建，如果想学习的话，可以看一下。

1.项目结构展示

vue2.0结合Element-ui实战案例vue2.0结合Element-ui实战案例

左边第一个是前端项目结构，第二个为json-server服务端

2.页面搭建

在本次案例中，小编采用Element-ui快速搭建前端页面，以提高效率。如果不了解的话，可以去官网看一下

2.1安装element-ui

通过npm install element-ui -S 安装前端ul框架，安装完之后，并在main.js引入

import ElementUI from 'element-ui'<br>
import 'element-ui/lib/theme-chalk/index.css'<br><br>Vue.use(ElementUI)

2.2页面布局UserInfo.vue

直接通过element-ui中table布局，把整体建构页面布局完成，

<h1>用户信息管理界面</h1>

  <el-row>

    <el-col :span="20" :push='2'>

      <div>

        <el-form :inline="true">

          <el-form-item style="float: left" label="查询用户信息:">

            <el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input>

          </el-form-item>

          <el-form-item style="float: right">

            <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>

          </el-form-item>

        </el-form>

      </div>

      <div class="table">

        <el-table

          :data="searchUserinfo(keyUser)"

          border

          style="width: 100%">

          <el-table-column

           type="index"

           label="序号"

           align="center"

           width="60">

          </el-table-column>

          <el-table-column

           label="日期"

           align="center"

           width="120">

           <template slot-scope="scope">

            <span>{{ scope.row.date | moment}}</span>

           </template>

          </el-table-column>

          <el-table-column

           label="姓名"

           align="center"

           width="100">

           <template slot-scope="scope">

            <span>{{ scope.row.name }}</span>

           </template>

          </el-table-column>

          <el-table-column

           label="邮箱"

           align="center"

           width="160">

           <template slot-scope="scope">

            <span>{{ scope.row.email }}</span>

           </template>

          </el-table-column>

          <el-table-column

           label="标题"

           align="center"

           width="160">

           <template slot-scope="scope">

            <span>{{ scope.row.title }}</span>

           </template>

          </el-table-column>

          <el-table-column

           label="评价"

           align="center"

           width="200">

           <template slot-scope="scope">

            <span>{{ scope.row.evaluate }}</span>

           </template>

          </el-table-column>

          <el-table-column

           label="状态"

           align="center"

           width="160">

           <template slot-scope="scope">

            <span>{{ scope.row.state }}</span>

           </template>

          </el-table-column>

          <el-table-column label="操作" fixed="right">

           <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>

      </div>

    </el-col>

  </el-row>

2.3页面数据获取并展示

通过axios请求本地搭建的服务数据，把得到的数据展示到页面当中。

也是通过cnpm install axios --save安装并在main.js中引入

import axios from 'axios'
Vue.prototype.$axios = axios

我们需要在方法methods中定义一个getUserInfo方法，用于请求数据

data () {
  return {
    tableData: [], 用于存放数据

    }  
}
getUserInfo() {
 this.$axios.get('http://localhost:3000/data').then(res => {
  this.tableData = res.data  
 })
},

这是时候，数据是请求到了，但是页面并为展示，这就关系到vue的生命周期。如果对vue生命周期不是很了解的话，可以官网仔细看一遍，

vue2.0结合Element-ui实战案例

我们只需要在created这个生命周期钩子中，调用我们请求数据的方法就可以把数据展示到页面中。这样我们就完成第一步了，页面数据请求展示created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

3.添加数据

刚才我们已经完成第一步，把后台的数据展示到前端页面中，接下来我们对数据进行添加，页面全部都是用element搭建

3.1页面结构搭建，把AddUserInfo.vue组件当成一个子组件，在父组件中引入这个子组件，点击添加按钮，弹出这个添加对话框

<template>
 <div class="hello">
  <el-dialog title="添加用户信息" :visible.sync="dialogAdd.show">
   <el-form :model="formDate" ref="formdong" label-width="100px" :rules="formrules">
    <el-form-item label="日期" prop="date">
      <el-date-picker
       v-model="formDate.date"
       type="date"
       placeholder="选择日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
     <el-input v-model="formDate.name"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
     <el-input v-model="formDate.email"></el-input>
    </el-form-item>
    <el-form-item label="标题" prop="title">
     <el-input v-model="formDate.title"></el-input>
    </el-form-item>
    <el-form-item label="评价" prop="evaluate">
     <el-input v-model="formDate.evaluate"></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="state">
     <el-input v-model="formDate.state"></el-input>
    </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="dialogAdd.show = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormAdd('formdong')">确 定</el-button>
   </div>
  </el-dialog>
 </div>
</template>

3.2我们在父组件UserInfo中引入子组件AddUserInfo.vue,

<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> //使用这个组件，
import AddUser from './AddUserInfo.vue'  //引入组件 
 components:{  //注册
   AddUser,
 }

3.3通过点击父组件的添加按钮触发子组件弹出框

dialogAdd是我们在父组件定义的的，需要传递给子组件，

<el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>

在data定义用于是否弹出添加弹出框，默认false不弹出，只有点击添加按钮的时候才弹出弹出框

dialogAdd:{

    show:false

   },

methods方法中

hanldeAdd(){ //添加

 this.dialogAdd.show = true;  //弹出对话框

 },

3.4子组件需要接受父组件传递的方法.并请求数据。实现添加

<script>
export default {
 name: 'AddUser',
 props:{
  dialogAdd:Object
 },
 data () {
  return {
   formDate:{
    date:'',
    name:'',
    email:'',
    title:'',
    evaluate:'',
    state:''
   },
   formrules:{
    date:[{required:true,message:"日期不能为空",trigger:"blur"}],
    name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
    email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],
   }
  }
 },
 methods:{
  dialogFormAdd(formdong) {
    this.$refs[formdong].validate((valid) => {
     if (valid) {
      this.$axios.post('http://localhost:3000/data',this.formDate).then(res => {
        this.$message({
          type:"success",
          message:"添加信息成功"
        })
        this.dialogAdd.show = false;
        this.$emit('update');  
 
      })
      this.formDate = ""
     } else {
      console.log('error submit!!');
      return false;
     }
    })
  }
 }
}
</script>

this.$emit('update'); 子组件数据发生改变了，父组件视图却没有更新，这时候通过子创父，this.$emit,想父组件发送子组件传递的方法，

<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> 
@update="getUserInfo"  //接受子组件传递过来的方法去更新视图

4.实现删除　

<el-button
  size="mini"
  type="danger"
 @click="handleDelete(scope.$index, scope.row)">删除</el-button>

删除数据需要根据id去删除，使用es6模板字符串进行拼接

handleDelete(index,row) {
    // 删除用户信息
    this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{
      this.$message({
        type:"success",
        message:"删除信息成功"
      })
      this.getUserInfo()  //删除数据，更新视图
    })
  },

5.实现编辑功能

在这里添加弹出框内容和编辑弹出框内容一模一样，可以选择进行封装，封装成一个组件，添加和编辑共同使用这一个组件，根据自定义一个字段来判断点击 的是添加还是编辑按钮。在本次案例中，没有封装，如果想封装的话，可以自己尝试封装组件，来提高效率。

5.1页面搭建EditUser.vue组件，也是当做一个子组件，在父组件中去引入这个子组件，并把获取的数据展示到页面中。

<template>
 <div class="hello">
  <el-dialog title="编辑用户信息" :visible.sync="dialogEdit.show">
   <el-form :model="form" ref="formEdit" label-width="100px" :rules="formrules">
    <el-form-item label="日期" prop="date">
      <el-date-picker
       v-model="form.date"
       type="date"
       placeholder="选择日期">
      </el-date-picker>
    </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="email">
     <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="标题" prop="title">
     <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="评价" prop="evaluate">
     <el-input v-model="form.evaluate"></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="state">
     <el-input v-model="form.state"></el-input>
    </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="dialogEdit.show = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormEdit('formEdit')">确 定</el-button>
   </div>
  </el-dialog>
 </div>
</template>

在父组件中定义好需要传递的数据字段

dialogAdd:{  //编辑弹出框，默认是false
    show:false
   },
   form:{  //编辑信息
    date:'',
    name:'',
    email:'',
    title:'',
    evaluate:'',
    state:''
   },

5.2也是在方法中点击编辑按钮，在编辑中，点击拿一行，需要获取那一行的字段数据，并把获取的数据传递给子组件显示到弹出框中，需要肯据row，来获取每一行的数据。

<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
 <el-button<br>
handleEdit(index,row){ //编辑
    this.dialogEdit.show = true; //显示弹
    this.form = {
      date:row.date,
      name:row.name,
      email:row.email,
      title:row.title,
      evaluate:row.evaluate,
      state:row.state,
      id:row.id
    }
  },

当我门打印row的是，就是点击哪一行的编辑按钮，对应的数据就好打印出来，这时候我们只需要把得到的数据传递给子组件就行

vue2.0结合Element-ui实战案例

5.3父组件得到的数据，子组件通过props接受，和添加数据几乎一样

<script>
export default {
 name: 'HelloWorld',
 props:{
  dialogEdit:Object,
  form:Object
 },
 data () {
  return {
   formrules:{
    date:[{required:true,message:"日期不能为空",trigger:"blur"}],
    name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
    email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],
   }
  }
 },
 methods:{
  dialogFormEdit(formEdit) {
    this.$refs[formEdit].validate((valid) => {
     if (valid) {
      this.$axios.put(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {
        this.$message({
          type:"success",
          message:"编辑信息成功"
        })
       console.log(res)
        this.dialogEdit.show = false;
        this.$emit('updateEdit')  //更新父组件数据视图
      })
     } else {
      console.log('error submit!!');
      return false;
     }
    })
  }
 }
}
</script>

6查询数据

<el-form-item style="float: left" label="查询用户信息:">
 <el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input>
</el-form-item>

6.1需要定义一个查询方法，通过filter对数组进行过滤，并返回一个新的数据，最后通过es6中includes方法，判断查询的条件是否包含，includes如果包含就返回true，如果不包含就返回false

searchUserinfo(keyUser) {
    return this.tableData.filter((user) => {
      if(user.name.includes(keyUser)) {
        return user
      }
    })
  }

把定义好的方法，绑定到data,因为这个方法会返回一个新的数组

vue2.0结合Element-ui实战案例

7.时间格式化

写到这个案例已经基本写完了，还是一些细节需要修改，比如我我们添加日期，页面显示并不是我们想要的。我门只想要右边的效果.

vue2.0结合Element-ui实战案例vue2.0结合Element-ui实战案例

这时候推荐一个日期格式化插件moment.js,可以快速帮我们解决这个问题

7.1通过npm install moment --save下载

在main.js引入

import moment from 'moment'

我们定义一个全局过滤的filter,无论在那个组件都可以使用，主要调用moment

//获取年份
Vue.filter('moment', function (value, formatString) {
  formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
  return moment(value).format("YYYY-MM-DD"); // value可以是普通日期 20170723
});

8.全部代码

8.1UserInfo.vue组件代码

<template>
 <div class="info">
  <h1>用户信息管理界面</h1>
  <el-row>
    <el-col :span="20" :push='2'>
      <div>
        <el-form :inline="true">
          <el-form-item style="float: left" label="查询用户信息:">
            <el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <el-table
          :data="searchUserinfo(keyUser)"
          border
          style="width: 100%">
          <el-table-column
           type="index"
           label="序号"
           align="center"
           width="60">
          </el-table-column>
          <el-table-column
           label="日期"
           align="center"
           width="120">
           <template slot-scope="scope">
            <span>{{ scope.row.date | moment}}</span>
           </template>
          </el-table-column>
          <el-table-column
           label="姓名"
           align="center"
           width="100">
           <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
           </template>
          </el-table-column>
          <el-table-column
           label="邮箱"
           align="center"
           width="160">
           <template slot-scope="scope">
            <span>{{ scope.row.email }}</span>
           </template>
          </el-table-column>
          <el-table-column
           label="标题"
           align="center"
           width="160">
           <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
           </template>
          </el-table-column>
          <el-table-column
           label="评价"
           align="center"
           width="200">
           <template slot-scope="scope">
            <span>{{ scope.row.evaluate }}</span>
           </template>
          </el-table-column>
          <el-table-column
           label="状态"
           align="center"
           width="160">
           <template slot-scope="scope">
            <span>{{ scope.row.state }}</span>
           </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
           <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>
      </div>
    </el-col>
  </el-row>
  <AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser>
  <EditUser :dialogEdit="dialogEdit" :form="form" @updateEdit="getUserInfo"></EditUser>
 </div>
</template>
 
<script>
  import AddUser from './AddUser.vue'
  import EditUser from './EditUser.vue'
export default {
 name: 'info',
 data () {
  return {
   tableData:[],
   dialogEdit:{
    show:false,
   },
   dialogAdd:{
    show:false
   },
   keyUser:"",
   form:{  //编辑信息
    date:'',
    name:'',
    email:'',
    title:'',
    evaluate:'',
    state:''
   },
  }
 },
 methods:{
  getUserInfo() {
    this.$axios.get('http://localhost:3000/data').then(res => {
    console.log(res)
      this.tableData = res.data
    })
  },
  hanldeAdd(){ //添加
    this.dialogAdd.show = true;
  },
  handleEdit(index,row){ //编辑
    this.dialogEdit.show = true; //显示弹
    this.form = {
      date:row.date,
      name:row.name,
      email:row.email,
      title:row.title,
      evaluate:row.evaluate,
      state:row.state,
      id:row.id
    }
   console.log(row)
  },
  handleDelete(index,row) {
    // 删除用户信息
    this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{
      this.$message({
        type:"success",
        message:"删除信息成功"
      })
      this.getUserInfo()  //删除数据，更新视图
    })
  },
  searchUserinfo(keyUser) {
    return this.tableData.filter((user) => {
      if(user.name.includes(keyUser)) {
        return user
      }
    })
  }
 },
 created(){
  this.getUserInfo()
 },
 components:{
  AddUser,
  EditUser
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
  font-size: 30px;
  color: #333;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 5px;
  border-bottom: 2px solid #409EFF;
  width: 300px
}
</style>

8.2AddUserInfo.vue组件

<template>
 <div class="hello">
  <el-dialog title="添加用户信息" :visible.sync="dialogAdd.show">
   <el-form :model="formDate" ref="formdong" label-width="100px" :rules="formrules">
    <el-form-item label="日期" prop="date">
      <el-date-picker
       v-model="formDate.date"
       type="date"
       placeholder="选择日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
     <el-input v-model="formDate.name"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
     <el-input v-model="formDate.email"></el-input>
    </el-form-item>
    <el-form-item label="标题" prop="title">
     <el-input v-model="formDate.title"></el-input>
    </el-form-item>
    <el-form-item label="评价" prop="evaluate">
     <el-input v-model="formDate.evaluate"></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="state">
     <el-input v-model="formDate.state"></el-input>
    </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="dialogAdd.show = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormAdd('formdong')">确 定</el-button>
   </div>
  </el-dialog>
 </div>
</template>
 
<script>
export default {
 name: 'AddUser',
 props:{
  dialogAdd:Object
 },
 data () {
  return {
   formDate:{
    date:'',
    name:'',
    email:'',
    title:'',
    evaluate:'',
    state:''
   },
   formrules:{
    date:[{required:true,message:"日期不能为空",trigger:"blur"}],
    name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
    email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],
   }
  }
 },
 methods:{
  dialogFormAdd(formdong) {
    this.$refs[formdong].validate((valid) => {
     if (valid) {
      this.$axios.post('http://localhost:3000/data',this.formDate).then(res => {
        this.$message({
          type:"success",
          message:"添加信息成功"
        })
        this.dialogAdd.show = false;
        this.$emit('update');
 
      })
      this.formDate = ""
     } else {
      console.log('error submit!!');
      return false;
     }
    })
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  
</style>

8.3EditUser.vue编辑组件

<template>
 <div class="hello">
  <el-dialog title="编辑用户信息" :visible.sync="dialogEdit.show">
   <el-form :model="form" ref="formEdit" label-width="100px" :rules="formrules">
    <el-form-item label="日期" prop="date">
      <el-date-picker
       v-model="form.date"
       type="date"
       placeholder="选择日期">
      </el-date-picker>
    </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="email">
     <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="标题" prop="title">
     <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="评价" prop="evaluate">
     <el-input v-model="form.evaluate"></el-input>
    </el-form-item>
    <el-form-item label="状态" prop="state">
     <el-input v-model="form.state"></el-input>
    </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="dialogEdit.show = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormEdit('formEdit')">确 定</el-button>
   </div>
  </el-dialog>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 props:{
  dialogEdit:Object,
  form:Object
 },
 data () {
  return {
   formrules:{
    date:[{required:true,message:"日期不能为空",trigger:"blur"}],
    name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
    email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],
   }
  }
 },
 methods:{
  dialogFormEdit(formEdit) {
    this.$refs[formEdit].validate((valid) => {
     if (valid) {
      this.$axios.put(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {
        this.$message({
          type:"success",
          message:"编辑信息成功"
        })
       console.log(res)
        this.dialogEdit.show = false;
        this.$emit('updateEdit')
      })
     } else {
      console.log('error submit!!');
      return false;
     }
    })
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  
</style>

以上这次全部的案例deom,在过程中有些说的不是很好，请见谅，如果喜欢，请多多关注

vue2.0结合Element-ui实战案例

- Author -

小周sri的码农

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery获取input表单值的代码
Apr 19 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
深入理解JS中Number()，parseInt()，parseFloat()三者比较
Aug 24 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 #Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 #jQuery
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 #Javascript
JS实现数组深拷贝的方法分析
Mar 06 #Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 #Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 #Javascript
微信小程序性能优化之checkSession的使用
Mar 06 #Javascript
建议书(203) 聘任书(31) 活动总结(790) 倡议书(159) 请假条(31) 责任书(145) 广告词(105) 决心书(42) 主持词(345) 承诺书(369)
You might like
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
原生JS实现N级菜单的代码
2017/05/21 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
美国演唱会订票网站：Ticketmaster美国
2017/10/05 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
同学会邀请书大全
2014/01/12 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server