精华内容
下载资源
问答
  • 主要介绍了Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二),非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • vue+element ui搭建的DEMO,实现基本功能 增删改查 分页 导出,数据为模拟数据、模拟接口,项目中依赖包需要自行下载npm install。供初学者参考。
  • 注解的dao 简单增删 2.基于xml 复杂的sql (表关联,一对多,一对一),在实体类和数据字段不对应时 注意点: 1.对应接口要@Mapper 在springboot中有报错 @Repository 2.如果传入的参数 是多个 1.把多个封为实体...

    1 创建springboot工程
    引入依赖: springboot,mybatis,mysql-jdbc,连接池 druid,test

    
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.2.0.RELEASE</version>
    
        </parent>
    
    
        <dependencies>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            <!--springboot集成Junit 的启动依赖-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
                <exclusions>
                    <exclusion>
                        <groupId>org.junit.vintage</groupId>
                        <artifactId>junit-vintage-engine</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
    
    
    
            <!-- 阿里巴巴的Druid数据源依赖启动器 -->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid-spring-boot-starter</artifactId>
                <version>1.1.10</version>
            </dependency>
    
            <!-- MyBatis依赖启动器 -->
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>2.0.0</version>
            </dependency>
    
            <!-- MySQL数据库连接驱动 -->
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <scope>runtime</scope>
            </dependency>
    
        </dependencies>
    

    2.配置文件
    application.properties,application.yaml

    配置内容

    • 数据源

    连接路径,账号,密码,驱动

    • 数据库连接池

    最大连接数,最小连接数,连接超时

    • mybatis

    别名,驼峰 还可以配置mapper位置,配置mybatis日志为debug

    • 如果引入thymleaft

    在测试阶段 关闭缓存,注意创建template目录

    • 配置端口号
    #配置端口号
    server.port=8081
    
    #数据源
    spring.datasource.url=jdbc:mysql://localhost:3306/szqy08?serverTimezone=UTC&useSSL=false
    spring.datasource.username=root
    spring.datasource.password=123456
    
    #连接池
    spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
    spring.datasource.druid.max-active=10
    spring.datasource.druid.initial-size=5
    
    #mybatis 相关配置
    mybatis.configuration.map-underscore-to-camel-case=true
    mybatis.type-aliases-package=com.aaa.element.entity
    

    3.创建启动器
    启动器必须在包名根目录

    1.在启动器配置 @SpringBootApplication

    2.SpringApplication.run(ElementApplication.class,args);

    @SpringBootApplication
    public class ElementApplication {
    
    
        public static void main(String[] args) {
    
            SpringApplication.run(ElementApplication.class,args);
        }
    
    }
    

    4.创建实体类 entity

    数据表中每行对应一个实体类

    1.setter getter方法

    2.toString()

    3.无参构造 (如果有有参构造,必须写无参构造)

    4.实现序列化serialze(为什么? 1.将对象保存在本地磁盘 2.利于对象网络传输(rpc–netty))

    注意的问题:

    属性名和数据名一定要确认

    如果数据库名是下划线,mybatis开启驼峰,属性名必须驼峰

    public class Student implements Serializable {
    
        private int id;
    
    
        private String name;
    
        private int age;
    
        private String sex;
    
        private float height;
    
    
        public float getHeight() {
            return height;
        }
    
        public void setHeight(float height) {
            this.height = height;
        }
    
        private List<String> hoppy;
    
        private Map<String,String> course;
    
    
        private String email;
    
        public String getEmail() {
            return email;
        }
    
        public void setEmail(String email) {
            this.email = email;
        }
    
        public Map<String, String> getCourse() {
            return course;
        }
    
        public void setCourse(Map<String, String> course) {
            this.course = course;
        }
    
        public List<String> getHoppy() {
            return hoppy;
        }
    
        public void setHoppy(List<String> hoppy) {
            this.hoppy = hoppy;
        }
    
        public int getId() {
            return id;
        }
    
        public void setId(int id) {
            this.id = id;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public int getAge() {
            return age;
        }
    
        public void setAge(int age) {
            this.age = age;
        }
    
        public String getSex() {
            return sex;
        }
    
        public void setSex(String sex) {
            this.sex = sex;
        }
    
    
        @Override
        public String toString() {
            return "Student{" +
                    "id=" + id +
                    ", name='" + name + '\'' +
                    ", age=" + age +
                    ", sex='" + sex + '\'' +
                    ", hoppy=" + hoppy +
                    ", course=" + course +
                    ", email='" + email + '\'' +
                    '}';
        }
    }
    
    

    5.创建mapper dao层

    • 1.注解的dao

    简单增删该查

    • 2.基于xml

    复杂的sql (表关联,一对多,一对一),在实体类和数据字段不对应时

    注意点:

    1.对应接口要@Mapper 在springboot中有报错 @Repository

    2.如果传入的参数 是多个 1.把多个封为实体类 2.使用@param

    3.当基于xml 实现时, mapper的xml文件和mapper接口 文件结构不对应,有没有在配置文件声明

    @Mapper
    @Repository
    public interface StudentMapper {
    
        
        @Select("select * from student_tb where id = #{id}")
        Student findStudentById(int id);
    
        @Select("select * from student_tb")
        List<Student> findAllStudent();
    
    
        @Update("update student_tb set name = #{name},age=#{age},sex=#{sex},height=#{height} where id = #{id}")
        int updateStudent(Student student);
    
        @Delete("delete from student_tb where id = #{id}")
        int deleteStudent(int id);
    
        @Insert("insert into student_tb (name,age,sex,height) values(#{name},#{age},#{sex},#{height})")
        int addStudent(Student student);
    
    
    }
    

    6.创建service
    1.使用@service 标记实现类,加入到容器

    2.使用@Autowire @Resources 注入dao层

    3.service 要有接口以及实现类 (面向接口编程,实现多态-----》提高扩展性,开闭原则)
    7.创建controller
    1.加入容器 @Controller

    @RestController == @Controller + @ResponseBody (见整controller类中所有返回的数据转换为json)
    2.配置映射
    @RequestMapping

    @GetMapping == RequestMapping + method=get

    @PostMapping
    3.处理器返回值 有几种
    1.String

    返回的路径

    springmvc 返回的是jsp 文件路径,如果配置了视图解析器返回的是文件名

    springboot 返回的thymleaft 文件名(spring boot已经配置好了)

    2.modelAndView

    在springmvc中返回modelAndView (数据+ 视图名)

    3.void

    在springmvc中返回空数据

    4.返回 实体

    返回json 数据,一定用记得使用@ResponsBody进行标记,
    8.先测试接口
    先通过浏览器将所有接口调通,再写前端界面

    分步骤,分模块

    这样子遇到bug 解决问题,通过分段排除,数据最快
    9.引入前端依赖
    一定要注意:

    1注意vue 和elementUi,axios 版本的兼容

    2.在html中引入依赖 首先引入vue,在引入其他的

    3.依赖要放至到public,static目录,必须防止这目录,否则就被当作路径被dispatchServlet拦截处理

    1.引入vue

    2.引入elementui

    3.引入axios

    展开全文
  • <title>Vue增删改查</title> <style> #app{ width:1024px; margin: 0 auto; } .add-btn{ margin-top: 20px; width: 100%; } .body{ margin-top:20px; } </style> </head> <body> <div id="app"> 职位的增删改查</h1>...

    实现方案一(缺查询功能)

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" rel="external nofollow" >
      <title>Vue增删改查</title>
      <style>
        #app{
          width:1024px;
          margin: 0 auto; 
        }
        .add-btn{
          margin-top: 20px;
          width: 100%;
        }
        .body{
          margin-top:20px;
        }
      </style>
      
    </head>
    <body>
      <div id="app">
        <h1>职位的增删改查</h1>
        <div class="head">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-input v-model="userInfo.name" placeholder="请输入你的公司名"></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="userInfo.position" placeholder="请输入你的职位"></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="userInfo.major" placeholder="请输入你的专业"></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="userInfo.number" placeholder="请输入数量"></el-input>
            </el-col>
          </el-row>
          <el-button type="primary" @click="addUser" class="add-btn" plain>添加信息</el-button>
        </div>
        <!-- 主体内容 -->
        <div class="body">
          <template>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column label="序号" width="180"><template slot-scope="scope"> {{scope.$index + 1 }} </template></el-table-column>
              <el-table-column prop="name" label="公司名" width="180"></el-table-column>
              <el-table-column prop="position" label="职位"></el-table-column>
              <el-table-column prop="major" label="专业"></el-table-column>
              <el-table-column prop="number" label="数量"></el-table-column>
              <el-table-column prop="birthday" label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" @click="editUser(scope.row,scope.$index)" circle></el-button>
                  <el-button type="danger" icon="el-icon-delete" @click="delUser(scope.$index)" circle></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <!-- 编辑框 -->
        <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
          <div>
            <el-form ref="form" :model="editObj" label-width="80px">
              <el-form-item label="公司名"><el-input v-model="editObj.name"></el-input></el-form-item>
              <el-form-item label="职位"><el-input v-model="editObj.position"></el-input></el-form-item>
              <el-form-item label="专业"><el-input v-model="editObj.major"></el-input></el-form-item>
              <el-form-item label="数量"><el-input v-model="editObj.number"></el-input></el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
      <script>
        
        new Vue({
          el:'#app',
          data: function(){
            return{
              userInfo:{ 
                name:'',
                position: '',
                major: '',
                number: '',
              },
              tableData: [{
                name:'互联网+学院',
                position: '专职教师',
                major: '对外贸易',
                number: '2',
              },{
                name:'徐州重工',
                position: '工厂车研发部工程师',
                major: '精密机械制造',
                number: '12',
              },{
                name:'北京青码科技',
                position: '前端开发工程师',
                major: 'Vue、React',
                number: '4',
              }
              ],
              dialogVisible: false, 
              editObj:{
                name:'',
                position: '',
                major: '',
                number: '',
              },
              userIndex:0,
            }
          },
          methods:{
            //添加
            addUser(){
              if(!this.userInfo.name){
                this.$message({
                  message: '请输入你的公司名!',
                  
                });
                return;
              }
              if(!this.userInfo.position){
                this.$message({
                  message: '请输入你的职位!',
                  type: 'warning'
                });
                return;
              }
              if (!this.userInfo.major) {
                this.$message({
                  message: '请输入你的专业!',
                  type: 'warning'
                });
                return;
              }
              if (!this.userInfo.number) {
                this.$message({
                  message: '请输入数量!',
                  type: 'warning'
                });
                return;
              }
              this.tableData.push(this.userInfo);
              this.userInfo = { 
                name:'',
                position: '',
                major: '',
                number: '',
              };
            },
    
            //删除
            delUser(idx){
              this.$confirm('确认删除此用户信息?')
                .then(_ => {
                  this.tableData.splice(idx, 1);
                })
                .catch(_ => {});
            },
            //编辑
            editUser(item,idx){
              this.userIndex = idx;
              this.editObj = {
                name: item.name,
                position: item.position,
                major: item.major,
                number: item.number,
              };
              this.dialogVisible = true;
            },
    
            handleClose(){
              this.dialogVisible = false;
            },
    
            confirm(){
              this.dialogVisible = false;
              Vue.set(this.tableData, this.userIndex, this.editObj);
                }
              },
            })
      </script>
    
    </body>
    </html>
    

    实现方案二(缺查询功能)

    <template>
      <div>
        <!-- 查询 -->
        <!--这是新增的查询功能-->
        <el-input
          type="text"
          placeholder="请输入要查询的条件"
          style="width: 25%"
          v-model="search"
          class="searchClass"
        />
        <el-button type="success" @click="search">搜索</el-button>
    
        <!-- 添加数据 -->
        <div id="tianjia">
          <el-input
            type="text"
            name="id"
            v-model="addDetail.id"
            value=""
            placeholder="请输入公司代号"
            style="width: 13%"
          />
          <el-input
            type="text"
            name="name"
            v-model="addDetail.name"
            value=""
            placeholder="请输入公司名称"
            style="width: 13%"
          />
          <el-input
            type="text"
            name="adress"
            v-model="addDetail.adress"
            value=""
            placeholder="请输入公司地址"
            style="width: 13%"
          />
    
          <el-button type="success" size="big" @click.native.prevent="adddetail()"
            ><font color="#f0f8ff" size="2px">添加</font>
          </el-button>
        </div>
        <!-- 展示数据 -->
        <el-form>
          <el-table :data="newsList" style="width: 100%" align="center">
            <el-table-column
              prop="id"
              label="公司代号"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="公司名称"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="adress"
              label="公司地址"
              width="180"
            ></el-table-column>
            <!--增加 操作 菜单 以及旗下的子菜单 增加 修改-->
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <!--修改按钮-->
                <el-button
                  @click="handleEdit(scope.$index, scope.row)"
                  type="info"
                  size="small"
                  >修改</el-button
                >
    
                <!--删除按钮-->
                <el-button
                  @click.native.prevent="deletedetail(scope.$index, newsList)"
                  type="danger"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form>
    
        <!--编辑弹框部分-->
        <div>
          <el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%">
            <!--这就是一个表格-->
            <el-form :model="form">
              <!--公司ID-->
              <el-form-item label="公司ID">
                <el-input v-model="form.id" autocomplete="off"></el-input>
              </el-form-item>
              <!--公司名称-->
              <el-form-item label="公司名称">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <!--公司地址-->
              <el-form-item label="公司地址">
                <el-input v-model="form.adress" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
    
            <!--确定, 取消  按钮-->
            <div>
              <el-button type="primary" @click.native.prevent="editSubForm"
                >确定</el-button
              >
              <el-button @click.native.prevent="dialogFormVisible = false"
                >取消</el-button
              >
            </div>
          </el-dialog>
        </div>
      </div>
    </template>
    
    <script>
    var _index; //定义一个全局变量,以获取行数据的行号
    export default {
      data() {
        return {
          dialogFormVisible: false,
          editForm: [],
          form: {
            id: "",
            name: "",
            adress: "",
          },
          selectList: {},
          search: "",
          addDetail: {},
    
          newsList: [
            {
              id: "001",
              name: "阿里巴巴",
              adress: "杭州湖畔花园",
            },
            {
              id: "002",
              name: "工银科技",
              adress: "北京朝阳区天源祥泰大厦",
            },
            {
              id: "003",
              name: "IBM",
              adress: "海淀区中关村软件园",
            },
            {
              id: "004",
              name: "华为",
              adress: "北京海淀区北研所",
            },
            {
              id: "005",
              name: "网龙",
              adress: "福州长乐湖",
            },
            {
              id: "006",
              name: "BOSS直聘",
              adress: "北京朝阳区太阳宫",
            },
            {
              id: "007",
              name: "滴滴",
              adress: "北京海淀区上地",
            },
            {
              id: "008",
              name: "中国软件",
              adress: "北京海淀区北下关",
            },
            {
              id: "009",
              name: "小米",
              adress: "北京海淀区清河",
            },
            {
              id: "010",
              name: "跟谁学",
              adress: "北京海淀区中关村",
            },
            {
              id: "011",
              name: "美团",
              adress: "北京海淀区中关村",
            },
            {
              id: "012",
              name: "今日头条",
              adress: "北京海淀区清河",
            },
          ],
        };
      },
      methods: {
        /*添加方法*/
        adddetail() {
          console.log(1);
          this.$confirm("确认进行添加", "是否继续?", "提示", {
            confirmButtonText: "确定",
            confirmButtonText: "取消",
          })
            .then(() => {
              this.newsList.push({
                id: this.addDetail.id,
                name: this.addDetail.name,
                adress: this.addDetail.adress,
              }),
                /*成功添加之后的提示信息*/
                this.$message({
                  type: "success",
                  message: "添加成功",
                });
            })
            .catch((err) => {
              this.$message({
                type: "error",
                message: err,
              });
            });
        },
    
        /*删除方法*/
    
        deletedetail: function (index, rows) {
          this.$confirm("此操作将删除数据,", "是否继续?", "提示", {
            confirmButtonText: "确定",
            confirmButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.newsList.splice(index, 1);
              this.$message({
                type: "success",
                message: "删除成功",
              });
            })
            .catch((err) => {
              this.$message({
                type: "error",
                message: err,
              });
            });
        },
    
        /*编辑修改数据*/
        handleEdit(index, row) {
          this.dialogFormVisible = true;
          this.form = Object.assign({}, row);
          _index = index;
          // console.log(index)
          // console.log(_index)
          //取到这一栏的值,也就是明白是在那一栏进行操作,从而将编辑后的数据存到表格中
        },
        //保存编辑
        editSubForm() {
          var editData = _index;
          this.newsList[editData].id = this.form.id;
          this.newsList[editData].name = this.form.name;
          this.newsList[editData].adress = this.form.adress;
          this.dialogFormVisible = false;
        },
        /*查询方法*/
        searchFn: function (e) {
          var key = e.target.value;
    
          /*查询公司ID*/
          if (key) {
            var serchArray = [];
            this.newsList.forEach(function (item) {
              if (item.id.indexOf(key) > -1) {
                serchArray.push(item);
              }
    
              /*name查询*/
              if (item.name.indexOf(key) > -1) {
                serchArray.push(item);
              }
              /*地址查询*/
              if (item.adress.indexOf(key) > -1) {
                serchArray.push(item);
              }
            });
            this.getShowData1(serchArray);
          } else {
            this.getShowData1(this.newsList);
          }
        },
    
        /*获取需要渲染到页面中的数据*/
        getShowData: function (arr) {
          this.clonenewsList = JSON.parse(JSON.stringify(arr));
        },
    
        /*专门为查询写的渲染数据*/
        getShowData1: function (arr) {
          this.newsList = JSON.parse(JSON.stringify(arr));
        },
      },
    };
    </script>
    <style>
    .searchClass {
      margin-left: 600px;
    }
    #tianjia {
      margin-left: 600px;
    }
    
    .title {
      padding: 10px;
      border-bottom: 1px solid #00ffff;
    }
    
    .mask {
      width: 300px;
      height: 250px;
      background: rgba(255, 255, 255, 1);
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 47;
      border-radius: 5px;
    }
    
    #mask {
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: 4;
      top: 0;
      left: 0;
    }
    </style>
    
    展开全文
  • Vue+ElementUI实现增删改查(代码)

    千次阅读 2019-11-08 10:10:24
    Vue+ElementUI实现增删改查 效果演示地址 3.代码 页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href=...
    1. Vue+ElementUI实现增删改查

    2. 效果演示地址
      3.代码
    • 页面代码
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
       
      <!-- import CSS -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <style type="text/css">
    	
    </style>
    <body>
      <div id="app">
          <h1>主界面</h1>
          <!-- <img src="./img/koo.png" alt="" srcset=""> -->
        <el-container style="height: 500px; border: 1px solid #eee">
          <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
    			<el-submenu index="2">
    			  <template slot="title"><i class="el-icon-menu"></i>合格作品</template>
    			  <el-submenu index="2-4">
    			    <template slot="title">合格作品展示</template>
    			    <el-menu-item index="2-4-1">合格作品展示</el-menu-item>
    			  </el-submenu>
    			</el-submenu>
              <el-submenu index="1">
                <template slot="title"><i class="el-icon-s-custom"></i><a href="layout/WorkerUpload.html">工作上传</a></template>
                <el-submenu index="1-4">
                  <template slot="title">工作人员上传</template>
                  <el-menu-item index="1-4-1">工作人员上传</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title"><i class="el-icon-upload"></i><a href="./layout/StudentUpload.html">学生上传</a></template>
                <el-submenu index="2-4">
                  <template slot="title">学生上传</template>
                  <el-menu-item index="2-4-1">学生上传</el-menu-item>
                </el-submenu>
              </el-submenu>
            </el-menu>
          </el-aside>
          <!-- 合格作品展示 -->
          <el-container>
    		<div class="st">
                <span>审核通过的作品在这里进行展示 </span>
    		<div class="container" id="app">
    		    <div>
    		        <input type="text" placeholder="Search" @input="search" list="cars" class="search">
    		        <datalist id="cars">
    		            <option v-for="item in searchlist" :value="item"></option>
    		        </datalist>
    				<el-button type="primary"  size="mini" class="add" @click="add">新增</el-button>
    		    </div>
    		    <div>
    		        <table>
    		            <tr>
    		                <th>序号</th>
    		                <th>姓名</th>
                            <th>性别</th>
                            <th>网站链接</th>
    		               <th>网站简述</th>
    		                <th>操作</th>
    		            </tr>
    		            <tr v-cloak v-for="(item, index) of slist">
    		                <td>{{index+1}}</td>
                            <td>{{item.username}}</td>
                            <td>{{item.sex}}</td>
    		                <td>{{item.href}}</td>		                
    		               <td>{{item.detail}}</td>
    		                <td>
    						<el-button type="success" size="mini"   @click="showOverlay(index)">编辑</el-button>
    						 <el-button type="danger"  size="mini" @click="del(index)">删除</el-button>
    						
    		            </tr>
    		        </table>
    		    </div>
    		    <model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
    		</div>
        </el-container>
        <!-- 合格作品展示结束 -->
      </div>
    </body>
     <!-- import Vue before Element -->
     <script src="https://unpkg.com/vue/dist/vue.js"></script>
     <!-- import JavaScript -->
     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script>
        //   弹层组件
            Vue.component('model', {
                props: ['list', 'isactive'],
                template: `<div class="overlay" v-show="isactive">
                                <div class="border">
                                <h3 class="title">新增 | 修改</h3>
                                <div class="content">
                                <table>
                                <tr>
                                <td>用户名</td>
                                <td><input type="text" v-model="modifylist.username"></td>
                                </tr>
                                <tr>
                                <td>性别</td>
                                <td>
                                <label><input type="radio" name="sex" value="男" v-model="modifylist.sex">男</label>
                                <label><input type="radio" name="sex" value="女" v-model="modifylist.sex">女</label>
                                <label><input type="radio" name="sex" value="未知" v-model="modifylist.sex">未知</label>
                                </td>
                                </tr>
                                <tr>
                                <td>网站链接</td>
                                <td><input type="text" v-model="modifylist.href"></td>
                                </tr>
                                <tr>
    							 <td>网站简述</td>
                                 <td><input type="text" v-model="modifylist.detail"></td>
                                </tr>
                                </table>
                                <p>
    							<el-button type="success" size="mini"  @click="modify">保存</el-button>
    							<el-button type="danger"  size="mini" @click="changeActive">取消</el-button>
                                </p>
                                </div>
                                </div>
                            </div>`,
                computed: {
                    modifylist() {
                        return this.list;
                    }
                },
                methods: {
                    changeActive() {
                        this.$emit('change');
                    },
                    modify() {
                        this.$emit('modify', this.modifylist);
                    }
                }
            });
            var app = new Vue({
                el: '#app',
                data: {
                    isActive: false,  //是否显示弹窗
                    selected: -1,  //选择了 哪条记录
                    selectedlist: {},   //选中的记录
                    slist: [],
                    searchlist: [],
                    list: [
                        {
                            username: '学生1',
                            href: '123@qq.com',
                            sex: '男',
                           
                        },
                        {
                            username: '学生2',
                            href: 'bbbbbbb@163.com',
                            sex: '女',
                           
                        },
                        {
                            username: '学生3',
                            href: 'abababab@qq.com',
                            sex: '女',
                           
                        },
                        {
                            username: '学生4',
                            href: '123@qq.com',
                            sex: '男',
                        
                        },
                        {
                            username: '学生5',
                            href: 'bbbbbbb@163.com',
                            sex: '女',
                           
                        },
                        {
                            username: '学生5',
                            href: 'bbbbbbb@163.com',
                            sex: '女',
                           
                        },
                        {
                            username: '学生5',
                            href: 'bbbbbbb@163.com',
                            sex: '女',
                           
                        },
                        {
                            username: '学生5',
                            href: 'bbbbbbb@163.com',
                            sex: '女',
                           
                        }, 
                        {
                            username: '学生6',
                            href: 'abababab@qq.com',
                            sex: '女',
                         
                        }
                    ]
                },
        created() {
            this.setSlist(this.list);
    
        },
        methods: {
            // 修改数据
            showOverlay(index) {
                this.selected = index;
                this.selectedlist = this.list[index];
                this.changeOverlay();
            },
            // 点击保存按钮
            modify(arr) {
                if (this.selected > -1) {
                    Vue.set(this.list, this.selected, arr);
                    this.selected = -1;
                } else {
                    this.list.push(arr);
                }
                this.setSlist(this.list);
                this.changeOverlay();
            },
            // 新增数据  
            add: function() {
                this.selectedlist = {
                    username: '',
                    email: '',
                    sex: '男',
                };
                this.selected = -1;
                this.isActive = true;
            },
            add: function() {
                this.selected = -1;
                this.isActive = true;
                this.$axios.get('/userinfo/add')
                    .then((res) =>{
                    this.selectedlist = {
                        username: '',
                        email: '',
                        sex: '男',
                };
                })
                .catch((res) => {
                    console.log('fail');
                })
            },
            // delete list in index location
            del(index) {
                this.list.splice(index, 1);
                this.setSlist(this.list);
            },
            changeOverlay() {
                this.isActive = !this.isActive;
            },
            // 获取需要渲染到页面中的数据
            setSlist(arr) {
                this.slist = JSON.parse(JSON.stringify(arr));
            },
            // 搜索
            search(e) {
                var v = e.target.value,
                    self = this;
                self.searchlist = [];
                if (v) {
                    var ss = [];
                    // 过滤需要的数据
                    this.list.forEach(function(item) {
                        if (item.username.indexOf(v) > -1) {
                            if (self.searchlist.indexOf(item.username) == -1) {
                                self.searchlist.push(item.username);
                            }
                            ss.push(item);
                        } else if (item.href.indexOf(v) > -1) {
                            if (self.searchlist.indexOf(item.href) == -1) {
                                self.searchlist.push(item.href);
                            }
                            ss.push(item);
                        }
                    });
                    this.setSlist(ss); // 将过滤后的数据给了slist
                } else {
                    // 没有搜索内容,则展示全部数据
                    this.setSlist(this.list);
                }
            }
        },
        watch: {}
    });
      </script>
      <!-- 引入axios对数据进行交互 -->
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </html>
    
    • CSS 代码
     * {
    	 text-decoration: none;
     } 
      .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
      }
      
      .el-aside {
        color: #333;
      }
      /* 表格 */
    	[v-cloak] {
    	    display: none
    	}
    	table {
    	    border: 1px solid #ccc;
    	    padding: 0;
    	    border-collapse: collapse;
    	    table-layout: fixed;
    	    margin-top: 10px;
    		width: 100%;
    	}
    	table td,
    	table th {
    	    height: 30px;
    	    border: 1px solid #ccc;
    	    background: #fff;
    	    font-size: 15px;
    	    padding: 3px 3px 3px 8px;
    		text-align: center;
    	}
    	table th:first-child {
    	    width: 40px;
    	}
    	table th:nth-child(2) {
    	    width: 50px;
    	}
    	table th:nth-child(3) {
    	    width: 40px;
    	}
    	table th:nth-child(6) {
    	    width: 128px;
    	}
    
    
    展开全文
  • Vue+Elementui增删改查

    2021-07-03 10:46:52
    Vue端: <template> <div> <el-container> <el-header>用户</el-header> <el-container> <el-aside width="200px"> <el-menu

    Vue端:

    <template>
        <div>
            <el-container>
                <el-header>用户</el-header>
                <el-container>
                    <el-aside width="200px">
                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"
                                background-color="#545c64"
                                text-color="#fff"
                                active-text-color="#ffd04b">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>用户管理</span>
                                </template>
                                <el-menu-item index="1-1">查询用户</el-menu-item>
                                <el-menu-item index="1-2">添加用户</el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-aside>
                    <el-main>
                        <el-button type="primary" @click="editDialogVisible=true">新增</el-button>
    
                        <el-table
                                :data="tableData"
                                stripe
                                style="width: 100%">
                            <el-table-column
                                    prop="id"
                                    label="编号"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="姓名"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="age"
                                    label="年龄">
                            </el-table-column>
                            <el-table-column
                                    prop="sex"
                                    label="性别">
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="120">
                                <template #default="scope">
                                    <el-button type="primary" icon="el-icon-edit" circle @click="up(scope.row.id)"></el-button>
                                    <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                </el-container>
            </el-container>
            <!--修改的对话框-->
    
            <el-dialog
                    title="提示"
                    :visible.sync="editDialogVisible"
                    width="30%"
            >
                <!--model:表单数据-->
                <el-form  label-width="80px" :model="userForm">
                    <el-form-item label="姓名">
                        <el-input v-model="userForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="userForm.age"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input v-model="userForm.sex"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmEditUser">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </template>
    
    <script>
        export default {
            name: "index",
            data(){
                    return {
                        //表单数据
                        tableData: [],
                        //弹出框状态:默认关闭
                        editDialogVisible:false,
                        //表单数据
                        userForm:{}
                    }
                },
            //页面加载时就加载
            created() {
                this.initTable();
            },
            methods:{
                //查询所有数据
                initTable(){
                    var that=this;
                    this.$http.get("http://localhost:8008/se").then(function (result) {
    
                        that.tableData=result.data.data;
                        console.log(that.tableData);
                    })
                },
                //表单提交事件
                confirmEditUser(){
                    var that=this;
                    //如果id值不为空则执行修改,为空则执行新增
                    if (this.userForm.id!=null){
                        this.$http.put("http://localhost:8008/",this.userForm).then(function (result) {
                            if (result.data.code==0){
                                that.editDialogVisible=false;
                                that.initTable();
                                that.userForm={};
                            }else {
                                alert(result.data.msg);
                            }
                        })
                    }else{
                        this.$http.post("http://localhost:8008/",this.userForm).then(function (result) {
                            if (result.data.code==0){
                                that.editDialogVisible=false;
                                that.initTable();
                                that.userForm={};
                            }else {
                                alert(result.data.msg);
                            }
                        })
                    }
    
                },
                //点击修改回显数据
                up(id){
                    var that=this;
                    this.$http.get(`http://localhost:8008/selById/`+id).then(function (result) {
                        that.userForm=result.data.data;
                        that.editDialogVisible=true;
                    })
                },
                //删除
                del(id){
                    var that=this;
                    this.$http.delete(`http://localhost:8008/`+id).then(function (result) {
    
                            alert(result.data.msg);
                            that.initTable();
    
                    })
                },
            }
        }
    </script>
    
    <style scoped>
    
    </style>

    效果:

    展开全文
  • 实现功能:1.表格增删改查 2.表格分页3.excel导入导出
  • vue+elementUI 表格增删改查

    万次阅读 多人点赞 2019-08-29 10:23:04
    看到网上的增删改查度用了接口,但是这个我没接触,不太懂;还有其他的增删改查是前后台结合,认为这个的增删改查很棒也好写点。 我写的这个增删改查是纯前端的,无接口,无后台。若之后写了在更新 1、删:选中一...
  • 3.在interface中编写增删改查等一系列的接口 package com . mall . service . goods ; import com . mall . entity . PageResult ; import com . mall . pojo . goods . Brand ; import java . util ....
  • 新项目使用的是vue.js 后来发现饿了吗前端编写的...下面就介绍一下vue.js应用在表格里的增删改查 首先引入一下element的js [removed][removed] 然后引入需要用到的vue相关的js文件 [removed][removed] <script
  • vue+ElementUI基本使用 数据的增删改查

    千次阅读 2020-06-10 17:05:13
    使用vue+elementUI实现基本的增删改查 <template> <div class="container"> <el-row :gutter="20"> <el-col :span="8"> <h3 style="margin-left:30px">{{isEdit?'第'+(index+1)+'...
  • Vue+ElementUI纯前端技术实现对表格数据的增删改查

    千次阅读 多人点赞 2020-08-22 16:33:30
    一、页面结构 分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ; style 也可以定义在其中, 通过id选择...最后就是script 这里首先通过ID选中DIV , new Vue({ }); 通过el 选中id
  • 自从使用了 vue2.0,就不想过多地去使用其他的含 JS 代码的前端框架如 BootStrap4、jQuery 等,想全程使用 vue 去搭建前端界面,因为 vue 的生态系统十分繁荣,ui 方面的库有 element-ui、iview 等。 这次①使用了...
  • Vue+elmentUI+mock模拟数据实现简单的增删改查 主页面如下图所示 首先是查询功能: 同时也包括分页的功能,这里为了看得清楚,我是将每页固定显示5条 查看某条信息的详情(这里没有做修改,但实际上修改就是查看...
  • vue+element ui搭建的DEMO,实现基本功能 增删改查 分页 导出,数据为模拟数据、模拟接口,项目中依赖包需要自行下载npm install。供初学者参考,源码下载地址...
  • Vue增删改查操作 这里只是利用Vue进行j简单的增删改查操作,还没有与后台进行结合,只是定义了一些模拟数据,模拟了增删改查操作的过程。其中element-ui组件库经常与vue进行结合,使用时需要提前安装好element-ui...
  • 页面基本元素(展示以及增删改查的按钮) <template> <div class="app-container"> <!-- 头部选项 --> <div class="filter-container"> <el-input v-model="listQuery.uname" ...
  • 产品简介 我的梦想,想做一个很牛逼的产品: 微信小程序《有梦必达》。 有梦必达初衷是一个帮助迷茫的、还没有梦想的、还在寻找梦想的、有梦想却还不知道怎么实现的童鞋更好的寻找或实现梦想的微信小程序。...
  • https://www.cnblogs.com/hetutu-5238/p/9456016.html
  • ElementUI-javaweb_servlet-mysql简单小例子实现增删改查前言一、mysql部分1.新建表二、javaweb_servlet部分1.查询部分2.添加数据3.修改数据4.删除数据ElementUI部分App.vue部分main.js部分总结第一步:前台填写数据...
  • vue2.0+axios+elementUI实现增删改查

    千次阅读 2018-07-31 04:46:04
    最近尝试使用vue+element实现增删改查功能,在实现的过程中遇到了蛮多问题,现在总结如下:首先安装相关的插件1、根据vue官网推荐,使用axios进行前后台交互,安装axiosnpm install axios -S2、安装elementUI,官网...
  • 学习目标: 【虽然已经有很多轮子把增删改查封装好了直接用就行了,在github上面一大堆,但身为前端人,这种基本功当然是必须具备的】 原型图解释:
  • vue后台管理项目增删改查规范代码
  • 最近在做一个动态表格的增删改查,不得不说真的是有难度的。现在写下来记录一下吧!希望对大家有帮助! <template > <div> <!--头部--> <div> <div class="headerWrap"> <...
  • springboot+vue+elementui实现增删改查和分页查询,最基础的前后端加数据库功能实现
  • 1、效果图先感受一波吧,代码在第二 2、代码 查询 添加 取 消 添 加 修
  • SpringBoot-Vue实现增删改查及分页小DEMO

    千次阅读 多人点赞 2019-09-30 14:04:37
    SpringBoot-Vue实现增删改查及分页小DEMO 前言 主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个登录demo,实现增删改查、分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程。 开发栈 ...
  • 因为就只有一个页面,我就直接写在app.vue中了。 服务端我是用go语言写的,感兴趣的朋友可以看我的另一篇文章: https://blog.csdn.net/weixin_42565137/article/details/90753197 效果演示 项目地址 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,076
精华内容 430
关键字:

vueelementui增删改查

vue 订阅