SpringBoot复习课

最新推荐文章于 2024-07-15 14:53:54 发布

白雾少年

最新推荐文章于 2024-07-15 14:53:54 发布

阅读量151

点赞数

文章标签： elementui intellij-idea html

本文链接：https://blog.csdn.net/m0_67258478/article/details/128179194

版权

后端

1.IDEA导入spboot包

2.修改file-->Build-->Maven:修改环境变量

3.修改：

application.yml 修改：数据库的名字账号密码

generatorConfig.xml 修改：

jdbc.properties 修改：数据库的名字账号密码

4.找到generatorConfig.xml滑到最下面找到<tabel>打开(快捷键Ctrl+Shift+/)

5.找到Maven-->Plugins-->mybatis-generator-->mybatis-generator:gerate双击运行

6.打开BookMapper.java增加注解(@Reqository)

7.新增：int insert(Book record);SQL语句：

insert into t_book ( bookname, price,
  booktype)
values ( #{bookname,jdbcType=VARCHAR}, #{price,jdbcType=REAL},
  #{booktype,jdbcType=VARCHAR})

查询所有：List<Book> query(Book book);SQL语句：
select * from t_book where 1=1
<if test="null!=bookname and ''!=bookname">
  and bookname like concat('%',#{bookname},'%')
</if>

8.把mapper的包BookMapper复制放到service中BookService把注释删掉删掉其他方法

9.打开BookService光标放到接口的上面Alt+Enter选择implement点击OK

10.打开BookServiceImpl增加注解 (@Service)

引入：

@Autowired

private BookMapper bookMapper;

@Service
public class BookServiceImpl implements BookService {

    @Autowired
    private BookMapper bookMapper;


    @Override
    public int insert(Book record) {
        return bookMapper.insert(record);
    }

    @Override
    public List<Book> query(Book book) {

        return bookMapper.query(book);
    }
}

11.在 controller建一个包BookController

package com.zking.spboot.controller;

import com.zking.spboot.model.Book;
import com.zking.spboot.service.BookService;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/book")
public class BookController {
    @Autowired
    private BookService bookService;

    /**
     * 新增
     * @param book
     * @return
     */
    @RequestMapping("/add")
    public Json<?> add(Book book){
        int row = bookService.insert(book);
        return new Json<>();
    }
    /**
     * 查询
     * @param book
     * @return
     */
    @RequestMapping("/query")
    public Json<?> query(Book book){
        List<Book> lst = bookService.query(book);
        return new Json<>(200,"OK",lst);
    }




    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    class Json<T>{
        //状态码
        private int code=200;
        //返回消息
        private String msg="OK";
        //返回结果
        private T data;
    }

}

12.在IDEA运行代码如果端口异常在BookController加个注解(@CrossOrigin)或者修改端口

前端

使用管理员打开进入项目所在目录执行npm -v如果现实版本就再执行npm -i

等待下载成功后执行npm run dev

服务器：

1.添加接口：

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

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	//服务器
	'SERVER': 'http://localhost:8080/spboot', 
	'ADD':'/book/add',
	'QUERY':'/book/query',
	//获得请求的完整地址，用于mockjs测试时使用
	'getFullPath': k => {
		return this.SERVER + this[k];
	}
}

页面代码：

1.借鉴Element ui

<template>
	<div>
		<h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1>
		<!-- 1.搜索栏 -->
		<el-form :inline="true">
			<el-form-item label="书本名称">
				<el-input v-model="bookname"></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="id" label="编号" width="180">
			</el-table-column>
			<el-table-column prop="bookname" label="名称" width="180">
			</el-table-column>
			<el-table-column prop="price" label="价格" width="180">
			</el-table-column>
			<el-table-column prop="booktype" label="类型" width="180">
			</el-table-column>
		</el-table>
		<!-- 3.弹出框 -->
		<el-dialog @close="close" title="新增" :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" ref="form">
				<el-form-item prop="bookname" label="书本名称" :label-width="formLabelWidth">
					<el-input v-model="form.bookname" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="price" label="书本价格" :label-width="formLabelWidth">
					<el-input v-model="form.price" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="booktype" label="书本类型" :label-width="formLabelWidth">
					<el-select style="width:100%;" v-model="form.booktype" placeholder="请选择书本类型">
						<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(),
				bookname: '',
				tableData: [],
				dialogFormVisible: false,
				formLabelWidth: "100px",
				form: {
					bookname: '',
					price: '',
					booktype: ''
				},
				rules: {
					bookname: [{
							required: true,
							message: '请输入书本名称',
							trigger: 'blur'
						}],
						price: [{
								required: true,
								message: '请输入价格',
								trigger: 'blur'
							}],
							booktype: [{
									required: true,
									message: '请输入类型',
									trigger: 'change'
								}],
				}
			};
		},
		methods: {
			close:function(){
				 this.$refs["form"].resetFields();
			},
			add:function(){
				 this.$refs['form'].validate((valid) => {
				          if (valid) {
				            //获取新增的地址
							//2.请求地址
							let url = this.axios.urls.ADD;
							//3.发送请求
							this.axios.post(url, this.form).then(resp => {
								let rs = resp.data;
								console.log(rs);
								if(rs.code==200){
									//关闭对话框
									this.dialogFormVisible=false;
									//刷新列表
									this.query();
								}
							}).catch(err => {
							
							});
							
				          } else {
				            console.log('error submit!!');
				            return false;
				          }
				        });
				
			},
			open: function() {
				this.dialogFormVisible = true
			},
			query: function() {
				//1.查询参数
				let param = {
					bookname: this.bookname
				}
				//2.请求地址
				let url = this.axios.urls.QUERY;
				//3.发送请求
				this.axios.post(url, param).then(resp => {
					let rs = resp.data;
					console.log(rs);
					this.tableData = rs.data;
				}).catch(err => {

				});
			}
		}
	}
</script>

<style>
</style>