文章内容

后台使用springBoot
前台使用vue

项目准备

（1）框架

（1-1）创建maven工程

（1-2）设置UTF-8

(1)File->Settings->Editor->File Encodings
在这里插入图片描述
(2)File->Settings->Build,Execution,Deployment -> Compiler -> Java Compiler

（1-3）创建springBoot项目

在这里插入图片描述

（2）创建数据库

drop database vuejsdemo; 
create database vuejsdemo; 
use vuejsdemo;
#创建数库中的表
create table user(
id int primary key auto_increment,
age int,
username varchar(20), 
`password` varchar(50), 
email varchar(50), 
sex varchar(20)
)


insert into `user` values ('1', '33', '张老师', '123', 'zzz@wzx.cn', '男 ');
insert into `user` values ('2', '31', '刘老师', '123', 'lll@wzx.cn', '女');
insert into `user` values ('3', '17', '赵工', '213', 'zg@wzx.cn', '女');
insert into `user` values ('4', '40', '高管', '213', 'gg@wzx.cn', 'female');
insert into `user` values ('5', '28', '李总', '312', 'lz@wzx.com', 'male');
insert into `user` values ('6', '34', '王董', '312', 'wd@wzx.com', 'male');
insert into `user` values ('7', '55', '孙老板', '4321', 'slb@wzx.com', '男');
insert into `user` values ('8', '19', '陈秘书', '4321', 'cms@wzx.com', '女');

（3）准备完成

在这里插入图片描述

后台代码

（1）application.properties

# app
spring.application.name=demo01crud
server.port=8001
# datasource hykar
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.url=jdbc:mysql://localhost:3306/vuejsdemo?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8
# mybatis
mybatis.type-aliases-package=com.smp.demo01crud.domain
# mybatis -dao  -->
# @MapperScan(basePackages = {"com.smp.demo01curd.dao"})
  # log   日志查看
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
# resources
spring.web.resources.static-locations=classpath:/static/,classpath:/templates/

（2）创建包

在这里插入图片描述

（2-1）User实体类

@Data
public class User {
    private Integer id;
    private String username;
    private String password;
    private String sex;
    private int age;
    private String email;
}

（2-2）Result 实体类

@Data
public class Result {
    private int code;
    private String msg;
    private Object data;

    /*public Result(int code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }*/

    public static Result init(int code, String msg, Object data) {
        Result result=new Result();
        result.code=code;
        result.msg=msg;
        result.data=data;
        return result;
    }
}

（3）Demo01crudApplicationTests测试

@SpringBootTest
@Slf4j
class Demo01crudApplicationTests {

    @Autowired
    UserService userService;
    @Test
    void test01() {
        List<User> userList=userService.findAll();//查询一条
        User user=userService.findById(2);//查询多条
        log.info("userList"+userList);
        log.info("user"+user);
        /*userService.deleteById(1);
        userService.saveUser(user);
        userService.updateUser(user);*/
    }

    @Test
    void test02(){
        User user=new User();
        user.setId(9);
        user.setUsername("Hello Word");
        userService.saveUser(user);
    }
}

（4-1）UserService业务层

public interface UserService {

    List<User> findAll();

    User findById(int id);

    void deleteById(int id);

    void saveUser(User user);

    void updateUser(User user);
}

（4-2）UserServiceImpl

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    UserDao userDao;
    @Override
    public List<User> findAll() {
        return userDao.findAll();
    }

    @Override
    public User findById(int id) {
        return userDao.findById(id);
    }

    @Override
    public void deleteById(int id) {
        userDao.deleteById(id);
    }

    @Override
    public void saveUser(User user) {
        userDao.save(user);
    }

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

（5）UserDao

@Component("UserDao")
public interface UserDao {

    @Select("select * from user order by id asc")
    List<User> findAll();

    @Select("select * from user where id=#{id}")
    User findById(int id);

    /*@Delete("delete from user where id = # {id}")*/   //错误-->=#{}井号与括号之间不能有空格
    @Delete("delete from user where id = #{id}")
    void deleteById(int id);

    @Insert("insert into user (username,password,email,age,sex)values(#{username},#{password},#{email},#{age},#{sex})")
    void save(User user);

    @Update("update user set username=#{username},password=#{password},email=#{email},age=#{age},sex=#{sex} where id=#{id}")
    void update(User user);
}

（6）Demo01crudApplication

@SpringBootApplication
@MapperScan(basePackages = {"com.smp.demo01crud.dao"})
public class Demo01crudApplication {

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

}

前台代码

（1）UserController控制层

@RestController
@RequestMapping("/users")
public class UserController {
    @Autowired
    UserService userService;

    @RequestMapping(path = "",method = {RequestMethod.GET})
    public Object getList(){
        List<User> data=userService.findAll();
        return Result.init(200,"查询成功",data);
    }

    @RequestMapping(path = "/{id}",method = {RequestMethod.GET})
    public Object getOne(@PathVariable int id){
        User user=userService.findById(id);
        return Result.init(200,"查询成功",user);
    }

    @RequestMapping(path = "/{id}",method = {RequestMethod.DELETE})
    public Object deleteOne(@PathVariable int id){
        try {
            userService.deleteById(id);
            return Result.init(200,"删除成功",null);
        } catch (Exception e) {
            e.printStackTrace();
            return Result.init(200,"删除失败",null);
        }
    }

    @RequestMapping(path = "",method = {RequestMethod.POST})
    public Object createOne(@RequestBody User user){
        try {
            userService.saveUser(user);
            return Result.init(200,"新增成功",null);
        } catch (Exception e) {
            e.printStackTrace();
            return Result.init(200,"新增失败",null);
        }
    }

