注意事項
? ? ? ? ? 1. 你的后臺的controller 一定是@RestController
? ?跨域問題：
1.項目使用的是axios請求網(wǎng)絡,將baseUrl修改為/api (這里是使用webpack提供的代理功能將/api代理成目標接口host)
axios.defaults.baseURL = '/api';
2.進入config/index.js里,在dev下增加proxyTable配置,可以匹配到/api,將其代理成目標接口host
dev: {
? ? // PathsassetsSubDirectory: 'static',
? ? assetsPublicPath: '/',//////////////////////////////////////////////////////////////? ? proxyTable: {
? ? ? '/api': {
? ? ? ? target: 'http://192.168.1.111:8080/',//目標接口域名changeOrigin:true,//是否跨域? ? ? ? pathRewrite: {? // 加上這個重寫配置后跨域問題就解決了
? ? ? ? ? '^/api': ''//重寫接口,后面可以使用重寫的新路徑，一般不做更改? ? ? ? }}? ? }//////////////////////////////////////////////////////////////}
此時已經(jīng)解決了dev下的跨域問題
3.進入package.json,在dev字段下增加 " --host 0.0.0.0 ",這樣就可以真機通過ip地址訪問項目,進行調(diào)試
"scripts": {
? ? "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
? ? "start": "npm run dev",
? ? "build": "node build/build.js"? }
1、前端vue的搭建
建立項目的過程略
開啟一個建立好的vue項目用npm run dev
關(guān)閉一個vue項目可在終端操作:ctrl+c
需要注意的幾點
1塔次、在建立項目的時候轧铁、可以選擇路由選項警绩。后續(xù)就不需要再次安裝路由已慢。
2、安裝axiosnpm install --save axios vue-axios
? ? ??axios 這個就是實現(xiàn)前后端分離的重要對象
前端項目結(jié)構(gòu)樣式
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/>'
})
app.vue
在這里可以定義跳轉(zhuǎn)到其他頁面的連接
<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>
配置的路由
在這里配置各個頁面跳轉(zhuǎn)的路由
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
（每個組件之間都可以和后臺數(shù)據(jù)交互通過axios）
提示： const _this =this變量的設置，否則會和回調(diào)函數(shù)搞混
這里和后臺進行連接是通過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藐不、后端項目的構(gòu)建
首先構(gòu)建項目
目錄結(jié)構(gòu)這個樣子
pom文件中引入的jar包
我目前只用到mysql，shiro用來做后續(xù)的權(quán)限安全驗證
<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：連接數(shù)據(jù)庫
? ? ? -->
? ? ? ? <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文件用來配置連接數(shù)據(jù)庫和端口的設置
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 數(shù)據(jù)源專有配置
? ? 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層（這里返回給前端的數(shù)據(jù)用json）
這里使用RestController返回的就是return的內(nèi)容
知識點：@RestController注解相當于@ResponseBody ＋ @Controller合在一起的作用雏蛮。
如果需要返回JSON，XML或自定義mediaType內(nèi)容到頁面阱州，則需要在對應的方法上加上@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("*");
? ? }
}
遇到的問題：
在測試從數(shù)據(jù)庫取數(shù)據(jù)的時候，那個測試類出了問題夜惭。根本原因是spring boot的啟動類沒有放在根目錄姻灶。
3、測試
第一步诈茧、1产喉、開啟后端服務
第二步、開啟前端服務
看頁面效果
點擊book
這個是從后端請求來的數(shù)據(jù)。沒做樣式曾沈、簡單打通尘颓、可以使用elementui讓頁面更加美觀。
