文章目錄
- 1、前端vue的搭建
- 2、后端專案的構建
- pom檔案中引入的jar包
- yml檔案用來配置連接資料庫和埠的設定
- application.property進行一些整合
- controller層（這里回傳給前端的資料用json）
- service層
- imp層
- mapper
- 物體類
- 額外寫一個類、解決跨域問題
- 3、測驗
1、前端vue的搭建
建立專案的程序略
開啟一個建立好的vue專案用npm run dev
關閉一個vue專案可在終端操作:ctrl+c
需要注意的幾點
1、在建立專案的時候、可以選擇路由選項，后續就不需要再次安裝路由，
2、安裝axiosnpm install --save axios vue-axios
前端專案結構樣式
main.js、這個是整個專案的入口、要使用的在這里引入
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import './plugins/axios'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Vue.js
在這里可以定義跳轉到其他頁面的連接
<template>
<div id="app">
<router-link to="/user">book</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
配置的路由
在這里配置各個頁面跳轉的路由
import Vue from 'vue'
import Router from 'vue-router'
import UserList from '../components/UserList'
import Home from '../components/Home'
Vue.use(Router)
export default new Router({
routes: [
{
path:'/user',
component:UserList
},
{
path:'/',
component:Home
}
]
})
組件1、
<template>
<div>
這里是首頁
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped>
</style>
組件2
（每個組件之間都可以和后臺資料互動通過axios）
提示：const _this =this變數的設定，否則會和回呼函式搞混
這里和后臺進行連接是通過url，這里的url是訪問某一個介面的url,就相當于和某個方法進行打通
<template>
<div>
<table class="_table">
<tr class="_tr">
<td>姓名</td>
<td>年齡</td>
<td>郵箱</td>
</tr>
<tr v-for="item in books ">
<td>{{item.bookAuthor}}</td>
<td>{{item.bookName}}</td>
<td>{{item.price}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "UserList",
data(){
return{
books:[
{
bookName:'java',
bookAuthor:'小黑',
price:'33'
}
]
}
},
created() {
const _this =this
axios.get('http://localhost:8181/book/findAll').then(function(resp){
_this.books=resp.data
})
}
}
</script>
<style scoped>
table,td{
border: 1px solid silver;
}
</style>
2、后端專案的構建
首先構建專案
目錄結構這個樣子
pom檔案中引入的jar包
我目前只用到mysql，shiro用來做后續的權限安全驗證
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--整合shiro
subject:用戶
security manager：管理所有的用戶
realm：連接資料庫
-->
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-spring</artifactId>
<version>1.4.1</version>
</dependency>
<dependency>
<groupId>com.github.theborakompanioni</groupId>
<artifactId>thymeleaf-extras-shiro</artifactId>
<version>2.0.0</version>
</dependency>
<!--整合mybatis-->
<!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.0</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- JDBC-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!-- Mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.6</version>
</dependency>
</dependencies>
yml檔案用來配置連接資料庫和埠的設定
spring:
datasource:
username: root
password: root
url: jdbc:mysql://localhost:3306/ssmbuild?allowMultiQueries=true&characterEncoding=UTF-8&characterSetResults=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false
driver-class-name: com.mysql.cj.jdbc.Driver
type: com.alibaba.druid.pool.DruidDataSource
#spring boot 默認是不注入這些屬性的，需要自己系結
#druid 資料源專有配置
initiaSize: 5
minIdle: 5
maxActive: 20
maxWait: 60000
timeBetweenEvictionRunsmMillis: 60000
minEvictableIdleTimeMillis: 300000
validationQuery: SELECT 1 FROM DUAL
testWhileIdle: true
testOnBorrow: false
testOnReturn: false
poolPreparedStatements: true
filters: stat,wall,log4j
maxPoolPrepareStatementPerConnectionSize: 20
useGlobalDataSourceStat: true
connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500
server:
port: 8181
application.property進行一些整合
spring.aop.auto=true
#整合mybatis
mybatis.type-aliases-package=com.zheng.pojo
mybatis.mapper-locations=classpath:mybatis/mapper/*.xml
controller層（這里回傳給前端的資料用json）
這里使用RestController回傳的就是return的內容
- 知識點：@RestController注解相當于@ResponseBody ＋ @Controller合在一起的作用，
如果需要回傳JSON，XML或自定義mediaType內容到頁面，則需要在對應的方法上加上@ResponseBody注解，
package com.zheng.controller;
import com.zheng.pojo.Books;
import com.zheng.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("/book")
public class BooksController {
@Autowired
BookService bookService;
//查詢所有的書籍資訊
@GetMapping("/findAll")
public List<Books> findAll() {
return bookService.queryBookList();
}
}
service層
package com.zheng.service;
import com.zheng.pojo.Books;
import java.util.List;
public interface BookService {
/**
* 查詢圖書
*/
public List<Books> queryBookList();
}
imp層
package com.zheng.service.serviceImpl;
import com.zheng.mapper.BooksMapper;
import com.zheng.pojo.Books;
import com.zheng.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
BooksMapper booksMapper;
//查詢書籍
@Override
public List<Books> queryBookList() {
return booksMapper.queryBookList() ;
}
}
dao層
package com.zheng.mapper;
import com.zheng.pojo.Books;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.List;
@Mapper //這個注解表示這個是mybatis的mapeper
@Repository
public interface BooksMapper {
/**
* 查詢圖書
*/
public List<Books> queryBookList();
}
mapper
、這個位置
<?xml version="1.0" encoding="UTF8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zheng.mapper.BooksMapper">
<select id="queryBookList" resultType="com.zheng.pojo.Books">
select * from bookss
</select>
</mapper>
物體類
可以使用Lombok、我不喜歡使用
package com.zheng.pojo;
public class Books {
private String bookId;
private String bookName;
private String bookAuthor;
private Double price;
private String address;
private String impression;
private String introduce;
public Books(String bookId, String bookName, String bookAuthor, Double price, String address, String impression, String introduce) {
this.bookId = bookId;
this.bookName = bookName;
this.bookAuthor = bookAuthor;
this.price = price;
this.address = address;
this.impression = impression;
this.introduce = introduce;
}
public Double getPrice() {
return price;
}
public void setPrice(Double price) {
this.price = price;
}
public Books() { }
public String getBookId() {
return bookId;
}
public void setBookId(String bookId) {
this.bookId = bookId;
}
public String getBookName() {
return bookName;
}
public void setBookName(String bookName) {
this.bookName = bookName;
}
public String getBookAuthor() {
return bookAuthor;
}
public void setBookAuthor(String bookAuthor) {
this.bookAuthor = bookAuthor;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getImpression() {
return impression;
}
public void setImpression(String impression) {
this.impression = impression;
}
public String getIntroduce() {
return introduce;
}
public void setIntroduce(String introduce) {
this.introduce = introduce;
}
}
額外寫一個類、解決跨域問題
package com.zheng.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CrosConfig implements WebMvcConfigurer {
public void addCorsMappings(CorsRegistry registry){
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
遇到的問題：
在測驗從資料庫取資料的時候，那個測驗類出了問題，根本原因是spring boot的啟動類沒有放在根目錄，
3、測驗
第一步、1、開啟后端服務
第二步、開啟前端服務
看頁面效果
點擊book
這個是從后端請求來的資料，沒做樣式、簡單打通、可以使用elementui讓頁面更加美觀，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/390378.html
標籤：其他
上一篇：IE兼容/IE5兼容踩過的坑