    //为什么User上要添加@RequestBody
    //是因为Vue使用axios发送post请求时，是将json数据提交过来
    //所以，Controller方法需要将json转换成user对象
    @RequestMapping(path = "/{id}",method = {RequestMethod.PUT})
    public Object updateOne(@PathVariable int id,@RequestBody User user){
        //页面处理方式有两种
        //第一种就是地址带上id /users/8
        //第二种就是页面上有个隐藏的input，值是id
        try {
            userService.updateUser(user);
            return Result.init(200,"修改成功",null);
        } catch (Exception e) {
            e.printStackTrace();
            return Result.init(200,"修改失败",null);
        }
    }

}

（2）引入vue和axios

在这里插入图片描述

(2-1)页面 list-user.html

访问地址：http://localhost:8001/list-user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <div v-if="viewid==1">
        <button @click="showSaveForm()">新建</button>
        <table border="1px" width="100%">
            <tr>
                <td>序号</td>
                <td>id</td>
                <td>用户名</td>
                <td>密码</td>
                <td>邮箱</td>
                <td>年龄</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
            <tr v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.password}}</td>
                <td>{{user.email}}</td>
                <td>{{user.age}}</td>
                <td>{{user.sex}}</td>
                <td>
                    <button @click="deleteById(user.id)">删除</button>
                    <button @click="findOne(user.id)">编辑</button>
                </td>
            </tr>
        </table>
    </div>

    <div v-if="viewid!=1">
        <form>
            <input type="hidden" v-model="user.id">
            用户名：<input type="text" v-model="user.username"><br/>
            密码：<input type="text" v-model="user.password"><br/>
            邮箱：<input type="text" v-model="user.email"><br/>
            年龄：<input type="text" v-model="user.age"><br/>
            性别：<input type="text" v-model="user.sex"><br/>
            <button @click="back">返回</button>
            <button v-if="viewid == 2" @click="saveUser()">保存</button>
            <button v-if="viewid == 3" @click="updateUser(user.id)">修改</button>
        </form>
    </div>
</div>


</body>
<script src="js/moduel-user.js"></script>
</html>

(2-2)js

vm对象的重点在于两个，一个是data，另一个是methods
data，可以接收服务端返回的数据，同步到页面显示
也可以将表单里面的数据同步保存，然后提交给后台。
moduel-user.js

//vue的核心对象 view model  双向绑定
//如果数据发生改变，页面同步显示
//反之也成立
//view model
var vm = new Vue(
    {
        el:'#app', //让vu掌握指定的视图区域
        data:{
            user:{
                id:-1,
                username:'',
                password:'',
                email:'',
                sex:'',
                age:0
            },
            viewid:1, //控制视图的状态  ==1 显示列表，==2 添加 == 3修改
            users:[] //集合
        },
        methods:{
            //函数
            findAll:function () {
                var vm = this
                axios.get('/users')
                    .then(function (response) {//正常
                        console.log(response.data);
                        vm.users = response.data.data
                        vm.viewid = 1
                    })
                    .catch(function (err) {//请求失败
                        console.log(err);
                        alert(response.err)
                    });
            },
            findOne:function (id) {
                var vm = this
                axios.get('/users/'+id)
                    .then(function (response) {//正常
                        console.log(response.data);
                        vm.user = response.data.data
                        vm.viewid = 3
                    })
                    .catch(function (err) {//请求失败
                        console.log(err);
                        alert(response.err)
                    });
            },
            deleteById:function (id) {
                axios.delete('/users/'+id)
                    .then(function (response) {//正常
                        console.log(response.data);
                        //vm.users = response.data.data
                        //vm.viewid = 1
                        vm.findAll()
                    })
                    .catch(function (err) {//请求失败
                        console.log(err);
                        alert(response.err)
                    });
            },
            showSaveForm:function(){
                var vm = this
                vm.viewid = 2
            },
            back:function(){
                var vm = this
                vm.viewid = 1
            },
            saveUser:function () {
                var vm = this
                axios.post('/users',vm.user)
                    .then(function (response) {//正常
                        console.log(response.data);
                        vm.findAll()
                    })
                    .catch(function (err) {//请求失败
                        console.log(err);
                        alert(response.err)
                    });
            },
            updateUser:function (id) {
                var vm = this
                axios.put('/users/'+id,vm.user)
                    .then(function (response) {//正常
                        console.log(response.data);
                        vm.findAll()
                    })
                    .catch(function (err) {//请求失败
                        console.log(err);
                        alert(response.err)
                    });
            }
        },
        created:function () {
            //发送请求查询列表
           // alert("vm创建成功")
            //this表示当前vm对象
            this.findAll()
        }
    }
) //创建了MVVM中的VM对象

原文链接：https://blog.csdn.net/qq_41209886/article/details/110387683

【springBoot和vue框架整合】--增删改查快速入门

文章目录

文章内容

项目准备

（1）框架

（1-1）创建maven工程

（1-2）设置UTF-8

（1-3）创建springBoot项目

（2）创建数据库

（3）准备完成

后台代码

（1）application.properties

（2）创建包

（2-1）User实体类

（2-2）Result 实体类

（3）Demo01crudApplicationTests测试

（4-1）UserService业务层

（4-2）UserServiceImpl

（5）UserDao

（6）Demo01crudApplication

前台代码

（1）UserController控制层

（2）引入vue和axios

(2-1)页面 list-user.html

(2-2)js