- 数据库:MYSQL5.7+
- 后台技术:SpringBoot
- 前端技术:vue+elementui
- 代码简洁、有合理的注解,前面页面排版工整
a.Maven地址的修改(修改成你自己的);
b.依赖可能不在本地,需要联网重新下载;
c.jdbc.properties设置,数据库相关配置:数据库名/账号/密码,请修改成自己电脑所对应的账号和密码。
d.generatorConfig.xml设置:Ⅰ:修改classPathEntry配置,更换成本地maven仓库中mysql数据库jdbc驱动jar包的位置;Ⅱ:修改table配置表信息(tableName和domainObjectName),更换成考试中对应数据库表;Ⅲ:点击Edit Configurations...配置,添加Maven,输入命名:mybatis-gerenator:gerenate -e;
e.application.yml设置:数据库相关设置:数据库名/帐号/密码,请修改成自己电脑对应的帐号和密码
f.由于电脑tomcat以及jdk的安装位置不一样,请重新配置jdk和tomcat
g.以上步骤完成,先不要写任何代码,先将web项目发布至tomcat并启动,如果首页访问成功,表示web项目部署成功,可以开始编写后台代码了
1.vue项目框架已搭建完成,为减小源码大小,相关模块已删除,运行项目前,请先进入vue项目根目录,使用npm install命令下载相关模块(此步骤需要联网)
2.项目启动后无需添加路由或*.vue文件,运行后会直接跳转到BookList.vue,在此vue文件中添加相关功能即可
generatorConfig.xml、jdbc.properties、application.yml这三个配置文件我就不展示了,有需要的下载我的资源包
数据库表建好之后→导入前端(可以把需要的依赖先下载,然后干自己的事)→导入后端(进行我上面所说的那些后端操作)→写完代码运行后端→在写前端代码(运行前端)
package com.zking.spboot.model;
public class Book {
private Integer id;
private String bookname;
private Float price;
private String booktype;
public Book(Integer id, String bookname, Float price, String booktype) {
this.id = id;
this.bookname = bookname;
this.price = price;
this.booktype = booktype;
}
public Book() {
super();
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getBookname() {
return bookname;
}
public void setBookname(String bookname) {
this.bookname = bookname;
}
public Float getPrice() {
return price;
}
public void setPrice(Float price) {
this.price = price;
}
public String getBooktype() {
return booktype;
}
public void setBooktype(String booktype) {
this.booktype = booktype;
}
}
package com.zking.spboot.mapper;
import com.zking.spboot.model.Book;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface BookMapper {
/**
* 根据书本名称模糊查询
* @param book
* @return
*/
List queryAll(Book book);
int deleteByPrimaryKey(Integer id);
int insert(Book record);
int insertSelective(Book record);
Book selectByPrimaryKey(Integer id);
int updateByPrimaryKeySelective(Book record);
int updateByPrimaryKey(Book record);
}
id, bookname, price, booktype
delete from t_book
where id = #{id,jdbcType=INTEGER}
insert into t_book (id, bookname, price,
booktype)
values (#{id,jdbcType=INTEGER}, #{bookname,jdbcType=VARCHAR}, #{price,jdbcType=REAL},
#{booktype,jdbcType=VARCHAR})
insert into t_book
id,
bookname,
price,
booktype,
#{id,jdbcType=INTEGER},
#{bookname,jdbcType=VARCHAR},
#{price,jdbcType=REAL},
#{booktype,jdbcType=VARCHAR},
update t_book
bookname = #{bookname,jdbcType=VARCHAR},
price = #{price,jdbcType=REAL},
booktype = #{booktype,jdbcType=VARCHAR},
where id = #{id,jdbcType=INTEGER}
update t_book
set bookname = #{bookname,jdbcType=VARCHAR},
price = #{price,jdbcType=REAL},
booktype = #{booktype,jdbcType=VARCHAR}
where id = #{id,jdbcType=INTEGER}
package com.zking.spboot.service;
import com.zking.spboot.model.Book;
import org.springframework.stereotype.Repository;
import java.util.List;
public interface BookService {
/**
* 根据书本名称模糊查询
* @param book
* @return
*/
List queryAll(Book book);
/**
* 新增书本
* @param record
* @return
*/
int insert(Book record);
}
package com.zking.spboot.service.impl;
import com.zking.spboot.mapper.BookMapper;
import com.zking.spboot.model.Book;
import com.zking.spboot.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* 实现类
*/
@Service
public class BookServiceImpl implements BookService {
@Autowired
private BookMapper bookMapper;
@Override
public List queryAll(Book book) {
return bookMapper.queryAll(book);
}
@Override
public int insert(Book record) {
return bookMapper.insert(record);
}
}
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;
@RequestMapping("/addBook")
public JsonResponsBody> addBook(Book book){
bookService.insert(book);
return new JsonResponsBody<>();
}
@RequestMapping("/queryAll")
public JsonResponsBody> queryAll(Book book){
List books = bookService.queryAll(book);
return new JsonResponsBody<>(200,"OK",books);
}
@Data
@AllArgsConstructor
@NoArgsConstructor
class JsonResponsBody{
private int code=200;
private String mag="Ok";
private T data;
}
}
package com.zking.spboot;
import org.apache.ibatis.annotations.Mapper;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.EnableAspectJAutoProxy;
import org.springframework.transaction.annotation.EnableTransactionManagement;
@MapperScan("com.zking.spboot.mapper")
@EnableTransactionManagement
@EnableAspectJAutoProxy
@SpringBootApplication
public class SpbootApplication {
public static void main(String[] args) {
SpringApplication.run(SpbootApplication.class, args);
}
}
前端接收后端的请求路径,src下面api下面的action.js
/**
* 对后台请求的地址的封装,URL格式如下:
* 模块名_实体名_操作
*/
export default {
//服务器
'SERVER': 'http://localhost:8080/spboot',
'ADD':'book/addBook',
'ALL':'book/queryAll',
//获得请求的完整地址,用于mockjs测试时使用
'getFullPath': k => {
return this.SERVER + this[k];
}
}
前端src下面的router下面的index.js
import Vue from 'vue'
import Router from 'vue-router'
import BookList from '@/views/BookList'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'BookList',
component: BookList
}
]
})
前端页面:
查询
新增