文章目录

需求分析

题目：使用vue和elementui实现界面,使用springboot+mybatis实现后台,使用axios实现user(id,name,age)增删改查

1、创建表

三个字段

  1. id 类型int 主键 自动递增
  2. name 类型varchar
  3. age 类型int
    在这里插入图片描述
    在这里插入图片描述

2、创建SpringBoot项目

2.1 选择项目类型

在这里插入图片描述

2.2 设置组名包名等（根据个人需求更改）

在这里插入图片描述

2.3 选择依赖

2.3.1 选择Web依赖

在这里插入图片描述

2.3.2 选择MySQL和MyBatis依赖

在这里插入图片描述

2.4 设置项目名和模板名（根据个人需求进行更改）

在这里插入图片描述

设置完成后，选择Finish

3、在resources下新建配置文件application.yml

3.1 在application.yml文件中设置mapper.xml文件所在位置

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/app0728?serverTimezone=GMT%2B8&useSSL=true
    username: root
    password: 123456


mybatis:
  mapper-locations: classpath:mapping/*.xml

在这里插入图片描述

如果是这种方法，则需要在resources文件加下新建文件夹mapping
在这里插入图片描述

3.2 第二种方法

注意：application.yml中关于mybatis的mapper-locations配置也可以有另一种解决方法
在pom.xml中加入resources（此时application.yml中不再需要配置mybatis:mapper-locations），写法如下：
在这里插入图片描述

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
    <resources>
        <resource>
            <directory>src/main/java</directory>
            <includes>
                <include>**/*.xml</include>
            </includes>
        </resource>
    </resources>
</build>

4、分页插件的配置以及文件映射的配置

4.1 分页插件（使用pagehelper-spring-boot依赖）

        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.3.0</version>
        </dependency>

注意：如果使用的是pagehelper依赖（pagehelper，不是pagehelper-spring-boot-starter），则不能直接使用，还需要在application.yml中配置相关参数，不推荐这样做

