文章目录
需求分析
题目：使用vue和elementui实现界面,使用springboot+mybatis实现后台,使用axios实现user(id,name,age)增删改查
1、创建表
三个字段
- id 类型int 主键 自动递增
- name 类型varchar
- 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、页面浏览效果
增删改查功能都是可以用的
1202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
