Vue2项目练手——通用后台管理项目第六节

2023-11-10

Vue2项目练手——通用后台管理项目

用户管理页
- table表格

用户管理页

table表格

使用的组件和前面的表格使用的一致。

获取表格数据

目录列表

在这里插入图片描述

user.js

import Mock from 'mockjs'

// get请求从config.url获取参数，post从config.body中获取参数
function param2Obj (url) {
    const search = url.split('?')[1]
    if (!search) {
        return {}
    }
    return JSON.parse(
        '{"' +
        decodeURIComponent(search)
            .replace(/"/g, '\\"')
            .replace(/&/g, '","')
            .replace(/=/g, '":"') +
        '"}'
    )
}

let List = []
const count = 200

for (let i = 0; i < count; i++) {
    List.push(
        Mock.mock({
            id: Mock.Random.guid(),
            name: Mock.Random.cname(),
            addr: Mock.mock('@county(true)'),
            'age|18-60': 1,
            birth: Mock.Random.date(),
            sex: Mock.Random.integer(0, 1)
        })
    )
}

export default {
    /**
     * 获取列表
     * 要带参数 name, page, limt; name可以不填, page,limit有默认值。
     * @param name, page, limit
     * @return {{code: number, count: number, data: *[]}}
     */
    getUserList: config => {
        const { name, page = 1, limit = 20 } = param2Obj(config.url)
        console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)
        const mockList = List.filter(user => {
            if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
            return true
        })
        const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
        return {
            code: 20000,
            count: mockList.length,
            list: pageList
        }
    },
    /**
     * 增加用户
     * @param name, addr, age, birth, sex
     * @return {{code: number, data: {message: string}}}
     */
    createUser: config => {
        const { name, addr, age, birth, sex } = JSON.parse(config.body)
        console.log(JSON.parse(config.body))
        List.unshift({
            id: Mock.Random.guid(),
            name: name,
            addr: addr,
            age: age,
            birth: birth,
            sex: sex
        })
        return {
            code: 20000,
            data: {
                message: '添加成功'
            }
        }
    },
    /**
     * 删除用户
     * @param id
     * @return {*}
     */
    deleteUser: config => {
        const { id } = JSON.parse(config.body)
        if (!id) {
            return {
                code: -999,
                message: '参数不正确'
            }
        } else {
            List = List.filter(u => u.id !== id)
            return {
                code: 20000,
                message: '删除成功'
            }
        }
    },
    /**
     * 批量删除
     * @param config
     * @return {{code: number, data: {message: string}}}
     */
    batchremove: config => {
        let { ids } = param2Obj(config.url)
        ids = ids.split(',')
        List = List.filter(u => !ids.includes(u.id))
        return {
            code: 20000,
            data: {
                message: '批量删除成功'
            }
        }
    },
    /**
     * 修改用户
     * @param id, name, addr, age, birth, sex
     * @return {{code: number, data: {message: string}}}
     */
    updateUser: config => {
        const { id, name, addr, age, birth, sex } = JSON.parse(config.body)
        const sex_num = parseInt(sex)
        List.some(u => {
            if (u.id === id) {
                u.name = name
                u.addr = addr
                u.age = age
                u.birth = birth
                u.sex = sex_num
                return true
            }
        })
        return {
            code: 20000,
            data: {
                message: '编辑成功'
            }
        }
    }
}

mock.js

新增代码：

import user from '@/api/mockServeData/user'

//用户列表的数据
Mock.mock('/api/user/add','post',user.createUser)
Mock.mock('/api/user/edit','post',user.updateUser)
Mock.mock('/api/user/del','post',user.deleteUser)
Mock.mock('/api/user/getUser',user.getUserList)

全部代码：

import Mock from 'mockjs'
import homeApi from "@/api/mockServeData/home";
import user from '@/api/mockServeData/user'
/*//定义请求拦截
Mock.mock('/api/home/getData',function (){
    //拦截到请求后处理的逻辑
    console.log("拦截到了")
})*/
//定义请求拦截
Mock.mock('/api/home/getData',homeApi.getStatisticalData)

//用户列表的数据
Mock.mock('/api/user/add','post',user.createUser)
Mock.mock('/api/user/edit','post',user.updateUser)
Mock.mock('/api/user/del','post',user.deleteUser)
Mock.mock('/api/user/getUser',user.getUserList)

index.js

新增代码

export const getUser=(params)=>{
    //返回用户列表  axios的get请求是在params中
    return http.get('/user/getUser',params)
}

export const addUser=(data)=>{
    //新增用户  axios的post请求是在data中
    return http.post('/user/add',data)
}

export const editUser=(data)=>{
    //编辑用户  axios的post请求是在data中
    return http.post('/user/edit',data)
}
export const delUser=(data)=>{
    //删除用户  axios的post请求是在data中
    return http.post('/user/del',data)
}

全部代码：

import http from "@/utils/request";

//请求首页数据
export const getData=()=>{
    //返回一个promise对象
    return http.get('/home/getData')
}

export const getUser=(params)=>{
    //返回用户列表  axios的get请求是在params中
    return http.get('/user/getUser',params)
}

export const addUser=(data)=>{
    //新增用户  axios的post请求是在data中
    return http.post('/user/add',data)
}

export const editUser=(data)=>{
    //编辑用户  axios的post请求是在data中
    return http.post('/user/edit',data)
}
export const delUser=(data)=>{
    //删除用户  axios的post请求是在data中
    return http.post('/user/del',data)
}

Users.vue

新增代码

 <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <span>{{ scope.row.sex===1?'男':'女' }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="birth"
            label="出生日期">
        </el-table-column>
        <el-table-column
              prop="addr"
              label="地址">
        </el-table-column>
        <el-table-column
          prop="action"
          label="操作">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

import {getUser} from "@/api";
 methods:{
    handleEdit(row){

    },
    handleDelete(row){

    }
  },
  mounted() {
    getUser().then(({data})=>{
      console.log(data);
      this.tableData=data.list
    })
  }

全部代码：

<template>
  <div class="manage">
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
<!--      用户的表单信息-->
      <el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.birth" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="dialogVisible=true">+新增</el-button>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <span>{{ scope.row.sex===1?'男':'女' }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="birth"
            label="出生日期">
        </el-table-column>
        <el-table-column
              prop="addr"
              label="地址">
        </el-table-column>
        <el-table-column
          prop="action"
          label="操作">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
import {getUser} from "@/api";

export default {
  name: "Users",
  data(){
    return {
      dialogVisible:false,
      form: {
        name: '',
        age: '',
        sex: '',
        birth: '',
        addr: '',
      },
      rules: {
        name: [{required: true, message: "请输入姓名"}],
        age: [{required: true, message: "请输入年龄"}],
        sex: [{required: true, message: "请选择性别"}],
        birth: [{required: true, message: "请选择出生日期"}],
        addr: [{required: true, message: "请输入地址"}],
      },
      tableData: [],
    }
  },
  methods:{
    //提交用户表单
    submit(){
      this.$refs.form.validate((valid)=>{
        if(valid){
        //  后续对表单数据的处理
          console.log(this.form)

          //清空表单数据
          this.$refs.form.resetFields()
          //关闭弹窗
          this.dialogVisible=false
        }
      })
    },
    //弹窗关闭的时候
    handleClose(){
      //清空表单
      this.$refs.form.resetFields()
      this.dialogVisible=false
    },
    cancel(){
      this.handleClose()
    },
    handleEdit(row){

    },
    handleDelete(row){

    }
  },
  mounted() {
    getUser().then(({data})=>{
      console.log(data);
      this.tableData=data.list
    })
  }
}
</script>

<style scoped>

</style>

新增和编辑功能

Users.vue

新增代码：

<el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>

<el-form-item label="出生日期" prop="birth">
          <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.birth" style="width: 100%;"
              value-format="yyyy-MM-DD">
            <!--              日期格式转变-->
          </el-date-picker>
        </el-form-item>
 
 <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>

<el-button type="primary" @click="handleAdd">+新增</el-button>

methods:{
//提交用户表单
    submit(){
      this.$refs.form.validate((valid)=>{
        if(valid){
          //  后续对表单数据的处理
          console.log(this.form)
          if(this.modalType===0){
            //新增
            addUser(this.form).then(()=>{
              //  重新获取列表结果
              this.getList()
            })
          }else{
            //  编辑处理
            editUser(this.form).then(()=>{
              //  重新获取列表结果
              this.getList()
            })
          }
          //清空表单数据
          this.$refs.form.resetFields()
          //关闭弹窗
          this.dialogVisible=false
        }
      })
    },
 handleEdit(row){
      console.log("row",row)
      this.modalType=1
      this.dialogVisible=true
      //注意需要对当前行数据进行深拷贝，否则会出错
      this.form=JSON.parse(JSON.stringify(row))
    },
//新增的功能
    handleAdd(){
      this.modalType=0
      this.dialogVisible=true
 }
  },
mounted() {
    this.getList()
  }

全部代码：

<template>
  <div class="manage">
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
      <!--      用户的表单信息-->
      <el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.birth" style="width: 100%;"
              value-format="yyyy-MM-DD">
            <!--              日期格式转变-->
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="handleAdd">+新增</el-button>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <span>{{ scope.row.sex===1?'男':'女' }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="birth"
            label="出生日期">
        </el-table-column>
        <el-table-column
            prop="addr"
            label="地址">
        </el-table-column>
        <el-table-column
            prop="action"
            label="操作">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
import {addUser, getUser,editUser} from "@/api";

export default {
  name: "Users",
  data(){
    return {
      dialogVisible:false,
      form: {
        name: '',
        age: '',
        sex: '',
        birth: '',
        addr: '',
      },
      rules: {
        name: [{required: true, message: "请输入姓名"}],
        age: [{required: true, message: "请输入年龄"}],
        sex: [{required: true, message: "请选择性别"}],
        birth: [{required: true, message: "请选择出生日期"}],
        addr: [{required: true, message: "请输入地址"}],
      },
      tableData: [],
      modalType:0  //0表示新增的弹窗，1表示的是编辑
    }
  },
  methods:{
    //提交用户表单
    submit(){
      this.$refs.form.validate((valid)=>{
        if(valid){
          //  后续对表单数据的处理
          console.log(this.form)
          if(this.modalType===0){
            //新增
            addUser(this.form).then(()=>{
              //  重新获取列表结果
              this.getList()
            })
          }else{
            //  编辑处理
            editUser(this.form).then(()=>{
              //  重新获取列表结果
              this.getList()
            })
          }
          //清空表单数据
          this.$refs.form.resetFields()
          //关闭弹窗
          this.dialogVisible=false
        }
      })
    },
    //弹窗关闭的时候
    handleClose(){
      //清空表单
      this.$refs.form.resetFields()
      this.dialogVisible=false
    },
    cancel(){
      this.handleClose()
    },
    handleEdit(row){
      console.log("row",row)
      this.modalType=1
      this.dialogVisible=true
      //注意需要对当前行数据进行深拷贝，否则会出错
      this.form=JSON.parse(JSON.stringify(row))
    },
    handleDelete(row){

    },
    //封装获取列表的数据
    getList(){
      //获取列表数据
      getUser().then(({data})=>{
        console.log(data);
        this.tableData=data.list
      })
    },
    //新增的功能
    handleAdd(){
      this.modalType=0
      this.dialogVisible=true
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style scoped>

</style>

请添加图片描述

删除功能

使用的组件

在这里插入图片描述

Users.vue

新增代码：

handleDelete(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUser({id:row.id}).then(()=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //  重新获取列表结果
          this.getList()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

全部代码：

<template>
  <div class="manage">
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
      <!--      用户的表单信息-->
      <el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.birth" style="width: 100%;"
              value-format="yyyy-MM-DD">
            <!--              日期格式转变-->
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="handleAdd">+新增</el-button>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="age"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <span>{{ scope.row.sex===1?'男':'女' }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="birth"
            label="出生日期">
        </el-table-column>
        <el-table-column
            prop="addr"
            label="地址">
        </el-table-column>
        <el-table-column
            prop="action"
            label="操作">
          <!--自定义列，使用插槽的方式，element-ui上面有提供-->
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
import {addUser, getUser,editUser,delUser} from "@/api";

export default {
  name: "Users",
  data(){
    return {
      dialogVisible:false,
      form: {
        name: '',
        age: '',
        sex: '',
        birth: '',
        addr: '',
      },
      rules: {
        name: [{required: true, message: "请输入姓名"}],
        age: [{required: true, message: "请输入年龄"}],
        sex: [{required: true, message: "请选择性别"}],
        birth: [{required: true, message: "请选择出生日期"}],
        addr: [{required: true, message: "请输入地址"}],
      },
      tableData: [],
      modalType:0  //0表示新增的弹窗，1表示的是编辑
    }
  },
  methods:{
    //提交用户表单
    submit(){
      this.$refs.form.validate((valid)=>{
        if(valid){
          //  后续对表单数据的处理
          console.log(this.form)
          if(this.modalType===0){
            //新增
            addUser(this.form).then(()=>{
              //  重新获取列表结果
              this.getList()
            })
          }else{
            //  编辑处理
            editUser(this.form).then(()=>{
              //  重新获取列表结果
              this.getList()
            })
          }
          //清空表单数据
          this.$refs.form.resetFields()
          //关闭弹窗
          this.dialogVisible=false
        }
      })
    },
    //弹窗关闭的时候
    handleClose(){
      //清空表单
      this.$refs.form.resetFields()
      this.dialogVisible=false
    },
    cancel(){
      this.handleClose()
    },
    handleEdit(row){
      console.log("row",row)
      this.modalType=1
      this.dialogVisible=true
      //注意需要对当前行数据进行深拷贝，否则会出错
      this.form=JSON.parse(JSON.stringify(row))
    },
    handleDelete(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUser({id:row.id}).then(()=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //  重新获取列表结果
          this.getList()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //封装获取列表的数据
    getList(){
      //获取列表数据
      getUser().then(({data})=>{
        console.log(data);
        this.tableData=data.list
      })
    },
    //新增的功能
    handleAdd(){
      this.modalType=0
      this.dialogVisible=true
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style scoped>

</style>

请添加图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue基础

前端

javascript

开发语言

ECMAScript

Vue2项目练手——通用后台管理项目第六节的相关文章

单击输入[复选框]的标签将触发父级单击事件两次（淘汰）

考虑这把小提琴 http jsfiddle net 9rkrahm6 我有一个
如何在同一页面上使用AJAX处理多个表单

我有一个表单当我单击提交时它就被提交了然后该表单隐藏操作页面的结果显示在 div 中 classname dig 它工作正常但是当我添加另一个表单时它停止正常工作并且所有表单同时提交我如何更改我的代码 done click
尝试将布尔 C# 变量传递给 javascript 变量并将其设置为 true

在我的 aspx 页面中我将布尔变量 C 传递给需要布尔类型的 javascript 函数但遇到了问题但是 C 变量返回 True 而 javascript 不喜欢大写 myjavascript 如果我将 c 变量转换为字符串那么我
Web 串行 API - 未捕获（承诺中）DOMException：无法打开串行端口/所需成员 baudRate 未定义

下面的代码可以在我的 Xubuntu 机器上运行但现在我在 Kubuntu 上它不再工作了它不会打开端口 Arduino IDE 工作正常可以向开发板写入代码并且我可以在 Chrome 中选择设备 Arduino Uno 但当我尝
如何重定向到 instagram://user?username={username}

我的 html 页面上有这个链接可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE
Javascript正则表达式用于字母字符和空格？ [关闭]

这个问题不太可能对任何未来的访客有帮助它只与一个较小的地理区域一个特定的时间点或一个非常狭窄的情况相关通常不适用于全世界的互联网受众为了帮助使这个问题更广泛地适用访问帮助中心 help reopen questions 我需要一个
Node.js：如何在检索数据（块）时关闭响应/请求

我正在用 node js 构建一个应用程序它加载多个页面并分析内容因为 node js 发送块所以我可以分析这些块如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
如何将 Google Charts 与 Vue.js 库一起使用？

我正在尝试使用 Vue js 库使用 Google Charts 制作图表但我不知道如何添加到 div 这是我尝试做的这是如何使用普通 javascript 添加图表这是文档的代码示例 https developers google
Jquery/Javascript 上传和下载文件，无需后端

是否可以在没有后端服务器的情况下在 JavaScript 函数中下载和上传文件我需要导出和导入由 JavaScript 函数生成的 XML 我想创建按钮保存 xml 来保存文件但我不知道是否可行另一方面我希望将 XML 文件直接上
在 webpack 2.x 中使用 autoprefixer 和 postcss

如何使用autoprefixer使用 webpack 2 x 以前它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块？

我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块我知道我做错了什么但我被困住了有任何想法吗
Babel 7 Jest Core JS“TypeError：wks不是函数”

将我的项目升级到 Babel 7 后通过 Jest 运行测试会抛出以下错误测试在 Babel 6 中运行没有任何问题但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
Javascript 数组到 VBScript

我有一个使用 Javascript 构建的对象数组我需要使用 VBScript 读取它如下例所示我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化我无法更改页面的默认语言这
FireFox 中的自动滚动

我的应用程序是实时聊天我有一个 Div 来包装消息每条消息都是一个 div 所以在几条消息之后我的 DOM 看起来像这样 div div Message number two div div div div
如何在类似控制台的环境中运行 JavaScript？

我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）Vue Js

我从 GitHub 下载了一个我和我的朋友正在开发的项目但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
在 vue.js 中访问数组对象属性

给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
如何获取浏览器视口中当前显示的内容

如何获取当前正在显示长文档的哪一部分的指示例如如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近那么我想得到 500 n501 n502 或类似的内容显然大多数场景都会比
使用

Vue2项目练手——通用后台管理项目第六节

Vue2项目练手——通用后台管理项目

用户管理页

table表格

获取表格数据

目录列表

user.js

mock.js

index.js

Users.vue

新增和编辑功能

Users.vue

删除功能

使用的组件

Users.vue

Vue2项目练手——通用后台管理项目第六节 的相关文章

Vue2项目练手——通用后台管理项目第六节的相关文章