vue后台管理系统项目实战(三)

最新推荐文章于 2023-06-17 11:23:26 发布
最新推荐文章于 2023-06-17 11:23:26 发布
阅读量670 收藏 9
点赞数
分类专栏： 项目实战 Vue 文章标签： vue.js javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41497443/article/details/120008137
版权

vue后台管理系统项目实战(三)

不定期更新…

项目地址：https://gitee.com/wang_li_pingping/mallmanager

install dependencies

npm install

serve with hot reload at localhost:8080

npm run dev

build for production with minification

npm run build

build for production and view the bundle analyzer report

npm run build --report

更新内容：
分页
搜索用户
新增用户
在这里插入图片描述在这里插入图片描述uesr.vue

<template>
  <el-card class="box-card">
    <!--1.面包屑-->
    <!--首页/用户管理/用户列表-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--2.搜索框-->
    <el-row class="searchRow">
      <el-col>
        <el-input
          placeholder="请输入内容"
          clearable
          v-model="queryInfo.query"
          class="inputSearch">
          <el-button slot="append" icon="el-icon-search" @click="queryByUsername()"></el-button>
        </el-input>
        <el-button type="success" @click="addUserShow()">添加用户</el-button>
      </el-col>
    </el-row>
    <!--用户列表表格-->
    <el-table
      :data="userList"
      style="width: 100%">
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="60">
      </el-table-column>
      <el-table-column
        prop="username"
        align="center"
        label="姓名"
        width="80">
      </el-table-column>
      <el-table-column
        align="center"
        prop="email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        align="center"
        prop="mobile"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="create_time"
        align="center"
        label="创建时间">
        <template slot-scope="scope">
          {{scope.row.create_time | fmtdate}}
        </template>
      </el-table-column>
      <el-table-column
        prop="role_name"
        label="用户权限">
      </el-table-column>
      <el-table-column
        prop="mg_state"
        align="center"
        label="用户状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" plain circle></el-button>
          <el-button type="info" size="mini" icon="el-icon-check" plain circle></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" plain circle></el-button>
        </template>
      </el-table-column>
    </el-table>
     <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
<!--添加用户弹窗-->
    <el-dialog title="添加用户" :visible.sync="dialogAddUserFormVisible">
      <el-form :model="addUserRuleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserRuleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addUserRuleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUserRuleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="addUserRuleForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddUserFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
  export default {
    data () {
      return {
        queryInfo:{
          query: '',
          pagenum: 1,
          pagesize: 5,
        },
        userList: [],
        total:1,
        //添加用户弹窗
        dialogAddUserFormVisible:false,
        addUserRuleForm:{
          username:"",
          password:"",
          email:"",
          mobile:""
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入手机', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],
        }
      }
    },
    created () {
      this.getUserList()
    },
    methods: {
      async getUserList () {
        //需要授权的API 必须在请求头中使用 Authorization 字段 提供 token 令牌
        const AUTH_TOKEN = localStorage.getItem('token')
        this.$http.defaults.headers.common['Authorization'] = AUTH_TOKEN
        const res = await this.$http.get('users', {params:this.queryInfo})
        console.log(res)
        if (res.status===200){
          this.userList = res.data.data.users;
          this.total = res.data.data.total;
          this.$message.success(res.data.meta.msg)
        }else{
          this.$message.error(res.data.meta.msg)
        }
      },
      //分页
      //监听pagesize变化
      handleSizeChange(newSize) {
        this.queryInfo.pagesize = newSize
        this.getUserList();
      },
      //监听 页码值
      handleCurrentChange(newSize) {
        this.queryInfo.pagenum = newSize
        this.getUserList();
      },
      //搜索用户
      queryByUsername(){
        this.getUserList()
      },
      //添加用户
      addUserShow(){
        this.dialogAddUserFormVisible = true
      },
      async addUser(){
        const res = await this.$http.post('users',this.addUserRuleForm)
        console.log(res,'添加用户')
        if (res.status===200){
          this.$message.success(res.data.meta.msg)
          this.getUserList()
          this.dialogAddUserFormVisible = false
        }else {
          this.$message.error(res.data.meta.msg)
        }
        //清空表单数据
        Object.assign(this.$data.addUserRuleForm,this.$options.data().addUserRuleForm)
      }
    }
  }
</script>
<style>
  .box-card {
    height: 100%;
  }

  .inputSearch {
    width: 300px;
  }

  .searchRow {
    margin-top: 20px;
  }
