一个完整的项目流程

时间:2022-11-15 19:51:54

1:运行数据库脚本
2:导项目
3:修改maven地址
4:运行现在依赖
5:改application.yml(数据库名,密码)
6:改jdbc.properties((数据库名,密码)
7:generatorConfig.xml (改成自己mysql依赖的位置  )
8.运行项目是否报错
9:生成代码
10:mapper类加注解 @Repository  
            加注释/**/
            干掉id的
11:复制xxxmapper改成xxxmapper,吧s改为大写,保留所需要的方法,其他的删除,一定要删掉注解@Repository


12:实现接口,放到方法名上alt+回车,下面叫impl,一定要加service注解
13:创建BookController接口,加注释@RestController
@RequestMapping("/book").........

1:建数据库建表

create table t_student(
 sid int not null auto_increment primary key comment '学生编号',
 sname varchar(50) not null comment '学生姓名',
 score float default 0 comment '书本价格',
 sex varchar(20) comment '学生性别'
) comment '学生成绩表';
insert into t_student(sname,score,sex) values
('张三',90,'男'),
('李四',120,'女'),
('王五',60,'男')
 

2:导项目

3:修改maven地址

5:改application.yml(数据库名,密码)
6:改jdbc.properties((数据库名,密码)
7:generatorConfig.xml (改成自己mysql依赖的位置  )

8.运行项目是否报错

9:生成代码

10:mapper类加注解 @Repository  
            加注释/**/
            干掉id的

11:复制xxxmapper改成xxxmapper,吧s改为大写,保留所需要的方法,其他的删除,一定要删掉注解@Repository

12:实现接口,放到方法名上alt+回车,下面叫impl,一定要加service注解

@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentMapper studentMapper;

    @Override
    public List<Student> query(Student student) {
        return studentMapper.query(student);
    }

    @Override
    public int insert(Student record) {
        return studentMapper.insert(record);
    }

}


13:创建BookController接口,加注释@RestController
@RequestMapping("/book").........

@RestController
@RequestMapping("/student")
public class StudentContorller {

    @Autowired
    private StudentService studentService;


    /**
     * 根据学生模糊查询
     * @param student
     * @return
     */
   @RequestMapping("/query")
    public JsonResponseBody<?> query(Student student){
        List<Student> list= studentService.query(student);
        return new JsonResponseBody<>(200,"OK",list);
    }

    /**
     * 根据学生新增
     * @param student
     * @return
     */
    @RequestMapping("/add")
    public JsonResponseBody<?> add(Student student){
       studentService.insert(student);
        return new JsonResponseBody<>();
    }


    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    class JsonResponseBody<T>{
        private int code=200;
        private String msg="OK";
        private T data;
    }

}

运行一下看有没有错比如运行http://localhost:8080/spboot/book/query

//配置好所定义的接口

    'ADD':'/student/add',
    'QUERY':'/student/query',

//写页面

<!--1.搜索框  -->

<!--2.数据表格  -->

<!--3.弹出框  -->

//找到官网

Element - The world's most popular Vue UI framework

<template>
    <div>
        <h1 align="center">SpringBoot阶段机试,ts={{ts}}</h1>
        <!--1.搜索框  -->
        <el-form :inline="true">
            <el-form-item label="学生姓名">
                <el-input v-model="sname" placeholder="学生姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button type="primary" @click="open">新增</el-button>
            </el-form-item>
        </el-form>
        <!--2.数据表格  -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="sid" label="学生编号" width="180">
            </el-table-column>
            <el-table-column prop="sname" label="学生姓名" width="180">
            </el-table-column>
            <el-table-column prop="score" label="成绩">
            </el-table-column>
            <el-table-column prop="sex" label="学生性别">
            </el-table-column>
        </el-table>
        <!--3.弹出框  -->
        <el-dialog title="新增" :visible.sync="dialogFormVisible" @close="close">
            <el-form :model="student" :rules="rules" ref="student">
                <el-form-item prop="sname" label="学生名称" :label-width="formLabelWidth">
                    <el-input v-model="student.sname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="score" label="学生成绩" :label-width="formLabelWidth">
                    <el-input v-model="student.score" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="sex" label="学生性别" :label-width="formLabelWidth">
                    <el-select style="width: 100%" v-model="student.sex" placeholder="请选择学生性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                        <el-option label="妖" value="妖"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                ts: new Date().getTime(),
                sname: '',
                tableData: [],
                formLabelWidth: '90px',
                dialogFormVisible: false,
                student: {
                    sname: '',
                    score: '',
                    sex: ''
                },
                rules: {
                    sname: [{
                        required: true,
                        message: '请输入学生名称',
                        trigger: 'blur'
                    }, ],
                    score: [{
                        required: true,
                        message: '请输入学生成绩',
                        trigger: 'blur'
                    }, ],
                    sex: [{
                        required: true,
                        message: '请选择学生性别',
                        trigger: 'change'
                    }, ],

                }
            };
        },
        methods: {
            close: function() {
                //清空表单数据
                this.student = {
                    sname: '',
                    score: '',
                    sex: ''
                };
                //清空表单验证
                this.$refs['student'].resetFields();
            },
            add: function() {
                this.$refs['student'].validate((valid) => {
                    if (valid) {
                        //获取请求路径
                        let url = this.axios.urls.ADD;
                        this.axios.post(url, this.student).then(resp => {
                            let data = resp.data;
                            if (data.code == 200) {
                                //关闭对话框
                                this.dialogFormVisible = false;
                                //刷新列表
                                this.query();
                            } else {
                                this.$message.error(新增失败);
                            }
                        }).catch(err => {

                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            open: function() {
                this.dialogFormVisible = true;
            },
            query: function() {
                //查询参数
                let params = {
                    sname: this.sname
                };
                //请求路径
                let url = this.axios.urls.QUERY;
                //3.发起请求
                this.axios.post(url, params).then(resp => {
                    let data = resp.data;
                    console.log(data);
                    this.tableData = data.data;
                                    }).catch(err => {
                    
                                    });
                                }
                    
                            }
                        }
                    </script>
                    
                    <style>
                    </style>