【我后續(xù)會(huì)發(fā)一個(gè)資源包，里面是所有代碼，數(shù)據(jù)庫(kù)表設(shè)計(jì)也有，大學(xué)生可以直接用，導(dǎo)入數(shù)據(jù)庫(kù)運(yùn)行，再導(dǎo)入后端項(xiàng)目和前端項(xiàng)目，再去網(wǎng)頁(yè)運(yùn)行就好了，效果圖下面有】
?
1、考核要求：
- 數(shù)據(jù)庫(kù)：MYSQL5.7+
- 后臺(tái)技術(shù)：SpringBoot
- 前端技術(shù)：vue+elementui
- 代碼簡(jiǎn)潔、有合理的注解，前面頁(yè)面排版工整
2、考核注意事項(xiàng)：
1.運(yùn)行sql腳本，創(chuàng)建數(shù)據(jù)庫(kù)及書(shū)本表（根據(jù)我的實(shí)體類(lèi)建表就可以了，整個(gè)項(xiàng)目可直接運(yùn)行，跨域問(wèn)題已處理，前后端的端口也已處理）
2.后臺(tái)代碼注意事項(xiàng)
????????a.Maven地址的修改（修改成你自己的）；
????????b.依賴可能不在本地，需要聯(lián)網(wǎng)重新下載；
? ? ? ? c.jdbc.properties設(shè)置，數(shù)據(jù)庫(kù)相關(guān)配置：數(shù)據(jù)庫(kù)名/賬號(hào)/密碼，請(qǐng)修改成自己電腦所對(duì)應(yīng)的賬號(hào)和密碼。
? ? ? ? d.generatorConfig.xml設(shè)置:Ⅰ：修改classPathEntry配置，更換成本地maven倉(cāng)庫(kù)中mysql數(shù)據(jù)庫(kù)jdbc驅(qū)動(dòng)jar包的位置；Ⅱ：修改table配置表信息(tableName和domainObjectName)，更換成考試中對(duì)應(yīng)數(shù)據(jù)庫(kù)表；Ⅲ：點(diǎn)擊Edit Configurations...配置，添加Maven，輸入命名：mybatis-gerenator:gerenate -e；
? ? ? ? e.application.yml設(shè)置:數(shù)據(jù)庫(kù)相關(guān)設(shè)置：數(shù)據(jù)庫(kù)名/帳號(hào)/密碼，請(qǐng)修改成自己電腦對(duì)應(yīng)的帳號(hào)和密碼
? ? ? ? f.由于電腦tomcat以及jdk的安裝位置不一樣，請(qǐng)重新配置jdk和tomcat
? ? ? ? g.以上步驟完成，先不要寫(xiě)任何代碼，先將web項(xiàng)目發(fā)布至tomcat并啟動(dòng)，如果首頁(yè)訪問(wèn)成功，表示web項(xiàng)目部署成功，可以開(kāi)始編寫(xiě)后臺(tái)代碼了
3.前端代碼注意事項(xiàng)：
1.vue項(xiàng)目框架已搭建完成，為減小源碼大小，相關(guān)模塊已刪除，運(yùn)行項(xiàng)目前，請(qǐng)先進(jìn)入vue項(xiàng)目根目錄，使用npm install命令下載相關(guān)模塊(此步驟需要聯(lián)網(wǎng))
2.項(xiàng)目啟動(dòng)后無(wú)需添加路由或*.vue文件，運(yùn)行后會(huì)直接跳轉(zhuǎn)到BookList.vue，在此vue文件中添加相關(guān)功能即可
3.開(kāi)動(dòng)
generatorConfig.xml、jdbc.properties、application.yml這三個(gè)配置文件我就不展示了，有需要的下載我的資源包
數(shù)據(jù)庫(kù)表建好之后→導(dǎo)入前端（可以把需要的依賴先下載，然后干自己的事）→導(dǎo)入后端（進(jìn)行我上面所說(shuō)的那些后端操作）→寫(xiě)完代碼運(yùn)行后端→在寫(xiě)前端代碼（運(yùn)行前端）
以下是后端的代碼：
Model層：Book
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;
}
}Mapper層：BookMapper
package com.zking.spboot.mapper;
import com.zking.spboot.model.Book;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface BookMapper {
/**
* 根據(jù)書(shū)本名稱模糊查詢
* @param book
* @return
*/
List<Book> 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);
}BookMapper.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.zking.spboot.mapper.BookMapper" >
<resultMap id="BaseResultMap" type="com.zking.spboot.model.Book" >
<constructor >
<idArg column="id" jdbcType="INTEGER" javaType="java.lang.Integer" />
<arg column="bookname" jdbcType="VARCHAR" javaType="java.lang.String" />
<arg column="price" jdbcType="REAL" javaType="java.lang.Float" />
<arg column="booktype" jdbcType="VARCHAR" javaType="java.lang.String" />
</constructor>
</resultMap>
<sql id="Base_Column_List" >
id, bookname, price, booktype
</sql>
<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
select
<include refid="Base_Column_List" />
from t_book
where id = #{id,jdbcType=INTEGER}
</select>
<select id="queryAll" resultType="com.zking.spboot.model.Book">
select <include refid="Base_Column_List"/> from t_book where 1=1
<if test="null!=bookname and ''!=bookname">
and bookname like concat('%',#{bookname},'%')
</if>
</select>
<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
delete from t_book
where id = #{id,jdbcType=INTEGER}
</delete>
<insert id="insert" parameterType="com.zking.spboot.model.Book" >
insert into t_book (id, bookname, price,
booktype)
values (#{id,jdbcType=INTEGER}, #{bookname,jdbcType=VARCHAR}, #{price,jdbcType=REAL},
#{booktype,jdbcType=VARCHAR})
</insert>
<insert id="insertSelective" parameterType="com.zking.spboot.model.Book" >
insert into t_book
<trim prefix="(" suffix=")" suffixOverrides="," >
<if test="id != null" >
id,
</if>
<if test="bookname != null" >
bookname,
</if>
<if test="price != null" >
price,
</if>
<if test="booktype != null" >
booktype,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides="," >
<if test="id != null" >
#{id,jdbcType=INTEGER},
</if>
<if test="bookname != null" >
#{bookname,jdbcType=VARCHAR},
</if>
<if test="price != null" >
#{price,jdbcType=REAL},
</if>
<if test="booktype != null" >
#{booktype,jdbcType=VARCHAR},
</if>
</trim>
</insert>
<update id="updateByPrimaryKeySelective" parameterType="com.zking.spboot.model.Book" >
update t_book
<set >
<if test="bookname != null" >
bookname = #{bookname,jdbcType=VARCHAR},
</if>
<if test="price != null" >
price = #{price,jdbcType=REAL},
</if>
<if test="booktype != null" >
booktype = #{booktype,jdbcType=VARCHAR},
</if>
</set>
where id = #{id,jdbcType=INTEGER}
</update>
<update id="updateByPrimaryKey" parameterType="com.zking.spboot.model.Book" >
update t_book
set bookname = #{bookname,jdbcType=VARCHAR},
price = #{price,jdbcType=REAL},
booktype = #{booktype,jdbcType=VARCHAR}
where id = #{id,jdbcType=INTEGER}
</update>
</mapper>Service層：BookService
package com.zking.spboot.service;
import com.zking.spboot.model.Book;
import org.springframework.stereotype.Repository;
import java.util.List;
public interface BookService {
/**
* 根據(jù)書(shū)本名稱模糊查詢
* @param book
* @return
*/
List<Book> queryAll(Book book);
/**
* 新增書(shū)本
* @param record
* @return
*/
int insert(Book record);
}impl層：BookServiceImpl
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;
/**
* 實(shí)現(xiàn)類(lèi)
*/
@Service
public class BookServiceImpl implements BookService {
@Autowired
private BookMapper bookMapper;
@Override
public List<Book> queryAll(Book book) {
return bookMapper.queryAll(book);
}
@Override
public int insert(Book record) {
return bookMapper.insert(record);
}
}
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;
@RequestMapping("/addBook")
public JsonResponsBody<?> addBook(Book book){
bookService.insert(book);
return new JsonResponsBody<>();
}
@RequestMapping("/queryAll")
public JsonResponsBody<List<Book>> queryAll(Book book){
List<Book> books = bookService.queryAll(book);
return new JsonResponsBody<>(200,"OK",books);
}
@Data
@AllArgsConstructor
@NoArgsConstructor
class JsonResponsBody<T>{
private int code=200;
private String mag="Ok";
private T data;
}
}
跨域問(wèn)題處理：
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);
}
}
以下是前端的代碼：
前端接收后端的請(qǐng)求路徑,src下面api下面的action.js
/**
* 對(duì)后臺(tái)請(qǐng)求的地址的封裝，URL格式如下：
* 模塊名_實(shí)體名_操作
*/
export default {
//服務(wù)器
'SERVER': 'http://localhost:8080/spboot',
'ADD':'book/addBook',
'ALL':'book/queryAll',
//獲得請(qǐng)求的完整地址，用于mockjs測(cè)試時(shí)使用
'getFullPath': k => {
return this.SERVER + this[k];
}
}
?前端src下面的router下面的index.js文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-445555.html
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
}
]
})
前端頁(yè)面：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-445555.html
<template>
<div>
<!-- <h1 align="center">SpringBoot階段機(jī)試，ts={{ts}}</h1> -->
<!-- 1.搜索欄 -->
<el-form :inline="true">
<el-form-item label="書(shū)本名稱">
<el-input v-model="bookname" placeholder="書(shū)本名稱"></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.數(shù)據(jù)表格 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="書(shū)本編號(hào)" width="180">
</el-table-column>
<el-table-column prop="bookname" label="書(shū)本名稱" width="180">
</el-table-column>
<el-table-column prop="price" label="書(shū)本價(jià)格">
</el-table-column>
<el-table-column prop="booktype" label="書(shū)本類(lèi)型">
</el-table-column>
</el-table>
<!-- 3.彈出框 -->
<el-dialog title="新增" :visible.sync="dialogFormVisible" @close="close">
<el-form :model="book" :rules="rules" ref="book">
<el-form-item prop="bookname" label="書(shū)本名稱" label-width="90px">
<el-input v-model="book.bookname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="price" label="書(shū)本價(jià)格" label-width="90px">
<el-input v-model="book.price" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="booktype" label="書(shū)本類(lèi)型" label-width="90px">
<el-select style="width:100%;" v-model="book.booktype" placeholder="請(qǐng)選擇書(shū)本類(lèi)型">
<el-option label="玄幻" value="玄幻"></el-option>
<el-option label="文學(xué)" value="文學(xué)"></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="save">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data: function() {
return {
ts: new Date().getTime(),
bookname: '',
tableData: [],
dialogFormVisible: false,
book: {
bookname: '',
price: '',
booktype: ''
},
rules: {
bookname: [{
required: true,
message: '請(qǐng)輸入書(shū)本名稱',
trigger: 'blur'
}, ],
price: [{
required: true,
message: '請(qǐng)輸入書(shū)本價(jià)格',
trigger: 'blur'
}, ],
booktype: [{
required: true,
message: '請(qǐng)選擇書(shū)本類(lèi)型',
trigger: 'change'
}, ]
}
};
},
methods: {
close:function(){
//清空表單數(shù)據(jù)
this.book={
bookname: '',
price: '',
booktype: ''
};
//清空表單驗(yàn)證
this.$refs['book'].resetFields();
},
save: function() {
this.$refs['book'].validate((valid) => {
if (valid) {
let url=this.axios.urls.ADD;
this.axios.post(url,this.book).then(resp => {
let data = resp.data; //data --> date XXXXXX
// {code:200,msg:'OK',data:[....]}
if(data.code==200){
//關(guān)閉彈出框
this.dialogFormVisible=false;
//再次查詢列表方法
this.query();
}else{
this.$message.error('新增失??！');
}
}).catch(err => {
})
} else {
console.log('error submit!!');
return false;
}
});
},
query: function() {
//1.定義查詢參數(shù)
let params = {
bookname: this.bookname
};
//2.獲取請(qǐng)求路徑
let url = this.axios.urls.ALL;
//3.發(fā)起ajax請(qǐng)求
this.axios.post(url, params).then(resp => {
let data = resp.data; //data --> date XXXXXX
// {code:200,msg:'OK',data:[....]}
console.log(data);
this.tableData = data.data;
}).catch(err => {
})
},
open: function() {
this.dialogFormVisible = true;
}
}
}
</script>
<style>
</style>
?以上就是今天的分享！?。?/h2>
剛好有大學(xué)生找我?guī)兔?xiě)這個(gè)項(xiàng)目，我想可以與大家分享一下代碼，有其他同行需要代碼的也可以找我。感謝支持！
到了這里，關(guān)于Springboot快速開(kāi)發(fā)-書(shū)本信息管理系統(tǒng)（項(xiàng)目源碼）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