</style>
I'm写代码
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-jsPlumb：带有Vue 2的jsPlumb。【WIP】
02-05
vue-jsPlumb 使用Vue2构建jsPlumb。 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run all
webpack基础配置优化
weixin_42228747的博客
08-25 533
frame_demo A Vue.js project Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev 项目依赖中通常会引用大量的 npm 包，而这些包在正常的开发过程中并不会进行修改,在打包前先运行下边这条命令，将npm包预先编译，减少打包时间 npm run build:dll # build for production with mini
创建 vue 封装组件项目并打包发布到npm官网仓库
hsg77的专栏
11-18 1338
创建 vue 封装组件项目并打包发布到npm官网仓库 https://gitee.com/hsg77/pg-vue-map-cs npm install -g @vue/cli-init //下面命令报错后先执行此行 vue init webpack-simple pg-vue-map-cs-master vue init webpack-simple <项目名称> 为简单vue项目模式 vue init webpack <项目名称> 为标准vue项目模式 insta
Vue知识点
王大阳的博客
07-04 520
安装cnpm -g为全局 npm install cnpm -g sudo cnpm install vue-cli -g vue list 手动创建vue 项目 vue init webpack myvue cd myvue # 安装依赖 npm install 启动 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production
vue后台管理系统项目实战(二)
qq_41497443的博客
08-16 910
每天更新… 项目地址：https://gitee.com/wang_li_pingping/mallmanager install dependencies npm install serve with hot reload at localhost:8080 npm run dev build for production with minification npm run build build for production and view the bundle analyzer report npm
Vue3实战商城后台管理系统开发
09-01
分享课程——Vue3实战商城后台管理系统开发，2022年完整版20章，附源码。 本季度基于Vue3 + ElementPlus + Vite实战开发商城后台管理系统，其中包括Vite的使用，Vue3全新的 <script setup> 语法，vuex4、Vue-router...
vue后台管理系统
06-21
完整的vue后台管理系统加webpack自动构建
后台管理系统-使用Vue3+ElementPlus+Typescript开发的后台管理系统-优质项目实战.zip
最新发布
02-18
本项目是一个基于Vue3、ElementPlus和Typescript的高质量后台管理系统实战案例，旨在提供一个功能齐全、用户体验良好的管理平台。这个系统集成了现代化的前端技术和最佳实践，为开发者提供了高效开发和维护的解决...
黑马电商后台管理系统前端vue后端nodejs.zip
12-02
通过学习黑马电商后台管理系统，开发者不仅可以提升Vue.js和Node.js的实战技能，还能了解到电商后台的常见业务流程和设计模式，为今后的项目开发打下坚实基础。无论是初学者还是有经验的开发者，都能从中获益匪浅。
【精品课】Vue.js实现电商后台管理系统（企业项目实战）
06-30
本课程“【精品课】Vue.js实现电商后台管理系统（企业项目实战）”旨在帮助开发者将理论知识转化为实际项目经验，解决在项目实战中可能出现的问题。 在Vue.js实战项目开发中，你需要掌握以下关键知识点： 1. **Vue...
vue-three-shaders:vue，Three.js和着色器的实验
05-08
Vue三着色器 一个Vue.js项目 只是对vue.js，Three.js和着色器的实验。 这是我第一次使用vue.js。 在查看构建 在react版本中的娱乐内容 它在vue应用程序中实现了中的某些着色器。 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
VueSSR：vue服务端渲染
02-21
Vuessr 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
路由器测试
02-23
路由器测试 阿法夫 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
Vue 项目打包 及上线
LZW15082682930的博客
04-07 784
前言： 项目环境： 开发工具 Vs Code 本文演示项目由 vue-cli 脚手架创建的项目 Vue 2.0 创建项目 vue init webpack 项目名 vue init webpack my-project Vue 3.0 创建项目 vue create 项目名 vue create my-project Vue 2.0打包 1. 打开项目里面的README.md（或者在其他资料查看相关命令亦可） # admin > A Vue.js pr...
vue后台管理系统项目实战(一)
qq_41497443的博客
08-15 2059
1、项目搭建 2、路由配置 3、全局样式重置 App.vue： #app { height: 100%; } asset下新建重置样式reset.css（需要全局生效的样式 按需增改删） html,body{ height: 100%; padding: 0; margin: 0; } 、用户登录页面 login.vue <template> <div class="login-wrap"> <el-form class="logi
node启动_安装_依赖_构建
feicongcong的博客
09-19 1054
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer r
Node-vue:简单命令行构建
shunzi2016的博客
06-17 95
【代码】Node-vue:简单命令行构建。
nodejs命令
weixin_39454194的博客
04-02 185
#Installdependencies npminstall #建议不要用cnpm安装有各种诡异的bug可以通过如下操作解决npm速度慢的问题 npminstall--registry=https://registry.npm.taobao.org #servewithhotreloadatlocalhost:9528 npmrundev ...
vue、 echarts、iview 实现大数据可视化大屏模板
weixin_47367099的博客
06-10 4404
vue、 echarts、iview 实现大数据可视化大屏模板
VUE项目，VUE项目实战，vue后台管理系统
08-12
如果你想进行VUE项目实战并开发一个VUE后台管理系统，以下是一些建议和资源可供参考。 首先，如果你是大学即将毕业或自学前端且缺乏项目经验，你可以考虑以下几点： - 寻找相关的在线教程或课程，这些资源通常会...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值