4.2 文件映射的配置

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/app0728?serverTimezone=GMT%2B8
    username: root
    password: 123456
  resources:
    static-locations: file:D:\image  #访问系统外部资源，将该目录下的文件映射到系统下
  mvc:
    static-path-pattern: /upload/**  #该属性的默认值是/**

注意：resources和mvc需要和datasource保持同级

5、后台代码编写

5.1 文件分级（mapper.xml文件选择了第二种方法）

在这里插入图片描述

5.2 Application中加入注解

package com.tjetc;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan("com.tjetc.mapper") //扫描mapper接口
@SpringBootApplication
public class Application {

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

}

5.3 User.class

package com.tjetc.domain;

public class User {
    private Integer id;
    private String name;
    private Integer age;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age=" + age +
                '}';
    }

    public User() {
    }

    public User(Integer id, String name, Integer age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}

5.4 UserMapper.class

package com.tjetc.mapper;

import com.tjetc.domain.User;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface UserMapper {

    List<User> listByName(String name);

    void add(User user);

    void update(User user);

    void del(Integer id);
}

5.5 UserMapper.xml

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.tjetc.mapper.UserMapper">
    <select id="listByName" resultType="com.tjetc.domain.User">
        select * from user where name like concat('%',#{name},'%')
    </select>

    <insert id="add">
        insert into user(name,age) values(#{name},#{age})
    </insert>

    <update id="update">
        update user
        <set>
            <if test="name!=null">
                name = #{name},
            </if>
            <if test="age!=null">
                age = #{age},
            </if>
        </set>
        where id  = #{id}
    </update>

    <delete id="del">
        delete from user where id = #{id}
    </delete>
</mapper>

5.6 UserService.class

package com.tjetc.service;

import com.github.pagehelper.PageInfo;
import com.tjetc.domain.User;

public interface UserService {
    PageInfo<User> listByName(String name, Integer curPage, Integer pageSize);

    void add(User user);

    void update(User user);

    void del(Integer id);
}

5.7 UserServiceImpl.class

package com.tjetc.service.impl;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.tjetc.domain.User;
import com.tjetc.mapper.UserMapper;
import com.tjetc.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public PageInfo<User> listByName(String name, Integer curPage, Integer pageSize) {
        PageHelper.startPage(curPage,pageSize);
        List<User> userList =  userMapper.listByName(name);
        PageInfo<User> page = new PageInfo<>(userList);
        return page;
    }

    @Override
    public void add(User user) {
        userMapper.add(user);
    }

    @Override
    public void update(User user) {
        userMapper.update(user);
    }

    @Override
    public void del(Integer id) {
        userMapper.del(id);
    }
}

5.8 UserController

package com.tjetc.controller;


import com.github.pagehelper.PageInfo;
import com.tjetc.domain.User;
import com.tjetc.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
@CrossOrigin
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;


    @RequestMapping("/list")
    public PageInfo<User> list(@RequestParam(defaultValue = "") String name,@RequestParam(defaultValue = "1")Integer curPage,@RequestParam(defaultValue = "2")Integer pageSize){
        PageInfo<User> page =    userService.listByName(name,curPage,pageSize);
        return page;
    }


    @RequestMapping("/add")
    public void add(User user){
        userService.add(user);
    }
    @RequestMapping("/update")
    public void update(User user){
        userService.update(user);
    }
    @RequestMapping("/del")
    public void del(Integer id){
        userService.del(id);
    }
}

6、前端代码编写（使用WebStorm）

6.1 创建vue项目

6.1.1 在终端输入指令

在Terminal终端输入以下命令
vue init webpack 项目名称 安装模板 第一个y 其他都是n
cnpm install vuex 安装vuex
cnpm install element-ui 安装element-ui
cnpm install axios

6.1.2 在main.js文件中加入以下配置（根据自己的main.js做出修改即可）

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import VueRouter from 'vue-router'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://localhost:8080/'
Vue.use(ElementUI)
Vue.use(VueRouter)
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

6.2 文件分级

在这里插入图片描述

6.3 导入组件

在index.js中加入

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'


//用户表
import UserList from '@/components/user/List'
import UserAdd from '@/components/user/Add'
import UserUpdate from '@/components/user/Update'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/user/list',
    },
    {
      path:'/user/list',
      name:'UserList',
      component:UserList
    },
    {
      path:'/user/add',
      name:'UserAdd',
      component:UserAdd
    },
    {
      path:'/user/update',
      name:'UserUpdate',
      component:UserUpdate
    },
  ]
})

6.4 List

<template>
  <div>
    <center>
      <div>
        <span style="font-size: 100px">用户表</span>
      </div>
      <div style="width:1000px">
        <el-card>
          <el-row :gutter="15">
            <el-col :span="8" :offset="4">
              <el-input v-model="name" placeholder="名称"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" class="el-icon-search" @click="paging(1)">点击搜索</el-button>
            </el-col>
            <el-col :span="6">
              <el-button type="success" class="el-icon-circle-plus-outline" @click="toAdd">添加用户</el-button>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div style="width:1000px">
        <el-card>
          <el-table :data="page.list" >
            <el-table-column prop="id" label="序号"  width="200"></el-table-column>
            <el-table-column prop="name" label="姓名" width="200"></el-table-column>
            <el-table-column prop="age" label="年龄" width="200"></el-table-column>
            <el-table-column  label="操作">
              <template slot-scope="scope">
                <el-button type="warning" class="el-icon-edit" @click="update(scope.row)">修改</el-button>
                <el-button type="danger" class="el-icon-delete" @click="del(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="sizeChange" @current-change="curChange"
                         :current-page="page.pageNum" :page-size="page.pageSize"
                         :page-sizes="[2,3,4,5]" layout="total,sizes,prev,pager,next,jumper"
                         :total="page.total">
          </el-pagination>
        </el-card>
      </div>

    </center>
  </div>

</template>

<script>
  export default {
    data(){
      return {
        page:{},
        name:'',
        pageSize:2,
        user:{}
      }
    },
    methods:{
      paging(curPage){
        this.$axios.get('/user/list?curPage='+curPage+'&pageSize='+this.pageSize+'&name='+this.name).then(resp=>{
          this.page = resp.data
        })
      },
      update(b){
        this.$router.push('/user/update?b='+JSON.stringify(b))
      },
      del(id){
        this.$axios.get('/user/del?id=' + id).then(resp => {
          this.paging(1)
        })

      },
      sizeChange(newSize){
        this.pageSize=newSize;
        this.paging(1)
      },
      curChange(newPage){
        this.paging(newPage)
      },
      toAdd(){
        this.$router.push('/user/add')
      }
    },
    created() {

      this.paging(1)
    }
  }
</script>

<style scoped>

</style>

6.5 Add

<template>
  <div>
    <center>
      <div style="width: 500px;">
        <el-card >
          <el-form ref="form" :model="user" label-width="80px">
            <el-form-item label="用户姓名">
              <el-input v-model="user.name" placeholder="名称" ></el-input>
            </el-form-item>
            <el-form-item label="用户年龄">
              <el-input v-model="user.age" placeholder="年龄" ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="save">立即添加</el-button>
              <el-button type="info" @click="cancel()">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </center>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        user:{}
      }
    },
    methods:{
      save() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            var formData = new FormData()
            Object.keys(this.user).forEach(key => {
              formData.append(key, this.user[key])
            })
            this.$axios.post('/user/add', formData)
              .then(resp => {
                this.$router.push('/user/list')
              })
              .catch(function(error) {
                console.log(error)
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })},
      cancel(){
        this.$router.push('/user/list')
      }
    },
    created() {

    }
  }
</script>

<style scoped>

</style>

6.6 Update

<template>
  <div>
    <center>
      <div style="width: 500px;">
        <el-card >
          <el-form ref="form" :model="user" label-width="80px">
            <el-form-item label="用户姓名">
              <el-input v-model="user.name" placeholder="名称" ></el-input>
            </el-form-item>
            <el-form-item label="用户年龄">
              <el-input v-model="user.age" placeholder="年龄" ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="save">立即修改</el-button>
              <el-button type="info" @click="cancel()">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </center>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        user:{}
      }
    },
    methods:{
      save() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            var formData = new FormData()
            Object.keys(this.user).forEach(key => {
              formData.append(key, this.user[key])
            })
            this.$axios.post('/user/update', formData)
              .then(resp => {
                this.$router.push('/user/list')
              })
              .catch(function(error) {
                console.log(error)
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })},
      cancel(){
        this.$router.push('/user/list')
      }
    },
    created() {
        this.user = JSON.parse(this.$route.query.b)
    }
  }
</script>

<style scoped>

</style>

7、页面浏览效果

在这里插入图片描述
增删改查功能都是可以用的

# mysql
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue