小白自己做网站,快速建站哪个平台好,长沙哪里优化网站,天津百度网站快速优化目录
1、前端vue的搭建
2、后端项目的构建
pom文件中引入的jar包
yml文件用来配置连接数据库和端口的设置
application.property进行一些整合
service层
imp层
mapper
实体类
额外写一个类、解决跨域问题
3、测试
1、前端vue的搭建 建立项目的过程略 开启一个建立好…目录
1、前端vue的搭建
2、后端项目的构建
pom文件中引入的jar包
yml文件用来配置连接数据库和端口的设置
application.property进行一些整合
service层
imp层
mapper
实体类
额外写一个类、解决跨域问题
3、测试
1、前端vue的搭建 建立项目的过程略 开启一个建立好的vue项目用npm run dev 关闭一个vue项目可在终端操作:ctrlc需要注意的几点 1、在建立项目的时候、可以选择路由选项。后续就不需要再次安装路由。 2、安装axios npm 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 ./routerVue.config.productionTip false/* eslint-disable no-new */
new Vue({el: #app,router,components: { App },template: App/
})
Vue.js 在这里可以定义跳转到其他页面的连接
templatediv idapprouter-link to/userbook/router-linkrouter-view//div
/templatescript
export default {name: App
}
/scriptstyle
#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-routerimport UserList from ../components/UserList
import Home from ../components/HomeVue.use(Router)export default new Router({routes: [{path:/user,component:UserList},{path:/,component:Home}]
})
组件1、
templatediv这里是首页/div
/templatescriptexport default {name: Home}
/scriptstyle scoped/style
组件2 每个组件之间都可以和后台数据交互通过axios 提示 const _this this变量的设置否则会和回调函数搞混这里和后台进行连接是通过url。这里的url是访问某一个接口的url,就相当于和某个方法进行打通
templatedivtable class_tabletr class_trtd姓名/tdtd年龄/tdtd邮箱/td/trtr v-foritem in books td{{item.bookAuthor}}/tdtd{{item.bookName}}/tdtd{{item.price}}/td/tr/table/div
/templatescriptexport default {name: UserList,data(){return{books:[{bookName:java,bookAuthor:小黑,price:33}]}},created() {const _this thisaxios.get(http://localhost:8181/book/findAll).then(function(resp){_this.booksresp.data})}}
/scriptstyle scoped
table,td{border: 1px solid silver;
}/style
2、后端项目的构建
首先构建项目 目录结构这个样子 pom文件中引入的jar包
我目前只用到mysqlshiro用来做后续的权限安全验证
dependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependency!--整合shirosubject:用户security manager管理所有的用户realm连接数据库--dependencygroupIdorg.apache.shiro/groupIdartifactIdshiro-spring/artifactIdversion1.4.1/version/dependencydependencygroupIdcom.github.theborakompanioni/groupIdartifactIdthymeleaf-extras-shiro/artifactIdversion2.0.0/version/dependency!--整合mybatis--!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter --dependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion2.1.0/version/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependency!-- JDBC--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-jdbc/artifactId/dependency!-- Mysql--dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdscoperuntime/scope/dependencydependencygroupIdcom.alibaba/groupIdartifactIddruid/artifactIdversion1.1.6/version/dependency/dependenciesyml文件用来配置连接数据库和端口的设置
spring:datasource:username: rootpassword: rooturl: jdbc:mysql://localhost:3306/ssmbuild?allowMultiQueriestruecharacterEncodingUTF-8characterSetResultsUTF-8zeroDateTimeBehaviorconvertToNulluseSSLfalsedriver-class-name: com.mysql.cj.jdbc.Drivertype: com.alibaba.druid.pool.DruidDataSource#spring boot 默认是不注入这些属性的需要自己绑定#druid 数据源专有配置initiaSize: 5minIdle: 5maxActive: 20maxWait: 60000timeBetweenEvictionRunsmMillis: 60000minEvictableIdleTimeMillis: 300000validationQuery: SELECT 1 FROM DUALtestWhileIdle: truetestOnBorrow: falsetestOnReturn: falsepoolPreparedStatements: truefilters: stat,wall,log4jmaxPoolPrepareStatementPerConnectionSize: 20useGlobalDataSourceStat: trueconnectionProperties: druid.stat.mergeSqltrue;druid.stat.slowSqlMillis500server:port: 8181
application.property进行一些整合 spring.aop.autotrue#整合mybatis
mybatis.type-aliases-packagecom.zheng.pojo
mybatis.mapper-locationsclasspath:mybatis/mapper/*.xml
controller层这里返回给前端的数据用json 这里使用RestController返回的就是return的内容 知识点RestController注解相当于ResponseBody Controller合在一起的作用。如果需要返回JSONXML或自定义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 {AutowiredBookService bookService;//查询所有的书籍信息GetMapping(/findAll)public ListBooks findAll() {return bookService.queryBookList();}}
service层
package com.zheng.service;import com.zheng.pojo.Books;import java.util.List;public interface BookService {/*** 查询图书*/public ListBooks 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 {AutowiredBooksMapper booksMapper;//查询书籍Overridepublic ListBooks 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 ListBooks queryBookList();}
mapper
、这个位置 ?xml version1.0 encodingUTF8?
!DOCTYPE mapperPUBLIC -//mybatis.org//DTD Config 3.0//ENhttp://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.zheng.mapper.BooksMapperselect idqueryBookList resultTypecom.zheng.pojo.Booksselect * 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让页面更加美观。
